Los gráficos son dibujos SVG vinculados a la instalación: un plano donde las lámparas se iluminan, un esquema de calefacción donde las bombas giran, un flujo de energía donde las flechas avanzan con la potencia o un plano de seguridad donde los contactos de puerta se ponen en rojo. Se preparan en la página Gráficos del panel de administración; los residentes los colocan en sus vistas (consulte «Gráficos en sus vistas»). La página Gráficos es una entrada propia del grupo EDIFICIO en la barra lateral, junto a Lógica.
Un gráfico se compone de cuatro elementos:
| Elemento | Qué es |
|---|---|
| El dibujo | Un documento SVG: algo que ha dibujado o exportado, una imagen de fondo o un lienzo vacío que se completa con símbolos |
| Símbolos | Formas predefinidas de la biblioteca (una lámpara, una persiana, una bomba, un indicador de valor…) colocadas en el dibujo con sus vínculos y acciones preconfigurados |
| Vinculaciones | Reglas que modifican una forma cuando cambia un valor: un color, un texto, una clase, una posición o una animación |
| Acciones | Lo que hace una pulsación, doble pulsación o pulsación larga en una forma: conmutar un dispositivo, ejecutar un escenario, abrir una estancia o ir a una vista |
La página Gráficos. La tabla enumera cada gráfico con su número de vinculaciones y acciones, así como su estado de colocación en Colocado («2 vista(s)» o «no colocado»). Cada fila ofrece Editar, Duplicar, Exportar y Eliminar. Encima de la tabla: Nuevo gráfico e Importar paquete.
⚠️ Advertencia: Eliminar un gráfico que está colocado en vistas también elimina esas ubicaciones; el cuadro de diálogo indica en cuántas.
Creación de un gráfico
Haga clic en Nuevo gráfico. La primera pantalla pregunta cómo se inicia el dibujo:
| Inicio | Qué sucede | Tamaño del gráfico |
|---|---|---|
| Desde un archivo SVG | Su dibujo es el gráfico. Los símbolos se colocan encima y puede vincular las formas que ya contiene. | El tamaño propio del archivo |
| Desde una imagen de fondo | Una foto, un plano escaneado o una escena generada se convierte en el fondo. El gráfico se crea y guarda de inmediato, almacenando la imagen en el servidor. Los símbolos van encima. | El tamaño de la imagen |
| Composición en blanco | Un lienzo vacío: solo símbolos, por ejemplo un logotipo. Elija Panorámico 16:10, Clásico 4:3, Cuadrado o un ancho y alto Personalizado. | El tamaño que elija |
| Ejemplos | Dos gráficos completos incluidos con el servidor: Flujo de energía y Estación de bombeo. Se importan como copias editables; sus referencias a dispositivos se emparejan por nombre. | El tamaño del ejemplo |
El tamaño de un gráfico es su espacio de coordenadas, que se muestra en la pestaña Fuente como Dimensiones del gráfico. Puede modificarlo más adelante; todo el dibujo se reescala proporcionalmente. Una imagen de fondo siempre lo ajusta al tamaño original de la imagen.
💡 Consejo: Una imagen clara (papel blanco) requiere trazos oscuros con independencia del tema de la app. Al empezar desde una imagen de fondo clara, el ajuste Colores cambia automáticamente a Dibujo claro (consulte Pruebas, ajustes y exportación a continuación).
El editor
El editor tiene dos columnas. A la izquierda, la Vista previa representa el gráfico exactamente como lo harán las aplicaciones, con una barra de herramientas:
| Botón | Qué hace |
|---|---|
| Insertar símbolo | Abre la biblioteca de símbolos (consulte Símbolos más abajo) |
| Mover | Modo de composición: arrastre un símbolo para moverlo, tire del punto naranja de la esquina para redimensionarlo, haga clic para editar sus vínculos, pulse Supr para eliminarlo o Escape para deseleccionar |
| Seleccionar | Haga clic en cualquier forma del dibujo para seleccionarla y editar sus vínculos; pensado para formas dibujadas a mano en lugar de símbolos |
| Desplazar, Alejar, Acercar | Desplace y aplique zoom a la vista previa; la rueda del ratón también hace zoom; haga clic en el porcentaje para volver al 100 %. El zoom solo afecta a su visualización del dibujo, no altera el gráfico |
A la derecha, cuatro pestañas:
- Fuente: el nombre, Subir SVG, las Dimensiones del gráfico y el propio texto SVG, que puede editar directamente. Debajo, el resultado del depurador: «El dibujo pasa el depurador sin cambios», o la lista de lo eliminado.
- Símbolos (n): cada símbolo colocado en el dibujo, además de Otros elementos para las formas propias del dibujo (consulte Símbolos más abajo).
- Valores de prueba: introduzca valores en la vista previa (consulte Pruebas, ajustes y exportación más abajo).
- Ajustes: descripción, colores, ajuste de escala, fondo, CSS adicional y recursos de imagen (consulte Pruebas, ajustes y exportación más abajo).
Qué hace el depurador. El servidor limpia cada dibujo al guardarlo: se eliminan scripts, manejadores de eventos, enlaces e imágenes externas, y las animaciones se restringen a atributos seguros. Un dibujo puede pesar como máximo 2 MB. Los cambios del depurador se enumeran bajo el código fuente para que nada desaparezca de forma imprevista.
Guardado. Nada se envía a las aplicaciones hasta que hace clic en Guardar. Si una vinculación o una acción está incompleta (un símbolo sin dispositivo asignado, un selector que no coincide con nada), se rechaza el guardado y el editor abre la fila correspondiente indicando el motivo.
Símbolos
Los símbolos son la forma más rápida de crear un gráfico: cada uno incluye las vinculaciones y acciones que necesita, por lo que colocar una lámpara y seleccionar su punto de luz basta para ponerla en funcionamiento.
La biblioteca. Haga clic en Insertar símbolo. El cuadro de diálogo se agrupa por categorías, con un cuadro de búsqueda.
| Categoría | Símbolo | Qué muestra y hace |
|---|---|---|
| Iluminación | Lámpara | La bombilla se enciende y brilla cuando la luz está encendida; una pulsación conmuta su estado |
| Climatización | Radiador | Un radiador con su temperatura; una pulsación abre la estancia |
| Climatización | Ventilador | Gira mientras está en marcha; una pulsación conmuta su estado |
| Cerramientos | Persiana | Una ventana cuya persiana sigue la posición del actuador de persianas |
| Sala técnica | Bomba | En verde y girando durante el funcionamiento; una pulsación conmuta su estado tras confirmación |
| Sala técnica | Válvula | Una válvula de dos vías con su lado abierto resaltado; una pulsación conmuta su estado |
| Sala técnica | Depósito | Un depósito cuyo llenado y cifra siguen un nivel en porcentaje |
| Energía | Panel solar | Una instalación fotovoltaica con su cifra de producción |
| Energía | Batería | Una batería cuyo llenado sigue el estado de carga |
| Energía | Red eléctrica | La conexión a la red, en verde durante la exportación, con la potencia activa |
| Energía | Cargador VE | Un vehículo que se ilumina durante la recarga, con la potencia de carga |
| Etiquetas y líneas | Línea de flujo | Una flecha discontinua cuyos trazos se desplazan con el flujo de energía, más rápido a mayor potencia y en sentido inverso si cambia el signo |
| Etiquetas y líneas | Valor analógico | Una cápsula que muestra cualquier lectura con su unidad; una pulsación abre el dispositivo |
| Etiquetas y líneas | Texto | Una etiqueta libre que escribe usted mismo; escálela y gírela como cualquier símbolo |
| Etiquetas y líneas | Indicador de estado | Un punto de color con un texto de estado para una entrada binaria: abierto / cerrado, encendido / apagado |
| Navegación | Zona activa, Zona activa (ancha) | Un área táctil invisible para colocar sobre una habitación de un plano; una pulsación redirige a una estancia, categoría, vista o dispositivo. Azul solo en el editor |
| Mis símbolos | los suyos | Iconos que ha subido (consulte más abajo) |
Zonas activas (Hotspots). Una Zona activa es un símbolo sin representación gráfica propia: un rectángulo invisible cuya superficie completa responde a una pulsación. Coloque una sobre cada estancia de un plano, ajuste su tamaño con el punto de la esquina y elija su destino en su acción (Ir a una estancia viene preconfigurado). Se muestra con un tono azul durante la edición para facilitar su localización; los residentes nunca la ven.
Colocación y movimiento. Al elegir un símbolo, se inserta en el centro del dibujo, la vista previa cambia al modo Mover y se abre el panel del símbolo. Arrástrelo a su posición, tire del punto naranja de la esquina para redimensionarlo o introduzca su Ubicación: X, Y, Escala y Giro. Ajustar al lienzo escala y centra el diseño del símbolo para ocupar todo el dibujo, método ideal para gráficos que solo contienen un logotipo. Un rectángulo discontinuo delimita los bordes del lienzo al mover elementos: lo que quede fuera se recorta en las aplicaciones.
El panel del símbolo. En la parte superior, Dispositivo vincula todas las reglas y acciones del símbolo a un único dispositivo en una sola selección; para la mayoría de símbolos es el único parámetro necesario. Debajo de la ubicación, tres subpestañas muestran las Vinculaciones, Acciones y Animaciones del símbolo, editables según se describe a continuación. Eliminar símbolo lo borra junto con todas sus filas asociadas.
Texto. El símbolo Texto muestra las palabras que escriba en su campo Texto. Modifique su escala para cambiar de tamaño; vincule su color o visibilidad como cualquier otro elemento.
Otros elementos. Las formas propias del dibujo se enumeran en Otros elementos por su identificador (id); una forma sin id no se puede vincular. Asigne identificadores a las formas en la pestaña Fuente o selecciónelas con la herramienta Seleccionar; a continuación, añada vinculaciones y acciones del mismo modo. Las filas cuyo selector es una clase o una ruta en lugar de un id se agrupan en Filas en otros selectores.
Mis símbolos. En la categoría Mis símbolos, el botón Subir símbolo permite añadir iconos SVG personalizados (una cámara, un logotipo o un equipo no disponible en la biblioteca estándar):
| Campo | Significado |
|---|---|
| Archivo SVG | El icono, con un peso máximo de 256 KB. Pasa por el mismo proceso de depuración que un dibujo |
| Nombre | Cómo aparece identificado en la biblioteca |
| Colores | Un color redibuja el icono con el color de texto del dibujo, permitiendo que una vinculación lo vuelva verde o rojo. Conservar colores mantiene el diseño original y solo permite mostrar / ocultar |
| Palabras clave | Términos mediante los cuales el buscador localiza el símbolo |
Un símbolo personalizado no incluye filas preconfiguradas: añada las vinculaciones y acciones que necesite tras insertarlo. Cada gráfico que lo utiliza guarda su propia copia independiente, por lo que renombrar o eliminar el símbolo de la biblioteca nunca afecta a los gráficos ya existentes.
Vinculaciones
Una vinculación modifica una forma cuando cambia un valor. Abra un símbolo (o un elemento en Otros elementos) y acceda a la subpestaña Vinculaciones. Cada fila consta de cuatro partes:
Selector: qué forma controla la vinculación. En las filas propias de un símbolo ya viene definido (#lamp_1 .body); en una forma dibujada a mano corresponde al id de dicha forma.
Origen: de dónde procede el valor:
| Origen | Campos |
|---|---|
| Dispositivo | Un dispositivo y uno de sus objetos: estado de conmutación de la luz, potencia del contador, lectura del sensor |
| Función | Una función del motor de lógica y una de sus salidas (consulte «Configuración y salidas de funciones») |
| Estático | Un valor fijo escrito manualmente: útil para probar una regla o forzar un estado determinado |
Qué cambia: qué efecto produce el valor sobre la forma:
| Tipo | Efecto | Campos adicionales |
|---|---|---|
| Atributo | Establece un atributo SVG (fill, stroke, opacity, width…) | el nombre del atributo |
| Estilo | Establece una propiedad CSS | el nombre de la propiedad |
| Texto | Sustituye el texto de la forma por el valor | dígitos, unidad y una plantilla como {value} {unit} |
| Clase | Añade una clase mientras el valor está activo y la retira cuando no lo está | el nombre de la clase (combínelo con CSS adicional) |
| Visibilidad | Muestra la forma cuando el valor está activo y la oculta en caso contrario | — |
| Transformación | Rota, desplaza o escala la forma en función del valor | la operación |
| Animación | Controla una fila de animación (consulte Animaciones más abajo): ejecutar al activar, velocidad (dur) o dirección por signo | la animación y el modo |
| Símbolo (href) | Sustituye la forma por otro #symbol del dibujo | — |
Mapeo: cómo se transforma el valor recibido en lo que la forma requiere:
| Mapeo | Qué hace | Ejemplo |
|---|---|---|
| Directo | El valor se utiliza tal cual | una temperatura en un Texto |
| On / off | Un resultado al activar y otro al desactivar | #facc15 al activar, #64748b al desactivar, para el relleno de una lámpara |
| Rango | Mapea un rango de entrada a un rango de salida; Limitar al rango restringe los extremos, Usar magnitud ignora el signo | 0–100 % en una persiana desplazada de −28 a 0 |
| Umbrales | Escalonado: hasta cierto valor devuelve un resultado, luego el siguiente y finalmente en otro caso | hasta 15 rojo, hasta 30 naranja, en otro caso verde, para un depósito |
| Búsqueda | Tabla de valores exactos con opción en otro caso para cualquier valor restante | 1 → Abierto, 0 → Cerrado, para un texto de estado |
💡 Consejo: Las filas de la biblioteca son la mejor referencia: coloque un Indicador de estado y examine sus tres vinculaciones: el relleno del punto (On / off), el relleno del halo (On / off) y el texto de estado (Búsqueda). Cambie las dos palabras en Búsqueda para indicar «Abierto» y «Cerrado», o «Armado» y «Desarmado».
Acciones
Una acción ejecuta un comando cuando se toca una forma. Abra la subpestaña Acciones de un símbolo o añada una a una forma dibujada a mano.
| Campo | Opciones |
|---|---|
| Selector | La forma que recibe el gesto (normalmente el símbolo completo) |
| Gesto | Pulsación, Doble pulsación, Pulsación larga |
| Hace | Fijar valor de dispositivo (con el Valor a enviar) · Conmutar un dispositivo · Paso de valor de dispositivo · Abrir estancia del dispositivo · Abrir detalle del dispositivo (la página que abre su icono; un dispositivo sin detalle abre su estancia) · Ejecutar un escenario · Ejecutar una automatización · Comando global (luces o persianas para todo el edificio, estancia o categoría) · Ir a una vista · Ir a una estancia · Ir a una categoría |
| Pedir confirmación | Pregunta mostrada antes de ejecutar la acción, por ejemplo ¿Arrancar la bomba?. Déjelo vacío para ejecutar inmediatamente |
Una misma forma puede admitir varias acciones mediante distintos gestos: en el ejemplo Estación de bombeo, una bomba conmuta su estado con una pulsación (tras confirmación) y abre su dispositivo con una pulsación larga.
📘 Nota: Los comandos de dispositivos, escenarios y automatizaciones se ejecutan en el servidor, cualquiera que sea la app emisora. Abrir estancia del dispositivo, Abrir detalle del dispositivo, Comando global, Ir a una vista, Ir a una estancia e Ir a una categoría tienen lugar de forma local en la app donde se tocó la pantalla, por lo que la vista previa de administración no puede ejecutarlas.
📘 Nota: Los usuarios solo disponen de las acciones permitidas por su cuenta. Un símbolo vinculado a un dispositivo fuera de las estancias y categorías del usuario se comportará como un simple dibujo estático para dicho perfil; un comando global sobre todo el edificio queda reservado a administradores.
Animaciones
Una fila de animación añade movimiento continuo a una forma (un rotor giratorio, trazos discontinuos a lo largo de una línea o una lámpara parpadeante) que las vinculaciones pueden iniciar, detener, acelerar o invertir.
| Campo | Significado |
|---|---|
| Objetivo | La forma que se mueve (#pump_1 .rotor) |
| Atributo | Qué se anima: transform para un movimiento físico, o un atributo como stroke-dashoffset u opacity |
| Transformación | Para transform: rotate, scale, translate, skewX, skewY (la rotación gira sobre el centro del símbolo) |
| Desde, Hasta | Los valores inicial y final |
| Duración | Un ciclo completo, como 1s |
| Repetición | Un número fijo o indefinite |
| Inicio | indefinite cuando lo inicia una vinculación, load para ejecutarse al cargar el gráfico o una lista SMIL como pump1.click; spin.end+1s |
| Fin, Fill | Condición estándar de finalización SMIL y estado en el que queda el elemento al detenerse |
Para que una animación responda a la instalación, añada una vinculación cuyo campo Qué cambia sea Animación: ejecutar al activar la inicia y detiene según un estado, velocidad (dur) ajusta su ciclo a partir de un valor (un mapeo por Rango de vatios a segundos) y dirección por signo invierte el giro con valores negativos (la Línea de flujo combina los tres modos).
Pruebas, ajustes y exportación
Valores de prueba. La pestaña muestra un campo por cada valor vinculado para que pueda introducir lecturas numéricas y observar la respuesta de la vista previa. Active Valores en vivo para alimentar la vista previa con los datos reales de la instalación. Probar acciones (que requiere Valores en vivo) hace que los clics en la vista previa ejecuten su acción correspondiente en el servidor (conmutar dispositivos, lanzar escenarios y automatizaciones), permitiendo validar el funcionamiento del gráfico antes de que los residentes lo utilicen. Las acciones locales de la app (abrir una estancia, comandos globales, ir a una vista) se notifican en pantalla pero no se ejecutan.
Ajustes.
| Ajuste | Significado |
|---|---|
| Descripción | Nota visible en la lista general |
| Colores | Seguir tema de la app: los símbolos y textos adoptan el color de la aplicación; Dibujo claro: trazos oscuros fijos para imágenes de fondo blancas; Dibujo oscuro: trazos claros fijos con independencia del tema |
| Ajuste de escala | Cómo se adapta el dibujo a su tarjeta: contain muestra la totalidad del diseño, cover llena la tarjeta recortando excedentes |
| Fondo | Color de fondo detrás del dibujo o transparent |
| Altura mín. (px) | Altura mínima que conservará la tarjeta contenedora |
| CSS adicional | Hoja de estilos aplicada al dibujo: clases para vinculaciones de Clase, animaciones por keyframes y transiciones |
| Recursos de imagen | Imágenes que el dibujo puede referenciar (PNG, JPEG, WebP). Subir imagen añade un archivo; Usar como fondo lo establece como fondo del dibujo y reescala el gráfico a sus dimensiones. Una imagen en uso se indica como en uso y no puede eliminarse; al sustituir el fondo, el editor ofrece eliminar el archivo anterior |
Exportación e importación. El botón Exportar descarga un gráfico como paquete único: el dibujo, sus filas, ajustes e imágenes en un solo archivo. La opción Importar paquete en la página Gráficos crea un gráfico a partir de dicho archivo. Las referencias a dispositivos, funciones, escenarios y vistas se emparejan por nombre; cualquier referencia sin correspondencia se descarta y el proceso informa de la cantidad omitida. Este mecanismo permite distribuir los dos ejemplos integrados y transferir gráficos entre diferentes instalaciones.
Copias de seguridad. Los gráficos y los símbolos personalizados residen en la base de datos del servidor, por lo que quedan incluidos en la copia de seguridad del sistema (consulte «Copia de seguridad y restauración»). Las imágenes que referencia un gráfico se almacenan como archivos independientes y no forman parte de la copia de seguridad: exporte el gráfico como paquete para conservarlas conjuntamente.