Servidor Web con Micropython

Publicado: 30 septiembre 2021
Categoría: Proyectos
Etiquetas: ESP32, MicroPython, Servidor Web

Servidor Web con MicroPython

Para este proyecto de Servidor Web con MicroPython se utilizó la Placa ESP32, la cual incorpora un módulo Wi-Fi, esto es de gran utilidad para acceder al servidor web desde otro dispositivo conectado a la misma red local (LAN).

En el servidor web (ESP32) se a almacenado una pequeña pagina web la cual puede controlar el estado lógico de dos Pines de la Placa ESP32, a las cuales se les ha conectado un Led para controlar el encendido y apagado de los mismos, aunque se le puede adicionar un transistor o un modulo relé para controlar cargas de mayor potencia remotamente desde otro dispositivo.

Materiales

1x Placa ESP32 con micropython.
3x Resistor de 330 Ohm.
3x Diodo emisor de luz.
2x Protoboard.
Cables de conexión.

Circuito

servidor web micropython — **Figura 1:** Circuito con la Placa ESP32.

Los componentes se debe conectar de la siguiente manera:

El Pin G0 de la placa va conectado a un extremo del resistor, el otro extremo se conecta al Cátodo (Pin Largo) del Led, el Ánodo (Pin Corto) se conecta a GND.
El Pin G16 de la placa va conectado a un extremo del resistor, el otro extremo se conecta al Cátodo (Pin Largo) del Led, el Ánodo (Pin Corto) se conecta a GND.
El Pin G5 de la placa va conectado a un extremo del resistor, el otro extremo se conecta al Cátodo (Pin Largo) del Led, el Ánodo (Pin Corto) se conecta a GND.

Sketch en MicroPython

Versión 1 (sin ajax)

'''
 * LED control through a Web server
 *
 * Name = Web Server - Led Control
 * Version = 2.0.0
 * Update Date = 10/10/2023
 * Author = Jhonatan Lamina
 * e-mail = [email protected]
 * Web = www.jhonatanlamina.com
 *
'''

from machine import Pin, reset
import network
import socket
import time

#Disable debug output
import esp
esp.osdebug(None)

#It reclaims the memory occupied by objects that are not necessary for the program
import gc
gc.collect()

#WiFi Connection
#Replace the SSID and KEY data with those of your Wi-Fi network
ssid = 'WiFi SSID'
key = 'WiFi Password'
indicator = Pin(0, Pin.OUT)
wlan = network.WLAN(network.STA_IF)
if not wlan.isconnected():
    wlan.active(True)
    wlan.connect(ssid, key)
    print('Connecting to: %s' % ssid)
    timeout = time.ticks_ms()
    while not wlan.isconnected():
        indicator.on()
        time.sleep(0.15)
        indicator.off()
        time.sleep(0.15)
        if (time.ticks_diff (time.ticks_ms(), timeout) > 10000):
            break
    if wlan.isconnected():
        indicator.on()
        print('Successful connection to: %s' % ssid)
        print('IP: %s\nSUBNET: %s\nGATEWAY: %s\nDNS: %s' % wlan.ifconfig()[0:4])
    else:
        indicator.off()
        wlan.active(False)
        print('Failed to connect to: %s' % ssid)
else:
    indicator.on()
    print('Connected\nIP: %s\nSUBNET: %s\nGATEWAY: %s\nDNS: %s' % wlan.ifconfig()[0:4])

#Output Pin
output1 = Pin(5, Pin.OUT)
output2 = Pin(16, Pin.OUT)

#Web Page
def web_page():  
    html = """
<!DOCTYPE html>
<html>
<head>
    <title>MicroPython Web Server</title>
    <link rel="shortcut icon" href="https://raw.githubusercontent.com/jhonatan-lamina/web-images/main/icon-snake.png">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
	    *{
		padding: 0px; margin: 0px;
		}
		.home{
			padding: 0px 0px 10px 0px; background-color: #ffffff;
		}
		.nav{
			box-sizing: border-box; display: inline-block;
			padding: 10px 0px 10px 0px; background-color:#063d6d;
			width: 100%; height: auto;
		}
		.control{
			box-sizing: border-box; display: inline-block;
			padding: 0px 0px 15px 0px; background-color: #cccccc;
			border: 4px solid #063d6d; border-radius: 20px;
			width: auto; height: auto; margin: 30px;
		}
		.myline {
		  border: 2px solid #063d6d;
		}
		#t1{
			font-family: Helvetica; font-weight: bold;
			text-align: center; font-size: 50px; color: white;
		}
		#t2{
			font-family: Helvetica; font-weight: bold;
			text-align: center; font-size: 20px; color: white;
		}
		#t3{
			font-family: Helvetica; font-weight: bold;
			font-size: 30px; color: #063d6d;
		}
		#imag{
			width: 200px; height: 200px; padding: 25px;
		}
		#on{
			border: 4px solid green; border-radius: 20px;
			background-color:white; color: green;
			font-weight: bold; font-size: 20px;
			width: 150px; height: 50px; cursor:pointer; 
		}
		#off{
			border: 4px solid red; border-radius: 20px;
			background-color:white; color: red;
			font-weight: bold; font-size: 20px;
			width: 150px; height: 50px; cursor:pointer; 
		}
  	</style>
</head>
<body>
	<div class='nav'>
		<h1 id='t1'>MicroPyton Web Server</h1>
		<p id='t2'>For more information visit <a id='t2' href="http://jhonatanlamina.local" target="_blank" title="Go to www.jhonatanlamina.com">www.jhonatanlamina.com</a></p>
	</div>
	<div class="home">
		<center>
		<div class="control">
			<img id="imag" src="https://raw.githubusercontent.com/jhonatan-lamina/web-images/main/animated-lamp.gif" alt="img">
			<hr class="myline"><br /> &ensp;
			<button id='on' type="button" onclick="window.location.href='/?control1=on'">ON</button> &ensp;
			<button id='off' type="button" onclick="window.location.href='/?control1=off'">OFF</button> &ensp;
		</div>
		<div class="control">
			<img id="imag" src="https://raw.githubusercontent.com/jhonatan-lamina/web-images/main/animated-lamp.gif" alt="img">
			<hr class="myline"><br /> &ensp;
			<button id='on' type="button" onclick="window.location.href='/?control2=on'">ON</button> &ensp;
			<button id='off' type="button" onclick="window.location.href='/?control2=off'">OFF</button> &ensp;
		</div>
		</center>
	</div>
</body>
</html>
"""
    return html

