Mensajes a pantalla de placa esp32-s3
Presentación
Este proyecto es el primero de una serie de desarrollos que ire realizando para estudiar las potencialidades y aplicaciones de la Placa de desarrollo ESP32 S3 con pantalla LCD de 1,77 pulgadas BT 2,5dbi WiFi módulo AI Internet de las cosas W5500 ETH N16R8 CH340K tipo C.
El mismo consiste en configurar la placa para escribir un texto en la pantalla que trae incorporada el cual sera enviado desde una página web servida por un servicor instalado en la misma placa al que se accede a traves de una conexión a una red wifi
Materiales
Placa Esp32-S3 con display
Montaje del proyecto en la placa Esp32-S3
Para utilizar la placa Esp32-S3 con MicroPython es necesario flashear primero la misma con el firmware correspondiente. En el caso de este proyecto se utilizo el provisto por la pagina de ESP32 GENERIC S3
Una vez instalado el firmware en la placa utilizando la utilidad que viene provista por el IDE Thonny, o por aquella que ustedes utilicen ademas del firmware quedara grabado en la placa un archivo boot.py que debe ser borrado y en su reemplazo copiar los archivos que se incluyen en el codigo desarrollado a continuacion.
Consideraciones previas
La principal dificultad que se me plateo al iniciar este proyecto fue establecer los pines correspondientes al display que viene incorporado a a la placa, ya que si bien ya habia conectado pantallas a Esp32 siempre lo habia hecho realizando las conexiones personalmente lo que me permitia establecer excatamente que terminal de la placa conectaba a que pin.
En este caso y si bien la encontramos en el Manual de la placa su pinout me llevo algun tiempo y la inapreciable ayuda de Josep Comas del canal de telegram ESP32 8266 S2 S3 C3 RISC-V (ES/EN) para lograr que funcionara la pantalla usando el siguiente pinout:
sck=Pin(18)
mosi=Pin(17)
dc=Pin(16)
rst=Pin(15)
cs=Pin(21)
Ademas fue necesario buscar las librerias necesarias para controlar la pantalla siendo ellas: ST7735.py y sysfont.py para el manejo de caracteres. Ambas librerias deben ser copiadas en la placa una vez flasheada la misma
Código
El codigo se ha escrito en cuatro archivos boot.py, main.py, clase.py y pagina.py.
El archivo boot.py contiene los datos necesarios para la conexión a la red wifi a la que se va a conectar los cuales deben ser agregados en el lugar indicado.
El archivo clase.py contiene dos clases: la clase Conexion que controla todo lo referido a la conexion de la placa a wifi y la clase Pantalla que controlo el manejo de la pantalla.
El archivos main.py contiene la parte principal del programa, administra el servidor web y la funcion que muestra los mensajes en la pantalla , el nombre elegido para el primero es a efectos que el programa se inicie automaticamente.
Finalmente el archivo pagina.py contiene la página html que nos permite enviar mensajes a la pantalla.
boot.py
from clase import Pantalla, Conexion
pantalla = Pantalla()
pantalla.escribir("Iniciando...")
red = "nombre de la red wifi"
clave = "clave de la red wifi"
wifi = Conexion(red, clave)
wifi.conectar()
if wifi.esperar():
pantalla.escribir("Conexión OK")
else:
pantalla.escribir("Error de conexión")
main.py
try:
import usocket as socket
except:
import socket
import pagina
from clase import Pantalla
servidor = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
servidor.bind(('', 80))
servidor.listen(5)
def mostrar_mensaje(cadena):
clave = "mensaje="
inicio = cadena.find(clave)
if inicio != -1:
texto =(cadena[inicio + len(clave):])
mensaje = texto.replace("+", " ")
pantalla.escribir(mensaje)
while True:
conexion, addr = servidor.accept()
print('Conexion de %s' % str(addr))
pantalla.escribir(f'Conexion de {addr[0]}')
recibo = conexion.recv(1024)
recibo = str(recibo)
print('Contenido = %s' % recibo)
mostrar_mensaje(recibo)
envio = pagina.inicial()
conexion.send('HTTP/1.1 200 OK\n')
conexion.send('Content-Type: text/html\n')
conexion.send('Connection: close\n\n')
conexion.sendall(envio)
conexion.close()
clase.py
from time import sleep
from ST7735 import TFT
from sysfont import sysfont
from machine import SPI, Pin
import network
class Conexion:
def __init__(self, red, clave):
network.WLAN(network.AP_IF).active(False) # Deshabilitar AP
self.wlan = network.WLAN(network.STA_IF)
self.wlan.active(True)
self.red = red
self.clave = clave
def conectar(self):
if not self.wlan.isconnected():
print(f"Conectando a {self.red}...")
self.wlan.connect(self.red, self.clave)
def status(self):
return self.wlan.ifconfig() if self.wlan.isconnected() else None
def esperar(self, tiempo_max=30):
"""Espera hasta conectar o agota el tiempo (segundos)"""
while tiempo_max > 0:
if self.wlan.isconnected():
print(f"Conectado a {self.red}")
print(f"IP: {self.wlan.ifconfig()[0]}")
return True
print("Esperando conexión...")
sleep(5)
tiempo_max -= 5
print("Tiempo agotado. No se pudo conectar.")
return False
def scan(self):
return self.wlan.scan() # Escanea redes disponibles
class Pantalla:
def __init__(self):
self.spi = SPI(2, baudrate=20000000, polarity=0, phase=0, sck=Pin(18), mosi=Pin(17))
self.tft = TFT(self.spi, 16, 15, 21)
self.tft.initr()
self.tft.rgb(True)
self.backlight = Pin(15, Pin.OUT) # Control del backlight
self.backlight.value(1) # Encender backlight
def escribir(self, texto):
self.tft.fill(TFT.BLACK)
self.tft.text((10, 10), texto, TFT.WHITE, sysfont, 1.5)
sleep(1)
def apagar(self):
self.tft.fill(TFT.BLACK) # Borra la pantalla
self.backlight.value(0) # Apagar la retroiluminación
pagina.py
def inicial():
html = """<html>
<head>
<title>Servidor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<style>
html{
font-family: Helvetica;
display:inline-block;
margin: 0px auto;
text-align: center;
}
h1{
color: #0F3376;
padding: 2vh;
}
p{
font-size: 1.5rem;
}
.button{
display: inline-block;
background-color: #e7bd3b;
border: none;
border-radius: 4px;
color: white;
padding: 16px 40px;
text-decoration: none;
font-size: 30px;
margin: 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Servidor Esp32-S3</h1>
<form action="" method="post">
<label for="mensaje">Mensaje:</label>
<input type="text" id="mensaje" name="mensaje" required>
<button type="submit">Enviar</button>
</form>
</body>
</html>"""
return html
Consideraciones finales
Una vez copiadas las librerias y los archivos de programacion la Esp32-S3 debera verse asi:.
Si todo esta correcto al reiniciar la placa aparecera en la pantalla el mensaje "Iniciando...", luego de unos instantes el mensaje Conexion OK.
Hay puden ingresar a traves del navegador a la IP que la red le haya asignado a nuestra Esp32-S3 y nos aparecerá la siguiente pagina:
Escribiendo un mensaje en el campo correspondiente y haciendo clic en el boton Enviar el mesaje aparecera en la pantalla de la Esp32-S3.