another perfect tutorial actually you brought one of my old projects on desk again i have built a conditioner control with esp and a simple web page to control it but i always had trouble to see the real time stat of it for every other people who connects to it i guess this part was made only for me XD thanks again for another perfect tutorial keep it up
Nice! I'm glad I was able to revive a project :) FYI, in a couple of weeks I'll post a related video on websockets. It should also be helpful for monitoring 'stuff' in *real-time* on the ESP8266 using a web browser. Thanks for being a continued supporter of the channel!
sure ill be glad to i will try to keep up with all videos as well as ideas which pops to my head i know how hard it is to create this kind of tutorials so ill be supportive :)
Great video. I have an ESP8266 serving a website and working. I'm sending and XML data and using AJAX to only update the data, so text and animated bars showing levels all update nearly real time. My data comes in every second. However...every say 10 seconds my web page sites idle for 2-3 seconds. And that is when the web is connected through my local router. In a test where i'm using port forwarding to let someone else see the web page, it may update ever 5 seconds. My web page has around 50 values that are getting updated. I realize you can't see my code, but if the system were written correctly (not saying it's not), but do you feel this performance is about right? Seems slow but i'm not sure I can expect much from a small $3 web server. If you feel it's slow, i'll dig into it. I may consider web sockets, however my data flow only from server to client. Thoughts?
Another great tutorial acrobotic. Congrats. But is their another way so that I can import HTML files into arduino project? Because that would be more modular from my point of view.
Hi Cisco! I'd like to ask you two questions: If I have already the esp8266 set as web server and can send command from client to esp, how I can send data viceversa, I mean, from two distance sensors connected on the esp8266 to the client (web page) using AJAX. The example you show us is to send commands on and off to the esp8266 to light up a led. Is it possible from that same code to send any other sensor data and display it on the web page. Thanks in advance, Rubén.
Hey, Rubén. Yes it's possible to use the same code on either a webpage, or on another ESP8266 to respond to the device making the initial request. I made a video that can prove useful for sending data between two ESP8266: ua-cam.com/video/gZhUi24_qms/v-deo.html HTH!
Thank you for your videos, I would like to do a similar thing but instead of simple html page written inside the arduino IDE I'd like to make an angular application. So can I host angular application on ESP8266 and, at the same time, using it as a webserver to process the requests make from client-side (angular)? you help would be very usefull, thanks a lot.
There are some firmware options that allow you to write basic JavaScript directly on the ESP8266, and run the code through an interpreter on the chip. I haven't heard anything about a full/lite support for Angular applications, however. Maybe on the ESP32 forums, which is considerably a more capable chip, you'll find people having a go at it. HTH!
heey sir that's a perfect tutorial so i've been loooking for a way to activate the funcion automatically and i found about settimeout and setintervall so i tried it and guess what the led blinks by itself and the data is refreshed automatically with no button,so thank you for clearing the way.
It is so confuse, I am an Electronic engineer and I program in C/C++.., I know all the advantages of esp8266 but I dont know how to program in JS, ajax, java, and others so my question is? This likes me so much, where do I must start? What language you recommended us to lean first? Html? Css? Or use something like blink, app inventor and so on..
Hi! ESP8266 is a great bridge between web technologies (back end and front end) and firmware. I'm also an EE, but I built websites in college to earn extra money :) Personally, I don't advise starting with Blynk or App Inventor because they hide the fundamental aspects of web development. I would start with coding simple web pages using HTML + CSS + JS, and understanding how to get them on a web server. Then I would focus on JavaScript, specifically using Node.js, which allows you to run a web server, build web pages (without writing HTML), and much more. You don't have to become an expert, but this will give you a good idea on how the web currently works!
Is it necessary to use Arduino editor .Can I access Arduino by functions or any other way in another editors like atom and sublime text using any web languages
In this tutorial You managed to toggle one LED by calling getLEDState, but is it possible to call the same function with some parameter-option to toggle say blue, green or red LED???
Nice tutorial! How can we update dynamically the state of the LED without having to reload the page or press on a button on the web page in your example? Let's say I change the state of the LED on the Wemos with something else (reading a physical switch) but I want the Wemos to update dynamically the LED state on the web page? The arduino code should push a value to the web page on it's own. HTTP Put?? I'm sure it is simple but can't figure out how to do it for this simple example. Thanks for your help!
Thank you! Yup you can. That's the point of using AJAX, avoiding the page refresh. In another video, I also go over how to do it with Websockets, which is the latest way to transfer data between client and server. In your case we can do 1 of 3 options: 1. As you mention, you can send an HTTP POST using a WiFiClient object in your code that runs when you press the button. 2. You can use JavaScript/AJAX to poll the status of the button periodically (e.g., SetInterval() function), using a route named (for example) "/status" that returns the value (0 or 1) of the button. The value can be update in the loop(). 3. You can use Websockets to do something similar to the above, it's easier because the communication is bidirectional by design, so you don't need to do the polling, the server generates an event when the button is pressed that can be reflected on the page as well. Here's how to get started: ua-cam.com/video/ROeT-gyYZfw/v-deo.html
Thanks for your answer I really appreciate it @@datasith ! I learn a lot from your videos and will experiment with Websockets. After doing a bit of research, I found a wonderful and simple workaround solution that works very well for me. I only wanted to refresh the LED state and temperature reading every 3 seconds on the web page. I added an interval loop updating function in the Javascript part of the web page. The function run with an interval set that way: var update_loop = setInterval(Main, 3000); Main(); function Main() { disTemperature(); //refresh temperature reading myFunction(); //refresh the LED state value ON or OFF } That's it! The beauty of the method is that if no client is online with the web page, the code doesn't run and the Wemos can do only what he has to normally and other tasks.
@@datasith Hi, i've created the "data" folder with the index.html , jquery.min.js and style.css . On my pc if i open the index.html works, but if i upload the file in the esp8266 the style.css is not applied to the index.html...how can i solve? :/ I've followed your tutorial here : ua-cam.com/video/pfJROpQg-Is/v-deo.html
@@FrankP83 That's awesome! I'll make another tutorial soon to show how to upload a full website (html+js+css files), to make it easier for others. Thanks for the reference!
On trying this example with blank password ,when i try to connect the generated ap in my mobile device the connection was not stable and kept on dropping and i was not able to connect to the wifi generated by esp. can you please help with this issue?
Sorry, I'm not sure if you weren't able to connect to the AP created by the ESP8266 or if you were able to connect but the connection wasn't stable. If the connection wasn't stable, then it might be due to the distance between devices. Otherwise, make sure you have a small delay if you have additional code in your loop. Those are the first things I'd check. Thanks for watching!
Hi I have Arduino Mega is it possible to control several things what is connected to Arduino via esp-01 ore similar esp??? And if it is possible, then maybe you can suggest something how to do that???
Yes it is possible. You can connect them over Serial and exchange data using Serial.print() and Serial.read(). There are other ways, but that's the simplest. Good luck with your projects!
Great video as always. One issue I get is when the page is refreshed the led will toggle. For example if I open a new browser lets say on a phone the led will toggle without pressing the html button. Is there a way to stop that?
Thanks for the kind words, Paul. Here's how: The LED toggles when the JavaScript function "*myFunction()*" is called. This happens when the button is clicked using its "*onclick*" attribute, and when the page is loaded using the document's event listener method. So if you get rid of the event listener line: *document.addEventListener('DOMContentLoaded', myFunction, false);* Then the function won't be called when the page is loaded. HTH.
@@surenarumugam4863 The serial Monitor prints the IP address of the nodemcu. So you just have to type that into your browser. Maybe you have to add "" in front off it
ACROBOTIC ,I am applying this knowledge in the physics research lab. I can control an industrial oven by the smartphone through nodemcu and an app that I did in android. Thanks to your RGB led control class. I want to do this now in websocket. A month just messing with Micros and Arduino, I have a lot to learn from you. Much obliged!
Exactly, I want to code a webpage with the buttons and dials myself. For example, I want the buttons to have underlying javascript that changes the value of a variable in a Firebase database. The ESP would see the change and run code based on the new value that it pulls from Firebase.
You'll need an Android App to control the music. Maybe you can find one with an Open API. In that case, you could use HTTP or Bluetooth (with an ESP32) to control the phone app from the microcontroller. HTH!
To change the size and color of the button you need to learn a little CSS. If you search for it, you'll find some straight-forward examples. Now for stopping the toggling on page load, you need to revise the JavaScript code. Notice that it runs every time you load the page, so you need to enclose the code within an "if" statement. Thanks for stopping by my channel!
Yes, in this video you have your own website to control an LED: ua-cam.com/video/lteGQrY5Yu4/v-deo.html You need to change the code to accept data from clients. I'll probably make one sometime soon. In the meantime, You can use 3rd party services like Cayenne or Thingspeak.
another perfect tutorial
actually you brought one of my old projects on desk again
i have built a conditioner control with esp and a simple web page to control it but i always had trouble to see the real time stat of it for every other people who connects to it i guess this part was made only for me XD
thanks again for another perfect tutorial keep it up
Nice! I'm glad I was able to revive a project :)
FYI, in a couple of weeks I'll post a related video on websockets. It should also be helpful for monitoring 'stuff' in *real-time* on the ESP8266 using a web browser.
Thanks for being a continued supporter of the channel!
sure ill be glad to
i will try to keep up with all videos as well as ideas which pops to my head
i know how hard it is to create this kind of tutorials so ill be supportive :)
Great video. I have an ESP8266 serving a website and working. I'm sending and XML data and using AJAX to only update the data, so text and animated bars showing levels all update nearly real time. My data comes in every second. However...every say 10 seconds my web page sites idle for 2-3 seconds. And that is when the web is connected through my local router. In a test where i'm using port forwarding to let someone else see the web page, it may update ever 5 seconds. My web page has around 50 values that are getting updated.
I realize you can't see my code, but if the system were written correctly (not saying it's not), but do you feel this performance is about right? Seems slow but i'm not sure I can expect much from a small $3 web server. If you feel it's slow, i'll dig into it. I may consider web sockets, however my data flow only from server to client.
Thoughts?
Hey Cisco! Keep up the ESP8266 tips. I am exercising it right now. Thanks!
For sure, Luis Felipe! I'll keep them coming. I'm glad you find them useful, thank you!
Another great tutorial acrobotic. Congrats. But is their another way so that I can import HTML files into arduino project? Because that would be more modular from my point of view.
Thank you Sanket. I'm posting a video on this very topic next week. Stay tuned!
definately :)
Thank you so much sir
No problem, glad you liked it!
Great video !! Just what I need, thnxs for sharing !
thanks for the kind words, i'm glad you liked it!
thank you - but when LED is ON and refresh the web page LED go OFF ??
beautiful explanation ,thank you
Hi Cisco! I'd like to ask you two questions: If I have already the esp8266 set as web server and can send command from client to esp, how I can send data viceversa, I mean, from two distance sensors connected on the esp8266 to the client (web page) using AJAX. The example you show us is to send commands on and off to the esp8266 to light up a led. Is it possible from that same code to send any other sensor data and display it on the web page. Thanks in advance, Rubén.
Hey, Rubén. Yes it's possible to use the same code on either a webpage, or on another ESP8266 to respond to the device making the initial request. I made a video that can prove useful for sending data between two ESP8266: ua-cam.com/video/gZhUi24_qms/v-deo.html
HTH!
Sir ,i have question that ,is't it possible to send a sensor data to website or web page which i can decide but not to nodemcu web server
Thank you for your videos, I would like to do a similar thing but instead of simple html page written inside the arduino IDE I'd like to make an angular application.
So can I host angular application on ESP8266 and, at the same time, using it as a webserver to process the requests make from client-side (angular)?
you help would be very usefull, thanks a lot.
There are some firmware options that allow you to write basic JavaScript directly on the ESP8266, and run the code through an interpreter on the chip. I haven't heard anything about a full/lite support for Angular applications, however. Maybe on the ESP32 forums, which is considerably a more capable chip, you'll find people having a go at it. HTH!
How do you do to send a string?
Great video!
Thank you! I'm glad you liked it :)
heey sir that's a perfect tutorial so i've been loooking for a way to activate the funcion automatically and i found about settimeout and setintervall so i tried it and guess what the led blinks by itself and the data is refreshed automatically with no button,so thank you for clearing the way.
No worries, I'm glad the content was useful!
It is so confuse, I am an Electronic engineer and I program in C/C++.., I know all the advantages of esp8266 but I dont know how to program in JS, ajax, java, and others so my question is? This likes me so much, where do I must start? What language you recommended us to lean first? Html? Css? Or use something like blink, app inventor and so on..
Hi! ESP8266 is a great bridge between web technologies (back end and front end) and firmware. I'm also an EE, but I built websites in college to earn extra money :)
Personally, I don't advise starting with Blynk or App Inventor because they hide the fundamental aspects of web development.
I would start with coding simple web pages using HTML + CSS + JS, and understanding how to get them on a web server. Then I would focus on JavaScript, specifically using Node.js, which allows you to run a web server, build web pages (without writing HTML), and much more.
You don't have to become an expert, but this will give you a good idea on how the web currently works!
ACROBOTIC thanks for your Quick reply... Good advices, I Will try to follow them.. Keep forward..
agreed, as i was using blynk for like 9 month i stucked in some cases cause of not being aple to produce what i exactly need
Is it necessary to use Arduino editor .Can I access Arduino by functions or any other way in another editors like atom and sublime text using any web languages
Yes you can use other editors, some of them can also be integrated with the functionality to upload the code directly (e.g., Eclipse). Best of luck!
In this tutorial You managed to toggle one LED by calling getLEDState, but is it possible to call the same function with some parameter-option to toggle say blue, green or red LED???
Yep, here's how to control the angle of a servo, you can change it to specify LED color:
ua-cam.com/video/Edbxyl2BhyU/v-deo.html
Nice tutorial! How can we update dynamically the state of the LED without having to reload the page or press on a button on the web page in your example? Let's say I change the state of the LED on the Wemos with something else (reading a physical switch) but I want the Wemos to update dynamically the LED state on the web page? The arduino code should push a value to the web page on it's own. HTTP Put?? I'm sure it is simple but can't figure out how to do it for this simple example. Thanks for your help!
Thank you! Yup you can. That's the point of using AJAX, avoiding the page refresh. In another video, I also go over how to do it with Websockets, which is the latest way to transfer data between client and server. In your case we can do 1 of 3 options:
1. As you mention, you can send an HTTP POST using a WiFiClient object in your code that runs when you press the button.
2. You can use JavaScript/AJAX to poll the status of the button periodically (e.g., SetInterval() function), using a route named (for example) "/status" that returns the value (0 or 1) of the button. The value can be update in the loop().
3. You can use Websockets to do something similar to the above, it's easier because the communication is bidirectional by design, so you don't need to do the polling, the server generates an event when the button is pressed that can be reflected on the page as well. Here's how to get started: ua-cam.com/video/ROeT-gyYZfw/v-deo.html
Thanks for your answer I really appreciate it @@datasith ! I learn a lot from your videos and will experiment with Websockets. After doing a bit of research, I found a wonderful and simple workaround solution that works very well for me. I only wanted to refresh the LED state and temperature reading every 3 seconds on the web page. I added an interval loop updating function in the Javascript part of the web page. The function run with an interval set that way: var update_loop = setInterval(Main, 3000);
Main();
function Main() {
disTemperature(); //refresh temperature reading
myFunction(); //refresh the LED state value ON or OFF
} That's it! The beauty of the method is that if no client is online with the web page, the code doesn't run and the Wemos can do only what he has to normally and other tasks.
Yup, perfect! Remember that you also have a couple of other options for future projects. I'm glad you figured it out; best of luck!
Hi, this is a great tutorial!Thanks!What about if i wanto to add also a simple CSS file?
Thanks :)
I'm glad you liked it, Francesco! You can place the file in the same "data" folder (or a subdirectory) and use it normally in your .html file.
@@datasith there is a tool to manage files in SPIFFS "data" files so i can delete without re-upload another sketch only for delete?
@@datasith Hi, i've created the "data" folder with the index.html , jquery.min.js and style.css . On my pc if i open the index.html works, but if i upload the file in the esp8266 the style.css is not applied to the index.html...how can i solve? :/
I've followed your tutorial here : ua-cam.com/video/pfJROpQg-Is/v-deo.html
@@datasith ok i've solved using this tutorial! tttapa.github.io/ESP8266/Chap11%20-%20SPIFFS.html it' works perfectly! ! :D
@@FrankP83 That's awesome! I'll make another tutorial soon to show how to upload a full website (html+js+css files), to make it easier for others. Thanks for the reference!
On trying this example with blank password ,when i try to connect the generated ap in my mobile device the connection was not stable and kept on dropping and i was not able to connect to the wifi generated by esp. can you please help with this issue?
Sorry, I'm not sure if you weren't able to connect to the AP created by the ESP8266 or if you were able to connect but the connection wasn't stable. If the connection wasn't stable, then it might be due to the distance between devices. Otherwise, make sure you have a small delay if you have additional code in your loop. Those are the first things I'd check. Thanks for watching!
@@datasith the devices were next to each other and also their was delay, can their be other reasons as well?
Hi I have Arduino Mega is it possible to control several things what is connected to Arduino via esp-01 ore similar esp??? And if it is possible, then maybe you can suggest something how to do that???
Yes it is possible. You can connect them over Serial and exchange data using Serial.print() and Serial.read(). There are other ways, but that's the simplest. Good luck with your projects!
dude when you edit your videos put the speed in x1.5 really gona help you ;)
Hi thanks for this tutorial
May i ask how can i redirect every website visited to the ip adress of the esp8266 ?
No worries, thanks for watching. That's called "captive portal" and here's an example: www.hackster.io/rayburne/esp8266-captive-portal-5798ff
HTH!
Great video as always.
One issue I get is when the page is refreshed the led will toggle.
For example if I open a new browser lets say on a phone the led will toggle without pressing the html button.
Is there a way to stop that?
Thanks for the kind words, Paul. Here's how:
The LED toggles when the JavaScript function "*myFunction()*" is called. This happens when the button is clicked using its "*onclick*" attribute, and when the page is loaded using the document's event listener method.
So if you get rid of the event listener line:
*document.addEventListener('DOMContentLoaded', myFunction, false);*
Then the function won't be called when the page is loaded. HTH.
Thank you for quick reply. I will give it a try.
@@datasith it didn't work
Is this can be controlled from anywhere in the world
It can, but you need to do some additional work to what's shown in this video. Here's an example: ua-cam.com/video/lteGQrY5Yu4/v-deo.html
sir did you have a tutorial about how esp8266 client communicated with esp8266 server that it can do feedback, i mean like chating
I'm posting a video today about using websockets, which can be used for bi-directional (feedback) communication. Hope that helps!
Hi sir. Can I know the IP address on video 7:44 seconds is that IP address of your wifi or nodemcu ?
The IP address he gets from the serial monitor, is the IP address of the nodemcu
@@MrGedget Can you let me know where should I get the IP address of the nodemcu sir please ? I am doing this project.
@@surenarumugam4863 The serial Monitor prints the IP address of the nodemcu. So you just have to type that into your browser. Maybe you have to add "" in front off it
Could you talk about websocket?
Sure thing. That one's coming up pretty soon! I'm doing: filesystem, SD card, and then websockets!
ACROBOTIC , Very good brother!
ACROBOTIC ,I am applying this knowledge in the physics research lab. I can control an industrial oven by the smartphone through nodemcu and an app that I did in android. Thanks to your RGB led control class. I want to do this now in websocket. A month just messing with Micros and Arduino, I have a lot to learn from you. Much obliged!
Sounds like an awesome project, Thiago! I'm glad (and humbled) that my videos were helpful in a 'real world' application.
plz can you make a video for Jonny-five and nodemcu
how i run firmata wifi in nodemcu
I'll add this to the queue, thanks for the idea and for watching my videos!
Can you make a video on how to remotely control the ESP from a non-local html page using a database like Google Firebase?
Sure thing, have you seen the one using Cayenne:
ua-cam.com/video/6YAnqHTm7_o/v-deo.html
Or were you thinking of avoiding a 3rd party service?
Exactly, I want to code a webpage with the buttons and dials myself. For example, I want the buttons to have underlying javascript that changes the value of a variable in a Firebase database. The ESP would see the change and run code based on the new value that it pulls from Firebase.
Gotcha! I'm working on one building a web app (Python) on Heroku for monitoring and controlling the ESP8266. It'll be up in about 3 weeks, stay tuned!
How to start playing music on android phone by clicking a button on esp8266 ?
You'll need an Android App to control the music. Maybe you can find one with an Open API. In that case, you could use HTTP or Bluetooth (with an ESP32) to control the phone app from the microcontroller. HTH!
thanks, how can I change the button size and colour
Hi again, everytime i refresh the web page, the led light will toggle either on or off. anyway of stopping it?
To change the size and color of the button you need to learn a little CSS. If you search for it, you'll find some straight-forward examples.
Now for stopping the toggling on page load, you need to revise the JavaScript code. Notice that it runs every time you load the page, so you need to enclose the code within an "if" statement.
Thanks for stopping by my channel!
Sir, can I create my own website, to allow the wifi clients to send some information to me? Like a survey page? Please reply
Yes.
@@datasith Do you plan to do a video about it? Or is it already there???? 😊😊
Yes, in this video you have your own website to control an LED:
ua-cam.com/video/lteGQrY5Yu4/v-deo.html
You need to change the code to accept data from clients. I'll probably make one sometime soon. In the meantime, You can use 3rd party services like Cayenne or Thingspeak.
The font is too big and the code is too easy to read. Make sure that you use 1pt font size next time. What a joke!
Sarcasm and two spaces between sentences. That’s some high-level trolling, I feel blessed!