En este artículo de ESP32, exploraremos cómo podemos conectar una placa ESP32 con un punto de acceso y diseñar su servidor web. Usando ese servidor web, controlaremos los LED y los aparatos de CA con la ayuda de un módulo de relé.
Contenido:
- Servidor web ESP32
- Cómo crear un servidor web ESP32 usando Arduino IDE
- Código del servidor web ESP32
- Dirección IP del servidor web ESP32
- Control de LED mediante el servidor web ESP32
- Interfaz de escritorio
- Interfaz móvil
- Control de aparatos de aire acondicionado mediante el servidor web ESP32
- Conclusión
1. Servidor web ESP32
El servidor web tiene un programa especial que puede procesar y enviar páginas web a clientes web. Para abrir un sitio web, utilizamos un navegador web. Este navegador web también se denomina cliente web. El sitio web que desea ver está almacenado en otra computadora llamada servidor web.
Para comunicarse entre sí, el servidor web y el cliente web utilizan un lenguaje común llamado HTTP. Así es como funciona: el cliente web solicita al servidor web una página web mediante una solicitud HTTP. El servidor web devuelve la página web solicitada. Si la página web no está presente, verá un mensaje de error.
En ESP32, podemos diseñar un servidor web, ya que ESP32 no sólo puede conectarse con otros dispositivos a través de una red sino que también puede crear su servidor web y responder a las solicitudes recibidas. Todo esto es posible porque el ESP32 puede funcionar en tres modos diferentes:
- Estación
- Punto de acceso
- Tanto la estación como el punto de acceso
Puede consultar este artículo para obtener información sobre los tres modos de ESP32:
Cómo configurar un punto de acceso (AP) ESP32 usando Arduino IDE
2. Cómo crear un servidor web ESP32 usando Arduino IDE
Para crear un servidor web ESP32 usando Arduino IDE, puede conectar ESP32 a un punto de acceso y generar una dirección IP para el servidor web. Puede aplicar algo de HTML y CSS para diseñar la interfaz de su servidor.
Una vez que comprenda el funcionamiento del punto de acceso ESP32, podrá diseñar fácilmente un servidor web ESP32 utilizando el código IDE de Arduino. El código del servidor web ESP32 utiliza la biblioteca Wi-Fi ESP32. Esto facilita nuestro trabajo, ya que esta biblioteca contiene todas las funciones importantes necesarias para conectar ESP32 a un punto de acceso.
Diseñemos un servidor web ESP32 usando el código IDE de Arduino.
3. Código del servidor web ESP32
El código del servidor web ESP32 implica la conexión ESP32 con el punto de acceso y la obtención de la dirección IP del servidor. Una vez que obtenga la dirección IP, deberá conectarse a la misma red para acceder al servidor web ESP32. Desde allí puedes controlar los LED y otros dispositivos.
Abra Arduino IDE y conecte su placa ESP32 con él:
Instalación de la placa ESP32 en Arduino IDE
Una vez que la placa ESP32 esté conectada, cargue el siguiente código en su placa.
/**************Linuxhint.com
Servidor web ESP32 para controlar los LED
**************/
// Importar la biblioteca para Conexión wifi
#incluir
// Introduce tu nombre y contraseña de Wi-Fi
carácter constante * ssid = 'ESP32' ;
carácter constante * contraseña = '123456789' ;
// Elija el número de puerto para el servidor web
Servidor WiFiServer ( 80 ) ;
// Crear una variable para almacenar la solicitud web.
encabezado de cadena;
// Crear variables para almacenar el estado de las salidas.
Salida de cadena26State = 'APAGADO' ;
Salida de cadena27State = 'APAGADO' ;
// Asigne los pines de salida a las variables.
constante int salida26 = 26 ;
constante int salida27 = 27 ;
tiempo actual largo sin firmar = milis ( ) ;
tiempo anterior largo sin firmar = 0 ;
// Elegir el tiempo límite para la solicitud web en milisegundos
tiempo de espera largo constante = 2000 ;
configuración vacía ( ) {
Serie.comienzo ( 115200 ) ;
// Establecer los pines de salida como salidas
modo pin ( salida26, SALIDA ) ;
pinModo ( salida27, SALIDA ) ;
// Apagar las salidas
escritura digital ( salida26, BAJA ) ;
escritura digital ( salida27, BAJA ) ;
// Conéctate a la red Wi-Fi
Impresión.serie ( 'Conectado a ' ) ;
Serial.println ( ssid ) ;
WiFi.comenzar ( ssid, contraseña ) ;
// Esperar hasta la conexión está establecida
mientras ( Estado de WiFi ( ) ! = WL_CONECTADO ) {
demora ( 500 ) ;
Impresión.serie ( '.' ) ;
}
Serial.println ( '' ) ;
Serial.println ( 'WiFi conectado.' ) ;
Serial.println ( 'Dirección IP: ' ) ;
Serial.println ( WiFi.localIP ( ) ) ;
servidor.comenzar ( ) ;
}
bucle vacío ( ) {
Cliente WiFiClient = servidor.disponible ( ) ; // Controlar para nuevos clientes
si ( cliente ) { // Si un cliente está conectado,
horaactual = milis ( ) ;
Hora anterior = Hora actual;
Serial.println ( 'Cliente nuevo.' ) ; // Notificar al puerto serie
Cadena línea actual = '' ; // Cree una cadena para almacenar los datos del cliente.
mientras ( cliente.conectado ( ) && Hora actual - Hora anterior = 0 ) {
Serial.println ( 'GPIO 26 activado' ) ;
salida26Estado = 'EN' ;
escritura digital ( salida26, ALTA ) ;
} demás si ( encabezado.indexOf ( 'OBTENER /26/desactivado' ) > = 0 ) {
Serial.println ( 'GPIO 26 desactivado' ) ;
salida26Estado = 'APAGADO' ;
escritura digital ( salida26, BAJA ) ;
} demás si ( encabezado.indexOf ( 'OBTENGA /27/en' ) > = 0 ) {
Serial.println ( 'GPIO 27 encendido' ) ;
salida27Estado = 'EN' ;
escritura digital ( salida27, ALTA ) ;
} demás si ( encabezado.indexOf ( 'OBTENER /27/desactivado' ) > = 0 ) {
Serial.println ( 'GPIO 27 desactivado' ) ;
salida27Estado = 'APAGADO' ;
escritura digital ( salida27, BAJA ) ;
}
cliente.println ( '' ) ;
cliente.println ( '
cliente.println ( '
// CSS para diseñar los botones.
cliente.println ( '
cliente.println ( 'cuerpo {fondo: gradiente lineal (a la derecha, #0f0c29, #302b63, #24243e); }' ) ;
// Botones de color azul neón con efecto luminoso.
cliente.println ( '.button { color de fondo: #08f; borde: ninguno; color: blanco; relleno: 16px 40px;' ) ;
cliente.println ( 'decoración de texto: ninguna; tamaño de fuente: 30px; margen: 2px; cursor: puntero; sombra de cuadro: 0 0 20px #08f;}' ) ;
// Botones de color gris oscuro con efecto luminoso.
cliente.println ( '.button2 {color de fondo: #333; sombra de cuadro: 0 0 20px #333;}' ) ;
// Efecto de transición para los botones
cliente.println ( '.button, .button2 {transición: todos los 0,3 s entran y salen fácilmente;}' ) ;
// Botones redondeados
cliente.println ( '.botón, .botón2 {radio-borde: 50%;}' ) ;
// título de la página web
cliente.println ( '
Servidor web Linuxhint ESP32
'// encabezado de página web
cliente.println ( '
Servidor web ESP32
');// Mostrar el estado y los botones. para GPIO 26
cliente.println ( '
GPIO 26 - Estado '
+ salida26Estado + '' ) ;
// Mostrar el botón ON si el estado está APAGADO
si ( salida26Estado == 'APAGADO' ) {
cliente.println ( '
} demás { // Mostrar el botón APAGADO si el estado está encendido
cliente.println ( '
' ) ;
}
// Mostrar el estado y los botones. para GPIO 27
cliente.println ( '
GPIO 27 - Estado '
+ salida27Estado + '' ) ;
// Mostrar el botón ON si el estado está APAGADO
si ( salida27Estado == 'APAGADO' ) {
cliente.println ( '
' ) ;
} demás { // Mostrar el botón APAGADO si el estado está encendido
cliente.println ( '
' ) ;
}
cliente.println ( '