Diagrams

De wiki.kiconex


Diagramas en Cloud kiconex

Los diagramas permiten crear vistas visuales de una instalación en Cloud kiconex. En un mismo lienzo pueden combinarse imágenes, parámetros, valores en tiempo real, botones, textos y acciones de navegación.

Un diagrama puede utilizarse como sinóptico de una instalación, como panel de supervisión o como interfaz simplificada para consultar información y ejecutar acciones sobre controles, siempre que el usuario tenga los permisos necesarios.

Para qué sirven

Los diagramas sirven para representar de forma visual el estado y el funcionamiento de una o varias instalaciones.

Pueden utilizarse para:

  • Mostrar valores y estados de parámetros en tiempo real.
  • Representar una instalación sobre un plano, esquema o imagen de fondo.
  • Navegar entre capas, diagramas, instalaciones, controles o gráficas.
  • Introducir y enviar valores a parámetros configurables.
  • Ejecutar varios comandos mediante un botón multiacción.
  • Crear vistas adaptadas a supervisión, operación o presentación.

Información

La información y las acciones disponibles en un diagrama dependen de los permisos del usuario sobre el propio diagrama, las instalaciones y los controles relacionados.

Dónde se encuentran

Los diagramas se encuentran dentro de cada instalación.

Para acceder:

  1. Abra la instalación correspondiente.
  2. Entre en la sección Diagramas.
  3. Seleccione un diagrama existente o cree uno nuevo.

En el listado pueden aparecer las siguientes acciones, según los permisos del usuario:

  • Ver.
  • Editar.
  • Duplicar.
  • Mover, para cambiar el propietario.
  • Asignar permisos.
  • Eliminar.

Un diagrama puede editarse desde el menú contextual del listado o mediante el icono de edición disponible al abrirlo.

Crear un diagrama

Para crear un diagrama:

  1. Acceda a la sección Diagramas de la instalación.
  2. Pulse el botón +.
  3. Complete la configuración general.
  4. Cree o configure la capa principal.
  5. Añada los elementos necesarios al lienzo.
  6. Pulse Guardar.

Configuración general

La pestaña General permite definir los datos y el formato del diagrama.

Los campos disponibles son:

  • Nombre: obligatorio.
  • Descripción: opcional.
  • Tamaño del lienzo: permite seleccionar medidas predefinidas desde 800 × 600 hasta 1920 × 1080 píxeles.
  • Orientación: vertical u horizontal.
Vista de la pestaña General.

Importante

Si se cambia el tamaño o la orientación después de colocar los elementos, Cloud kiconex intenta ajustar el contenido, pero algunos objetos pueden quedar fuera del área visible. Revise todas las capas antes de guardar.

Capas del diagrama

Un diagrama está formado por una o varias capas. Cada capa funciona como una página independiente con sus propios elementos y color de fondo. Todo diagrama debe tener una única capa principal. Esta es la capa que se muestra al abrir el diagrama.

Añadir una capa

El botón grande + del panel lateral es la opción para crear una capa nueva. Al añadirla pueden configurarse:

  • Nombre de la capa.
  • Capa principal.
  • Mostrar en modo presentación.
  • Duración de la capa en segundos durante la presentación.

Al pulsar una miniatura del panel lateral, el editor cambia inmediatamente a esa capa.

Gestionar las capas

Al hacer clic derecho sobre una capa aparecen las siguientes opciones:

  • Editar.
  • Duplicar.
  • Mover arriba.
  • Mover abajo.
  • Eliminar.

El orden de las capas determina su posición en el panel lateral y el recorrido utilizado en el modo presentación.

Configurar el modo presentación

El modo presentación recorre automáticamente las capas que tengan activada la opción Mostrar. Cada capa permanece visible durante la duración configurada en segundos.

Para incluir una capa en la presentación:

  1. Haga clic derecho sobre la capa.
  2. Seleccione Editar.
  3. Active Configuración para presentación → Mostrar.
  4. Indique la duración en segundos.
  5. Guarde la capa y el diagrama.

Editor del diagrama

La pestaña Diagrama contiene el lienzo, el panel de capas y la barra de herramientas.

Vista general del editor con panel de capas, barra de herramientas y lienzo.

Los elementos pueden desplazarse libremente arrastrándolos por el lienzo. La cuadrícula es únicamente una referencia visual: no alinea ni ajusta automáticamente los objetos.

Solo puede seleccionarse un elemento cada vez. Su tamaño no se modifica directamente desde el lienzo, sino desde la ventana de edición del propio elemento.

