Once again, this video showed by far the best to show websocket application in practical way! Thanks Mo, you sound down to earth in your video but talks sensibly! God bless you more!
Hey, I have followed your example and mixed part 3 and 4 (used SPIFFS, AsyncWebserver, uploaded separate html, js and stylesheet to SPIFFS) which works great. I noted though that the slider value were only updated once you released the mouse button after moving the slider. if you use this event listener method instead, the slider value and the LED intensity updates real time as you drag the slider: "slider.addEventListener('input', slider_changed);" Great tutorial. Thanks Jens.
Thank you for your input! Yes, indeed I only have the slider update on release. You can indeed have instant updates with the listener method you propose. However, you do need to make sure the Arduino code is not too complex so that if you have many changes at the same time (by different users for instance) that the ESP does not get overloaded. Thank you for your feedback! Sander
Hey! I can only agree to previous commenters, your videos are amazing! A great additional information would be how to send nested data/objects and serialize/deserialize them. I'm currently searching for this information and am sure I'll find it sooner or later. Maybe you could still provide it for anybody coming across this later? Thank you for your content.
Thank you very much for your feedback. Please have a look at part 4 of the video series: ua-cam.com/video/VaNVrE7-AO8/v-deo.html In this video I use the following function to serialize an array: void sendJsonArray(String l_type, int l_array_values[]) { Does that help? Or do you want a way to serialize/deserialize a complete struct or class? AFAIK this is not possible with a single command and you will need to write a function similar to what I show above.
If you keep acting this way your channels gonna blow up : ) For development, instead of using an esp32 , setting up apache on a pc and using php. I have never used php but I think it would save a bunch of time not have to down load to the esp32 every code change.
Thank you :-) you could try to mimic the server interface with a simple apache server indeed. I typically just use the browser and HTML file to make sure the HTML looks ok and then do the websocket interfacing directly with the ESP. For simple projects that works fine. But yes, if it becomes very complex then using a "debug server" makes a lot of sense.
Hi, Nice detailed video, would you be able to show me a basic direction of how to substitute the radio buttons with a drop-down menu? Thank you for the informative videos.
Thank you for the suggestion. Unfortunately I am overloaded with (non-YT related) work and dont get to make videos lately. Hope that I can upload some things this winter again...
@Klaus Geiger: Thank you for your comment. Some way or the other your comment was not published online, but I did get a notification it was posted. Your question was: "Unfortunately, after uploading, I can't find the ESP32 Dev module as a wifi server anywhere. What am I doing wrong or what do I have to do so that I can find the ESP32 Dev module on my smartphone under the available wifi networks?" My answer: Please refer to part 1 for the basics around connecting with the ESP32 to your router and retrieving the correct IP address (ua-cam.com/video/0AlATlN95Y0/v-deo.html). In essence, you have to provide the right SSID and password of your router in the code (variables are defined on the top) to make sure that the ESP32 connects to your router. Then, after programming the code to the ESP32 you can open up the serial interface to retrieve the IP address of the ESP32. This might now show up if you open the serial interface after the ESP32 is already running. In that case simply reset the ESP32 by clicking on the reset button. The ESP32 will then write the IP address to the serial interface. Good luck with your project!
I have a question about your if queries below "// JSON string was received correctly, so information can be retrieved:" what would an integer query on "0" look like? .... or asked differently how can you query whether a JSON object was received at all. I only want to react in my code when a JSON object declared as INT has been received at all. my problem is when I query an INT that is never sent, it is "0" and that's how my code reacts, but it should only happen if the object with the int was received at all. THX!!
Hi, I am not sure if I understand you completely, but what I think you want to do is to differentiate what type of message is sent through JSON and make sure that the correct type is sent so that your INT can be read. The way I identify what type of message is sent. In the example I show in the video I have different types of messages that are sent over. In case for instance the LED selected is sent over (which is an INT), the JSON I send over not only INT itself, but always I add a type to the JSON message, so: const char* l_type = doc["type"]; const int l_value = doc["value"]; the "type" is in this case "LED_selected" and the value is the INT that identifies which LED is actually selected. I suggest you do the same and define a type for the INT you want to send over and just check on the type first when a JSON message is received. Lets say that you define "TYPE_INT" as type, then whenever you receive a message of "TYPE_INT" you know that the actual value will be an INT. Hope this helps!
Really good video. Learned a lot. I guess its beyond the scope of the video but applying sanity checks on user input is a good habit. Eg. since you do not check the LEDindex a user might send a 3 to the ESP32 which will result in a buffer overflow / access violation on the channel array. Document.getElementsByName will return an array with all elements with that name this can be used to itterate over radio-buttons.
Hi Ralf, thank you very much for your feedback. Yes, you are right that sanity checks are a good habit and should be used to make the code more robust. However, I left these checks out to keep it simple in the video. Thank you for the suggestion to use getElementsByName, that allows for a cleaner code :-) Cheers, Sander
@@mothunderz Your video keeps it within the essentials for the task. I find your approach to slowly increase the complexity while still being able to understand what is going on great. Are you planning a video on SPIFS or using a SDCard for the files?
Hi Ralf, so far I never had the need to use an SDCard. For storage I always use the built in Flash memory of the ESP32. That is about 4mb, so enough for what I typically use it for. What is the application you have in mind? As a next video I wanted to look into BLE as I have had many requests for that, but just let me know what application you need it for and I can have a look. Sander
@@mothunderz The SD would be used for log files and device registration data. The ESP32 will provide a web interface manage and display the data gathered from Nanos over an Serial radio bridge. I originally planned to use the sd for the webpages too but that should easily fit into SPIFS.
Hi Ralf, the internal EEPROM (flash) in the ESP32 would be perfectly capable of storing log files and device registration data, but of course an SD card is easier to take out to transport the data to a computer or so. I briefly had to check my hardware (thus the late reply) and did find an SD card reader. However, this one is made for the Arduino 2560, so I will need to adapt it to the ESP. As said, have a few things on the todo list, but will look into this as well. Cheers, Sander
Excellent!.. now.. I am curious if WIFI could be used for bidirectional communication between a smartphone a ESP32.. but not using a webserver but rather direct bidirectional communication like you did with Bluetooth and MIT companion.. Thanks!
I made websockets work between two ESP32 and also tried to implement it on the MIT App Inventor. Unfortunately websockets are not natively supported in the App Inventor. I did find an extension for it, but could not get that to work. Might I find a solution I will let you know...
Hi! Thank you for the great explanation. I like your teaching style and can learn a lot. Keep it up! However, for me the slider works only on the computer and not on my iPhone. I can move the slider, but the ESP32 does not receive any commands. Do you have any idea why this is?
Dear Samuel, unfortunately I do not have an Iphone, so cannot check this, however, I recommend you to play around with the Javascript code. From 9:30 to 11:40 in the video I show how to create a slider in Javascript that outputs a value in the console. Does this work? If not, most likely what you need to change is the type of addEventListener event that is called. At the moment this is: slider.addEventListener('click', slider_changed); But I suspect something else is needed here to make it work. Perhaps you can try changing 'click' to 'mouseup'. Let me know if that works for you.
There are many different types of buttons and switches, so it depends a bit on what kind of button you are talking about. I assume you mean a push button that should trigger an event. In this case you would test in your Arduino code if the button is pressed. Lets assume you have three push buttons and we give them integers for ids. If a button is pressed you send something like: sendJson("Button", String(Button_id)); where "Button_id" would be 0, 1 or 2 depending on which button is pressed. Then in Javascript you go to the "function processCommand(event) {" section and there add: function processCommand(event) { var obj = JSON.parse(event.data); var type = obj.type; if (type.localeCompare("Button") == 0) { var Button_id = parseInt(obj.value); -> now you can check if Button_id is 0, 1 or 2 to see which button is pressed } Hope this helps!
Hey, thank you very much for this video series, ive learned a lot, quick question: what if i have a big page, and arduino wont tokenize a single string do you have any suggestions for that?
Well, the easiest reply would be: dont use a big page ;-) But if you really must, just use the implementation below and then you can use very large pages and it will still work: ua-cam.com/video/VaNVrE7-AO8/v-deo.html and ua-cam.com/video/DEFPSfLRObk/v-deo.html
Hi, your videos are incredibly informative. They help me to create a self-balancing robot. I have a question though, how or where to find information on how to add a good program the ability to display values on a website, thanks a lot!
Hi Filip, with the code provided in Part 2 of the ESP32 Webserver series you actually have all the info you need to do this. In that code I generate two random values and push these periodically to a website. Sounds like a fun project, good luck! Sander
Sir, I tried to do but when I decrease intensity in the webserver the led increase light intensity, also when I move turn on each led at a time in a webserver, only one led turn off and others 2 remain light on, when I change polarity all led's turn off, no led turn on. I don't know where I wrong.
Did you download the final code, or did you code along? It is a bit tricky to figure out why your code is behaving the way it is, but if you download the final code it really should behave the way I show in the video.
HI! Thank you for sharing this useful video! Can you make a video about how to not hardcording in arduino IDE but connect to home router by entering SSID and password on Phone and connect to wifi successfully? I really wonder how to do so.
This is actually not very straightforward. One could first configure the ESP32 as local hot spot and then try to re-configure it to connect to the router, but that will be tricky to program. I think the easiest solution for your problem is to connect with Bluetooth from your phone to the Arduino. That will require a simple app on the phone so that WiFi can be configured. See this video series on how to make such an app: ua-cam.com/video/aM2ktMKAunw/v-deo.html Note that this solution works only on Android for the moment as the MIT App Inventor serial Bluetooth interface is (at the time of writing) not working on IOS.
Thank you very much for your post! I checked and indeed did not update the HTML file when uploading the final code. I have just updated it. Hope it works now for you 👍
Well, in essence I show in part 2 and part 3 how you can control your ESP32 through a browser interface. Making this available on the web will require you to open a port on your router. This will mean you will have to have a lot of security measures in place not to be hacked. I personally only use my ESP32 on my local network and would recommend you to have a professional server with two IP domains as gateway -> one domain to interface with the web and one local network to interface with your ESP32. I would not recommend you to put an ESP32 on the web directly.
@mothunderz I used "caddy" which is a server as a reverse proxy to my esp32 using your code. I had to change one line in the html file that creates the socket so that it is uses wss instead of ws and had to open a port on my router, but all traffic on that port goes to caddy so it is protected by a certificate. Caddy provides a secure connection to between it and the internet. Also caddy provides basic authorization so anyone accessing the site has to present a username and password to access the site. I had to get a domain name for all this to work.
On another example the guy used this code: server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/index.html", String(), false, processor); }); Can I use that on this case? What would I need to change. I've heard that AsyncWebServer is a good option too. What do you think about that?
Hi Patrick, pls see part 4 of the series. I add SPIFFS there: ua-cam.com/video/VaNVrE7-AO8/v-deo.html And indeed, in part 4 I switch to AsyncWebServer as well as it is the better option when you use SPIFFS. Good luck with your project, Sander
The webserver in part 2 is exactly the same as that of part 3, so if part 2 works, then part 3 should work as well. Hope you manage to find the root cause...
Playing around with the JS, when using var led_0=document.getElementById('ID_LED_0'); Then using led_0 in place of document.getElementByID... in the code it breaks the javascript and the leds can not be controlled. I thought that was a valid thing to do. Edit: started working using the variable for some reason so you can disregard my comment.
Hi Joseph, thank you for your feedback. Glad that you got it working. Yes, it should be a valid thing to work with variables that way. The one thing I would like to mention is that in this implementation the complete web page is added as a single string to the Arduino code. This is less ideal as you for instance cannot use the " symbol without escaping it. Please have a look at part 4 of this series where I show a better way of uploading the HTML code to the Arduino: ua-cam.com/video/VaNVrE7-AO8/v-deo.html This can really get your program to a next level. Good luck with your project! Sander
It seems a little faster to put the string with the code. I have done it the other way also. One question. The project will not build if a default case is added to the switch statement. The error is "src/main.cpp: In function 'void webSocketEvent(byte, WStype_t, uint8_t*, size_t)': src/main.cpp:201:3: error: jump to case label [-fpermissive] default: I am not asking you to solve it but letting you know. I am trying to extend the program a bit for some other things.
I have not tried myself to add a default case, but I would advise not to do that at all. Multiple web browsers can be connected to one ESP and as such when connecting the Javascript does not know whether or not the default is correct or not. A very simple implementation is to have the ESP send the current switch state to the client as soon as they connect. In the ESP code you can do this where it says: case WStype_connected: That way all clients will show the same data. Good luck with your project!
good video, thank you. but not really good javascript - especially led_selected, led_intencity callbacks - those shouldn't rely on if there smthg else on the page is checked, just needed to get current element clicked (changed) from incoming event - i.e. if there will be a hundred of leds - would you suggest to write hundred of if..else? - it looks completely wrong, isn't it? if you remove some of LEDs (some of radiobutton) your callback will die with error. it shouldn't be like this. led_intencity shold be listened by on-change (on-input) and get value directrly from its event instead of getting it on the page by some DOM selector or somewhere else - opposite and simple, right? and here's wrong string comparing in javascript. in the sketch there's also a lot of usless conditions - i.e. why just not to call that sendJson(String(l_type), String(l_value)), if needed - in extreme case just check previously if type matches some requirements - single optional condition. but there just code duplication has been written with hardcoded type manually - that looks wrong. there's shouldn't be any of such condition in purpose of scaling and increasing amount of message types. the reason why - especially you showed it in "LED_select" typo case. another thing - it does matter what resistor value needs to be taken)) it depends on the supply voltage and voltage drop across the diode and its working current, so, in your case smthg around 100 should be fine )) in other case 200 will be not enough )) but, anyway, described case of websocket application really helpful!
Sorry for my very slow reply, it has been very busy at work lately. Thank you for your comments! I indeed dont use Javascipt a lot and the focus for me was here on the Webserver and Arduino. Nonetheless, I agree I should redo the Javascript code. If you have re-written this, I would really appreciate an email with your version (you can reach me at my channel name @gmail.com). As for the LEDs -> we use them in this example from a digital port of the ESP. Regardless of the power supply, the ESP will have 3.3V on the digital pins, right? Then 100 Ohms should be fine. Or am I missing something here? Once more, really appreciate your feedback, and apologies for the delay in my reply...
from now on you are my go-to person for useful stuff on ESP, thank you!!!
Once again, this video showed by far the best to show websocket application in practical way! Thanks Mo, you sound down to earth in your video but talks sensibly! God bless you more!
Thank you very much for your feedback, well appreciated!
Absolutely Great, Simple and Clear Explanation.
Thank you very much!
Hey, I have followed your example and mixed part 3 and 4 (used SPIFFS, AsyncWebserver, uploaded separate html, js and stylesheet to SPIFFS) which works great. I noted though that the slider value were only updated once you released the mouse button after moving the slider. if you use this event listener method instead, the slider value and the LED intensity updates real time as you drag the slider: "slider.addEventListener('input', slider_changed);" Great tutorial. Thanks Jens.
Thank you for your input! Yes, indeed I only have the slider update on release. You can indeed have instant updates with the listener method you propose. However, you do need to make sure the Arduino code is not too complex so that if you have many changes at the same time (by different users for instance) that the ESP does not get overloaded. Thank you for your feedback! Sander
Huge thx for the video, very well explained and the pace is easy to follow.
Glad it helped!
Thank you so much! I have been struggling with websockets integration with my projects, and now I think I really understand how to do it.
You're very welcome, thank you for your feedback!
Just what I was looking for, thank you so much for sharing
Glad it was helpful!
Thank you very much for the thorough explanation of the code, it is of a great help.
Thank you very much for your feedback!
Hey! I can only agree to previous commenters, your videos are amazing! A great additional information would be how to send nested data/objects and serialize/deserialize them. I'm currently searching for this information and am sure I'll find it sooner or later. Maybe you could still provide it for anybody coming across this later? Thank you for your content.
Thank you very much for your feedback. Please have a look at part 4 of the video series:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
In this video I use the following function to serialize an array:
void sendJsonArray(String l_type, int l_array_values[]) {
Does that help? Or do you want a way to serialize/deserialize a complete struct or class? AFAIK this is not possible with a single command and you will need to write a function similar to what I show above.
If you keep acting this way your channels gonna blow up : ) For development, instead of using an esp32 , setting up apache on a pc and using php. I have never used php but I think it would save a bunch of time not have to down load to the esp32 every code change.
Thank you :-)
you could try to mimic the server interface with a simple apache server indeed. I typically just use the browser and HTML file to make sure the HTML looks ok and then do the websocket interfacing directly with the ESP. For simple projects that works fine. But yes, if it becomes very complex then using a "debug server" makes a lot of sense.
simply great headsofff
Thank you for your feedback :-)
Thank you very much for this video. What kind of plugins do you use for notepad++ ?
Astonishing Work! Thanks
Glad you like it!
Hi, Nice detailed video, would you be able to show me a basic direction of how to substitute the radio buttons with a drop-down menu?
Thank you for the informative videos.
Thank you for the suggestion. Unfortunately I am overloaded with (non-YT related) work and dont get to make videos lately. Hope that I can upload some things this winter again...
@Klaus Geiger: Thank you for your comment. Some way or the other your comment was not published online, but I did get a notification it was posted. Your question was: "Unfortunately, after uploading, I can't find the ESP32 Dev module as a wifi server anywhere. What am I doing wrong or what do I have to do so that I can find the ESP32 Dev module on my smartphone under the available wifi networks?"
My answer: Please refer to part 1 for the basics around connecting with the ESP32 to your router and retrieving the correct IP address (ua-cam.com/video/0AlATlN95Y0/v-deo.html). In essence, you have to provide the right SSID and password of your router in the code (variables are defined on the top) to make sure that the ESP32 connects to your router. Then, after programming the code to the ESP32 you can open up the serial interface to retrieve the IP address of the ESP32. This might now show up if you open the serial interface after the ESP32 is already running. In that case simply reset the ESP32 by clicking on the reset button. The ESP32 will then write the IP address to the serial interface. Good luck with your project!
I have a question about your if queries below
"// JSON string was received correctly, so information can be retrieved:"
what would an integer query on "0" look like?
.... or asked differently how can you query whether a JSON object was received at all.
I only want to react in my code when a JSON object declared as INT has been received at all.
my problem is when I query an INT that is never sent, it is "0" and that's how my code reacts, but it should only happen if the object with the int was received at all.
THX!!
Hi, I am not sure if I understand you completely, but what I think you want to do is to differentiate what type of message is sent through JSON and make sure that the correct type is sent so that your INT can be read. The way I identify what type of message is sent. In the example I show in the video I have different types of messages that are sent over. In case for instance the LED selected is sent over (which is an INT), the JSON I send over not only INT itself, but always I add a type to the JSON message, so:
const char* l_type = doc["type"];
const int l_value = doc["value"];
the "type" is in this case "LED_selected" and the value is the INT that identifies which LED is actually selected. I suggest you do the same and define a type for the INT you want to send over and just check on the type first when a JSON message is received. Lets say that you define "TYPE_INT" as type, then whenever you receive a message of "TYPE_INT" you know that the actual value will be an INT. Hope this helps!
Really good video. Learned a lot.
I guess its beyond the scope of the video but applying sanity checks on user input is a good habit.
Eg. since you do not check the LEDindex a user might send a 3 to the ESP32 which will result in a buffer overflow / access violation on the channel array.
Document.getElementsByName will return an array with all elements with that name this can be used to itterate over radio-buttons.
Hi Ralf,
thank you very much for your feedback. Yes, you are right that sanity checks are a good habit and should be used to make the code more robust. However, I left these checks out to keep it simple in the video.
Thank you for the suggestion to use getElementsByName, that allows for a cleaner code :-)
Cheers, Sander
@@mothunderz Your video keeps it within the essentials for the task. I find your approach to slowly increase the complexity while still being able to understand what is going on great.
Are you planning a video on SPIFS or using a SDCard for the files?
Hi Ralf,
so far I never had the need to use an SDCard. For storage I always use the built in Flash memory of the ESP32. That is about 4mb, so enough for what I typically use it for. What is the application you have in mind? As a next video I wanted to look into BLE as I have had many requests for that, but just let me know what application you need it for and I can have a look. Sander
@@mothunderz The SD would be used for log files and device registration data. The ESP32 will provide a web interface manage and display the data gathered from Nanos over an Serial radio bridge.
I originally planned to use the sd for the webpages too but that should easily fit into SPIFS.
Hi Ralf, the internal EEPROM (flash) in the ESP32 would be perfectly capable of storing log files and device registration data, but of course an SD card is easier to take out to transport the data to a computer or so. I briefly had to check my hardware (thus the late reply) and did find an SD card reader. However, this one is made for the Arduino 2560, so I will need to adapt it to the ESP. As said, have a few things on the todo list, but will look into this as well. Cheers, Sander
Excellent!.. now.. I am curious if WIFI could be used for bidirectional communication between a smartphone a ESP32.. but not using a webserver but rather direct bidirectional communication like you did with Bluetooth and MIT companion.. Thanks!
I made websockets work between two ESP32 and also tried to implement it on the MIT App Inventor. Unfortunately websockets are not natively supported in the App Inventor. I did find an extension for it, but could not get that to work. Might I find a solution I will let you know...
Hi! Thank you for the great explanation. I like your teaching style and can learn a lot. Keep it up!
However, for me the slider works only on the computer and not on my iPhone. I can move the slider, but the ESP32 does not receive any commands. Do you have any idea why this is?
Dear Samuel, unfortunately I do not have an Iphone, so cannot check this, however, I recommend you to play around with the Javascript code. From 9:30 to 11:40 in the video I show how to create a slider in Javascript that outputs a value in the console. Does this work? If not, most likely what you need to change is the type of addEventListener event that is called. At the moment this is:
slider.addEventListener('click', slider_changed);
But I suspect something else is needed here to make it work. Perhaps you can try changing 'click' to 'mouseup'. Let me know if that works for you.
Pls check out the latest code on Github. I changed the listener event to "change" and with that it should not work.
May I ask how to synchronize the button state on the web and the mechanical button? Do you have any video tutorials? help meee
There are many different types of buttons and switches, so it depends a bit on what kind of button you are talking about. I assume you mean a push button that should trigger an event. In this case you would test in your Arduino code if the button is pressed. Lets assume you have three push buttons and we give them integers for ids. If a button is pressed you send something like:
sendJson("Button", String(Button_id));
where "Button_id" would be 0, 1 or 2 depending on which button is pressed. Then in Javascript you go to the "function processCommand(event) {" section and there add:
function processCommand(event) {
var obj = JSON.parse(event.data);
var type = obj.type;
if (type.localeCompare("Button") == 0) {
var Button_id = parseInt(obj.value);
-> now you can check if Button_id is 0, 1 or 2 to see which button is pressed
}
Hope this helps!
Hey, thank you very much for this video series, ive learned a lot, quick question: what if i have a big page, and arduino wont tokenize a single string do you have any suggestions for that?
Well, the easiest reply would be: dont use a big page ;-) But if you really must, just use the implementation below and then you can use very large pages and it will still work:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
and
ua-cam.com/video/DEFPSfLRObk/v-deo.html
Hi, your videos are incredibly informative. They help me to create a self-balancing robot. I have a question though, how or where to find information on how to add a good program the ability to display values on a website, thanks a lot!
Hi Filip, with the code provided in Part 2 of the ESP32 Webserver series you actually have all the info you need to do this. In that code I generate two random values and push these periodically to a website. Sounds like a fun project, good luck! Sander
can we change the radio type to checkbox ?
to control just 1 led
Hi Harold, please see my reply to the question you asked in Part 2 of these video series, hope this helps!
ua-cam.com/video/15X0WvGaVg8/v-deo.html
Thank you for this
My pleasure!
cool project
Thank you!
Sir, I tried to do but when I decrease intensity in the webserver the led increase light intensity, also when I move turn on each led at a time in a webserver, only one led turn off and others 2 remain light on, when I change polarity all led's turn off, no led turn on. I don't know where I wrong.
Did you download the final code, or did you code along? It is a bit tricky to figure out why your code is behaving the way it is, but if you download the final code it really should behave the way I show in the video.
thank you! Sir, I have done what you told me, it done well!
HI! Thank you for sharing this useful video! Can you make a video about how to not hardcording in arduino IDE but connect to home router by entering SSID and password on Phone and connect to wifi successfully? I really wonder how to do so.
This is actually not very straightforward. One could first configure the ESP32 as local hot spot and then try to re-configure it to connect to the router, but that will be tricky to program. I think the easiest solution for your problem is to connect with Bluetooth from your phone to the Arduino. That will require a simple app on the phone so that WiFi can be configured. See this video series on how to make such an app:
ua-cam.com/video/aM2ktMKAunw/v-deo.html
Note that this solution works only on Android for the moment as the MIT App Inventor serial Bluetooth interface is (at the time of writing) not working on IOS.
The HTML file in the Final code folder is not correct and does not match the embedded HTML in the code file.
Thank you very much for your post! I checked and indeed did not update the HTML file when uploading the final code. I have just updated it. Hope it works now for you 👍
Thanks for the video. Can you please do EsP32 Blink over internet from a web address?
Well, in essence I show in part 2 and part 3 how you can control your ESP32 through a browser interface. Making this available on the web will require you to open a port on your router. This will mean you will have to have a lot of security measures in place not to be hacked. I personally only use my ESP32 on my local network and would recommend you to have a professional server with two IP domains as gateway -> one domain to interface with the web and one local network to interface with your ESP32. I would not recommend you to put an ESP32 on the web directly.
@mothunderz I used "caddy" which is a server as a reverse proxy to my esp32 using your code. I had to change one line in the html file that creates the socket so that it is uses wss instead of ws and had to open a port on my router, but all traffic on that port goes to caddy so it is protected by a certificate. Caddy provides a secure connection to between it and the internet. Also caddy provides basic authorization so anyone accessing the site has to present a username and password to access the site. I had to get a domain name for all this to work.
Hello, how would you implement SPIFFS to your code? Cheers, Patrick
On another example the guy used this code:
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html", String(), false, processor);
});
Can I use that on this case? What would I need to change. I've heard that AsyncWebServer is a good option too. What do you think about that?
Hi Patrick, pls see part 4 of the series. I add SPIFFS there:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
And indeed, in part 4 I switch to AsyncWebServer as well as it is the better option when you use SPIFFS.
Good luck with your project,
Sander
@@mothunderz THanks
This project based on local area network or internet based ?
This is based on the local area network - no internet needed
I have a question suppose i connect esp32 to my mobile hotspot can i be able to access web page to the same device . please can anyone ans
?
I have not tried this and strongly advice not to use esp32s directly on the internet. Best is to use a computer based gateway in between.
Me gusta.
Un saludo
muchas gracias, apreciado
I dont know html code how can i understan that ?? Thanks
I would advice some basic HTML tutorials. This is required for setting up a webbrowser. Regards
hi change server.send(200, "text\html", webpage); to server.send(200, "text/html", webpage); fixing for ie & edge
Thank you very much for this feedback I added the change in the final code.
All the other files work but the led one will not show up in my wifi
The webserver in part 2 is exactly the same as that of part 3, so if part 2 works, then part 3 should work as well. Hope you manage to find the root cause...
@@mothunderz I am thinking that to access outside of local network, there needs to be a CA with the websockets handshake, etc....
Playing around with the JS, when using var led_0=document.getElementById('ID_LED_0'); Then using led_0 in place of document.getElementByID... in the code it breaks the javascript and the leds can not be controlled. I thought that was a valid thing to do.
Edit: started working using the variable for some reason so you can disregard my comment.
Hi Joseph, thank you for your feedback. Glad that you got it working. Yes, it should be a valid thing to work with variables that way. The one thing I would like to mention is that in this implementation the complete web page is added as a single string to the Arduino code. This is less ideal as you for instance cannot use the " symbol without escaping it. Please have a look at part 4 of this series where I show a better way of uploading the HTML code to the Arduino:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
This can really get your program to a next level. Good luck with your project! Sander
It seems a little faster to put the string with the code. I have done it the other way also. One question. The project will not build if a default case is added to the switch statement. The error is "src/main.cpp: In function 'void webSocketEvent(byte, WStype_t, uint8_t*, size_t)':
src/main.cpp:201:3: error: jump to case label [-fpermissive]
default:
I am not asking you to solve it but letting you know. I am trying to extend the program a bit for some other things.
I have not tried myself to add a default case, but I would advise not to do that at all. Multiple web browsers can be connected to one ESP and as such when connecting the Javascript does not know whether or not the default is correct or not. A very simple implementation is to have the ESP send the current switch state to the client as soon as they connect. In the ESP code you can do this where it says:
case WStype_connected:
That way all clients will show the same data. Good luck with your project!
good video, thank you. but not really good javascript - especially led_selected, led_intencity callbacks - those shouldn't rely on if there smthg else on the page is checked, just needed to get current element clicked (changed) from incoming event - i.e. if there will be a hundred of leds - would you suggest to write hundred of if..else? - it looks completely wrong, isn't it? if you remove some of LEDs (some of radiobutton) your callback will die with error. it shouldn't be like this.
led_intencity shold be listened by on-change (on-input) and get value directrly from its event instead of getting it on the page by some DOM selector or somewhere else - opposite and simple, right? and here's wrong string comparing in javascript.
in the sketch there's also a lot of usless conditions - i.e. why just not to call that sendJson(String(l_type), String(l_value)), if needed - in extreme case just check previously if type matches some requirements - single optional condition. but there just code duplication has been written with hardcoded type manually - that looks wrong. there's shouldn't be any of such condition in purpose of scaling and increasing amount of message types. the reason why - especially you showed it in "LED_select" typo case.
another thing - it does matter what resistor value needs to be taken)) it depends on the supply voltage and voltage drop across the diode and its working current, so, in your case smthg around 100 should be fine )) in other case 200 will be not enough ))
but, anyway, described case of websocket application really helpful!
Sorry for my very slow reply, it has been very busy at work lately. Thank you for your comments! I indeed dont use Javascipt a lot and the focus for me was here on the Webserver and Arduino. Nonetheless, I agree I should redo the Javascript code. If you have re-written this, I would really appreciate an email with your version (you can reach me at my channel name @gmail.com).
As for the LEDs -> we use them in this example from a digital port of the ESP. Regardless of the power supply, the ESP will have 3.3V on the digital pins, right? Then 100 Ohms should be fine. Or am I missing something here?
Once more, really appreciate your feedback, and apologies for the delay in my reply...
I have downloaded it and unlike the same series of tutorials, this thing does NOT work.
Hi Vladimir, thank you for your feedback. Quick question: have you tried the code on an ESP32? If so, which type of ESP did you use? Thank you, Sander