WSM: Nuestra aplicación para WebScreen
Como es habitual en PcDeMaNo, nuestras revisiones siempre intentan ir un poco más allá. No nos limitamos a repetir la descripción del fabricante ni a jugar con las “demos” que acompañan a los dispositivos. Somos, qué le vamos a hacer, un poco masoquistas: nos gusta sufrir en nuestras propias carnes las limitaciones —y virtudes— de lo que analizamos. En esta ocasión hemos seguido fielmente esa filosofía y, con la inestimable ayuda de Leo, nuestro amigo argentino afincado ahora en Japón, nos lanzamos a utilizar el WebScreen como un auténtico panel retro cibernético para monitorizar en tiempo real el estado de la CPU del NestDisk que revisamos hace unas semanas.
Cuando hicimos aquella revisión incluimos una pequeña aplicación en Python que habíamos desarrollado para enviar a Home Assistant, vía MQTT, los datos más relevantes del funcionamiento de este miniPC. Ahora, además de seguir utilizando ese envío de información por MQTT, hemos querido aprovecharlo también en nuestra revisión del WebScreen… y, si todo va según lo previsto, lo reutilizaremos próximamente en otra revisión de otro tipo de pantalla inteligente realmente interesante.
En WebScreen “tan solo” hemos tenido que programar la lectura de los valores que recibimos vía MQTT del NestDisk y mostrarlos en la minipantalla, convirtiéndola en un auténtico panel retro cibernético. A partir de ahí, todo ha sido jugar con la API: ajustar el tamaño de la fuente, cambiar colores según el estado, activar el efecto Blink en caso de alarma e incluso añadir el logo de PcDeMaNo para darle un toque más alegre y personal al panel.
🔍 WSM — WebScreen System Monitor.
Monitorización en tiempo real del sistema vía MQTT para miniPC y PC.
Nuestra nueva herramienta para visualizar en tiempo real el estado de cualquier miniPC o PC directamente en una pantalla WebScreen. Aprovechando la flexibilidad del protocolo MQTT, WSM recibe y muestra de forma instantánea parámetros clave del sistema —como carga de CPU, temperatura o frecuencia— en un panel claro, limpio y perfectamente legible.
Os dejamos a continuación el listado de los dos únicos ficheros que, aparte de nuestro logo, es necesario colocar en la SD para que arranque: webscreen.json con las definiciones de las principales variables y script.js que es el programa en sí mismo.
| Archivo | Función principal |
|---|---|
| webscreen.json | Define las variables principales (nombres, rangos, unidades, colores, etc.) que el sistema usa para inicializar la interfaz y enlazar con MQTT. |
| script.js | Es el programa ejecutable que controla la lógica del WebScreen: lectura de datos, actualización de etiquetas, animaciones y eventos. |
webscreen.json al iniciar y cargará el script.js como programa principal.webscreen.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "wifi": { "ssid": "MiRed_WIFI_25GHz", "password": "LaClavedemiRed" }, "settings": { "wifi": { "ssid": "MiRed_WIFI_25GHz", "pass": "LaClavedemiRed" }, "mqtt": { "enabled": true } }, "script": "script.js", "mqtt_broker": "192.168.1.144", "mqtt_port": 1883, "mqtt_user": "USUARIO_DE_MQTT", "mqtt_pass": "LA_CLAVE_DE_MI_USUARIO_DE_MQTT", "mqtt_topic": "nestdisk/cpu/stats", "mqtt_client_id": "pcdemano-webscreen", "brightness": 200, "timezone": "CET-1CEST,M3.5.0,M10.5.0/3" } |
141