Ulas ,Thank-you for sharing your knowledge. Well done instructional video. Your live interactive , error checking (style) really helped make this tutorial much more meaningful.
@@ulasdikme7307 Thanks for the replay. I got it working--and the system will post race car telemetry to a "big screen" TV on the pit. I'm actually sending data from the car to the pit using Teensy 3.2 (current setup using EBYTE transceivers, display and a bunch of other things), then I send the incoming struct from Teensy to ESP using serial (had to use easyTransfer.h) , then ESP process the struct and builds a web page displaying the 20 or so data points. Your code worked for 1 val but not multiple until I added to the function response section: Javascript+="var xmlResponse; "; Javascript+="var xmldoc ; "; Javascript+="var message; "; My system is now working and I can connect phones/PC's etc to the site). My web page is just a simple table but that is my next venture--to snazzy it up. Man I hate writing HTML code and java script as it's really non-intuitive. Well done in posting this, I would never have figured this out.
I'm now real stuck trying to update a width property I have all this running where my MCU reads data and populates a website--it's actually very cool. I have a table of data and in one cell i have a rectangle that i would like the width to vary--a battery level indicator here's my java // this will not update a width xmlResponse=xmlHttp.responseXML; xmldoc = xmlResponse.getElementsByTagName('ERem'); message = xmldoc[0].firstChild.nodeValue; document.getElementsByClassName('bar').width=message; // this will update a number in the table xmlResponse=xmlHttp.responseXML; xmldoc = xmlResponse.getElementsByTagName('CarSpeed'); message = xmldoc[0].firstChild.nodeValue; document.getElementById('CarSpeed').innerHTML=message; // style definition .data { font-family: "arial"; font-size: 20px; color: #FFFFFF; text-align: right; }
This is close to what I"m trying to do however, my ESP-01 is a module so I need to communicate through a serial1 port. Can your code be modified to send to a Serial port? I've found other libraries that pass the serial port into the wifi object, but they don't support the methods in your example server.on for example. I'm trying to find a library that supports communicating via Serial but can use examples such as this.
add simply two variable in the main loop. For instance, Data = (String)temprature + (String)Humidity; then, you will see the two variables in the screen.
I'm having trouble with the javascript code. I want to display them like this: Temperature: X Humidity: Y I don't know how to do that. I added two response tags in XML function, like this: void buildXML(){ XML=""; XML+=""; XML+=getTemperature(); XML+=""; XML+=""; XML+=getHumidity(); XML+=""; } Then, I changed the javascript like this: javaScript+="function handleServerResponse(){ "; javaScript+=" if(xmlHttp.readyState==4 && xmlHttp.status==200){ "; javaScript+=" xmldoc=xmlHttp.responseXML; "; javaScript+=" message = xmldoc.getElementsByTagName('response')[0].firstChild.nodeValue; "; javaScript+=" document.getElementById('temperature').innerHTML=message; "; javaScript+=" message = xmldoc.getElementsByTagName('response2')[0].firstChild.nodeValue; "; javaScript+=" document.getElementById('humidity').innerHTML=message; "; javaScript+=" } "; javaScript+="} "; javaScript+=" "; After I upload this program, I see no value, neither for temperature, nor for humidity.
How does this work? How does the esp8266 running the C code know when to send the XML data to the client? I understand the Javascript running on the client requests the XML every 200ms or something set by the timeout. How does the ESP8266 know to run the XMLcontent function to rebuild and send the XML data?
This method is successful because it connects to the same network. So, how is the remote server sent to an HTML page with another IP address? with the same method?
ıf you understand the post get method wtih php, there will be only one thing to pass, which is ajax, stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php you can find much more information implementation ajax to the php.
@@ulasdikme7307 Yeah but it is still Really COOL! Thanks - I'm in the process of doing a logging/charting upload/download project for use in the field and this helps a lot! Been digging into the rabbit hole - fascinating! Now putting different pieces together. Nice work, thank you!
My dude this is exactly what I was looking for. Plus you got a great voice. What a great day
Ulas ,Thank-you for sharing your knowledge. Well done instructional video. Your live interactive , error checking (style) really helped make this tutorial much more meaningful.
thank you! just a quick question.. how do you send data back? for example the content of a dropdown onchange? thank you!
How do you pass more that one value using your XML approach?
Hi, send me you code and ı can make the related change
@@ulasdikme7307 Thanks for the replay. I got it working--and the system will post race car telemetry to a "big screen" TV on the pit. I'm actually sending data from the car to the pit using Teensy 3.2 (current setup using EBYTE transceivers, display and a bunch of other things), then I send the incoming struct from Teensy to ESP using serial (had to use easyTransfer.h) , then ESP process the struct and builds a web page displaying the 20 or so data points. Your code worked for 1 val but not multiple until I added to the function response section:
Javascript+="var xmlResponse;
";
Javascript+="var xmldoc ;
";
Javascript+="var message;
";
My system is now working and I can connect phones/PC's etc to the site). My web page is just a simple table but that is my next venture--to snazzy it up. Man I hate writing HTML code and java script as it's really non-intuitive.
Well done in posting this, I would never have figured this out.
I'm now real stuck trying to update a width property
I have all this running where my MCU reads data and populates a website--it's actually very cool. I have a table of data and in one cell i have a rectangle that i would like the width to vary--a battery level indicator
here's my java
// this will not update a width
xmlResponse=xmlHttp.responseXML;
xmldoc = xmlResponse.getElementsByTagName('ERem');
message = xmldoc[0].firstChild.nodeValue;
document.getElementsByClassName('bar').width=message;
// this will update a number in the table
xmlResponse=xmlHttp.responseXML;
xmldoc = xmlResponse.getElementsByTagName('CarSpeed');
message = xmldoc[0].firstChild.nodeValue;
document.getElementById('CarSpeed').innerHTML=message;
// style definition
.data {
font-family: "arial";
font-size: 20px;
color: #FFFFFF;
text-align: right;
}
.bar {
position: relative;
height: 30px;
border: 3px solid gray
}
// html table code
thoughts?
Got it all working I needed to add "%" after message length
....style.width=(message+"%");
Awesome Bro. (specially for error correction show up)
This is close to what I"m trying to do however, my ESP-01 is a module so I need to communicate through a serial1 port. Can your code be modified to send to a Serial port? I've found other libraries that pass the serial port into the wifi object, but they don't support the methods in your example server.on for example. I'm trying to find a library that supports communicating via Serial but can use examples such as this.
How would my code look if I wanted to send 2 types of data? For instance, I want to send a temperature value to website but also a humidity value.
add simply two variable in the main loop. For instance,
Data = (String)temprature + (String)Humidity;
then, you will see the two variables in the screen.
Main idea is ,xml does not care how many variable send to webserver. Just add each variable as a string then send them.
I'm having trouble with the javascript code. I want to display them like this:
Temperature: X
Humidity: Y
I don't know how to do that. I added two response tags in XML function, like this:
void buildXML(){
XML="";
XML+="";
XML+=getTemperature();
XML+="";
XML+="";
XML+=getHumidity();
XML+="";
}
Then, I changed the javascript like this:
javaScript+="function handleServerResponse(){
";
javaScript+=" if(xmlHttp.readyState==4 && xmlHttp.status==200){
";
javaScript+=" xmldoc=xmlHttp.responseXML;
";
javaScript+=" message = xmldoc.getElementsByTagName('response')[0].firstChild.nodeValue;
";
javaScript+=" document.getElementById('temperature').innerHTML=message;
";
javaScript+=" message = xmldoc.getElementsByTagName('response2')[0].firstChild.nodeValue;
";
javaScript+=" document.getElementById('humidity').innerHTML=message;
";
javaScript+=" }
";
javaScript+="}
";
javaScript+="
";
After I upload this program, I see no value, neither for temperature, nor for humidity.
no, just add them in the main loop. You do not have to change the xml part.
It is better to see whole code, but I think you should do,
data = String(getTemprature())+String(getHumidity());
What is the baud rate that you have set? I am using it at 115200 but it's giving garbage values ..please help
How does this work? How does the esp8266 running the C code know when to send the XML data to the client? I understand the Javascript running on the client requests the XML every 200ms or something set by the timeout. How does the ESP8266 know to run the XMLcontent function to rebuild and send the XML data?
Thanks for the explanation, very helpful... what model of esp8266 did you use?
This method is successful because it connects to the same network. So, how is the remote server sent to an HTML page with another IP address? with the same method?
what's the meaning of +data+ like what does the "+" sign do ?
this is when you would show the content of a variable in a string
You wrote inside the Video "Code is below".
I can't find the code. Where is it?
Working on local network or Internet ?
I love you, I have looked for this month for my project, thank you very much. Biiiiiiiiiiiiiiiiiiiiig beer for you :)
Thx, that was exactly what i am looking for!! Super Tutorial!
could you please share the code? is somewhat hard to copy on the fly
Thanks alot , Can I send data from esp to my website using ajax ? if so then tell me how ? I'm using Get or Post Method
The right question " where is your website ?", where is the server ? on your local or on the internet somewhere ?
my server is on the internet on my website
ıf you understand the post get method wtih php, there will be only one thing to pass, which is ajax,
stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php
you can find much more information implementation ajax to the php.
also this one,
www.codeofaninja.com/2013/09/jquery-ajax-post-example.html
what if you use AT-commands?
Well, if you can implement javascript over tcp with AT then everything should be same...
is this possible sir? two data.
this help me a lot, thanks a lot for sharing!
How do I automatically reconnect?
Sir, you are great.
Thanks, but in 2022 the sketch will not compile.
The argument for setTimeout is miliseconds, NOT microseconds.
Thanks, it was very helpful,
Thanks man. Really helped me out!
Great Video thanks a lot!
Fascinating and so useful example, but you had better share the codes with us :)
Already shared it on the link :D
not working! please give a sketch
Javascript on arduino. unbelievable
It is just a buch of string for browser :)
@@ulasdikme7307 anyway. you did a good explanation
@@Xen_Prime Thank you. Do not forget to be subscribe ! :)
@@ulasdikme7307 Yeah but it is still Really COOL! Thanks - I'm in the process of doing a logging/charting upload/download project for use in the field and this helps a lot! Been digging into the rabbit hole - fascinating! Now putting different pieces together. Nice work, thank you!
@@billallen275 I would recommend you to use websocket. You can find an example in my channel.
Awesome !! Thnxs for sharing !
very nice, thanks a million
Thanks for this tutor
LIFE SAVER
awesome man
thx bro