Tutorial: Personalización del panel y administración de dispositivos en Azure IoT Central
En este tutorial aprenderá a personalizar el panel en una aplicación de análisis en la tienda de Azure IoT Central. Los operadores de la aplicación pueden usar el panel personalizado para ejecutar la aplicación y administrar los dispositivos conectados.
En este tutorial, aprenderá a:
- Personalizar iconos de imagen en el panel
- Organizar iconos para modificar el diseño
- Agregar iconos de telemetría para mostrar las condiciones
- Agregar iconos de propiedades para mostrar detalles del dispositivo
- Agregar iconos de comandos para ejecutar comandos
Requisitos previos
Para más información, consulte el tutorial para Crear una aplicación de análisis en la tienda en Azure IoT Central.
Cambiar el nombre del panel
Después de crear la aplicación de supervisión de condiciones, puede editar su panel predeterminado. También puede crear más paneles.
El primer paso para personalizar el panel de la aplicación es cambiar el nombre:
Vaya a la página Mis aplicaciones de Azure IoT Central.
Abra la aplicación de supervisión de condiciones que ha creado.
Seleccione Configuración del panel, escriba el nombre del panel y, a continuación, seleccione Guardar.
Personalizar iconos de imagen en el panel
Un panel de aplicación de Azure IoT Central consta de uno o varios iconos. Un icono es un contenedor rectangular para mostrar contenido en un panel. Es posible asociar varios tipos de contenido con los iconos y arrastrar, colocar y cambiar el tamaño de los iconos para personalizar el diseño del panel.
Existen varios tipos de iconos para mostrar contenido:
- Los iconos de imagen contienen imágenes y es posible agregar una dirección URL que le permita seleccionar la imagen.
- Los iconos de etiqueta muestran texto sin formato.
- Los iconos de Markdown contienen contenido con formato y permiten establecer una imagen, una dirección URL, un título y un código Markdown que se representa como HTML.
- Los iconos de telemetría, propiedades o comandos muestran datos específicos del dispositivo.
En esta sección, personalizará los iconos de imagen en el panel.
Para personalizar un icono de imagen que muestra una imagen de marca en el panel:
Seleccione Edit (Edición) en la barra de herramientas del panel.
Seleccione Editar en el mosaico de imagen que muestra la imagen de la marca Northwind Traders.
Cambie el título en Title (Título). El título aparece cuando mantiene el puntero sobre la imagen.
Seleccione Image (Imagen). Se abre una ventana donde puede cargar una imagen personalizada o, opcionalmente, especificar una dirección URL para la imagen.
Selecciona Actualización.
Opcionalmente, en el icono Documentación, seleccione Configurar y, a continuación, especifique una dirección URL que vincule para admitir contenido.
Para personalizar un icono de imagen que muestra un mapa de las zonas de sensores en el almacén:
En el icono de imagen que muestra el mapa de las zonas de la tienda predeterminado, seleccione Configurar.
Seleccione Image y, a continuación, cargue una imagen personalizada de un mapa de zonas de la tienda.
Selecciona Actualización.
En el mapa de la tienda de Contoso de ejemplo se muestran cuatro zonas: dos zonas de cajas, una zona para prendas y productos de cuidado personal y otra para comestibles.
En este tutorial, asociará sensores con estas zonas para proporcionar datos de telemetría.
Organizar iconos para modificar el diseño
Un paso clave en la personalización de un panel es reorganizar los iconos para crear una vista útil. Los operadores de la aplicación usan el panel para visualizar los datos de telemetría de los dispositivos, administrar dispositivos y supervisar las condiciones de una tienda.
Azure IoT Central simplifica la tarea de creación de un panel del desarrollador de aplicaciones. Al usar el modo de edición del panel, puede agregar, mover, cambiar de tamaño y eliminar iconos rápidamente.
La plantilla de aplicación Análisis del almacén: finalización de la compra también simplifica la tarea de crear un panel. La plantilla proporciona un diseño de panel de trabajo, con sensores conectados e iconos que muestran los recuentos de líneas de caja y las condiciones ambientales.
En esta sección, reorganizará los iconos del panel en la plantilla de aplicación Análisis del almacén: finalización de la compra para crear un diseño personalizado.
Para quitar los iconos que no tenga previsto usar en la aplicación:
Seleccione Edit (Edición) en la barra de herramientas del panel.
Para cada uno de los iconos siguientes, que el panel del almacén de Contoso no usa, seleccione los puntos suspensivos (...) y, a continuación, seleccione Eliminar:
- Volver a todas las zonas
- Visitar el panel de la tienda
- Calefacción en la zona de comprobación
- Refrigeración de la zona de comprobación
- Configuración del sensor de ocupación
- Configuración del termostato
- Tiempo de espera
- Condiciones del entorno
- Comprobación 3: los tres iconos asociados
Seleccione Guardar. Al quitar los iconos sin usar se libera espacio en la página de edición y se simplifica la vista del panel para los operadores.
Después de quitar los iconos sin usar, reorganice los iconos restantes para crear un diseño organizado. El nuevo diseño incluye espacio para los iconos que agregará más adelante.
Para reorganizar los iconos restantes:
Seleccione Editar.
Arrastre el icono Firmware de ocupación a la derecha del icono de batería Ocupación.
Arrastre el icono Firmware de termostato a la derecha del icono de batería Termostato.
Seleccione Guardar.
Vea los cambios en el diseño.
Agregar iconos de telemetría para mostrar las condiciones
Después de personalizar el diseño del panel, estará listo para agregar iconos para mostrar los datos de telemetría. Para crear un icono de telemetría, seleccione una plantilla de dispositivo y una instancia de dispositivo y, luego, seleccione los datos de telemetría específicos del dispositivo que desea mostrar en el icono. En la plantilla de aplicación Análisis del almacén: finalización de la compra se incluyen varios iconos de telemetría en el panel. Los cuatro iconos de las dos zonas de cajas muestran los datos de telemetría del sensor de ocupación simulado. El icono People traffic (Tráfico de personas) muestra los totales de las dos zonas de cajas.
En esta sección, agregará dos iconos de telemetría más para mostrar los datos de telemetría ambiental de los sensores RuuviTag que agregó en el tutorial Creación de una aplicación de análisis en tienda en Azure IoT Central.
Para agregar iconos y mostrar datos ambientales de los sensores RuuviTag:
Seleccione Editar.
En la lista Plantilla de dispositivo, seleccione RuuviTag.
En Device instance (Instancia del dispositivo), seleccione una instancia del dispositivo de uno de los dos sensores RuuviTag. En el ejemplo de la tienda de Contoso, seleccione Ruuvi de zona 1 para crear un icono de telemetría para la zona 1.
En la lista Telemetría, seleccione Humedad relativa y Temperatura, los elementos de telemetría que se muestran para cada zona del icono.
Seleccione Agregar icono. Este nuevo icono muestra los datos de telemetría de humedad y temperatura combinados del sensor seleccionado.
En el nuevo icono para el sensor RuuviTag, seleccione Configurar.
En Title (Título), cambie el título a Entorno de zona 1.
Selecciona Actualización.
Repita los pasos del 1 a 8 para crear un icono para la segunda instancia del sensor. En Título, introduzca Entorno de zona 2 y, a continuación, seleccione Actualización de la configuración.
Arrastre el icono titulado Entorno de zona 2 debajo del icono Firmware de termostato.
Arrastre el icono titulado Entorno de zona 1 debajo del icono Tráfico de personas.
Seleccione Guardar. El panel muestra los datos de telemetría de zona en los dos nuevos iconos.
Para editar el icono People traffic (Tráfico de personas) para mostrar los datos de telemetría solo para dos zonas de cajas:
Seleccione Editar.
En el icono Tráfico de personas, seleccione Editar.
Quite la telemetría count3.
Seleccione Actualizar.
Seleccione Guardar. El panel actualizado muestra los totales de solo dos zonas de cajas, que se basan en el sensor de ocupación simulado.
Agregar iconos de comandos para ejecutar comandos
Los operadores de la aplicación también usan el panel para administrar dispositivos mediante la ejecución de comandos. Puede agregar iconos de comando al panel que ejecutarán comandos predefinidos en un dispositivo. En esta sección, agregará un icono de comando para que los operadores puedan reiniciar la puerta de enlace de Rigado.
Para agregar un icono de comando para reiniciar la puerta de enlace:
Seleccione Editar.
En la lista Plantilla de dispositivo, seleccione C500. Esta es la plantilla para la puerta de enlace de Rigado C500.
Seleccione la instancia de puerta de enlace en Device instance (Instancia del dispositivo).
Seleccione el comando Reiniciar.
Seleccione Agregar icono.
Seleccione Guardar.
Vea el panel de Contoso completado.
Opcionalmente, seleccione el icono Reboot (Reiniciar) para ejecutar el comando de reinicio en la puerta de enlace.
Limpieza de recursos
Si no tiene previsto realizar otro inicios rápidos o tutoriales de IoT Central, puede eliminar la aplicación de IoT Central:
- En la aplicación de IoT Central, vaya a Aplicación > Administración.
- Seleccione Delete (Eliminar) y confirme la acción.