Como el centro de su operación IoT, el panel de control es el lugar desde donde realiza un seguimiento de su objetivo de monitoreo. El panel de control contiene widgets que le permiten trazar datos según sus necesidades, y cada widget tiene un conjunto diferente de opciones de configuración. Dependiendo del widget, puede agregar una o varias variables. Por ejemplo, el widget Métrico solo admite una variable, mientras que el widget Gráfico de Líneas admite múltiples variables.
En este artículo aprenderá sobre el proceso general de creación de un widget, sus opciones de interacción disponibles y los diferentes tipos de widgets.
1. Crear un nuevo widget
Para crear un widget, haga clic en el ícono “+” en la esquina superior derecha de la interfaz de usuario del panel de control.
Seleccione el tipo de widget de las opciones disponibles o cree el suyo propio con el HTML Canvas.
Seleccione el comportamiento del widget: Estático o dinámico. Para comprender mejor estas opciones, diríjase a la segunda sección de esta guía, que explica los widgets estáticos y dinámicos.
Asigne una variable para el widget haciendo clic en "+ AÑADIR VARIABLE(S)". Para widgets dinámicos puede editar la etiqueta de la variable manualmente.
Configure la apariencia del widget y guarde.
1.1 Método de agregación
Esta opción le permite aplicar un método de agregación (promedio, cuenta, último valor, máximo, mínimo o suma) sobre el rango de tiempo establecido en la barra de navegación del panel de control.
Imagine que está midiendo el consumo de agua en un campo agrícola y desea crear un panel de control para que sus clientes conozcan el agua consumida en un rango de tiempo específico. Entonces, crearía un widget Métrico con "suma" como el método de agregación.
El widget sumará automáticamente todos los valores dentro del rango de tiempo especificado en la barra de navegación del panel de control.
Los siguientes widgets tienen una opción para aplicar un método de agregación:
Métrico
Termómetro
Indicador
Tanque
Batería
Indicador de anillo
Gráfico de líneas
Eje doble
Tabla de valores
Tabla de dispositivos
Tabla de variables
Tabla de mapa de calor
Gráfico de pastel
Algunos de estos widgets también le brindan la opción de anular el rango de tiempo del panel de control (también conocido como "establecido por el panel"), lo que le permite forzar la agregación para que siempre se calcule para un rango de tiempo predeterminado.
Nota: los widgets que tengan métodos de agregación diferentes a "último valor" no mostrarán nuevos datos en tiempo real, incluso si esa opción está habilitada en el tablero. Para que esos widgets muestren nuevos datos debes refrescar el tablero.
1.2 Apariencia del widget
Cada widget tiene un conjunto diferente de opciones para cambios de apariencia, las más comunes son:
Nombre: La etiqueta de texto que aparecerá en la esquina superior izquierda de su widget.
Fuente: Opción para cambiar la fuente utilizada dentro del widget.
Puntos decimales: La cantidad de decimales para valores no enteros.
Formato de fecha: Elija entre diferentes formatos de fecha. Si se selecciona el formato "fecha personalizada", se aplican las mismas reglas que para la configuración del panel de control explicadas aquí.
Color: Cada widget tiene un color predeterminado (opción "establecido por widget"), predeterminado por Ubidots. Puede anular este color predeterminado seleccionando la opción "predeterminado de la variable", que usará el color de la variable, o seleccionando la opción “lógica de color”, que le permite definir cómo cambia el color según el valor de la variable.
Estilo personalizado: Editor basado en JSON donde puede ingresar claves definidas por elementos para establecer parámetros para el aspecto y la sensación de los elementos disponibles del widget. Esto comprende el "contenedor" y no el contenido en sí; para opciones de estilo de contenido, lea el siguiente punto, configuración de ECharts.
1.2.1 Color de fondo para widgets tipo métrico
La familia de widgets métricos se compone de estas opciones:
Termómetro
Indicador
Tanque
Batería
Indicador*
Tienen una opción adicional de configuración de apariencia que le permite establecer un color de fondo fijo o una lógica que cambia el color de fondo según una lógica definida basada en datos.
Esta opción se encuentra tercera desde abajo. Siga estos pasos para utilizar la opción de color de fondo:
Haga clic en el campo gris junto al encabezado correspondiente:
En el menú que se abre, elija si el color será fijo o cambiará según una lógica.
Para un color fijo, elija la opción "establecido por widget" y proceda a elegir el color de fondo y su opacidad.
Para una lógica de color, elija la opción "lógica de color" y proceda a completar los campos, según sus necesidades, como se muestra en el siguiente ejemplo:
Además, utilizando los íconos de basura puede eliminar rangos en su lógica, mientras que el botón "+ agregar rango" le permite agregar nuevos.
*El widget de indicador y el widget de indicador de anillo no admiten la opción de color de fondo.
2. Opciones de interacción del widget
Una vez creados, los widgets tienen las siguientes opciones de interacción para mejorar la experiencia del usuario.
Descargar un archivo CSV con los datos de la(s) variable(s) relacionadas con el widget. Debe seleccionar el rango de fechas y las columnas que desea exportar.
Explorar datos de las variables o dispositivos relacionados con el widget. Una vez seleccionado, se abrirá una nueva ventana con la vista del dispositivo o variable.
Ampliar el widget para verlo con más detalle.
Duplicar el widget para ahorrar tiempo en lugar de crear uno nuevo con la misma configuración desde cero.
Compartir el widget a través de una URL pública o un código de fragmento insertable para el código fuente HTML de un sitio web. Todos los widgets se pueden compartir excepto los widgets de Interruptor, Deslizador y Entrada Manual. Para obtener más información, diríjase a este artículo.
Editar configuraciones del widget. Esto también se puede hacer a través del ícono de lápiz en el encabezado del widget.
Exportar PNG imagen del widget en el rango de fechas seleccionado.
Eliminar el widget de forma permanente.
Mientras edita un widget, puede usar el botón "ir a variable" para dirigirse a la página de la variable seleccionada.
3. Tipos de widgets
El cajón de widgets está dividido en siete tipos de widgets que insinúan cómo se ven y funcionan cada uno de ellos.
Dependiendo de su tipo, los widgets se comportarán de manera diferente ante cosas como métodos de agregación o paneles de control dinámicos. Aunque estos tipos sirven principalmente como referencias, podemos usarlos para ver cómo responden los widgets a múltiples dispositivos seleccionados en un panel de control dinámico. Se señalan las excepciones en consecuencia.
Tipo |
Widgets | Último valor(s) en paneles con múltiples dispositivos | Método de agregación en paneles con múltiples dispositivos |
*Métrico |
|
Se muestra el último valor del dispositivo seleccionado que está más alto en la lista desplegable. | Se realiza un cálculo sobre los datos de cada dispositivo y luego esos resultados se utilizan para realizar el cálculo general que finalmente se muestra.
Por ejemplo: El método de agregación seleccionado es “promedio” y seleccionamos 3 dispositivos. Se calcula un promedio del promedio de cada dispositivo. |
Tipo |
Widgets | Último valor(s) en paneles con múltiples dispositivos | Método de agregación en paneles con múltiples dispositivos |
**Gráfico |
|
Se agrega una línea por variable para cada dispositivo seleccionado (con un límite de 15 líneas). |
Se agrega una línea por variable para cada dispositivo seleccionado. |
Tipo |
Widgets | Último valor(s) en paneles con múltiples dispositivos | Método de agregación en paneles con múltiples dispositivos |
***Tabla |
Tabla de variables y dispositivos: Se agrega una fila por dispositivo.
Tabla de valores: Se agrega una fila por nuevo punto, por dispositivo. | Tabla de variables y dispositivos: Se agrega una fila por dispositivo.
Tabla de valores: Se agrega una fila por cada dispositivo en los intervalos de tiempo seleccionados. |
Tipo |
Widgets | Último valor(s) en paneles con múltiples dispositivos | Método de agregación en paneles con múltiples dispositivos |
Mapa |
| Se agrega un ícono en el mapa para cada dispositivo seleccionado. |
No aplica. |
Tipo |
Widgets | Último valor(s) en paneles con múltiples dispositivos | Método de agregación en paneles con múltiples dispositivos |
****Control | Se agrega un control para cada dispositivo seleccionado. |
No aplica. |
Tipo |
Widgets | Último valor(s) en paneles con múltiples dispositivos | Método de agregación en paneles con múltiples dispositivos |
Visualización |
No aplica. |
No aplica. | |
Avanzado |
No compatible. |
No compatible. |
*: El Indicador mostrará un widget para cada dispositivo seleccionado. El widget de indicador de anillo aún no tiene un comportamiento compatible para múltiples dispositivos.
**: Los comportamientos descritos son ciertos para el Gráfico de Líneas y el Eje Doble. El Gráfico de Barras, Gráfico de Rosa, Histograma, Dispersión y Gráfico de Frecuencia no admiten comportamientos de múltiples dispositivos.
***: Los widgets de Incidentes y Tabla de mapa de calor no se ven afectados por múltiples dispositivos.
****: La Entrada Manual no se ve afectada por múltiples dispositivos.