Hey Arduino Forum!
I'm having trouble figuring out how to pass variables from the ESP8266 to HTML to be displayed on the webserver page.
I have an ESP8266 receiving live serial data from another Arduino, which is then converted to a float. I want to take this float variable from within the ESP8266 and place it on the webserver index page via HTML (preferably to be updated live without having to constantly refresh).
How do I do this?
Thank you for all your help,
preferably to be updated live without having to constantly refresh
well it will be a constant refresh, you'll tell your browser to query frequently the current value.
if you don't want to see a page refresh you could explore AJAX for example and play with the DOM to dynamically swap the value in a tag somewhere in your HTML code
I'd like to keep things as simple as possible right now, so manual refresh is fine -- even a refresh timer would work I suppose.
I however need to know how to access ESP8266 variables from the HTML.
if you want to keep it dead simple, generate your HTML from your code and just print the value of the variable where it needs to go.
You could also get the Async Web Server for ESP8266 and it's pretty simple to define place-holders for variables in HTML which are replaced by the values when the page is sent out. (look for template processing in the doc)
Can you please elaborate on how to accomplish reading the variable into HTML? From my understanding, HTML is expecting a URL to read data from.
How does this work by reading variables from an ESP8266?
(Sorry for the late edit)
do you mean writing ? something like this when you generate the answer
client.print("<p>Sensor Value = ");
client.print(yourVariable)
client.println("</p>");
There are zillions of tutorials out there.. let me google that for you... :o 
why you don't use NodeMcu it's more simple then esp8266 and it's easy to make any html program inside the program, also it has a serial pins to communicate with your arduino.
and you can find a lot of example for webserver using Nodemcu.
J-M-L:
do you mean writing ? something like this when you generate the answerclient.print("<p>Sensor Value = ");
client.print(yourVariable)
client.println("
Hmm... yes, that would work. Thank you!
Do you know of a way to put this into one piece of HTML code without breaking it into pieces to make it work? Currently, my HTML is sent as a single character array. Is there a way to pass that variable into the client environment so that it can be used within the HTML?
ihabelchami:
why you don't use NodeMcu
NodeMCU does not provide sufficient voltage for the sensors that I'm using, and adds additional costs to the project. I'm working with both 5v and 3.3v systems. So far, I have not found a tiny sized WiFi enabled Arduino based dev board that can support 5v analog sensor inputs, which is also very cheap.
Do you know of a way to put this into one piece of HTML code without breaking it into pieces to make it work?
Yes, that goes back to answer #1 
J-M-L:
Yes, that goes back to answer #1
So there's no way to do this without adding an additional library or using AJAX?
Well something needs to do the work... and that has to be your arduino and your code or someone else's code (a library)
if you have only one or a few variables you could split your single character array into two or a few at the place where you need the variable to be inserted and you do
client.print(array1);
client.print(yourVariable);
client.print(array2);
or you parse the array before sending and dump your variable there (assuming you have enough space and it's a writable array)
J-M-L:
Well something needs to do the work... and that has to be your arduino and your code or someone else's code (a library)you split your single character array into two at the place where you need the variable and you do
client.print(array1);
client.print(yourVariable);
client.print(array2);
or you parse the array before sending and dump your variable there (assuming you have enough space and it's a writable array)
I see... I'd rather do things the 'hard' way with additional code. I'll do exactly this: multiple arrays with client.print added in between. If I were to parse these together, and then redump, it would probably take up a larger foot print and processing power. Most of the HTML is static anyway.
Thank you again for all of your help! Karma added!
yeah if it's only a few variables it's manageable this way
AJAX is not rocket science though, something to explore if you have a bit of time and interest for the topic. Your web page will look smooth and won't get full refresh just to change 12.01 into 12.02 somewhere in the page
"So there's no way to do this without adding an additional library or using AJAX?"
I've used a main web page that had an embedded iframe for data display, and the the data page in the iframe was a very simple meta refreshing page. Below is a screen capture of six instances of IE running the iframe page setup with the data meta refreshing in the iframe. Just basic html code.
