Tutorial: Personalización del panel y administración de dispositivos en Azure IoT Central

En este tutorial, aprenderá a personalizar el panel en la aplicación de análisis en el almacén de Azure IoT Central. Los operadores de aplicación pueden usar el panel personalizado para ejecutar la aplicación y administrar los dispositivos conectados.

En este tutorial, aprenderá a:

Prerrequisitos

Antes de empezar, complete el tutorial Creación e implementación de una plantilla de aplicación de análisis en la tienda .

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:

1. Vaya a la página Mis aplicaciones de Azure IoT Central .

2. Abra la aplicación de supervisión de condiciones que creó.

3. Seleccione Configuración del panel, escriba un nombre para el panel y, a continuación, seleccione Guardar.

Personalización de iconos de imagen en el panel

Un panel de aplicaciones de Azure IoT Central consta de uno o varios iconos. Un icono es un contenedor rectangular para mostrar contenido en un panel. Puede asociar varios tipos de contenido a iconos y puede arrastrar, colocar y cambiar el tamaño de los iconos para personalizar el diseño del panel.

Hay varios tipos de iconos para mostrar contenido:

• Los iconos de imagen contienen imágenes y puede 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 código markdown que se representa como HTML.
• Los iconos de telemetría, propiedad o comandos muestran datos específicos del dispositivo.

En esta sección, personalizará los iconos de imagen en el panel.

Para personalizar el icono de imagen que muestra una imagen de marca en el panel:

1. Seleccione Editar en la barra de herramientas del panel.

2. Seleccione Editar en el icono de imagen que muestra la imagen de marca northwind Traders.

3. Cambie el título. El título aparece al mantener el puntero sobre la imagen.

4. Seleccione Imagen. Se abre una ventana donde puede cargar una imagen personalizada o, opcionalmente, especificar una dirección URL para la imagen.

5. Selecciona Actualización.

   

6. Opcionalmente, en el icono Documentación , seleccione Configurar y, a continuación, especifique una dirección URL que vincule para admitir contenido.

Para personalizar el icono de imagen que muestra un mapa de las zonas del sensor en el almacén:

1. En el icono de imagen que muestra el mapa de zona de almacén predeterminado, seleccione Configurar.

2. Seleccione Imagen y, a continuación, cargue una imagen personalizada de un mapa de zona de almacén.

3. Selecciona Actualización.

En el mapa de ejemplo de la tienda Contoso se muestran cuatro zonas: dos zonas de caja, una zona para ropa y cuidado personal, y una zona para comestibles y charcutería.

En este tutorial, asociará sensores a estas zonas para proporcionar telemetría.

Organizar iconos para modificar el diseño

Un paso clave para personalizar un panel es reorganizar los iconos para crear una vista útil. Los operadores de aplicación usan el panel para visualizar la telemetría del dispositivo, administrar dispositivos y supervisar las condiciones de un almacén.

Azure IoT Central simplifica la tarea del generador de aplicaciones de crear un panel. Mediante el modo de edición del panel, puede agregar, mover, cambiar el tamaño y eliminar iconos rápidamente.

La plantilla de aplicación Análisis en tienda: caja también simplifica la tarea de crear un tablero de control. 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 iconos que no tiene previsto usar en la aplicación:

1. Seleccione Editar en la barra de herramientas del panel.

2. 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
   • Zona de enfriamiento del área de pago
   • Configuración del sensor de ocupación
   • Configuración del termostato
   • Tiempo de espera
   • Condiciones del entorno
   • Comprobación 3: los tres iconos asociados

3. Haga clic en Guardar. Al quitar 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 agregue más adelante.

Para reorganizar los iconos restantes:

1. Seleccione Editar.

2. Arrastre el icono Firmware de ocupación a la derecha del icono de batería Ocupación.

3. Arrastre el icono firmware del termostato a la derecha del icono de la batería thermostat .

4. Haga clic en Guardar.

5. Vea los cambios de diseño.

Adición de iconos de telemetría para mostrar condiciones

Después de personalizar el diseño del panel, está listo para agregar iconos para mostrar la telemetría. Para crear un icono de telemetría, seleccione una plantilla de dispositivo y una instancia de dispositivo y, a continuación, seleccione telemetría específica del dispositivo para mostrarla en el icono. La plantilla de aplicación Análisis en tienda - pago incluye varias baldosas de telemetría en el panel de control. 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 la telemetría ambiental de los sensores RuuviTag que agregó en el tutorial Creación e implementación de una plantilla de aplicación de análisis en tienda .

Para agregar iconos para mostrar los datos del entorno de los sensores RuuviTag:

1. Seleccione Editar.

2. En la lista Plantilla de dispositivo , seleccione RuuviTag.

3. Seleccione una instancia de dispositivo de uno de los dos sensores RuuviTag. En el ejemplo de almacén de Contoso, seleccione Zona 1 Ruuvi para crear un icono de telemetría para la zona 1.

4. En la lista Telemetría , seleccione Humedad relativa y Temperatura, los elementos de telemetría que se muestran para cada zona del icono.

5. Seleccione Agregar icono. Este nuevo icono muestra la telemetría de humedad y temperatura combinadas para el sensor seleccionado.

6. En el nuevo icono del sensor RuuviTag, seleccione Configurar.

7. Cambie el Título al Entorno Zona 1.

8. Selecciona Actualización.

9. Repita los pasos del 1 al 8 para crear un icono para la segunda instancia del sensor. En Título, escriba Entorno de zona 2 y, a continuación, seleccione Actualizar configuración.

10. Arrastre el icono titulado Entorno de zona 2 a la parte inferior del icono firmware del termostato .

11. Arrastre el icono titulado Entorno de zona 1 para debajo del icono Tráfico de personas .

12. Haga clic en Guardar. El panel muestra la telemetría de zona en los dos iconos nuevos.

Para editar el icono People traffic (Tráfico de personas) para mostrar los datos de telemetría solo para dos zonas de cajas:

1. Seleccione Editar.

2. En el icono Tráfico de personas , seleccione Editar.

3. Quite la telemetría count3.

4. Selecciona Actualización.

5. Haga clic en Guardar. El panel actualizado muestra los totales de solo dos zonas de cajas, que se basan en el sensor de ocupación simulado.

Adición de iconos de comandos para ejecutar comandos

Los operadores de aplicación también usan el panel para administrar dispositivos mediante la ejecución de comandos. Puede agregar iconos de comandos al panel que ejecutan comandos predefinidos en un dispositivo. En esta sección, agregará un icono de comandos para permitir que los operadores reinicien la puerta de enlace de Rigado.

Para agregar un recuadro de comando que reinicie la puerta de enlace:

1. Seleccione Editar.

2. En la lista Plantilla de dispositivo , seleccione C500. Es la plantilla para la pasarela Rigado C500.

3. Seleccione la instancia de puerta de enlace en Instancia de dispositivo.

4. Seleccione el comando Reiniciar .

5. Seleccione Agregar icono.

6. Haga clic en Guardar.

7. Ver el panel de control de Contoso completo.

   

8. Opcionalmente, seleccione el icono Reiniciar para ejecutar el comando de reinicio en la puerta de enlace.

Limpieza de recursos

Si no tiene previsto completar más inicios rápidos o tutoriales de IoT Central, puede eliminar la aplicación de IoT Central:

1. En la aplicación de IoT Central, vaya a Administración de >aplicaciones.
2. Seleccione Eliminar y confirme la acción.

Paso siguiente