Skip to main content

Tutorial: visualización de un controlador de refrigerador

Este tutorial demuestra cómo agregar visualizaciones al proyecto y vincular los elementos de la visualización a las variables del programa de control.

Preparación

Este tutorial se basa en el programa de ejemplo RefigeratorControl, que se creó en «Tu primer programa en CODESYScapítulo». El programa terminado también se puede encontrar en el directorio de instalación de CODESYS en el Projects subcarpeta.

Para obtener más información, consulte lo siguiente: Su primer programa CODESYS

Creando las visualizaciones

. La visualización consta de las siguientes tres pantallas de visualización:
  • Visualization: Elementos de control y visualización del frigorífico

  • Diagnosis: Historial de la temperatura establecida y real, configuración de parámetros

  • Live Visu: Animación con nevera

  1. En el árbol de dispositivos, haga clic en Application objeto.

  2. Haga clic en ProyectoAñadir objetoVisualización comando.

  3. Especifique el nombre como Live_Visu.

  4. Cree dos visualizaciones más con los nombres Diagnosis y Visualization.

Estructura de la visualización Visualization

Esta pantalla consta de elementos de control y visualización del frigorífico.

_visu_img_tutorial_refrigerator_elements_control.png
  • _1_r.png: Visualización numérica de la temperatura real

  • _2_r.png: Puntero para mostrar la temperatura real

  • _3_r.png: Visualización numérica de la temperatura ajustada

  • _4_r.png: Potenciómetro para ajustar la temperatura establecida

  • _5_r.png: Etiqueta para lámpara de compresor

  • _6_r.png: Lámpara para compresor encendida

  • _7_r.png: Etiqueta para lámpara de señalización

  • _8_r.png: Lámpara para señal «Cierre puertas»

  • _9_r.png: Interruptor para abrir y cerrar la puerta del frigorífico

  1. Abre la visualización Visualization en el editor

  2. Arrastra un Rectángulo elemento de visualización en el editor.

    . Cambiar las siguientes propiedades
    • TextosTexto: Actual temperature: %2.1f °C

    • Variables de textoVariable de texto: Glob_Var.rTempActual

  3. Arrastra un Medidor 180° elemento de visualización al editor.

    . Cambiar las siguientes propiedades
    • Valor: Glob_Var.rTempActual

    • EscalaFinal de escala: 20

    • EscalaEscala principal: 5

    • EscalaSubescala: 1

  4. Arrastra un Rectángulo elemento de visualización al editor.

    . Cambiar las siguientes propiedades
    • TextosTexto: Temperature presetting: %.1f °C

    • Variables de textoVariable de texto: Glob_Var.rTempSet

  5. Arrastra un Potenciómetro elemento de visualización en el editor.

    . Cambiar las siguientes propiedades
    • Variable: Glob_Var.rTempSet

    • AntecedentesColor de fondo: amarillo

    • PunteroColor: rojo

    • EscalaPosición de subescala: Hacia afuera

    • EscalaInicio de escala: 3

    • EscalaFinal de escala: 13

    • EscalaSubescala: 1

    • EscalaEscala principal: 1

    • EtiquetaUnidad: °C

    • EtiquetaFormato de escala (sintaxis C): %.0f

    • EtiquetaAnchura máxima del texto de las etiquetas: 21

    • EtiquetaAltura de las etiquetas: 15

  6. Arrastra un Etiqueta elemento de visualización en el editor.

    . Cambiar las siguientes propiedades
    • TextosTexto: Cooling compressor

  7. Arrastra un Lámpara elemento de visualización en el editor. Colóquelo detrás de la»Cooling compressor«texto.

    . Cambiar las siguientes propiedades
    • Variable: Glob_Var.bCompressor

  8. Arrastra un Etiqueta elemento de visualización al editor.

    . Cambiar las siguientes propiedades
    • TextosTexto: Signal (beep)

  9. Arrastra un Lámpara elemento de visualización al editor. Colóquelo detrás del texto "Señal (bip)".

    . Cambiar las siguientes propiedades
    • Variable: Glob_Var.bSignal

    • AntecedentesImagen: red

  10. Arrastra un Rectángulo elemento de visualización al editor.

    . Cambiar las siguientes propiedades
    • Textos → Texto: Door open

  11. Arrastra un Interruptor basculante elemento de visualización para el editor.

    . Cambiar las siguientes propiedades
    • Variable: Glob_Var.rDoorOpen

Estructura de la visualización Diagnosis

En esta pantalla, puede monitorear la curva de temperatura y optimizar los parámetros.

