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.