Cloud kiconex no dispone de opciones para deshacer o rehacer cambios dentro del editor.

Importante

Los cambios del editor no se guardan automáticamente. Pulse Guardar antes de salir. Si intenta abandonar la edición con cambios pendientes, Cloud kiconex muestra un aviso.

Barra de herramientas

La barra de herramientas permite añadir y configurar el contenido de la capa activa.

Los iconos, de izquierda a derecha, son:

  1. Añadir imagen.
  2. Añadir parámetros.
  3. Añadir botón.
  4. Añadir objeto.
  5. Añadir texto.
  6. Cambiar color de fondo.
  7. Añadir botón multiacción.
  8. Exportar a PNG.
  9. Exportar a SVG.
  10. Mostrar u ocultar la cuadrícula.

Añadir una imagen

La opción Añadir imagen permite subir una imagen y ajustar su tamaño de forma proporcional.

Cloud kiconex admite los formatos reconocidos por el navegador como imagen. Se recomienda utilizar archivos de hasta 2 MB para evitar tiempos de carga elevados.

Vista ventana de nueva imagen.


Una imagen puede utilizarse como elemento independiente o ampliarse para ocupar el lienzo y servir como base visual del diagrama. Una práctica habitual es preparar previamente un plano o diseño en un editor gráfico, subirlo como imagen y colocar encima los parámetros y botones de Cloud kiconex.

Añadir parámetros

La opción Añadir parámetros permite mostrar información de uno o varios parámetros y definir qué ocurre cuando el usuario pulsa sobre su área.

La configuración se divide en las pestañas Parámetros, Forma, Texto y Acción.

Seleccionar los parámetros

En la pestaña Parámetros:

  1. Seleccione una instalación. La instalación actual aparece seleccionada inicialmente, pero puede elegirse otra instalación accesible.
  2. Seleccione un control.
  3. Seleccione uno o varios parámetros.

En un mismo elemento pueden seleccionarse varios parámetros, siempre que pertenezcan a la misma instalación y al mismo control.

Vista ventana añadir parámetro.

Configurar el icono

La opción Mostrar icono permite decidir si el elemento presenta el icono asociado al parámetro.

El icono procede de la librería del control. Cuando el parámetro es una variable de estado y sus metadatos tienen iconos asociados, el icono puede cambiar dinámicamente según el valor recibido.

Puede configurarse:

  • Ancho y alto del icono.
  • Posición X e Y dentro del elemento.
  • Orientación entre −180° y 180°.

Configurar la forma

La pestaña Forma define el área del elemento y su zona pulsable.

Permite configurar:

  • Altura.
  • Ancho.
  • Radio de las esquinas.
  • Color.

El radio controla el redondeo de las esquinas.

Configurar el texto

La pestaña Texto permite introducir un texto personalizado y controlar la información visible.

Puede configurarse:

  • Color del texto.
  • Mostrar u ocultar el valor actual del parámetro.
  • Posición X e Y del valor.
  • Tamaño del valor.
  • Mostrar u ocultar el nombre del parámetro.
  • Posición X e Y del nombre.
  • Tamaño del nombre.

El valor es la lectura actual del parámetro. El nombre es la denominación configurada para ese parámetro.

Configurar una acción

La acción es opcional y se ejecuta al pulsar sobre el área del elemento durante la visualización del diagrama.

Las acciones disponibles son:

  • Cambiar de capa.
  • Cargar diagrama.
  • Cargar instalación.
  • Cargar control.
  • Link externo.
  • Visualizar gráfica.
  • Acción del parámetro.

Visualizar gráfica abre una gráfica de la instalación seleccionada a la que el usuario tenga acceso. No abre automáticamente el histórico del parámetro representado en el elemento.

Para utilizar Link externo, introduzca la dirección completa, incluido el protocolo, por ejemplo `https://`.

La opción Acción del parámetro se utiliza con parámetros que admiten escritura. Al pulsar el elemento, Cloud kiconex abre una ventana para introducir un valor y confirmarlo antes de enviarlo al control. Puede utilizarse, por ejemplo, para modificar una consigna, un tiempo de retardo, un ajuste o un valor de calibración.

Importante

El envío del valor depende de los permisos del usuario sobre el control y de que el parámetro admita escritura. Revise el valor antes de confirmarlo.

Para más información sobre parámetros y consignas, consulte Comandos, consignas y parámetros de un control.

Añadir un botón

La opción Añadir botón crea un área pulsable para realizar acciones de navegación.

