Diagrams/en

Diagrams

The diagrams module allows to make synoptic diagrams of one or several facilities in SCADA mode where images and variables can be mixed in real time to obtain status and operation information on a simple screen.

The configuration of these diagrams is done directly in myKiconex platform in an easy and intuitive way. Images, analog variables, digital variables, dynamic icons, action buttons, layer change links...etc. can be included.

The variables configured in each diagram will be displayed in real time and can be plotted by clicking on the different elements.

In addition to the above, there is a full screen view mode in myKiconex web app. In this way, the diagram can be viewed as if it were a stand-alone SCADA application including all possibilities for viewing, navigation, interaction, etc.

Diagram Configuration

To create a diagram, access the facility and then navigate to the "Diagrams" subsection.

Botón de diagramas dentro de la instalación

When accessing, you can find the list of diagrams. If any diagram is available, the name, description and date of the last modification will be displayed. If a diagram has already been created, it will appear in this list. Otherwise, a new one can be created by clicking on the + icon.

Botón de añadir diagrama

By clicking on the + icon, you can access the diagram general configuration panel where the name and description of the diagram must be configured. Next, you must select the canvas format to be used. By default it comes with the dimensions 1280 x 720 pixels, although you can choose between 800 x 600px up to 1920 x 1080px, both vertically and horizontally.

Configuración general del diagrama

The next step is to access the diagram tab where the content of the diagram is defined.

Pestaña de diagrama

The main thing is to choose a layer as the main layer, this will be the initial screen when opening the diagram. Once chosen, a layer with a grid will be displayed. By clicking on save, on the bottom icon of the diagram, all changes will be saved.

To modify an existing diagram, right click on a diagram and select edit. You can also enter the diagram and click on the pencil icon to edit it.

Editar desde el listado de diagramas

Editar diagrama desde el diagrama

Layer configuration options

Layer configuration options The following icons are the diagram configuration icons:

Barra de configuración del diagrama

The description of each icon from left to right is:

• Add image. Add a background image or an image to be used in some element.
• Add parameter. Menu to select variables of a control to display in the diagram.
• Add button. Used to add a button to the diagram to perform an action when clicked.
• Add object. Use it to add a shape or object to the diagram.
• Add text. Menu to include a text with its properties.
• Change background color. Used to change the background color of the diagram.
• Add multi-action button. Use it to create a button that executes several commands simultaneously when clicked.
• Export to PNG. Exports the diagram to a .png image format.
• Export to SVG. Export the diagram to an .svg image format.
• Show/hide grid. Select whether to show or not the grid.

Add image

Añadir imagen en barra de configuración del diagrama

By clicking on the icon a new new object panel appears. Here you can load the image to be used to represent in the diagram. For instance, a plan of the facility where all or some of the devices to be monitored are located, a circuit of an equipment, ect. among others.

Two tabs appear in this pop-up. The first tab Text will allow the user to name this image and configure the size. The text of this name will be displayed in the image the user uploads.

Pestaña texto

The next tab is Image, where the user can upload the image and set the file size. It can also preview the element.

Pestaña imagen con previsualización

By clicking on the add button the image is uploaded to the diagram. Once the image is uploaded, the configuration box will close and the image will appear so that it can be placed in the desired position.

Imagen cargada en diagrama

Add parameters

To add parameters, click on the icon shown below in the diagram configuration bar:

Añadir parámetros en barra de configuración del diagramas

Once the icon is clicked, a configuration panel for this parameter will appear. It has four configuration tabs:

Parameters

Select facility: this drop-down menu automatically selects the facility to be worked on.

Select control: the control (machine or device to be monitored) must be selected.

Select parameter: the parameter to be displayed must be selected. That is, the variable to be monitored.

With the Show icon selector users indicate whether they want to display the icon (seeing a preview of the final format at the bottom of the pop-up). The size of the icon can be configured in the diagram, as well as the position of the X and Y axis.

Pestaña de parámetros en añadir parámetros al diagrama

Shape

In this tab the user sets the height, width, radius and color of the area where it can access the graph of this parameter. The preview of the item will be displayed upon completion.

Pestaña forma en añadir parámetro

Text

The text input box is for entering the name to display that identifies the parameter. It can be the name of the room, the control or the machine, e.g.

The display of the value can be enabled or disabled and configured the X and Y position indicating the size at which the user wants to display the value. The preview of the item will be displayed upon completion.

Also the user can set the color text by clicking on the box where a color palette will appear.

The user can enable or disable the display of the name and configure the X and Y position indicating the size at which it wants to display the size of the name. The preview of the item will be displayed upon completion.

Pestaña texto en añadir parámetros

Action

There is drop-down menu where the user can select the different actions that this parameter can perform as soon as it clicks on its area, it can change layer, load diagram, load facility, load control, go to an external link or simply the action of the parameter.

Next to it is the Destination setting that will indicate the possible options once the previous tab has been selected. The preview of the item will be displayed upon completion.

Pestaña acción en añadir parámetros

Once these configurations have been completed, click on "add" and this parameter will be added to the diagram, it can be placed wherever the user wishes.

Visualización de añadir parámetro en configuración del diagrama

Add button

To add a button, click on the icon shown below in the configuration bar of the diagram:

Añadir botón en barra de configuración del diagrama

Clicking on the icon will open a configuration panel where it has three configuration tabs:

Shape

This tab is for setting the height, width, radius and color of the button area. The preview of the item will be displayed upon completion.

Pestaña forma en añadir un botón

Text

Here is for setting the text, size and color. The preview of the item will be displayed upon completion.

