Skip to Content
Paneles IoTContenido enriquecido

Contenido enriquecido

El widget de Markdown le permite agregar texto formateado, imágenes y valores en tiempo real a su board. Úselo para crear secciones de ayuda, mostrar mensajes de estado, construir páginas de documentación o agregar contexto a sus datos — todo con markdown simple.

Rich content demo

Qué puede agregar

  • Texto formateado — encabezados, negrita, cursiva, listas
  • Enlaces e imágenes — conecte a recursos externos o muestre contenido visual
  • Tablas — organice información de forma clara
  • Variables dinámicas — muestre datos en tiempo real dentro de su texto, por ejemplo Sensor 23 °C actualizado en tiempo real
  • HTML personalizado — mezcle HTML sin procesar para diseños personalizados, colores o estilos cuando solo markdown no es suficiente

Formato básico

Markdown usa caracteres simples para formatear texto:

  • # Heading para un encabezado grande
  • **bold text** para negrita
  • *italic text* para cursiva
  • - o números para listas

Enlaces: texto entre corchetes seguido de la URL entre paréntesis — [IronFlock](https://www.ironflock.com)

Imágenes: igual que un enlace pero comenzando con !![alt text](https://example.com/image.png)

Tablas: use barras verticales | para separar columnas.

No necesita memorizar todo esto — markdown es intuitivo y lo aprenderá rápidamente a medida que lo use. Para una referencia completa consulte la official Markdown guide.

Variables dinámicas

Aquí es donde el widget de markdown se vuelve poderoso: puede inyectar datos en tiempo real directamente en su texto.

En el contenido de markdown, envuelva el nombre de una variable en dobles llaves: {{variableName}}

Luego en la configuración de Variables del widget, agregue una entrada con:

  • Etiqueta — el nombre de la variable (debe coincidir exactamente con lo que escribió en el texto)
  • Valor — conectado a una columna de datos en tiempo real de su app

Ejemplo: Escriba Current temperature: {{temp}}°C en el campo de markdown, luego agregue una variable con etiqueta temp conectada a la columna de temperatura de su dispositivo. El widget muestra Current temperature: 23°C y lo actualiza en tiempo real a medida que llegan nuevos datos.

Casos de uso

  • Páginas de bienvenida — presente a los usuarios el board con contexto e instrucciones
  • Resúmenes de estado — muestre métricas clave integradas en texto descriptivo
  • Documentación de ayuda — integre guías paso a paso directamente en el board
  • Mensajes dinámicos — combine texto estático con valores en tiempo real que se adaptan a las condiciones actuales
Last updated on