Add sensor or other dynamic data to HTML or stream

[jasza2]

I intend to use this as a general user interface for other sensors e.g. door open/close sensor, temperature, distance etc. I would like to display this information to the user alongside (or over) the video stream.

I can modify the HTML directly with static information that appears at the top under the buttons but how do I make this dynamic sensor information?

I also tried inserting it onto the image like on line 225 of app_httpd.cpp but it had no effect.
rgb_printf(image_matrix, FACE_COLOR_CYAN, "ID[%u] Sample[%u]", this_face, ENROLL_CONFIRM_TIMES - left_sample_face);

Either of these two methods would work for me, some pointers as to how to modify the code would be great thanks!!!

[easytarget]

This sort of duplicates #86, and I wont be looking at that until I pick up on v4.0. Which is unlikely to happen until the sailing season ends.

For adding data to the stream:

Earlier in the year I actually tried to add a date/time stamp myself using rgb_printf() too, but had no (quick) luck and gave up. I can't remember the precise details, but the basic issue was that this function draws on the image matrix, not the framebuffer. And we only generate the image matrix during face recoignition processing. Or something like that.

• My conclusion was that this was quite possible but would require research on how to draw on the framebuffer directly. I expect there are libraries that can do that, either built-in or via the community.
• My plan is to re-vist this if/when implementing multi-client streaming.

Data in the HTML page:

I wont be doing anything like this; the page already displays all the info I think it needs. The Status sub page already gives extra info and has a once-per-minute refresh.

My position is that any 'dynamic' info such as temperature, date/time, etc should be done in a stream overlay as discussed above.

• That said, if you want to do this for yourself, go ahead ;-)
• Adding simple static data to the HTML is relatively trivial by extending the existing JSON 'settings' mechanism. Adding a page refresh would then update that on a simple (say once per minute) basis.
• Adding dynamic data to the html is rather more convoluted, you would need a new request loop and URI updating a element in the page, and a corresponding handler for the URI in the ESP32 app. The existing status request/update mechanism provides a template for both sides of this.

[jasza2]

Kitesurfing season has just ended, I have some time on my hands so I might give it a bash.

The ability to change sensors settings and display values using HTML is essential. all of my ESP32 projects are controlled by an HTML page and I see you are doing similar with the PWM of the LED light.

maybe a placeholder in the HTML that will automatically insert any HTML if finds by calling a customisable function?

[hansju-11]

see pull request #240 . This can be a fast solution. Not to include the data in the picture, just put it in the webpage above and safe resources for rendering a new picture.

see https://circuits4you.com/2018/11/20/web-server-on-esp32-how-to-update-and-display-sensor-values/ for more details

[hansju-11]

new PR #241. I did some cleanup to make the solution better.

[easytarget]

As just noted in the PR, looks great, and I've got a unused BME280 at home so I'd like to test this out once LaserWeb gives me a breather.

[prothej227]

new PR #241. I did some cleanup to make the solution better.

Hi, I'm working on a project which can forward serial feed from a GPS module to a different address in port 80. Example: xxx.xxx.xxx.xxx/viewGPSFeed. Is this possible for ESP32CAM?

[hansju-11]

Hello prothej227,
have a look into app_httpd.cpp. In the function startCameraServer(...) you can find different "entry points" and the accociated handler. So if you need "viewGPSFeed" you can just add it here. I did the some for the sensor data.

#if defined(HAS_BME280)
httpd_uri_t readSensor_uri = {
.uri = "/readSensor",
.method = HTTP_GET,
.handler = readSensor_handler,
.user_ctx = NULL
};
#endif

But the reload of the value is done "in line" without reloading the hole page. I use ajax for that, see 'const uint8_t index_simple_sensor_html[]' .... in 'index_other.h' here the 'function getData() { ...'

kind regards hansju

[prothej227]

Hello prothej227, have a look into app_httpd.cpp. In the function startCameraServer(...) you can find different "entry points" and the accociated handler. So if you need "viewGPSFeed" you can just add it here. I did the some for the sensor data.

#if defined(HAS_BME280) httpd_uri_t readSensor_uri = { .uri = "/readSensor", .method = HTTP_GET, .handler = readSensor_handler, .user_ctx = NULL }; #endif

But the reload of the value is done "in line" without reloading the hole page. I use ajax for that, see 'const uint8_t index_simple_sensor_html[]' .... in 'index_other.h' here the 'function getData() { ...'

kind regards hansju

Thank you for spending time in replying my concern. I really appreciate your efforts bro. The problem is I'm very new to this domain, and I find it difficult to capture the serial feed from ESP32's GPIOs and display it to the server. I'm quite confused on where to declare the function (is it within the scope of .ino or in the cpp) that will perform the reading of the GPS feed. I understand that this handler you mentioned will point to my viewGPSFeed function which I find it difficult to initiate. Can you give me a sample code that will read the serial data from Pin 12 and 13 and display it in route /viewGPSFeed without compromising the proceses related to the Camera and the WiFi capability of the device?

[easytarget]

I am leaving this issue open for reference; although I am archiving the project
I will be looking at the PR associated with this later as I wrap up the project; so I can reference it as needed in the closeup docs.