Guía de aprendizaje: Personalización de un panel de control de dispositivo
En esta guía de aprendizaje aprende a personalizar un panel de control de dispositivo.
Acerca de esta tarea
Aprenderá a utilizar las siguientes características del panel de control:
- Mostrar dimensiones en una tarjeta de valor ( paso 1).
- Trazar datos sin formato en una tarjeta de gráfico de líneas ( paso 2).
- Utilice variables en el título de una tarjeta de valor ( paso 3).
- Utilizar variables en títulos de zona activa ( paso 4).
- Utilizar hiperenlaces en tarjetas de tabla: ( paso 5)
- Personalice la gravedad para las configuraciones de umbral en las tarjetas de tabla:
Ejemplo: 
Antes de empezar
Asegúrese de que tiene datos y tipos de dispositivo para robots, las dimensiones se añaden a esos tipos de dispositivo, las imágenes están disponibles para añadirlas a un panel de control y tiene al menos un panel de control de dispositivo creado.
El texto siguiente es un ejemplo del archivo de configuración .json que puede utilizar para un panel de control de dispositivo:
{
"title": "Painting robot load performance",
"cards": [{
"type": "TIMESERIES",
"id": "line_cardID",
"size": "LARGE",
"title": "Minimum load vs Maximum load vs Average load",
"content": {
"series": [{
"dataSourceId": "load_mean_ID",
"label": "Average Load"
},
{
"dataSourceId": "load_max_ID",
"label": "Minimum Load"
},
{
"dataSourceId": "load_min_ID",
"label": "Maximumu Load"
}
]
},
"dataSource": {
"attributes": [{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"aggregator": "max",
"attribute": "load",
"id": "load_max_ID"
},
{
"aggregator": "min",
"attribute": "load",
"id": "load_min_ID"
}
],
"range": {
"count": -1,
"interval": "day"
},
"timeGrain": "hour"
}
},
{
"type": "TABLE",
"id": "table_card_ID",
"size": "LARGE",
"title": "Load",
"content": {
"columns": [{
"dataSourceId": "load_max_ID",
"label": "Max"
},
{
"dataSourceId": "load_mean_ID",
"label": "Mean"
},
{
"dataSourceId": "timestamp",
"label": "Timestamp",
"type": "TIMESTAMP",
"priority": 1
}
],
"expandedRows": [{
"dataSourceId": "travel_time_id",
"label": "Mean travel time"
}],
"sort": "DESC",
"thresholds": [{
"comparison": ">",
"dataSourceId": "load_mean_ID",
"label": "Critical",
"severity": 3,
"value": 376
},
{
"comparison": ">",
"dataSourceId": "load_max_ID",
"severity": 1,
"label": "Warning",
"value": 377
}
]
},
"dataSource": {
"attributes": [{
"aggregator": "max",
"attribute": "load",
"id": "load_max_ID"
},
{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"aggregator": "mean",
"attribute": "travel_time",
"id": "travel_time_id"
}
],
"range": {
"count": -7,
"interval": "day"
},
"timeGrain": "day"
}
},
{
"type": "VALUE",
"id": "value_card_ID",
"size": "SMALL",
"title": "Latest",
"content": {
"attributes": [{
"dataSourceId": "load_mean_ID",
"precision": 3,
"label": "load",
"thresholds": [{
"color": "#5aa700",
"comparison": "<",
"icon": "icon--info--outline",
"value": 10
},
{
"color": "#F00",
"comparison": ">",
"icon": "icon--warning",
"value": 10
}
]
}]
},
"dataSource": {
"attributes": [{
"aggregator": "last",
"attribute": "load",
"id": "load_mean_ID"
}]
}
},
{
"id": "Robot-overview-image",
"size": "LARGE",
"title": "Last month",
"type": "IMAGE",
"content": {
"image": "robot",
"alt": "Painting robot",
"hotspots": [{
"color": "#00F",
"icon": "icon--info--outline",
"content": {
"attributes": [{
"dataSourceId": "load_mean_id",
"label": "Average Load"
},
{
"dataSourceId": "load_max_id",
"label": "Max Load"
}
]
},
"locations": [{
"x": 5.2,
"y": 10.5
}]
}]
},
"dataSource": {
"attributes": [{
"attribute": "load",
"id": "load_mean_id",
"aggregator": "mean"
},
{
"attribute": "load",
"id": "load_max_id",
"aggregator": "max"
}
],
"range": {
"count": -1,
"interval": "month"
}
}
},
{
"id": "alerts",
"size": "LARGE",
"title": "Alerts in the last 3 hours",
"type": "ALERT",
"dataSource": {
"range": {
"count": -3,
"interval": "hour"
},
"type": "alert"
}
}
]
}
Paso 1: mostrar dimensiones en una tarjeta de valor
Mostrar el nombre del fabricante y el firmware de los robots en el panel de control. Cree una tarjeta de valor y añada las dimensiones manufacturer y firmware a la tarjeta.
En la sección card.content.attributes de la tarjeta, especifique el atributo que se debe utilizar y la etiqueta que se debe visualizar. Enlace el atributo a un dataSoutceId. En la sección card.dataSource , especifique el elemento de datos que se utilizará en attribute.
Ejemplo:
{
"id": "manufacturer_ID",
"size": "MEDIUM",
"title": "Car makers",
"type": "VALUE",
"dataSource": {
"attributes": [{
"attribute": "manufacturer",
"id": "manufacturer_id"
},
{
"attribute": "firmware",
"id": "firmware_id"
}
]
},
"content": {
"attributes": [{
"dataSourceId": "manufacturer_id",
"label": "Manufacturer",
"thresholds": [{
"color": "a56eff",
"dateSourceId": "manufacturer",
"comparison": "=",
"icon": "car",
"value": "GHI Industries"
}]
},
{
"dataSourceId": "firmware_id",
"label": "Firmware"
}
]
}
}
En este ejemplo, utilizando una configuración de umbral, se visualiza un icono de coche para el fabricante de coches GHI Industries. Añada el ejemplo de tarjeta de valor al panel de control.
Paso 2: trazar datos en bruto en una tarjeta de gráfico de líneas
Muestre datos de carga en bruto en la tarjeta de gráfico de líneas. Elimine las métricas de carga agregada de la tarjeta de gráfico de líneas.
Ejemplo:
{
"type": "TIMESERIES",
"id": "line_cardID",
"size": "LARGE",
"title": "Raw load",
"content": {
"series": [{
"dataSourceId": "load_raw_ID",
"label": "Raw Load"
}]
},
"dataSource": {
"attributes": [{
"attribute": "load",
"id": "load_raw_ID",
"aggregator": "min"
}],
"range": {
"type": "periodToDate",
"count": -1,
"interval": "day"
},
"timeGrain": "hour"
}
}
Sustituya el gráfico de líneas existente en el panel de control con este ejemplo.
Paso 3: usar una variable en el título de una tarjeta de valor
En la tarjeta de valor "Latest", actualice el título para mostrar el firmware del robot. Por ejemplo, "title": "Latest - firmware {firmware2_ID}" utiliza el firmware de dimensión como variable.
Ejemplo:
{
"type": "VALUE",
"id": "value_card_ID",
"size": "MEDIUM",
"title": "Latest - firmware {firmware2_ID}",
"content": {
"attributes": [{
"dataSourceId": "load_mean_ID",
"precision": 3,
"label": "load",
"thresholds": [{
"color": "#FF6347",
"dateSourceId": "manufacturer",
"comparison": "=",
"icon": "car",
"value": "GHI Industries"
},
{
"color": "#F00",
"comparison": ">",
"icon": "warning",
"value": 10
}
]
}]
},
"dataSource": {
"attributes": [{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"attribute": "firmware",
"id": "firmware2_ID"
}
]
}
}
Sustituya la tarjeta de valor "Latest" existente en el panel de control con este ejemplo.
Paso 4: usar una variable en los títulos de zonas activas
En la configuración de la tarjeta de imagen, utilice una variable en el título de zona activa, por ejemplo, "title": "Sensor load readings for robot {deviceid} at firmware {firmware}".
Ejemplo:
{
"id": "Robot-overview-image",
"size": "LARGE",
"title": "Last month",
"type": "IMAGE",
"content": {
"id": "robot.png",
"alt": "Painting robot",
"hotspots": [{
"color": "#00F",
"icon": "information",
"content": {
"title": "Sensor load readings for robot {deviceid} at firmware {firmware_img_ID}",
"description": "The robot is using {firmware_img_ID}",
"attributes": [{
"dataSourceId": "load_mean_id",
"label": "Average Load"
},
{
"dataSourceId": "load_max_id",
"label": "Max Load"
}
]
},
"locations": [{
"x": 5.2,
"y": 10.5
}]
}]
},
"dataSource": {
"attributes": [{
"attribute": "load",
"id": "load_mean_id",
"aggregator": "mean"
},
{
"attribute": "load",
"id": "load_max_id",
"aggregator": "max"
},
{
"attribute": "firmware",
"id": "firmware_img_ID"
}
],
"range": {
"count": -1,
"interval": "month"
}
}
}
Sustituya la tarjeta de imagen en el panel de control con este ejemplo.
paso 5: actualizar la tarjeta de tabla
En la tarjeta de tabla, añada un hiperenlace a un artículo relacionado sobre la fabricación de robots. Defina el hiperenlace en el objeto linkTemplate bajo la configuración de card.content.columns en la configuración de JSON.
En la configuración de thresholds , configure las opciones siguientes:
- Especifique un icono personalizado. Utilice
"icon": "warning square filled". - Especifique el color del icono. Utilice
"color": "#FF4500". - Especifique el texto a utilizar para gravedad. Utilice
"severityLabel": "Warning situation".
Utilice una variable en el título de tabla. Utilice "title": "Load - firmware
{firmwareID}".
Ejemplo:
{
"type": "TABLE",
"id": "table_card_ID",
"size": "LARGE",
"title": "Load - firmware {firmwareID}",
"content": {
"columns": [{
"dataSourceId": "load_max_ID",
"label": "Max"
},
{
"dataSourceId": "load_mean_ID",
"label": "Mean",
"linkTemplate": {
"href": "_url_",
"target": "_blank"
}
},
{
"dataSourceId": "timestamp",
"label": "Timestamp",
"type": "TIMESTAMP",
"priority": 1,
"sort": "DESC"
}
],
"expandedRows": [{
"dataSourceId": "travel_time_id",
"label": "Mean travel time"
}],
"thresholds": [{
"comparison": ">",
"dataSourceId": "load_max_ID",
"severity": 1,
"label": "Severity",
"icon": "warning square filled",
"color": "#FF4500",
"value": 377,
"severityLabel": "Warning situation"
}]
},
"dataSource": {
"attributes": [{
"aggregator": "max",
"attribute": "load",
"id": "load_max_ID"
},
{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"aggregator": "mean",
"attribute": "travel_time",
"id": "travel_time_id"
},
{
"attribute": "firmware",
"id": "firmwareID"
}
],
"range": {
"count": -7,
"interval": "day"
},
"timeGrain": "day"
}
}
Sustituya la tarjeta de tabla en el panel de control con este ejemplo.
Paso 6: importar el panel de control
- Inicie sesión como administrador.
- En la página Supervisar , en la pestaña Tipos de dispositivo , seleccione el tipo de dispositivo robot.
- Pulse
y, a continuación, seleccione Gestionar panel de control de dispositivo. - Pulse Importar para cargar el archivo de configuración del panel de control JSON local.
Ejemplo del panel de control actualizado:
{
"title": "Painting robot load performance",
"cards": [{
"id": "manufacturer_ID",
"size": "MEDIUM",
"title": "Car makers",
"type": "VALUE",
"dataSource": {
"attributes": [{
"attribute": "manufacturer",
"id": "manufacturer_id"
},
{
"attribute": "firmware",
"id": "firmware_id"
}
]
},
"content": {
"attributes": [{
"dataSourceId": "manufacturer_id",
"label": "Manufacturer",
"thresholds": [{
"color": "a56eff",
"comparison": "=",
"icon": "car",
"value": "GHI Industries"
}]
},
{
"dataSourceId": "firmware_id",
"label": "Firmware"
}
]
}
},
{
"type": "TIMESERIES",
"id": "line_cardID",
"size": "LARGE",
"title": "Raw load",
"content": {
"series": [{
"dataSourceId": "load_raw_ID",
"label": "Raw Load"
}]
},
"dataSource": {
"attributes": [{
"attribute": "load",
"id": "load_raw_ID"
}],
"range": {
"type": "periodToDate",
"count": -1,
"interval": "day"
},
"timeGrain": "hour"
}
},
{
"type": "TABLE",
"id": "table_card_ID",
"size": "LARGE",
"title": "Load - firmware {firmwareID}",
"content": {
"columns": [{
"dataSourceId": "load_max_ID",
"label": "Max"
},
{
"dataSourceId": "load_mean_ID",
"label": "Mean",
"linkTemplate": {
"href": "_url_",
"target": "_blank"
}
},
{
"dataSourceId": "timestamp",
"label": "Timestamp",
"type": "TIMESTAMP",
"priority": 1
}
],
"expandedRows": [{
"dataSourceId": "travel_time_id",
"label": "Mean travel time"
}],
"sort": "DESC",
"thresholds": [{
"comparison": ">",
"dataSourceId": "load_max_ID",
"severity": 1,
"label": "Severity",
"icon": "warning square filled",
"color": "#FF4500",
"value": 377,
"severityLabel": "Warning situation"
}]
},
"dataSource": {
"attributes": [{
"aggregator": "max",
"attribute": "load",
"id": "load_max_ID"
},
{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"aggregator": "mean",
"attribute": "travel_time",
"id": "travel_time_id"
},
{
"attribute": "firmware",
"id": "firmwareID"
}
],
"range": {
"count": -7,
"interval": "day"
},
"timeGrain": "day"
}
},
{
"type": "VALUE",
"id": "value_card_ID",
"size": "MEDIUM",
"title": "Latest - firmware {firmware2_ID}",
"content": {
"attributes": [{
"dataSourceId": "load_mean_ID",
"precision": 3,
"label": "load",
"thresholds": [{
"color": "#5aa700",
"comparison": "<",
"icon": "information",
"value": 10
},
{
"color": "#F00",
"comparison": ">",
"icon": "warning",
"value": 10
}
]
}]
},
"dataSource": {
"attributes": [{
"aggregator": "mean",
"attribute": "load",
"id": "load_mean_ID"
},
{
"attribute": "firmware",
"id": "firmware2_ID"
}
]
}
},
{
"id": "Robot-overview-image",
"size": "LARGE",
"title": "Last month",
"type": "IMAGE",
"content": {
"id": "robot.png",
"alt": "Painting robot",
"hotspots": [{
"color": "#00F",
"icon": "information",
"content": {
"title": "Sensor load readings for robot {deviceid} at firmware {firmware_img_ID}",
"description": "The robot is using {firmware_img_ID}",
"attributes": [{
"dataSourceId": "load_mean_id",
"label": "Average Load"
},
{
"dataSourceId": "load_max_id",
"label": "Max Load"
}
]
},
"locations": [{
"x": 5.2,
"y": 10.5
}]
}]
},
"dataSource": {
"attributes": [{
"attribute": "load",
"id": "load_mean_id",
"aggregator": "mean"
},
{
"attribute": "load",
"id": "load_max_id",
"aggregator": "max"
},
{
"attribute": "firmware",
"id": "firmware_img_ID"
}
],
"range": {
"count": -1,
"interval": "month"
}
}
}
]
}