Visualización de Datos con Grafana

HyperVisu incluye una potente integración con Grafana, una plataforma de análisis y visualización de código abierto. Con Grafana, puedes crear tableros de monitoreo de energía sofisticados, visualizar datos históricos y obtener información sobre el rendimiento de tu hogar inteligente. Esta sección explica cómo acceder a Grafana, crear tableros utilizando los datos de HyperVisu y mostrar estos tableros en la aplicación móvil de HyperVisu.

Accediendo a Grafana

Grafana está integrado directamente con la base de datos InfluxDB que almacena todos tus puntos de datos históricos.

Accediendo a través de un Navegador Web

Para acceder a la interfaz de Grafana desde tu servidor HyperVisu:

Abre un navegador web e ingresa la dirección IP de tu servidor HyperVisu seguida de /grafana
- Ejemplo: http://192.168.1.60/grafana

Autenticación y Gestión de Usuarios

Grafana utiliza su propio sistema de autenticación con las siguientes credenciales predeterminadas:
- Nombre de usuario: admin
- Contraseña: zeAAlyhQa5ej
Estas credenciales son diferentes de tu inicio de sesión de administración de HyperVisu
Por razones de seguridad, se recomienda encarecidamente cambiar la contraseña predeterminada después de tu primer inicio de sesión

Creando Tableros

Grafana te permite crear tableros personalizados que presentan tus datos de manera significativa. Estos tableros pueden incluir varios tipos de visualizaciones como gráficos, medidores y paneles de estadísticas.

Conceptos Básicos del Tablero

Para crear un nuevo tablero:

Después de iniciar sesión en Grafana, haz clic en el icono + en la barra lateral
Selecciona Tablero del menú desplegable
Haz clic en Agregar nuevo panel para comenzar a agregar visualizaciones a tu tablero
Guarda tu tablero haciendo clic en el icono de guardar (símbolo de disco) en la esquina superior derecha y proporciona un nombre descriptivo

Fuentes de Datos y Estructura de Consultas

HyperVisu configura automáticamente Grafana con las siguientes fuentes de datos:

InfluxDB: Preconfigurado para conectarse a la base de datos InfluxDB incorporada
- Esta base de datos contiene todos los datos históricos de los widgets que tienen habilitado el registro
- Los datos se almacenan en un bucket llamado "hypervisu"
- Los datos están organizados utilizando la siguiente estructura:
  - _measurement: El número de serie de tu servidor (visible en la parte superior izquierda de la página de administración)
  - _field: El tipo de valor (típicamente "value_float" para valores numéricos)
  - category_name: La categoría asignada al widget en HyperVisu
  - widget_name: El nombre del widget
  - object_id: El ID único del objeto de comunicación del widget
- Para acceder a estos datos, escribirás consultas Flux que filtren en función de estos campos

Ejemplos Adicionales de Consultas Flux

Consumo de Energía Diario

from(bucket: "hypervisu")

 | > range(start: -24h)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Reemplaza con el SN de tu servidor
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Energía")
 | > filter(fn: (r) => r["widget_name"] == "Consumo")
 | > difference()
 | > sum()

Temperatura Máxima Durante la Última Semana

from(bucket: "hypervisu")

 | > range(start: -7d)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Reemplaza con el SN de tu servidor
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Clima")
 | > filter(fn: (r) => r["widget_name"] == "Temperatura")
 | > max()

Uso Promedio de Energía por Hora (para Análisis de Patrones)

from(bucket: "hypervisu")

 | > range(start: -7d)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Reemplaza con el SN de tu servidor
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Energía")
 | > filter(fn: (r) => r["widget_name"] == "Potencia Activa")
 | > aggregateWindow(every: 1h, fn: mean, createEmpty: false)
 | > duplicate(column: "_stop", as: "hour")
 | > timeShift(duration: -1h, columns: ["hour"])
 | > hourSelection(start: 0, stop: 23)
 | > group(columns: ["hour"])
 | > mean()

Creando Paneles de Monitoreo de Energía

El monitoreo de energía es una de las aplicaciones más poderosas de Grafana dentro de HyperVisu. Aquí te mostramos cómo crear paneles de visualización de energía:

