Hardware components | ||||||
 |
| × | 1 | |||
Software apps and online services | ||||||
 |
| |||||
WebServer with ESP32 /micropython
Hello everyone, today I present to you a project that is fairly easy to do but above all very interesting to incorporate it into all the projects that you would do in the future. So let's get to the explanations.
First of all we will see the objects we should use, well it's not complicated in this project we just have to have an ESP32, but if you have an ESP8266 this will still work but pay attention to the compatibility of the code: )
In this example it's simply 3 buttons that do nothing, if you want to ask me how to interact with the ESP32 from a Web server, don't hesitate to ask me in comments and I will write an article on this subject.
First of all in your code you have to import it:
import socket
Following that assign you a variable to be able to use the socket module at your own freedom in this example I would use the variable "s":
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.bind(('',80))
s.listen(5)
The last two lines of code start the server in port 80 of ESP32, and just leave 5 different devices to connect to the server. Yes that 5, you will not be able to make an international WebSite with an ESP32 :)
Following that we will have to code our HTML page because otherwise we will only have a blank page or even worse, no page, we do that immediately:
def web_page():
html_page = """
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<center><h2>ESP32 Web Server</h2></center>
<form>
<button type='submit' name="TEXTE" value='1'> Joyeux noel </button>
<button type='submit' name="TEXTE" value='0'> Feliz Navidad </button>
<button type='submit' name="TEXTE" value='2'> Happy Birthday </button>
</form>
</center>
</body>
</html>
"""
return html_page
This is the HTML from the webpage you need to embed as it is in your python code, and yes it is compatible don't worry. Feel free to modify it as you want the "name" and "value" part you can delete them because they are not useful in this case but I would use them to display in the command page in the ESP32, you will see.
There you have the website, well all this is not enough you have to start a website, and how do you do it? I show you immediately:
while True:
# Socket accept()
conn, addr = s.accept()
print("Got connection from %s" % str(addr))
# Socket receive()
request=conn.recv(1024)
print("")
print("")
print("Content %s" % str(request))
# Socket send()
request = str(request)
texte1 = request.find('/?TEXTE=1')
texte2 = request.find('/?TEXTE=0')
texte3 = request.find('/?TEXTE=2')
if texte1 == 6:
print('Texte 1 en marche')
print(str(texte1))
elif texte2 == 6:
print('Texte 2 en marche')
print(str(texte2))
elif texte3 == 6:
print('Texte 2 en marche')
print(str(texte2))
response = web_page()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
# Socket close()
conn.close()
It's pretty abstract as a code I know, we describe it together. In general this code creates a while loop which continuously sends the web page to our browser, when we click on a button, we will send a "value" evening 1.0 or 2 this will be messages that will be displayed in the page of orders of our ESP32, if you have not understood anything, do not hesitate to ask questions in the comments.
Well here you have a website that works perfectly and we will see in future articles how this can be integrated into all our projects.I wish you all a good day. :)
Comments
Please log in or sign up to comment.