WEB APP HTTP Protocol

[daddytims_tims]

Hi Steve,

I'm looking for some advice on creating a Web Developer app. I'm basically trying to send data from my hardware to the web and view it on a phone.
Using the ""HTTP PROTOCOL""
Any advice to get me started?

My Embedded Project I am working on Is, I added (2) hx711 in my Program. "Running in the Main Loop".
I want it to update the Guage's using the HTTP Protocol. IN MY WEB APP

I only created a Template of (2) Gauges in the Web App Only,
I will Need assistance along the way, while I work my way Through with it.

PLEASE AND THANK YOU

Ryan

[Steve-Matrix]

Hi Ryan,

Your best place to start is the "HTTP Comms Worked Example - Web Developer" in our Sample Projects page.

Your embedded device would need to become a webserver and you would need to periodically call CheckSocketActivity in the main loop. Your main loop can also read the sensors and make their values available as global variables. Then in the HtmlCallback macro you can report these sensor values back to any web app that requests them.

Your Web Developer app will need to be running in a browser that is on the same network as your embedded device.

The worked example is quite detailed and once you understand it you should be able to integrate it into your existing project. I would suggest starting slow rather than trying to add all functionality from the start.

If you need a situation where your hardware and the user's browser cannot be on the same network, then you will need to consider an alternative. For example, you could write your own web-based API to accept incoming data from a web client on your hardware and data requests from a web browser. Something like this is discussed in the wiki here:
https://www.flowcode.co.uk/wiki/index.p ... an_API_URL

In this scenario, your embedded device would need code to contact the web-based API to send it data. You Web Developer app would also need to contact this web-based API to request the data.

Using MQTT is another possibility. Again, both Embedded and Web Developer apps will need to contact the same central website (where the MQTT server/broker is located).

[daddytims_tims]

Hi Steve,

Thanks, a lot for that information. I will update you on my progress.


Hi again,
Has it related to the Ranges "0,1,2,3" on the Guage is it possible to add another Range??
In the web app above, am currently using those 3 RANGES for a specific purpose. I would like to Fill that area using it as an indicator for something else in the same Program. THANKS AGAIN.

IF THATS POSSIBLE.

Ryan

[daddytims_tims]

Hi Steve

I did what you told me and am getting the values on the Guage now
Thanks, a lot.

There's something else that I want to do, but I haven't figured it out as yet.

I want the actual value "number" to be displayed in the App Below the Guage as well.
How do I do that?


Regards

[Steve-Matrix]

You could add a separate text label and set its text at the same time you set the value of the gauge.

[daddytims_tims]

hi Steve

I still haven't got the number to be Display inside the Web App

I did what you told me. It is showing undefine. Probably I miss something


I attached the Web example.

I also attached the Image of what I have in my embedded project. The calculation


what am I doing wrong?
regards

[Steve-Matrix]

Your Fetch component is set to call the "SetGaugeValue" when a response comes back from your device. This has a single value as a parameter called .Data by default. You just need to pass this .Data value to the text label, and you need to do this in the macro that is being called when Fetch returns (i.e. the SetGaugeValue macro).

What is problematic is the Gauge SetValue takes a float value as a parameter and the Label SetText takes a string. So you will need to do a little conversion.

The attached should hopefully work. As well as doing the above, I have also removed the unused extra parameter and the unused macro.

[daddytims_tims]

Hi Steve,

Thanks, a lot for your "HELP" really appreciate it.

My app is "NOW" working as "EXPECTED"

regards

[daddytims_tims]

Hi Steve,

I am planning on upgrading my existing project from 2 GUAGES TO 6 GUAGES. that will require 6 buttons inside the web app
which it would be More effective if "1 BUTTON UPDATE ALL". Its (1) Esp32 with 6 sensors giving their separate readings.

I got the 2 gauges working with 2 buttons on the 26 October as Excepted.

2 button 2 guages.jpg (20.07 KiB) Viewed 2796 times

In that same week I had been playing around with "1 BUTTON TO UPDATE 2 GUAGE" trying to see if I could get it to work that way, seems as if it can't. Though my projects is working fine. I had to test out the product first before marketing it

So, 2 nights ago, I had a go at it again. trying to get it to work that way. When 1 Guage working the other Stop. Or the 2 of them update the 1 figure.
Seems as if it's not possible base on how I see it from my side.

So, I was wondering if it's even possible to have a 1 button update ALL GUAGES?

Regards
Ryan

[Steve-Matrix]

It's definitely possible and you have a few choices. You could have one button that does a single fetch and that fetch returns with a set of data for all gauges. This will need the embedded app to be changed so it replies with appropriate data. Or your single button could send out multiple fetches that each are processed separately.