Skip to main content

Tutorial: uso de la animación del cliente

El ejemplo muestra una visualización con tres pantallas. Un menú controla la navegación de las pantallas. El menú está oculto hasta que se mueve a la vista por medio de un botón de hamburguesa. Durante el movimiento, la transparencia del menú cambia. Después de seleccionar la pantalla, el menú desaparece de la vista. La animación se calcula completamente en el sistema de destino. los CODESYS la visualización solo define los valores objetivo (posiciones, transparencia).

Preparación

  1. Cree un nuevo proyecto estándar con el CODESYS Control Win controlador.

  2. Añadir un Visualización objeto debajo de la Aplicación. Elige el nombre Visu_Main.

  3. Abra el Administrador de visualización en el editor y seleccione el Admite animaciones de clientes y superposición de elementos nativos opción.

Para obtener más información, consulte lo siguiente: Ajustes

Creando el PLC_PRG programa

El programa comprueba si se ha pulsado el botón de menú. Si la barra de menú no está visible (posición –300), la posición se mueve al área visible (0). Si la barra de menú ya está visible (posición 0), la posición se mueve al área oculta.

  1. Abra el PLC_PRG programa en el editor.

  2. Ingrese el siguiente código en el editor de declaraciones:

    PROGRAM PLC_PRG
VAR
    iSelection : INT; // to switch the referenced visualization page
    xVisible: BOOL; // auxiliary variable to toggle the menu bar
    iMenuPos : INT := -300; // position of the menu bar
    xToggle: BOOL; // button variable to toggle the menu bar
END_VAR

  3. Ingrese el siguiente código en la implementación:

    IF xToggle THEN
    xToggle := FALSE;
    IF xVisible THEN
        xVisible := FALSE;
        iMenuPos := -300;
    ELSE
        xVisible := TRUE;
        iMenuPos := 0;
    END_IF
END_IF

Creación de una barra de menú

La barra de menú tiene tres elementos de menú. Se muestra una pantalla de visualización al hacer clic en el elemento de menú correspondiente.

  1. Insertar un Visu_Menú visualización debajo de la aplicación.

  2. Abra las propiedades del objeto. En el Visualización pestaña, establece la Tamaño de visualización a un Anchura de 300 y un Altura de 180.

  3. Abra la visualización en el editor.

  4. Selecciona el Avanzado opción en el Propiedades vista.

  5. En la esquina superior izquierda, agregue un botón con un Ancho de 300 y un Altura de 60

  6. Etiquete el botón como "Visu 1". Establezca el tamaño de fuente en 24.

  7. Abra el Configuración de entrada → OnMouseClick propiedad.

  8. Selecciona el Ejecutar código ST acción.

  9. Ingrese el siguiente código ST:

    PLC_PRG.iSelection := 0;
PLC_PRG.xToggle := TRUE;

  10. Selecciona el Variable de estado del botón → Variable digital propiedad a PLC_PRG.iSelection=0.

  11. Agregue dos botones más con el nombre Visu 2 y Visu 3.

  12. Edite las propiedades del botón de Visu2 (P)LC_PRG.iSelection = 1) y Visu3 (PLC_PRG.iSelection = 2).

    Resultado:

    _visu_img_animation_menu.png

Crear más páginas de visualización

  1. Inserte el Visu1 visualización debajo de la aplicación.

  2. Abra las propiedades del objeto. En el Visualización pestaña, establece la Tamaño de visualización a un Anchura de 800 y un Altura de 600.

  3. Cambia el color de fondo de la pantalla (por ejemplo, gris claro).

  4. Inserte un Etiqueta introduzca el objeto en la pantalla de visualización y asigne un nombre al elemento (por ejemplo, con Visu 1).

  5. Inserte dos visualizaciones más Visu2 y Visu3 debajo de la aplicación. Edite las propiedades de la misma manera que para Visu1.

Crear la página de visualización principal

En esta pantalla, puede ver la barra de menús y un botón para mostrar u ocultar la barra de menús. Las diferentes pantallas de visualización se navegan de forma Marco elemento de visualización.

  1. Abra las propiedades del Visu_Main visualización. En el Visualización pestaña, establece la Tamaño de visualización a un Anchura de 800 y un Altura de 600.

  2. Abra la visualización en el editor.

  3. Insertar un Marco elemento en la visualización.

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

  4. Añada el Visu1 (Índice 0), Visu2 (Índice 1), y Visu3 Visualizaciones (Índice 2).

  5. Establecer los valores de propiedad de Posición como sigue: X = 0, Y = 0, Ancho = 800, y Altura = 600.

  6. Establezca el valor del Cambiar la variable de marco → Variable propiedad de PLC_PRG.iSelection.

  7. Inserte un Botón elemento en la visualización.

  8. Establecer los valores de propiedad de Posición como sigue: X = 0, Y = 0, Ancho = 800, y Altura = 600.

  9. Establezca el valor del Textos→ Texto propiedad a =.

  10. Establezca el valor del Propiedades del texto → Fuente propiedad de Arial; 36.

  11. Abra el Configuración de entrada → OnMouseClick propiedad.

  12. Selecciona el Ejecutar código ST acción.

  13. Ingrese el siguiente código ST:

    PLC_PRG.xToggle := TRUE;

  14. Establezca el valor del Variable de estado del botón → Variable digital propiedad de PLC_PRG.xVisible.

  15. Inserte el Visu_Menú elemento de visualización de la Proyecto actual categoría en la visualización.

  16. Establecer los valores de propiedad de Posición como sigue: X = 0, Y = 0, Ancho = 300, y Altura = 180.

  17. Establezca el valor del Movimiento absoluto → Movimiento → X propiedad de PLC_PRG.iMenuPos.

  18. Establezca el valor del Variables de estado → Invisible propiedad de not(PLC_PRG.xVisible).

  19. Establecer el valor de la propiedad de Duración de la animación para 2000.

    Resultado:

    _visu_img_animation_project.png

Descarga del proyecto al controlador e inicio de WebVisu

  1. Genere el proyecto y descárguelo al PLC.

  2. Iniciar el proyecto.

  3. En el navegador, conéctese a la visualización (http://localhost:8080).

    El WebVisu se conecta al controlador y se abre la visualización.

  4. En la visualización, haga clic en el botón de menú.

    El menú se mueve a la vista.

  5. Seleccione un elemento del menú.

    Se selecciona la pantalla de visualización y el menú desaparece de la vista.

En esta sección: