Widget Library
Widget Library
La Widget Library es el área central para la gestión de widgets reutilizables en optiCLOUD. Aquí se gestionan tanto los widgets proporcionados por la plataforma como los widget bundles creados por el propio usuario.
Widget bundles
En la vista de tabla se muestran los widget bundles existentes.
- Bundle name: nombre del widget bundle
- Type: para distinguir entre bundles proporcionados y bundles definidos por el usuario
Hay dos tipos:
- System, para los widgets estándar proporcionados por OptiMEAS
- Custom, para los widget bundles creados por el propio usuario
Mediante la barra de acciones se pueden crear nuevos bundles o importar bundles existentes.
Crear un nuevo widget bundle
Mediante Create se crea un nuevo widget bundle. Para ello se asigna primero un título. Opcionalmente se pueden añadir además una imagen y una descripción.
Tras crearlo, el bundle aparece en la tabla y puede abrirse mediante la vista de detalle. Allí se pueden gestionar a continuación los widgets propiamente dichos dentro del bundle.
Crear widgets en el bundle
Dentro de un bundle se pueden crear nuevos widgets mediante Create Widget. Antes de iniciar el editor se selecciona primero el tipo de widget deseado.
Los tipos disponibles son:
- Time Series Widget, para datos de series temporales
- Latest Value Widget, para los últimos valores de medición o de estado
- Control Widget, para widgets con funcionalidad de control o RPC
- Alarm Widget, para datos de alarmas
- Static Widget, para widgets sin conexión a base de datos
La elección del tipo determina la estructura técnica básica del widget y, con ello, también cómo se consultarán o procesarán los datos posteriormente.
Widget Editor
Tras seleccionar el tipo se abre el Widget Editor. Funciona como un entorno de desarrollo integrado para widgets definidos por el usuario. En el lado izquierdo se encuentran las distintas áreas de edición; a la derecha se muestra de forma continua una vista previa del widget actual.
General
En el área General se definen las propiedades básicas del widget:
- Nombre
- Tipo de widget
- Imagen de vista previa
- Descripción
- Ajustes generales
- Data-Key-Settings
Si un widget debe utilizar ajustes propios, debe eliminarse el Settings-Form-Selector preconfigurado para que el widget acceda a su propia definición.
HTML
En el área HTML se define la estructura del widget.
Aquí se almacena la parte de marcado propiamente dicha del widget, que a continuación se hace visible directamente en la vista previa.
CSS
En el área CSS se diseña el aspecto visual del widget.
Con ello se pueden aplicar directamente al widget el diseño, los colores, los espaciados y otras definiciones de estilo.
JavaScript
En el área JavaScript se implementa la lógica del widget.
Aquí se procesan datos, se gestionan estados o se implementan interacciones y contenidos dinámicos.
Resources
Mediante Resources se pueden incorporar al widget bibliotecas externas adicionales, por ejemplo bibliotecas de visualización o auxiliares.
De este modo también se pueden crear widgets más complejos o especializados basados en bibliotecas existentes.
Settings Schema
En el área Settings Schema se define qué ajustes configurables ofrecerá posteriormente el widget en la interfaz.
Por tanto, el esquema describe la estructura y las posibilidades de entrada de la configuración del widget.
Data-Key-Settings
En el área Data-Key-Settings se define cómo se utilizan y configuran en el widget los canales de datos o las claves de datos.
Así, un widget puede prepararse de forma específica para determinadas fuentes de datos o estructuras de datos.
Widget Settings
La vista previa y los ajustes configurables del widget pueden consultarse directamente en el editor.
De este modo, durante el desarrollo se puede comprobar rápidamente cómo afectan los cambios en la estructura, la lógica o los ajustes al comportamiento posterior del widget.
Contexto
La Widget Library proporciona la base técnica para visualizaciones individuales y reutilizables dentro de los dashboards. La programación propiamente dicha de widgets complejos se describe con más detalle en otro lugar. Por ello, esta página sirve como visión general de la gestión, la creación y la estructura de los widgets en optiCLOUD.