Pestaña de texto en añadir un botón

Action

A drop-down menu is displayed, it is for selecting the different actions that this parameter can perform as soon as the user clicks on its area, like changing layer, loading diagram, loading facility, loading control or visiting an external link.

Next to it is the Destination setting that will indicate the possible options once the previous tab has been selected. The preview of the item will be displayed upon completion.

Pestaña acción en añadir un botón

Once these configurations have been completed, click on "add" and the button will be added to the diagram. It can be placed it wherever the user wish.

Visualización de añadir botón en configuración del diagrama

Add object

To add an object, click on the icon shown below in the diagram configuration bar:

Añadir objeto en barra de configuración del diagrama

Once clicking on the icon, a configuration panel is shown with two configuration tabs:

Shape

This tab is for setting the height, width, radius and color of the area. The preview of the item will be displayed upon completion.

Pestaña forma en añadir objeto

Text

Here is for setting the text, size and color. The preview of the item will be displayed upon completion.

Pestaña texto en añadir un botón.

Once these configurations have been completed, click on "add" and the button will be added to the diagram, it can placed wherever the user wish.

Visualización de añadir objeto en configuración del diagrama

Add text

To add text, click on the icon shown below in the diagram configuration bar:

Añadir texto en barra de configuración del diagrama

In it you can set a text you need to add to the diagram, the size and color. The preview of the item will be displayed upon completion.

Añadir texto en configuración del diagrama

Visualización del texto añadido

Change background color

To change the background color, click on the icon shown below in the diagram configuration bar:

Cambiar color de fondo en barra de configuración del diagrama

Once clicked on the icon, a color palette will appear where can configure the color. When finished, click on Accept.

Panel de configuración de color de fondo

Visualización de cambio de color de fondo en configuración del diagrama

Note: for this example, the size of the plan has been reduced in order to be able to visualize the change.

Add multi-action button

To add a multi-action button, click on the icon shown below in the configuration bar of the diagram:

Añadir botón multi-acción en barra de configuración del diagrama

Once the icon is clicked, a configuration panel for this parameter will appear, it has four configuration tabs:

Shape

This tab is for setting the height, width, radius and color of the area. The preview of the item will be displayed upon completion.

SP pestaña forma en añadir boton multi-accion en configuración del diagrama

Text

Here is for setting the text, size and color. The preview of the item will be displayed upon completion.

SP pestaña texto en añadir botón multi-acción en configuración del diagrama

Image

There is the option to upload a representative image on the button to be added, set the X and Y axis position and its size. The preview of the item will be displayed upon completion.

SP pestaña imagen en añadir botón multi-acción en configuración del diagrama.

Multi-action

Select the facility, the control and the command(s) that are going to be represented in the diagram, once selected click on "add" in the option below the command selection. It is possible to add several at the same time so click on "add" in blue to add the selections once configured.

SP pestaña multi-acción en añadir botón multi-acción en configuración del diagrama

Visualización del botón multi-acción en diagramas:

SP visualización de botón multi-acción en diagramas

Export to PNG

To export to png, click on the icon shown below in the diagram configuration bar:

Exportar a png en barra de configuración del diagrama

Una vez pulsado el icono se descargará automáticamente una imagen en formato png, lo podrá visualizar en la barra inferior o en la carpeta de descargas.

SP exportar a png en configuración de diagramas

Se descargará una imagen del diseño del diagrama que se haya realizado en formato png.

Exportar a SVG

Para exportar a SVG se debe pulsar sobre el icono que se muestra a continuación en la barra de configuración del diagrama:

Exportar a SVG en barra de configuración del diagrama

SP exportar a SVG desde configuración del diagrama

Se descargará una imagen del diseño del diagrama que se haya realizado en formato SVG.

Mostrar/quitar Grid

Para mostrar/quitar Grid se debe pulsar sobre el icono que se muestra a continuación en la barra de configuración del diagrama:

Mostrar/quitar grid

Esta herramienta permite quitar el Grid (cuadricula).

SP mostrar grid en configuración de diagramas

SP no mostrar grid en configuración de diagramas

Nota: para este ejemplo se ha disminuido el tamaño del plano para poder así visualizar el cambio.

Adición de capas

Un diagrama puede estar compuesto por una o varias capas. Para añadir una capa al diagrama se debe hacer click en el botón "+" ubicado en el menú lateral izquierdo..

Añadir capas en diagramas con recuadro

Se desplegará el pop-up principal de configuración de la capa, tendrá:

Nombre de la capa

En este apartado se deberá configurar el nombre de la capa.

Capa principal

Se debe configurar si será la capa principal o no, bastaría con marcar en el recuadro para que se habilite o deshabilite según la necesidad.

Configuración para presentación

Indica "Mostrar". El diagrama funciona como una presentación por lo que se puede configurar qué capas se desean visualizar y las que no.

En caso de seleccionar la capa para que se visualice en modo presentación se debe configurar el tiempo en el que se desea que permanezca.

Configuración de una segunda capa

Una vez configurada la información anterior se debe pulsar "Guardar" y nuevamente "Guardar" para terminar de configurar sobre el diagrama.

Permisos

El funcionamiento de los permisos lo podrá visualizar más detalladamente en el siguiente enlace

Para que los usuarios de la instalación vean el diagrama creado se les debe asignar dichos permisos, los permisos se heredan de los permisos asignados en la instalación por lo que si es necesario dar menos o más permisos se debe revisar.

Pulsar "Guardar" una vez configurado para que se trasladen los cambios.

Ejemplo de un diagrama finalizado:

Ejemplo de diagrama finalizado