HTML for Espressif ESP32 Web Server: how to output and input variables values?

cirobruno
3 Posts
cirobruno posted this 15 August 2021
Ask a Question

Hi, everybody.

I'm building a Web site with Nicepage to be hosted at an ESP32, working as Web server. It's impressive how easy my experience has been so far, despite my very poor knowledge of HTML and related languages. In a few hours a very nice site was already hosted and released for visiting. I'm confident I'll be able to use Nicepage for every new project for microcontrolers.

I'm looking for further solutions for the my project's demands. I hope I can find them in Nicepage as well. They are:
1) Outputing the values of a variable in real time by printing them on the page. For example, showing the values of ambient temperature or atmospheric pressure in text boxes. I'm trying to use placeholders where the values should appear (%TEMP%) and giving them an id (<span id>%TEMP%</span>) for further poking it from ESP program with
server.on("/Monitor", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(valueTemp,1).c_str()); });
Does it look ok?
2) Filling cells in a table on the screen with values caught from a frequently updated matrix (once every minute) in ESP32. For example, hourly records of pressure and temperature. A scroll bar would be very usefull. (btw, what's the difference between a table as a block and a table as an element?)
3) How attribute to a variable in ESP32 values input from a form? For example, when the user fiils in how often the measurements should be acquired.
4) How to provide the user with access to select and download any file within a drive folder? Every day, a couple of new files are automatically added to this same folder and they must become available for downloading. For example, when the customer wants to download a records file saved last Wednesday.

I'm aware it's very much for a beginner, but I've got to deliver this solution as fast as possible.

Thank you all.
Regards, Ciro.

Hi, everybody. I'm building a Web site with Nicepage to be hosted at an ESP32, working as Web server. It's impressive how easy my experience has been so far, despite my very poor knowledge of HTML and related languages. In a few hours a very nice site was already hosted and released for visiting. I'm confident I'll be able to use Nicepage for every new project for microcontrolers. I'm looking for further solutions for the my project's demands. I hope I can find them in Nicepage as well. They are: 1) Outputing the values of a variable in real time by printing them on the page. For example, showing the values of ambient temperature or atmospheric pressure in text boxes. I'm trying to use placeholders where the values should appear (%TEMP%) and giving them an id (&lt;span id&gt;%TEMP%&lt;/span&gt;) for further poking it from ESP program with server.on("/Monitor", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/plain", String(valueTemp,1).c_str()); }); Does it look ok? 2) Filling cells in a table on the screen with values caught from a frequently updated matrix (once every minute) in ESP32. For example, hourly records of pressure and temperature. A scroll bar would be very usefull. (btw, what's the difference between a table as a block and a table as an element?) 3) How attribute to a variable in ESP32 values input from a form? For example, when the user fiils in how often the measurements should be acquired. 4) How to provide the user with access to select and download any file within a drive folder? Every day, a couple of new files are automatically added to this same folder and they must become available for downloading. For example, when the customer wants to download a records file saved last Wednesday. I'm aware it's very much for a beginner, but I've got to deliver this solution as fast as possible. Thank you all. Regards, Ciro.

Last edited 15 August 2021 by cirobruno

Vote to pay developers attention to this features or issue.
4 Replies
Order By: Standard | Newest
cirobruno
3 Posts
cirobruno posted this 15 August 2021

REMARK
For some reason I can't edit a detail above.
Please, instead of "( < s p a n i d> % TEMP % < s p a n>)",
consider "( < s p a n i d> % TEMP % < s p a n>)".
I guess without all these blank spaces it won't be properly displayed.

REMARK For some reason I can't edit a detail above. Please, instead of "( &lt; s p a n i d&gt; % TEMP % &lt; s p a n&gt;)", consider "( &lt; s p a n i d&gt; % TEMP % &lt; s p a n&gt;)". I guess without all these blank spaces it won't be properly displayed.
Support Team
Support Team posted this 16 August 2021

Hi,

In general. all your questions are not related to Nicepage. Nicepage exports standard static HTML pages. Therefore, the solution for Nicepage should be the same. But Nicepage editor provides an HTML element where you can add any required custom HTML (placeholder?) if needed. Unfortunately, Nicepage does not provide the option to edit the Form HTML output directly in the editor. But this is the standard HTML form that you can edit manually after exporting and add required elements.
Please let us know if you have any further questions.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, In general. all your questions are not related to Nicepage. Nicepage exports standard static HTML pages. Therefore, the solution for Nicepage should be the same. But Nicepage editor provides an HTML element where you can add any required custom HTML (placeholder?) if needed. Unfortunately, Nicepage does not provide the option to edit the Form HTML output directly in the editor. But this is the standard HTML form that you can edit manually after exporting and add required elements. Please let us know if you have any further questions. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
cirobruno
3 Posts
cirobruno posted this 25 August 2021

Thank you, Olivia.

I guess I've already got a solution through those placeholders I've been mentioning. I'm going to test its feasibility when handling the 126 values in real time. But I guess it's going to work.

Please let me share two other demands in my project.

First, these pages are supposed to run in a microcontroller with limited storage space. I've been looking at the exported files sizes and I saw that "nicepage.css" is the biggest file. It occupies 1,1 Mb of the total 1,4 Mb used storage space. Is there somehow to reduce "nicepage.css" file size? Is it that big because I've been applying to many different styles in my pages, or are there unused styles?

The second demand regards the need of "id" property in text fields. "id" is probably the easiest and fastest way to access a text from the microcontroller. Would it be possible to implement the possibility of giving an "id" to text fields? My suggestion is to do something like the Hiperlink property, in the right side configuration bar, so that I can apply manually an id for every text field I'd like to access.

Thank you.
Regards, Ciro.

Thank you, Olivia. I guess I've already got a solution through those placeholders I've been mentioning. I'm going to test its feasibility when handling the 126 values in real time. But I guess it's going to work. Please let me share two other demands in my project. First, these pages are supposed to run in a microcontroller with limited storage space. I've been looking at the exported files sizes and I saw that "nicepage.css" is the biggest file. It occupies 1,1 Mb of the total 1,4 Mb used storage space. Is there somehow to reduce "nicepage.css" file size? Is it that big because I've been applying to many different styles in my pages, or are there unused styles? The second demand regards the need of "id" property in text fields. "id" is probably the easiest and fastest way to access a text from the microcontroller. Would it be possible to implement the possibility of giving an "id" to text fields? My suggestion is to do something like the Hiperlink property, in the right side configuration bar, so that I can apply manually an id for every text field I'd like to access. Thank you. Regards, Ciro.

Last edited 25 August 2021 by cirobruno

Support Team
Support Team posted this 26 August 2021

Hi,

  1. The CSS file includes a lot of styles and some of them may be not used, you can use minifying tools for the exported files to reduce the size.
  2. We will consider this option, for now you can add a unique Name for each input in the form, that may be used as the id for the element.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, 1. The CSS file includes a lot of styles and some of them may be not used, you can use minifying tools for the exported files to reduce the size. 2. We will consider this option, for now you can add a unique Name for each input in the form, that may be used as the id for the element. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
You must log in or register to leave comments