_visu_img_tutorial_refrigerator_diagnosis.png
  1. Etiqueta elementos para el título

  2. Rastrear elemento para mostrar la curva de temperatura

  3. Rectángulo elementos para mostrar el valor

  1. Abre la visualización Diagnosis en el editor

  2. Arrastra un Etiqueta elemento de visualización al editor.

    . Cambiar las siguientes propiedades
    • Textos → Texto: Refrigerator Diagnosis & Service Menu

    • Propiedades del texto → Fuente: Arial, Standard, 18

  3. Arrastra un Rastro elemento de visualización al editor.

  4. Haga clic en el Diagnosis_Trace1 valor de la Rastro propiedad.

    los Configuración de seguimiento se abre el cuadro de diálogo.

  5. Seleccione el MainTask en Tarea.

  6. Haga clic en el Añadir variable Enlace.

    Se agrega una variable a la traza. Los ajustes de las variables se muestran en el cuadro de diálogo.

  7. Seleccione Glob_Var.bCompressor para la variable.

  8. Añade el Glob_Var.rTempSet y Glob_Var.rTempActual variables a la traza. Para las demás configuraciones, puede utilizar los valores predeterminados.

  9. Hacer clic OK para salir del diálogo.

  10. Arrastra un Rectángulo elemento de visualización al editor. Colóquelo a la derecha al lado del oligoelemento.

    . Cambiar las siguientes propiedades
    • Textos Texto: %s

    • Variables de textoVariable de texto: PLC_PRG.rHysteresis

  11. Configure el OnMouseDown configuración de entrada del elemento. Haga clic Configuración de entradaOnMouseDownConfigurar.

    Se abre el cuadro de diálogo Configuración de entrada.

  12. Asignar el Escribir variable mando a la acción. Acepte los valores predeterminados y haga clic en OK.

  13. Arrastra un Etiqueta elemento de visualización al editor. Colóquelo sobre el primer rectángulo.

    . Cambiar las siguientes propiedades
    • Textos Texto: Hysteresis Regulator

  14. Ajusta el tamaño y la posición de ambos elementos.

  15. Selecciona los dos Rectángulo y Etiqueta elementos y duplicarlos mediante copiar y pegar.

  16. . Ajusta las etiquetas y variables de los elementos copiados.
    • Texto: Compressor Efficiency

      Variable de texto: Simulation.P_Cooling

    • Texto: Environment Efficiency

      Variable de texto: Simulation.P_Environment

    • Texto: Environ. Efficiency DoorOpen Sim

      Variable de texto: Simulation.P_EnvironmentDoorOpen

    • Texto: Time until Beep for DoorOpen

      Variable de texto: Glob_Var.timDoorOpenThreshold

    • Texto: Time until Beep for Compressor On

      Variable de texto: Glob_Var.timAlarmThreshold

Estructura de la Live-Visu visualización

Esta pantalla incluye la representación de un frigorífico. El frigorífico consta de varios elementos de visualización tipo polígono. Las puertas del refrigerador se dibujan tanto en estado cerrado como abierto. Ambas puertas constan de un grupo de elementos individuales.

_visu_img_tutorial_refrigerator_elements.png
  1. Abre la visualización Live_Visu en el editor

  2. Seleccione el Polígono elemento de visualización en el Caja de herramientas de visualización vista.

  3. Haga clic varias veces en el editor para crear una superficie. Haga clic derecho para dejar de agregar marcas de esquina.

  4. Mueva las marcas de las esquinas a la posición requerida para que _1_r.png se forma el elemento (1).

    _visu_img_tutorial_polygon1.png
  5. Seleccione el elemento.

    . Cambie las siguientes propiedades:
    • ColoresUsa un color degradado: _cds_icon_checked.png

    • AparienciaEstilo de línea: Invisible

  6. Haga clic en ColoresUsa un color degradado propiedad.

  7. Selecciona el color gris por Color 1 en el Editor de degradado diálogo.

    _visu_img_tutorial_polygon2.png
  8. Cree todos los demás elementos con el Polígono elemento de visualización.

  9. Agrupe los elementos de la puerta cerrada (_2_r.png, _3_r.png, y _4_r.png) y los elementos de la puerta abierta (_5_r.png, _6_r.png, _7_r.png, y _8_r.png). Para ello, pulse el Turno pulse la tecla y pulse el VisualizaciónGrupo comando para seleccionar los elementos.

  10. Mueva los elementos juntos para que se forme el refrigerador completo. Coloque las puertas abiertas con precisión sobre las puertas cerradas.

  11. Seleccione la opción »Open doors« grupo».

  12. En las propiedades, haga doble clic en Variable de estadoInvisible campo de entrada.

  13. prensa F2 para abrir el Asistente de entrada.

  14. En el Variables categoría, seleccione la rDoorOpen variable (abajo) ApplicationGlob_Var).

  15. Niegue la variable con NOT (—> NOT Glob_Var.rDoorOpen).

    Si el rDoorOpen variable es FALSO (la puerta está cerrada), entonces el elemento es invisible. Entonces las puertas subyacentes son visibles.

    Cuando el rDoorOpen la variable es FALSE (la puerta está cerrada), el elemento es invisible. Entonces, las puertas subyacentes son visibles.

  16. . Copie los siguientes elementos del Visualization pantalla:
    • Potenciómetro para ajustar la temperatura

    • Rectángulo para mostrar la temperatura establecida

    • Door open cambiar

    • Cooling compressor lámpara

    • Signal (beep) lámpara

  17. Inserte los elementos del portapapeles en el Live_Visu pantalla de visualización.

  18. Reduzca los elementos y colóquelos en el refrigerador.

    _visu_img_tutorial_refrigerator_complete.png

Visualización en modo online (simulación)

Cuando la visualización esté completa, pruébela en el modo de simulación.

  1. Haga clic en En línea Simulación comando.

  2. Haga clic en En líneaIniciar sesión comando.

    Se abre un cuadro de diálogo que le solicita que cree y descargue la aplicación.

  3. Hacer clic para confirmar el diálogo.

  4. Haga clic DepurarComenzar.

  5. Abre la visualización Live_Visu en el editor

    El refrigerador está en modo en línea.

  6. Abra las puertas con el interruptor y controle la temperatura y las alarmas. Cambiar los parámetros en la pantalla Diagnosis y observe la reacción en la curva de temperatura.