How to add a Web Setup Portal to ESP8266 Projects (Soft Access Point)
Vložit
- čas přidán 1. 05. 2021
- A quick tutorial on how to use ESP8266 Access Point to server a web page to configure the device: an example and walk through. Arduino and HTML code provided.
GET THE COMPONENTS
=====================
╚═ Wemos d1 mini (4M version)
■ from MrDIY store - store.mrdiy.ca/p/wemos-d1-mini
■ from Amazon/AliExpress - store.mrdiy.ca/p/wemos-d1-min...
BIN file
=======
gitlab.com/MrDIYca/code-sampl...
Music: 'Sunset Dream' by Cheel - Věda a technologie
Very elegant code, more clever than the other related codes! Congrats!
This video is a fantastic guide for anyone looking to enhance their ESP8266 projects with a Web Setup Portal using a Soft Access Point. The clear explanations and step-by-step instructions made it so easy for me to implement this feature in my own projects. Thanks for sharing this valuable knowledge.
perfect. short and to the point. great code walkthrough. I would think most people may want to choose whether to start in AP or client mode based on whether they are able to get any information from the EEPROM (basically test if it was "factory" reset or not) and then give the user some way to erase the EEPROM when they want to go back to AP mode and setup again for a different wifi. Great job!
Thank you. Yes, that is a good point. Alternative ways: link the AP to a pin status or do what Tasmota does by erasing the EEPROM when the device is reset multiple times in a short time period.
You could also just start with AP + Station mode. Some chips support it.
Dude this is very cool, concise I'm looking forward for more
Awesome, thank you!
Thank you! Clear and to the point. I appreciate you taking the time to make this video.
An important tip for beginners using Arduino R3 Wifi, like me, after programming the ESP8266, to make the project work, you need to disconnect the power, turn dip switch 7 to OFF and connect the power again.
Woo cool very nice, it's very beautiful and educating.
One more update just add one push button to create access point while pressing it around 5 sec and once ssid and psd get make one flage true and store it eeprom, in setup read that flage from eeprom if it's true then try to connect that wifi else in loop just keep read push buton status. I just thought these things
Very nice video. Easy and informative
Awesome tutorial mate 👏🏼👏🏼👏🏼👏🏼👏🏼
Here is just an small tip that it’s more than deserved
Thank you very much!
Thanks, I will definitely try this 😊
Very useful, thank you!
Justo lo que buscaba, pero aun me falta entenderlo bien , sería posible un video para reforzar un poco más el uso de formularios en web y el modo post en el esp8266 .. muchas gracias amigo.
Thanks for the tutorial.. it's really helpful.. I'm new to Arduino and stuffs.. is there anyway to clear the data stored in the EEPROM?
It would be great if there was a way to use click to connect feature (for example in android or windows instead of the local ip address)
Is that possible ?
Thanks
Hello! Thank you very much for the code. Perfect solution for me. But the way I access the server is different. Instead of 30 attempts, I use a button on my device. If the device is turned on with this button pressed, it goes into Access Point mode. I keep an LED blinking to indicate this mode. If the button is not pressed, the normal setup follows. Before, I had two wifi networks configured, one to join if the button was pressed and another if it was not pressed. But I knew I nedded a better solution. Now it's perfect. Thank you very much.
Awesome video! Definatly going to make us of this for upcoming projects. Is there anyway to automatically open the web page when the user connects to the AP? Rather than having to go and enter the IP?
Yes
Awesome
Hey, forgive me, I am just a beginner. I have created a detailed arduino code that monitors a multitude of things (temperature, humidity, etc.). I am trying to display that data to a webpage. I have both a ESP8266 NodeMCU chip and just normal ESP12E chips. I am so lost as to what flashing the chips mean and how to get someone connected to the chip and to access the data. Any help for me?
Thanks for a nice tutorial! I am looking to expand the setup portal to also make it possible to configure MQTT parameters at the same time. In order to do that, I need to get the HTTP-form info with the MQTT server address as uint8_t data type. Any idea on how that could be achieved?
You are welcome. An extra MQTT field should be the same as the ssid and password fields - just add another input field in the html and save it on the backend. Hope that helps.
how would you turn this into a captive portal? great video.
How to save the html file . What to write in "href" and how can I save the data in json file formate?
thank you for this tuts sir
You are welcome
OMG... This has to be it... It looks so easy now...
Thanks for uploading this video. It was very helpful, but I had a little problem while implementing this in my project. Turns out that inputs must have "name" attribute to pass them from form
ex.
when I had names of the inputs only in the "id" attribute, none of them got passed.
I hope that if anyone has same problem, my comment will be helpful :)
Glad it helped! My source code, l linked to, does have the 'name' attribute. Where are you not seeing 'name'?
I tried it together with an Arduino Uno but I get
"A fatal esptool.py error occurred: Failed to connect to ESP8266: Timed out waiting for packet header"
when trying to upload the script.
Is there a guide on how to connect the ESP8266 correctly?
I connected it like this:
TX ESP8266 => TX Arduino
RX ESP8266 => RX Arduino
3.3V ESP8266 => 3.3V Arduino
EN ESP8266 => 3.3V Arduino
GND ESP8266 => GND Arduino
Reset ESP8266 => GND Arduino
Great workdone
how to read the password and ssid on the eeprom?
how to use it with html file stored in littleFS not as string?
Yes, you can.
One question - how did you know to navigate to 192.168.4.1? Can one tailor that to something else - or is it always that ip? Thanks!
192.168.4.1 is just the default. You can always change it using softAPConfig()
Is it better to automatically reboot the esp after the credentials being stored
You can do without but it is much easier to just reboot yes.
@@MrDIYca thxx ❤
pls make a video on how to add custom parameters like blynk auth token, sinric API key .....will be very helpful....thank you
adding a new field ( like an api key, auth token ..etc) is no different that the SSID and password fields - simply add an extra one :)
@@MrDIYca tried it but i created a option on the web page for auth token ......but idk how you are getting the data like ssid and pass in the backend .....will be very useful if you upload a vid regarding this topic .....went through many vids on youtube regarding this topic ....all I see ppl asking how to add custom parameters in the comments......will be very helpful for us if post a vid on this
Would this work with ESP-01s?
Yes
I NEED TO SERVE A MEDIA STREAMING WEB PAGE USING AN ESP8266 CAPTIVE PORTAL. CONNECTION SHOULD AUTOMATICALLY REDIRECT USER TO MEDIA PAGE OFFLINE. THANKS FOR THE TUTORIAL...
I am looking for the same for automatic redirection
Please add static ip to node mcu in this code
You might want to check this tutorial - randomnerdtutorials.com/esp8266-nodemcu-static-fixed-ip-address-arduino/
what setsup the ip adress
192.168.4.1
Sir I cannot connect setup portal, what is the default password?
It is in the code: "mrdiy.ca"
which is the serial frecuency??
The code doesn't use Serial
@@MrDIYca oh hi. Is there any way possible to show the ssid and password? Maybe a EEPROM.Read? I need to serial.print that
@@MrDIYca thanks, I do love your videos