Skip to main content

Crear DASHBOARD en Blynk.io

Vamos a crear un DASHBOARD o PANEL DE CONTROL para controlar nuestro ESP32.

Registro en Blynk.io

Entramos en la página https://blynk.io/ de  y nos registramos en LOG IN

paginablynk.png

Nos pide un email. Cuando lo ponemos, nos llega este mensaje que tenemos que dar al botón "Complete setup". Nos saldrá un diálogo para elegir la contraseña, una pequeña encuesta 

2025-10-23 21_57_10-Dashboard — Mozilla Firefox.png    2025-10-23 21_58_00-Greenshot.png

CONCEPTOS CLAROS
    En BLYNK se crea el Dispositivo o Device ESP32 que contendrá el programa realizado en STEAMAKERBLOCKS y en el programa se insertan estos datos que nos proporciona BLYNK : 

      ID DE LA PLANTILLA

      NOMBRE DE LA P LANTILLA

      TOCKEN

      Se definen en BLYNK las variables de flujo, flujo de datos o Datastream que son variables virtuales V1 V2, ..... tú en tu programa de STEAMAKERBLOCKS almacenas o recoges la información Y finalmente nuestro objetivo:  un Panel Web o Dashboard que es un panel donde controlas online tu ESP32 y cada gadjet que pones esa asociado a una variable virtual

      2026-01-19 22_34_22-Presentación1 - PowerPoint.png

      AÑADIR DEVICE
      1. Vamos a Devices
      2. Create New
        2026-01-19 16_48_26-Greenshot.png
      3. Buscamos ESP32
      4. Elegimos Quick start

      2026-01-19 16_49_59-.png

      Nos saldrá un código que tiene tres cosas importantes que tienes que guardar (En download te lo baja en formato .ino que lo puede leer el bloc de notas)

      1. ID DE LA PLANTILLA

      2. NOMBRE DE LA P LANTILLA

      3. TOCKEN

      2025-10-23 22_07_24-Devices - Blynk.Console — Mozilla Firefox.png

      En el siguiente diálogo quiere meter el código en el ESP32, dar a CANCELAR pues eso lo hará Steamakersblocks

      DATASTREAMS O FLUJO DE DATOS

      Una vez creado el Device, le damos dos clicks y nos sale el Template. Al darle a EDIT tenemos opción de ir añadiendo las variables asociadas a los pines virtuales, TE RECOMIENDO BORRAR LAS QUE TE PONE Y AÑADIR TÚ LOS PINES VIRTUALES por ejemplo en este caso DE ESP32 KEYSTUIDIO TDR STEAM IMAGINA

      NOMBRE PIN VIRTUAL TIPO UNIDAD MIN MAX
      LED ROJO V1 entero
      0 1
      SIMPSON V2 entero
      0 1
      LCD V3 CADENA


      PULSADOR V4 entero
      0 1
      TEMPERATURA LM35 V5 entero ºC 0 100
      TEMPERATURA DHT11 V6 entero ºC 0 100
      HUMEDAD V7 entero % 0 100
      SONIDO V8 entero
      0 4095

      Ves añadiendo las variables que quieras visualizar o gobernar, dándoles las unidades, valores min, max correspondientes

      No utilices ni el potenciómetro ni el sensor de luz, tal y como vimos en Sensores y actuadores de la placa Imagina TDR STEAM, cuando hay comunicación Wifi, están inutilizados.

      2026-01-19 21_27_09-Greenshot.png

      TEMPLATE PANEL WEB

      Una vez creado el Device, le damos dos clicks 

      2025-10-23 22_10_43-Devices - Blynk.Console — Mozilla Firefox.png

      Si le damos dos clicks sale el Template

      • En los tres puntos horizontales le podemos cambiar el nombre
      • En el Edit podemos poner nuestros elementos

      2025-10-23 22_11_48-Devices - Blynk.Console — Mozilla Firefox.png

      Vamos a ir añadiendo WIDGETS ASOCIADOS A ESOS DATASTREAMS para crear tu panel de control, algunos son de pago 😣

      2026-01-19 21_54_28-.png

      Los puedes redimensionar, borrar, etc... En el botón de la rueda dentada vas asociando el Widget con el pin virtual V1, V2, ... V8

      blynk-gif.gif

      Fuente https://blynk.io/

      APP BLYNK IOT

      Hay una APP sencilla, que al loguearse YA APARECE EL DEVICE lo único que hay que hacer es el TEMPLATE asociado, y es muy sencillo

      2025-10-23 22_27_43-Greenshot.png

      Podemos visualizar y crear las plantillas en el móvil, para ello sigue las instrucciones  

      CASO ESP32 SMART HOME
      smart_home.png

      ESP32 SMARTHOME he puesto de pines virtuales

      • TEMPERATURA asociado al pin virtual V1 entero unidades ºC minimo 0 máximo 100 (por ejemplo)
      • VENTILADOR asociado al pin virtual V2
      • HUMEDAD asociado al pin virtual V3

      2025-10-23 22_19_22-.png

      Podemos poner multitud de widgets, vamos a simplificar con 

      • ESP32 al Template: Temperatura y humedad
      • Template al ESP32 un botón para encender y apagar el ventilador

      2025-10-23 22_22_02-Greenshot.png