Firtec - ESP32 Web Server

Con MicroPython podemos diseñar fácilmente un sistema que verifique las variables atmosféricas y reporte estos datos en un sitio web embebido en el propio sistema electrónico.
Se usará para este ejemplo el controlador ESP32 y el sensor BME280 que tiene capacidad para medir la temperatura, presión y humedad ambiente.

Estos datos serán mostrados en un sitio web contenido en la propia memoria FLASH del sistema, para que el sitio web interactúe con el sensor usaremos un código Ajax embebido en el código HTML de la propia página.

El programa crea un socket TCP que “escucha” en el puerto 80 a la espera de que un navegador se conecte. Cuando el navegador conecta con ESP32 el socket se identifica enviando el encabezado de un documento html y seguidamente envía la página web.

Una vez que la página a sido cargada por el navegador el JavaScript Ajax toma el control y comienza a interrogar al sensor BME280 para que reporte los datos.
El uso de Ajax evita tener que cargar constantemente toda la página cada vez que hay nuevos datos y solo se actualizan los campos correspondientes a los propios datos.

# ================================================================
# - Descripción  : Programa ejemplo con ESP32 + BME280.
# - Target       : ESP32 (Tensilica Xtensa LX6 Dual Core 240 Mhz)
# - ToolChain    : Micropython + Thonny IDE
# - 
# - www.firtec.com.ar
# =================================================================
import machine
from time import sleep
import sys
import BME280
 
import gc
gc.collect()    # Limpiar posible basura en memoria
 
sda = machine.Pin(21)  # GP_21
scl = machine.Pin(22)  # GP_22
 
i2c = machine.I2C(0, sda=sda, scl=scl, freq=100000)
led = machine.Pin(5,machine.Pin.OUT)
led.off()
 
import network
import utime
 
sta = network.WLAN(network.STA_IF)
if not sta.isconnected():
  print('Conectando con la red WiFi...')
  sta.active(True)
  #--------- Datos de la red WiFi --------
  sta.connect('Firtec_lab1', 'aba735')
  
  while not sta.isconnected():
    pass
print("Ip asignada:",sta.ifconfig()[0])
 
import socket
#------------ Crea un socket TCP (SOCK_STREAM) ---------------
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('',80)) # Desde cualquier IP se escucha en el puerto 80
s.listen(5)     # Reconoce solo 5 socket a la vez
 
 
# ******************************************************
# Esta función es la encargada de crear la página web
#*******************************************************
def web_page():
    html_page = """
<!DOCTYPE html>  
 <html>  
  <head>  
  <meta name='viewport' content='width=device-width, initial-scale=1.0'/>  
  <script>   
   var AjaxSolicitud = new XMLHttpRequest();  
   
   function CargarAjax(ajaxURL)  
   {  
    AjaxSolicitud.open('GET',ajaxURL,true);  
    AjaxSolicitud.onreadystatechange = function()  
    {  
     if(AjaxSolicitud.readyState == 4 && AjaxSolicitud.status==200)  
     {  
      var AjaxRespuesta = AjaxSolicitud.responseText;  
      var tmpArray = AjaxRespuesta.split("|");  
      document.getElementById('temp').innerHTML = tmpArray[0];  
      document.getElementById('hum').innerHTML = tmpArray[1];
      document.getElementById('pres').innerHTML = tmpArray[2];
     }  
    }  
    AjaxSolicitud.send();  
   }  
     
   function leerBME280()   
   {   
     CargarAjax('leer_sensor');   
   }  
     
   setInterval(leerBME280, 2000);  
    
  </script>   
  <title>Micropython & ESP32</title>
  </head>    
  <body style=background:#F5DEB3>
  <title>Micropython & ESP32</title>
   <center>  
   <div id='main'>  
    <h1>MicroPython con ESP32 + Ajax</h1>  
    <h2>Web server con ESP32</h2>  
    <div id='content'>   
     <p>Temperatura: <strong><span id='temp'>--.-</span></strong></p>  
     <p>Humedad: <strong><span id='hum'>--.-</span></strong></p>
     <p>Presion: <strong><span id='pres'>--.-</span></strong></p> 
    </div>  
   </div>
    <br>
      <hr Size=7 noshade/><H4><font color='black'>by. Firtec Argentina </H4> 
   </center>  
  </body>  
 </html>
"""
    return html_page
 
while True:
    if gc.mem_free() < 102000:  # Si la memoria es menos de 102000
      gc.collect()              # Limpiar basura 
    bme = BME280.BME280(i2c=i2c)
    temp = bme.temperature
    hum = bme.humidity
    pres = bme.pressure
    conexion, addr = s.accept()
    mensaje = conexion.recv(1024)
    mensaje = str(mensaje)
    consulta = mensaje.find('/leer_sensor')
    if consulta == 6:
        temp = bme.temperature
        hum = bme.humidity
        pres = bme.pressure
        respuesta = temp + "|"+ hum + "|"+ pres
        led.value(not led.value())
    else:
       respuesta = web_page()    
  
    conexion.send('HTTP/1.1 200 OK\n')
    conexion.send('Content-Type: text/html\n')
    conexion.send('Connection: close\n\n')
    conexion.sendall(respuesta)
    conexion.close()

El sitio web es simplemente una cadena de texto con un formato determinado que el propio navegador decodifica para que se vea de la siguiente forma.

También es el navegador el que una vez que la página este cargada ejecuta el código Ajax. Para la programación y también como entorno de trabajo para el ESP32 se ha usado Thonny.

Thonny es de uso libre y con el podemos no solo escribir el programa completo sino también programar ESP32 o Raspberry Pico, ARM Cortex M4 mas una gran variedad de dispositivos compatibles con MicroPython.
También podríamos tener un sitio web embebido y controlar el estado de pines del ESP32 o cualquier sistema en línea (luces, motores, portones, etc).

Con MicroPython las posibilidades son casi infinitas para poder diseñar una gran variedad de dispositivos con gran control del hardware pero también separando al programador de las complicaciones electrónicas internas como registros banderas y estados de máquina esto gracias a los módulos y bibliotecas que hereda del propio Python 3.

Material extraído de uno de nuestros libros para MicroPython.

Electrónica y programación para Microcontroladores.

Libros técnicos para electrónica programable.

ESP32 Web Server