How variable values are embedded within the html text?

Your new topic does not fit any of the above??? Check first. Then post here. Thanks.

Moderator: igrr

 Reply

User avatar

Re: How variable values are embedded within the html text?

By rudy
- Wed Feb 20, 2019 11:50 pm #80684 This is a somewhat cleaned up version. I removed some temperature sensor stuff so no additional hardware or libraries are needed to run. I also got rid of some parallel control code using UDP. Even so, what is left will be confusing because of the time and eeprom stuff.

It is html5 with some javascript. JSON is used but I am not using a library.

form.png


example1.zip


This loads the page with some default values in the form. The form is updated with the data that is currently in eeprom. If the form is changed the submit button is enabled, and when pressed it passes the arguments back to the ESP8266. They are then saved to eeprom.

Initially the values in eeprom will be messed up, but gets fixed with a first save. Hey, it was just for me.

http://192.168.100.109/ (your IP) will give a few links.
Set Relay On Off times is a link to a page on this website.
Show Relay State is a link to a page on this website.
Set Relay Name
Update firmware.

/relayName should be run, then /relayTimes to initialize the eeprom.
There are some diagnostic info available through the serial terminal. Options are listed in the Serial1.h file.

/relayName displays the content, but when the form is submitted I handle it with /saveTimes which reloads the page. I was using the /saveTimes before I figured out how to do the page update in /relayName. It should just stay on /relayName after the save. Something I have yet to do.

/relayName should also have loaded the contents of eeprom but I never got around to it. I only use it once so it wasn't important too me.
You do not have the required permissions to view the files attached to this post.
User avatar

Re: How variable values are embedded within the html text?

By quackmore
- Thu Feb 21, 2019 2:02 am #80689 AJAX is my favorite

rudy example shows a clean and efficient architecture putting everything where it belongs

and if you want to save some code and file space
you can load jQuery Ajax methods directly from CDNs
embedding a snippet into your html page, something like this

Code: Select all<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


checkout the available CDNs at https://jquery.com/download/
User avatar

Re: How variable values are embedded within the html text?

By FRANCISCOGIMENO1000
- Thu Feb 21, 2019 8:40 am #80694 Thanks for the help.

I have been testing the substitution method But it does not work well at all.
basically I created a website:

Code: Select all
Replacement variables-----------------------------------------------------------
String webVAR1;
String webVAR2;
String webVAR3;
String webVAR4;
String webVAR5;
String webVAR6;
String webVAR7;
String webVAR8;
String webVAR9;
String webVAR10;
String webVAR11;

WEB BODY------------------This incomplete is just to show how I treat the variables-------------------
String web70 = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD H................................
String web71 = " name=\"R1\" style=\"height:20px;width:20px;\" t.............
String web72 = " name=\"R1\" style=\"height:20px;widtL BOTON DE &quot;TEXT&quot; DE.......
String web73 = " name=\"R1\" style=\"height:20px;\n      width:20px;\" type=\.........
String web74 = " name=\"R2\" style=\"height:20px;width:20px;\" type=\"radio\" ..........
String web75 = " name=\"R2\" style=\"height:20px;width:20px;\" type=\"radio\" value=\"2\" />TEXT&nbsp;X TEST&nbsp;(TEXT)&nbsp;</span></span></p>\n\n    <p>.......
String web76 = " /></span></p>\n\n    <p>&nbsp;</p>\n\n    <hr />\n    <p>n style=\"font-siz.......
String web77 = " />&nbsp;&nbsp;</span></p>\n\n    <p><span style=\"font-size:12px;\">...............
String web78 = " /><span style=\"font-size:12px;\"><span style=\".................
String web79 = " />&nbsp;</span></p>\n\n    <p><span style=\"font-size............
String web710 = " />&nbsp;</span></p>\n\n    <p><span style=\"font-size...........   
String web711 = " /></span></p>\n\n    <p><span style=\"font-family: ariaENA.............



SETUP ZONE:

radio button-------------------------------------------
webVAR1 = "checked=\"checked\" ";
webVAR2 = "";
webVAR3 = "";

webVAR4 = "checked=\"checked\" ";
webVAR5 = "";

text input----------------------------------------------------------
webVAR6 = "value=4";
webVAR7 = "value=TEST";
webVAR8 = "value=1234";
webVAR9 = "value=1234";
webVAR10 = "value=1234";
webVAR11 = "value=100";

web1FIN = web70 + webVAR1 +web71 + webVAR2 + web72 + webVAR3 + web73 + webVAR4 + web74 + webVAR5 + web75 + webVAR6 + web76 + webVAR7 + web77 + webVAR8 + web78 +webVAR9 + web79+ webVAR10 + web710 +webVAR11 + web711;



The web loaded directly into a srring variable does work.

But in this way the compilation does not give errors but when transferring yes:

error: failed sending 0xC0
error: failed sending 8 bytes
error: failed sending 36 bytes
error: failed sending 0xC0
warning: espcomm_sync failed
error: espcomm_open failed
error: espcomm_upload_mem failed


If I cut the variables, it works.
For example:
web1FIN = web70 + webVAR1 +web71 + webVAR2 + web72 + webVAR3 + web73 + webVAR4 + web74;

I do not know if it's a problem of length or that.
but the page is not big.

Thanks for everything
User avatar

Re: How variable values are embedded within the html text?

By rudy
- Thu Feb 21, 2019 11:53 am #80700 I don't see anything wrong in how you are going about this, it is often done this way. Build a string to send.
I have a problem looking at text lines with slashes and quotes. It becomes too much noise for my brain. I can't see if the html code is OK. That is why I use the raw literal method, so I can see the html as it should be.

I would first try loading the html code in the browser from the computer. With no ESP, just to make sure the raw html is correct.
 Reply
Return to General Discussions