WIFI_PANEL-ESP32 – Monitor del sistema ESP32 por WebSocket

Este proyecto convierte un ESP32 en un panel de monitorización en tiempo real accesible desde el navegador.

El ESP32:

• Se conecta a tu red WiFi
• Sirve una página web desde SPIFFS (index.html)
• Abre un WebSocket en /ws
• Envía periódicamente información del sistema en formato JSON:
  • SSID de la WiFi
  • IP local
  • RSSI (potencia de señal)
  • MAC
  • RAM libre y usada
  • Espacio libre de sketch
  • Temperatura interna
  • Uptime (segundos encendido)

La web se conecta al WebSocket y muestra esos datos en tiempo real.

---

🧰 1. Requisitos

Hardware

• 1x ESP32 Dev Module
• Cable USB
• Red WiFi 2.4 GHz

Software

• Visual Studio Code
• Extensión PlatformIO
• Navegador web moderno (Chrome, Edge, Firefox…)

---

📁 2. Estructura del proyecto

WIFI_PANEL/
 ├─ platformio.ini
 ├─ src/
 │   └─ main.cpp          ← Código del ESP32
 ├─ data/
 │   └─ index.html        ← Página principal (panel)

Todo lo que se ve en el navegador está dentro de /data y se sube como SPIFFS.

---

⚙️ Configuración del proyecto

✔ Instalar PlatformIO IDE

1. Abre Visual Studio Code
2. Ve a la pestaña Extensions
3. Busca: PlatformIO IDE
4. Instálalo
5. Reinicia VSCode

1️⃣ Preparar el proyecto

1. Abrir el proyecto en VSCode

   • Abre Visual Studio Code
   • Menú File → Open Folder
   • Selecciona la carpeta del proyecto Wifi_panel-ESP32

2. Comprobar que existe la carpeta /data

   • En la raíz del proyecto debe existir:

     /data
        └── index.html
     

   • Todo lo que pongas dentro de /data será la web que verá el navegador.

3. Comprobar platformio.ini

   • Asegúrate de que tienes esta línea:

     board_build.filesystem = spiffs
     

---

2️⃣ Configurar el WiFi en main.cpp y la IP fija

En src/main.cpp:

const char* ssid = "TU_WIFI";
const char* password = "TU_PASSWORD";

IPAddress local_IP(192, 168, 1, 50);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);

• Cambia TU_WIFI y TU_PASSWORD por los de tu red.
• Usa una IP que encaje en tu red

3️⃣ Subir la web (SPIFFS)

Esto sube el contenido de la carpeta /data al ESP32

• Antes de subirlo, mirar el conector (cable)

Para mí sería el COM3

1. Busca la cabeza de hormiga en la barra de la izquierda

2. Le damos y buscamos PlatformIO: Upload Filesystem Image

3. Cuando se cargue y veamos esto, pulsamos en el ESP32 el botón BOOT

4️⃣ Subir el firmware (código C++)

Ahora subimos main.cpp al ESP32

1. Le damos a la flecha; ->

2. Cuando se cargue y veamos esto, pulsamos en el ESP32 el botón BOOT

5️⃣ Ver que el ESP32 está funcionando

1. Abre el Monitor Serie:

2. Dirá algo como:

   Si no te carga eso, aprieta el botón (EN) del ESP32

6️⃣ Abrir el panel en el navegador

En tu PC o móvil (conectado a la misma red WiFi):

1. Escribe en la barra de direcciones:

   http://Tu_IP