Build an ESP8266 Web Server with Arduino IDE - Code and Schematics
Вставка
- Опубліковано 4 сер 2024
- For complete project details (schematics + source code), visit ► randomnerdtutorials.com/esp82...
Like my page on Facebook:
/ randomnerdtutorials
Add me on Google+:
plus.google.com/+RuiSantosdotme
Follow me on twitter:
/ ruisantosdotme
Subscribe for more projects like this!
bit.ly/subscribeRNT - Наука та технологія
You can always find the the schematics and source code at ► randomnerdtutorials.com/esp8266-web-server/
Rui Santos. I need help, My router don't give me the ip address and the code is = to your code, naturaly whith my ip en pass, can you help me whith this please. Thank.
thank you so much for making this video, but I want to know why doesn't the esp-01 code doesn't work once you unplug and then reconnect?
i'm unable to install libraly can you give that library link seperatly through git hub
I cant control it from another router
Ayan Bhattacharjee i am pretty new to this but i think the IP address is assigned by the WiFi router, so when you reconnect it can be a different IP address than the original one
I don't think I've ever been this happy to see 2 LED's light up before😁 Thanks!
Worked FIRST TIME, I am truly grateful, I can now ‘play’ with a piece of working code and change it to suit.
Although I have been coding for many years, and have been building Arduino projects for the last 18 months, webservers and IoT scared me, a total black art. You demystified this, and gave me a chance to start on my own IoT projects.
Thank you
Next stage is to add images, to make it look nicer. 👍😀
I know this video is older but..
VERY WELL EXPLAINED! I understood the code mostly but having you go through it in fragments was very much useful! Thank You sir!
so straightforward, clear and EXACTLY what I was looking for!! thank you!
Excellent introduction to using a web server with the ESP8266. Clear and concise as a great starting point for other applications. Thank you!
This is my first projekt with ESP8266 01. IT WORKS! THANK YOU very much. Im so happy!
thank you so much!!!! I tried a lot of other codes and yours was the only one that worked with 4 leds.
Thank you, Rui Santos. It works. You explained very very clear, no need to edit code, work at first time.
High quality tutorial, much appreciated.
Thank to friend Rui Santos for sharing this very well explained tutorial, which worked perfectly on both NodeMCU and ESP8266 01.
Very well explained. Thank you very much
Thanks for a great video, one of the best tutorials on this subject.
It has been running successfully. Thank you
Best tutorial I ever seen. completely useful !!!
Thank you so much for the code and explanation. Very clearly explained
exactly what I am looking for and it works well, many thanks
Thank you very much for your easy explanation.
It's a great program.
And simple and good design CSS
just what I needed! I modified some things to give it my personal touch and it worked very well! Thank you for sharing this!!
You're welcome! I'm glad it worked
nice project
the web interface looks fine
Excelente!!! É simples e eficiente! Muito Obrigado!
Very well explained, thank you!
I would like to know, as the web server, is it possible to add some javascript code to the client.println in order to do additional JS stuff on the data and represent it through the webpage?
Thanks for the explanation on what everything does to build the webpage. Do you have any video showing how I could do text input and output on the webpage and pass it along into variables?
Great tutorial, thank you!
Thank you so much. This video is so well explained and your schematics and codes are flawless. I took your design and added some PhP and javascript. You can now control
the LED from anywhere in the world. All thanks to you.
Please I need the PHP and javascript files I'm trying to do the same but did't work
@@ALasmry707 do you know anything about port forwarding?
Darmin Axel not really I’m a beginner but I have my own hosting and domino that I wanna use for this project. If you can help me with the sample of code that will be appreciated
Do a little research on port forwarding. You need to own a domain to do this. If you do not own a domain, you're going to have to type type your internet iP address in your browser to turn on the lights .
Here go here
darmin.ca/led.php
That's my website. I'm using php to tell my server to connect to my home router and connect to the esp and turn on the lights
@@ALasmry707 ok good , u got your own domain. Um.. lets chat somewhere else.
Rui, in my case I have to change the label of the button, to fit the right state of it (button class).
If I would want to create a button just a few seconds ON or with controlled time ON, what is the best approach? Tks
Excellent, finally got it work, Thanks!!
Great. Nowadays async webservers seem to be more popular, but in this case the traditional webserver works just as well
Thank you so much it was very helpful!
Hey just a question, With what kind of commands can I show a picture, draw(box,line,traingle) or animation commands?
thank you so much
It worked without any hiccups
Big fan of your site, keep up with the good work!
Thank you! I'm glad you find it helpful
It works bro....Great explanation ... Thank you :)
THANK YOU !! This helped me out so much
that was really really good mann
Thank you very much, works well with ESP8266-01 with PlatformIO IDE
Thanks , really good video!😄
Excelent video and well explained, it is what I was looking for.
Thank you for share your knowledge for us.
I subscribe to your channel right now
Many thanks for a great tutorial
this is super cool! great video! is it possible to create dynamic "dashboards" (user interface that shows real-time data on graphs and other interfaces) using this method? or is it just static html?
Very well explained .Thanks
Thank you for this video. Would it be possible for you to create one based on ESP8266 soft access point and how we can connect to it to setup the wifi of the device? Just about all of the videos I've seen on the ESP8266 have you hard code the wifi info into the base code. That's kind of a bummer having to recompile the code to use the device on a different network. Is this covered in your home iot course? Thank you.
muito bom parabéns! simples e funcional.
very good! simple at functionallity
Thank you. It works with ESP8266-01. Program using Arduino. Change GPIO4 to GPIO0 and GPIO5 to GPIO2
ua-cam.com/video/LrNd83p3XTw/v-deo.html
great video 🔥🔥🔥🔥🔥 clear as water
Bom trabalho companheiro! :) Vou tentar usar noções do teu código para meter um daqueles relés integrados com uma ESP-01 - que usam a porta série :)
great tutorial. thanks very much!
Your explanation is exemplary....
Nice one bro! wish i can give more than 0ne thumbs up for this vid tut
Great video!
Funktioniert super sehr gut erklärt
Thanks a lot broo, it worked so perfectly!!
Will the Web Server Arduino work with the iPhone 4S?
Cheers
Muito obrigado! Ajudou-me muito a entender a comunicação por http.
Excelente ,muchas gracias por el aporte!
Very well explained 👍👍
Which is the protocol used to communicate with nodemcu?
Hi
Can you help with the esp8266 in home automation?
I'm using it for home automation and the problem is when it reboots as the power gone, it automatically turns everything on .
I don't need anything to be on state.
Please help with it ?
Thank you was a very usefull tutorial!
Great tutorial!
Thanks a lot for sharing :)
Superb..thanks bro
can it be made accessible from anywhere or only local area network?
thank you Rui ; worked like a charm
you install what version on board esp8266?
can I make this program to work with an other program that has his setup and loop running?
Thanks for this tutorial, how can I add two external pushbuttons to (local) control both leds as well as through the website?
write this before void setup():
int in1=0;
int in2=0;
#define inpin5 1;
#define inpin4 2;
and in the void setup():
pinMode(inpin5,INPUT);
and into the loop:
in1 = DigitalRead(inpin5);
if(in1==HiGH){
digitalWrite(5,HIGH);
}
else
{
digitalWrite(5,LOW);
}
in2 = DigitalRead(inpin4);
if(in2==HiGH){
digitalWrite(4,HIGH);
}
else
{
digitalWrite(4,LOW);
}
(the input pin for the led at the pin4 is at 1 and for the led at the pin 5 is pin1)
Excellent tutorial!!
Thank you!
Hi Rui, the gpio displays off, but the button displays on and vice versa. Can it be changed so that both are on or off? Or it would be better if the gpio status won't be displayed. Also can we change the title instead of ESP8266 can we change it to something else. Thanks.
Excellent!
Thank you
You're welcome! Thanks for watching
Thank you!
Can we comunicate the ESP with a pc connected in a different network?
can we use two different wifi ssid and pass as an option? so if one is not available , esp8266 can connect to other one.
Great vid
Your explain is the better frien, I don't stand very mush the english but, I can stand your explain, thank so mush. From chile thank.
Hi, Rui, this project it's mixable with other one with esp32 cam that you done before? I'm assuming that we can use gpio pins in esp32 for switches and at the same time using the live camera over the webserver. I'm planning to use as a doorbell, without audio. It is feasible?
Tks in advance
yeah dont think he cared
Thank you very much i try it web server.
Hello. Is this connection only on the same network or anywhere in the world?
How to change y-axis of button go up and down or rotate it?
Where did you get the web-server skatch from ?
I just want to say thank u so much.
i just want to read a data from serial monitor (for eg. few numbers which are updating timely), how can i do that, please help
Thank you for this video, but I have a problem which is whenever I open the Serial Monitor after uploading the code nothing appears, can you please help me?
thank you so Much
I like to use it in access point mode, not connecting to my home network.
Is that possible?
Great job!, You could in the future do the same but that the spy is connected to some arduino card and control it through it. Thanks!
Thank you much
verry cool !!!สุดยอดจริงๆครับจะนำไปลองใช้ดูนะครับ
Hi Rui, good night. I'm Marcos (Barueri-Sao Paulo-Brazil) how do I change one of the buttons to momentary? (for use on garage door)
Thank you.
/*********
Rui Santos
Complete project details at randomnerdtutorials.com
*********/
// Load Wi-Fi library
#include
// Replace with your network credentials
const char* ssid = "do you really";
const char* password = "want to know";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";
// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
void setup() {
Serial.begin(9600);
// Initialize the output variables as outputs
pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);
// Set outputs to LOW
digitalWrite(output5, LOW);
digitalWrite(output4, LOW);
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
currentTime = millis();
previousTime = currentTime;
while (client.connected() && currentTime - previousTime = 0) {
Serial.println("GPIO 5 on");
output5State = "on";
digitalWrite(output5, HIGH);
delay(100);
digitalWrite(output5, LOW);
} else if (header.indexOf("GET /5/off") >= 0) {
Serial.println("GPIO 5 off");
output5State = "off";
digitalWrite(output5, LOW);
} else if (header.indexOf("GET /4/on") >= 0) {
Serial.println("GPIO 4 on");
output4State = "on";
digitalWrite(output4, HIGH);
delay(100);
digitalWrite(output4, LOW);
} else if (header.indexOf("GET /4/off") >= 0) {
Serial.println("GPIO 4 off");
output4State = "off";
digitalWrite(output4, LOW);
}
// Display the HTML web page
client.println("");
client.println("");
client.println("");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #77878A;}");
// Web Page Heading
client.println("ESP8266 Web Server");
// Display current state, and ON/OFF buttons for GPIO 5
client.println("GPIO 5 - State " + output5State + "");
// If the output5State is off, it displays the ON button
if (output5State=="off") {
client.println("ON");
} else {
client.println("OFF");
}
// Display current state, and ON/OFF buttons for GPIO 4
client.println("GPIO 4 - State " + output4State + "");
// If the output4State is off, it displays the ON button
if (output4State=="off") {
client.println("ON");
} else {
client.println("OFF");
}
client.println("");
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '
') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
Hello Rui.
Should we switch from get to post method? I mean, get is very likely to be sniffed out.
*Could we change the ip adress ? I saw that you connect to the **192.168.1.132**. Could we change it to another, like "**suprrise.com**" ???*
Спасибо! Все доходчиво расжовано :)
Sorry, this works only if the ESP and the client are connected to the same wifi network??
Olá! Hello! Descobri o canal sem querer. Estava mesmo à procura de um canal deste género! PS: Descobri logo que eras português nos primeiros segundos do vídeo devido ao sotaque. Keep it up ;)
hola amigo
Please help adding the push button and control of the web page and button will also display the status of the lamp on the web whether the status is changed by button or from the web I want it on esp8266
is there a way to make the address to become fixed. so that I will not copy every time I want to connect to my esp8266? thanks for the help!
Hi Rui,
Used your script. Modified it a little bit so it can be a pc case fan controller to give my heating bit more air flow.
But, want to include 2 images, "Ceilingfan48_Off" and "Ceiling48_On"
Adding an "
How do I get the status of a gpio using http get url instead of the post url that’s being used here?
Can we use this information to make our own app with good UI to make it professional?
what if i want to change the function of the button switch to push button.. any help? pls send the code
Can we control it from outside of our home network?