#Socket Configuration
try:
    tcp_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    tcp_socket.bind(('', 80))
    tcp_socket.listen(5)
    time.sleep(1)
    print('Successful socket configuration\n')
except OSError as e:
    print('Failed to socket configuration. Rebooting...\n')
    time.sleep(3)
    reset()
print('Ready...!\n********************************\n')

while True:
    try:
        if gc.mem_free() < 102000:
            gc.collect()
        conn, addr = tcp_socket.accept()
        conn.settimeout(3.0)
        print('New connection from: %s' % str(addr[0]))
        request = conn.recv(1024)
        conn.settimeout(None)
        request = str(request)
        #print('Request:  %s' % request)
        if request.find('/?control1=on') == 6:
            print('OUTPUT1: ON')
            output1.value(1)
        if request.find('/?control1=off') == 6:
            print('OUTPUT1: OFF')
            output1.value(0)
        if request.find('/?control2=on') == 6:
            print('OUTPUT2: ON')
            output2.value(1)
        if request.find('/?control2=off') == 6:
            print('OUTPUT2: OFF')
            output2.value(0)
        conn.send('HTTP/1.1 200 OK\n')
        conn.send('Content-Type: text/html\n')
        conn.send('Connection: close\n\n')
        conn.sendall(web_page())
        conn.close()
    except OSError as e:
        conn.close()
    time.sleep(0.1)

Versión 2 (con ajax)

✅ Para poder obtener el Sketch en Micropython de la Versión con Ajax da clic en Comprar Ahora, se te redirigirá a la Tienda. ⭐ Lo recaudado es empleado en el desarrollo de nuevos tutoriales y proyectos. Gracias por todo tu apoyo y colaboración.

Servidor Web con MicroPython

Comprar Ahora

¿Cómo funciona el Sketch?

Antes de ejecutar el sketch debes reemplazar los datos de la conexión Wi-Fi, para que la Placa ESP32 pueda conectarse a tu router. También puedes utilizar el Módulo Wireless que he desarrollado, el mismo que es útil para establecer una correcta conexión Wi-Fi. Para saber cómo instalar dicho módulo revisa: Conectarse a una red WiFi con MicroPython.

El Sketch funciona de la siguiente manera:

Al energizar la placa, ésta intenta conectarse a la Red WiFi configurada, al momento de que se establezca la conexión el Led permanecerá encendido.
Posterior a esto, en la consola se visualizará los datos de conexión, donde debe copiar en el portapapeles la dirección IP, la cual varía dependiendo de la configuración de su router. A continuación se muestra un ejemplo:

La dirección IP que copió anteriormente debe escribirla o pegarla en un navegador web, e ingresar a la misma.
Una vez realizado lo anterior se visualizará la pagina web, donde ya puede interactuar con la placa ESP32, para encender o apagar los Leds.

Para la demostración, mire el siguiente video:

Tutoriales

2 comentarios en «Servidor Web con Micropython»

Leopoldo Villa

02/08/2022 a las 11:30 AM

Saludos, Gracias por compartir este interesante ejemplo de Servidor Web con Python.
Me permito al mismo tiempo hacer una pregunta. Puedo correr el programa y me manda los datos de IP, Mascara de red, Gateway y DSN, Así mismo copio la IP y la pego en la barra de dirección del navegador Chrome, pero…. NO ME ABRE LA PAGINA QUE DEBIERA ABRIR ! Tan solo me muestra una pagina en blanco del navegador ¿estoy haciendo algo mal?
de antemano agradesco mucho su orientación para esta situación. Gracias !
Responder
- Jhonatan
  
  29/08/2022 a las 11:53 AM
  
  Hola Leopoldo, asegúrate de que en la barra de direcciones la pagina cargue con el protocolo HTTP ya que hay ocasiones donde el navegador intenta cargar con HTTPS, es decir, en la barra de direcciones escribe: http:// seguido de tu dirección ip, ejemplo: http://192.168.1.2
  Si esto no soluciona tu situación, intenta con otro navegador web, para este ejemplo de servidor web se lo probó con el navegador Microsoft Edge.
  Saludos.
  Responder

Servidor Web con Micropython