Su configuración se divide en:

  • Forma: altura, ancho, radio y color.
  • Texto: contenido, tamaño y color.
  • Acción: acción y destino.

El área completa de la forma actúa como zona pulsable.

Los botones admiten las siguientes acciones: cambiar de capa, abrir otro diagrama, cargar una instalación o un control, abrir un enlace externo o visualizar una gráfica.

Un botón normal no ejecuta comandos sobre controles. Para enviar un valor utilice un elemento de parámetro. Para ejecutar varios comandos utilice un botón multiacción.

Añadir un objeto

La opción Añadir objeto crea una forma decorativa que puede contener texto.

Permite configurar:

  • Altura y ancho.
  • Radio de las esquinas.
  • Color.
  • Texto, tamaño y color del texto.

El texto es opcional, por lo que el objeto puede utilizarse únicamente como forma visual. Los objetos no admiten acciones.

Añadir texto

La opción Añadir texto crea una etiqueta informativa de una sola línea.

Puede configurarse el contenido, el tamaño y el color. El texto no admite acciones.

Cambiar el color de fondo

El selector de fondo permite configurar el color y la opacidad de la capa activa.

Selector de color y opacidad

La barra superior del selector controla el color y la barra inferior controla la opacidad.

El fondo se aplica únicamente a la capa seleccionada.

Añadir un botón multiacción

Un botón multiacción permite enviar varios comandos desde un único elemento.

Su configuración se divide en las pestañas:

  • Forma.
  • Texto.
  • Imagen.
  • Multiacción.

Forma, texto e imagen

La forma permite configurar altura, ancho, radio y color.

En la pestaña de texto pueden definirse el contenido, el color, la posición y el tamaño. La opción Mostrar texto permite ocultarlo sin eliminar la configuración.

La imagen es opcional. Al añadirla, puede utilizarse como representación visual del propio botón y configurar su posición X, posición Y y tamaño.

Añadir comandos

En la pestaña Multiacción:

  1. Seleccione una instalación.
  2. Seleccione un control.
  3. Seleccione un comando.
  4. Pulse Añadir.
  5. Repita el proceso para incorporar más comandos.
Lista y selección de comandos del botón multiacción

Un mismo botón puede reunir comandos de instalaciones y controles diferentes.

No existe un límite técnico establecido, pero se recomienda no superar aproximadamente 20 comandos en un mismo botón y agrupar únicamente acciones relacionadas.

Importante

El botón multiacción no solicita confirmación antes de enviar los comandos. El usuario debe tener permisos de ejecución sobre todos los controles implicados.

Gestionar los elementos del lienzo

Al hacer clic derecho sobre cualquier elemento aparece el mismo menú contextual.

Las opciones disponibles son:

  • Editar.
  • Duplicar.
  • Organizar.
  • Bloquear o Desbloquear.
  • Eliminar.

Duplicar

La opción Duplicar conserva toda la configuración del elemento, incluidas imágenes, parámetros, acciones y comandos.

Organizar

El submenú Organizar controla la posición del elemento respecto a otros objetos superpuestos.

Incluye:

  • Enviar al fondo: sitúa el elemento detrás de todos los demás.
  • Traer delante: sitúa el elemento delante de todos los demás.
  • Mover hacia atrás: retrocede una posición.
  • Mover hacia adelante: avanza una posición.

Bloquear

La opción Bloquear fija la posición del elemento para evitar movimientos accidentales durante la edición. El elemento continúa funcionando normalmente en el modo de visualización.

Para volver a modificar su posición, abra el menú contextual y seleccione Desbloquear.

Importante

La opción Eliminar borra el elemento directamente, sin solicitar confirmación.

Exportar una capa

La capa activa puede exportarse en formato PNG o SVG.

Al pulsar el icono correspondiente, la descarga comienza automáticamente. La exportación incluye únicamente la capa que se está editando, no todas las capas del diagrama.

La cuadrícula no forma parte de la imagen exportada. El fondo y las imágenes pueden conservar su transparencia.

Mostrar u ocultar la cuadrícula

El último icono de la barra permite mostrar u ocultar la cuadrícula del editor.

La cuadrícula sirve como referencia visual, pero no modifica la posición de los elementos ni los ajusta automáticamente.

Visualizar un diagrama

Las acciones configuradas en parámetros, botones y botones multiacción funcionan en el modo de visualización. No se ejecutan durante la edición.

Al abrir un diagrama aparecen, en la parte superior derecha, las opciones:

  • Pantalla completa.
  • Modo presentación.