Desde tu tablero, haz clic en Agregar panel
Selecciona el tipo de visualización que mejor se adapte a tus datos (las opciones comunes incluyen):
- Gráfico de series temporales: Para mostrar el consumo de energía a lo largo del tiempo
- Medidor: Para mostrar el uso actual de energía
- Estadística: Para mostrar valores acumulativos como kWh diarios
Configura el panel con una consulta que extraiga datos de InfluxDB:
- Selecciona InfluxDB como la fuente de datos
- Selecciona Flux como el lenguaje de consulta
- Usa el generador de consultas o escribe una consulta Flux para seleccionar tus datos de energía
- Tu consulta debe hacer referencia al número de serie de tu servidor como el campo de medición
  - El número de serie del servidor se puede encontrar en la parte superior izquierda de la página de administración
- Filtra los datos por nombre de categoría, nombre de widget o ID de objeto según sea necesario

Ejemplos de Consultas Flux para Monitoreo de Energía

Al crear paneles, necesitarás escribir consultas Flux para recuperar datos de la base de datos InfluxDB de HyperVisu. Aquí hay algunos ejemplos:

Consumo de Energía a lo Largo del Tiempo (Gráfico de Series Temporales)

from(bucket: "hypervisu")

 | > range(start: v.timeRangeStart, stop: v.timeRangeStop)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Reemplaza con el SN de tu servidor
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Reemplaza con el ID de objeto real
 | > aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
 | > yield(name: "mean")

Lectura de Voltaje Actual (Medidor o Estadística)

from(bucket: "hypervisu")

 | > range(start: -1h)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456"")  // Reemplaza con el SN de tu servidor
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Reemplaza con el ID de objeto real
 | > last()

Consultando por ID de Objeto

Cada objeto almacenado en la base de datos de HyperVisu tiene un ID de objeto único, este ID de objeto se puede encontrar en el modal de objeto en la página de edición de dispositivos de la administración de HyperVisu (o en la sección "Importar/Exportar" de la página de administración, en la tabla de "objetos de comunicación"):

from(bucket: "hypervisu")

 | > range(start: v.timeRangeStart, stop: v.timeRangeStop)
 | > filter(fn: (r) => r["_measurement"] == "2ccf674etf456")  // Reemplaza con el SN de tu servidor
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Reemplaza con el ID de objeto real
 | > aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
 | > yield(name: "mean")

Para crear un panel completo de consumo de energía:

Crea un panel de series temporales
Pega una de las consultas de ejemplo anteriores, ajustándola para tu servidor específico y los IDs de widgets
Establece rangos de tiempo apropiados (últimas 24 horas, última semana, etc.)
Agrega formato de unidad (kW, A, kWh) para hacer que los valores sean más legibles
Personaliza los colores para indicar diferentes niveles de energía (por ejemplo, naranja para el consumo)

Mostrando Tableros en HyperVisu

Una vez que hayas creado tus tableros de Grafana, puedes integrarlos directamente en la aplicación móvil de HyperVisu para un fácil acceso.

Compartiendo URLs de Tableros

Para encontrar la URL correcta para tu tablero:

Abre tu tablero en Grafana
Haz clic en el botón Compartir en la barra de navegación superior
Selecciona la pestaña Enlace
Copia la URL proporcionada

Creando Widgets WebView

Para mostrar tableros de Grafana en la aplicación HyperVisu:

En ElauPro, ve a la sección Visualización
Haz clic en Agregar Widget
Selecciona WebView como el tipo de widget
Configura el widget:
- Dale un nombre descriptivo (por ejemplo, "Tablero de Energía")
- Asignalo a una categoría apropiada (por ejemplo, "Energía")
- Selecciona la habitación donde deseas que aparezca
- En el campo URL, ingresa la URL completa a tu tablero de Grafana
  - Formato: http:////grafana/d//?orgId=1

Viendo Tableros en la Aplicación Móvil

Una vez configurados, puedes acceder a tus tableros de Grafana directamente desde la aplicación móvil de HyperVisu:

Abre la aplicación móvil de HyperVisu
Navega a la habitación o categoría donde se encuentra tu widget WebView
Toca el widget WebView para abrir el tablero de Grafana
El tablero se cargará directamente dentro de la aplicación, mostrando datos en tiempo real e históricos

Optimizando Tableros para Visualización Móvil

Para la mejor experiencia en dispositivos móviles:

Usa fuentes y elementos de visualización más grandes
Limita el número de paneles por tablero para la visualización móvil
Crea tableros separados optimizados para visualización móvil versus de escritorio
Considera la orientación vertical de los dispositivos móviles al diseñar diseños
Prueba tus tableros en pantallas de tamaño tablet y teléfono

Nota: Los cambios realizados en los tableros de Grafana se reflejan inmediatamente en la aplicación HyperVisu. No es necesario reconfigurar el widget WebView después de actualizar el contenido o diseño de un tablero.