La pantalla completa amplía la zona de visualización. El modo presentación recorre automáticamente las capas configuradas para mostrarse.

Permisos de un diagrama

Los diagramas pueden tener permisos propios de visualización, edición y eliminación.

Los permisos se heredan inicialmente de la instalación, pero pueden revisarse y modificarse para cada diagrama. También puede utilizarse la propagación de permisos para asignarlos de forma múltiple a varios diagramas o usuarios.

Permisos de un diagrama
Asignación de permisos a un diagrama.
Propagación de permisos de diagramas
Propagación de permisos sobre diagramas.

El permiso para ver un diagrama no concede por sí mismo permiso para actuar sobre los controles incluidos. Para introducir valores o ejecutar comandos, el usuario debe tener los permisos correspondientes sobre cada control.

Para una explicación general, consulte Permisos en Cloud kiconex.

Compartir un diagrama mediante enlace

Un diagrama puede compartirse mediante un enlace público de solo lectura.

Para generar el enlace:

  1. Edite el diagrama.
  2. Abra la pestaña Permisos.
  3. Pulse el icono Compartir.
  4. Introduzca un nombre.
  5. Añada una descripción, si es necesario.
  6. Configure una fecha de expiración, si procede.
  7. Pulse Generar.
  8. Copie el enlace creado.
Opción para compartir un diagrama
Selección de la opción para compartir un diagrama.
Nombre y descripción del recurso compartido
Datos identificativos del diagrama compartido.
Fecha de expiración del enlace
Configuración de la fecha de expiración.
Enlace generado para compartir
Enlace público generado para el diagrama.

Si no se establece una fecha, el enlace permanece disponible hasta que se elimine manualmente.

El enlace público permite únicamente visualizar el diagrama. Si una persona intenta ejecutar una acción, Cloud kiconex muestra un aviso indicando que no está permitido.

Gestionar los enlaces compartidos

Para revisar o eliminar un enlace:

  1. Acceda a Configuración → Usuarios y grupos.
  2. Abra la pestaña Recursos compartidos.
  3. Abra el menú del recurso correspondiente.

Desde este menú puede:

  • Ver el diagrama compartido.
  • Copiar el enlace.
  • Editar el nombre, la descripción o la fecha de expiración.
  • Eliminar el recurso para dejar de compartirlo.
Gestión de recursos compartidos
Opciones disponibles para un recurso compartido.

Buenas prácticas

  • Prepare primero la estructura de capas y defina cuál será la principal.
  • Use nombres claros para el diagrama y para cada capa.
  • Guarde con frecuencia, ya que no existe guardado automático ni opciones para deshacer y rehacer.
  • Bloquee los elementos terminados para evitar desplazamientos accidentales.
  • Utilice imágenes optimizadas y, siempre que sea posible, inferiores a 2 MB.
  • Revise todas las capas después de cambiar el tamaño o la orientación del lienzo.
  • Use la cuadrícula como referencia visual, sin asumir que los elementos se alinearán automáticamente.
  • Agrupe en un botón multiacción únicamente comandos relacionados.
  • Revise los permisos del diagrama y de los controles antes de ponerlo a disposición de otros usuarios.
  • Compruebe las acciones en modo de visualización antes de considerar terminado el diagrama.

Problemas frecuentes

Problema Comprobaciones recomendadas
Los últimos cambios no aparecen Compruebe que se haya pulsado Guardar antes de salir del editor.
Un elemento no puede moverse Abra su menú contextual y compruebe si está bloqueado.
Un elemento ha quedado fuera del lienzo Revise si se ha cambiado el tamaño o la orientación y vuelva a colocarlo dentro de la capa.
La cuadrícula no alinea los objetos La cuadrícula es únicamente una guía visual. Los elementos se desplazan libremente.
Una acción no funciona durante la edición Abra el diagrama en modo de visualización. Las acciones no se ejecutan en el editor.
Un usuario puede ver el diagrama, pero no ejecutar un comando Revise los permisos del usuario sobre el control relacionado.
El enlace compartido no permite ejecutar acciones Es el comportamiento esperado. Los enlaces públicos son de solo lectura.
Una imagen tarda demasiado en cargarse Optimice el archivo y procure que su tamaño no supere 2 MB.
Una capa no aparece en el modo presentación Edite la capa, active Mostrar, configure su duración en segundos y guarde el diagrama.
La exportación contiene una sola capa PNG y SVG exportan únicamente la capa activa. Exporte cada capa por separado.

Enlaces relacionados