Skip to main content

Vinculación y uso de un control HTML5

Puede instalar un control HTML5 directamente en su repositorio de elementos de visualización.

Los controles HTML5 se pueden agregar a un archivo de proyecto, lo que permite distribuir un proyecto con todo el contenido necesario.

Sugerencia

Los controles HTML5 a menudo se entregan como un paquete. A continuación, se realiza la instalación inicial en el Administrador de paquetes.

procedimiento. Primera instalación de un control HTML5

  1. Hacer clic Herramientas → Repositorio de elementos de visualización.

    Los Repositorio de elementos visuales se abre el cuadro de diálogo.

  2. Selecciona el Controles HTML5 opción.

    Los Elementos Instalados list proporciona información sobre los controles HTML5 que ya están instalados.

  3. Haga clic en el Instalar dominio.

  4. En el cuadro de diálogo de selección de archivos que se abre, seleccione el archivo de descripción deseado del control HTML5 (*.html5control.xml).

    • Si el archivo de descripción es válido, el elemento se instala automáticamente en el repositorio. En la visualización, el control se enumera en Elementos Instalados. Puedes usarlo.

    • Si el archivo de descripción no es válido, se emite un error. Luego debe ponerse en contacto con el autor del elemento.

Para obtener más información, consulte: Comando: Repositorio de elementos de visualización

procedimiento. Crear un control HTML5

  1. los _visu_icon_html5controls.png Editor de controles HTML5 se encuentra en la carpeta de instalación de CODESYS en el menú Inicio de Windows.

    Abre el editor.

  2. Primero se abre el cuadro de diálogo de selección de archivos. Seleccione el archivo de descripción deseado del control HTML5 allí (*.html5control.xml).

    Los datos del elemento se muestran en el _visu_icon_html5controls.png Editor de controles HTML5.

  3. Edite el elemento para que se cree un archivo de descripción válido:

    1. Configurar el General pestaña:

      1. Compañía: Test GmbH

      2. Nombre: FirstControl

        Importante

        El nombre no debe contener espacios.

      3. Caja de herramientas Categoría: Controles especiales

      4. Opcionalmente, especifique un archivo de imagen.

        Nota

        Si no se especifica una imagen, se utiliza un icono predeterminado.

      5. Especifique un JavaScript archivo (JS) como contenedor de elementos. Esto es incondicionalmente obligatorio. Este archivo resume las llamadas de CODESYS marco con las llamadas al propio control.

        Si se requieren más archivos para el control, también se deben especificar aquí. Pueden ser archivos CSS o JS.

        Importante

        Tienes que proporcionar el archivo contenedor.

        Asegúrese de que el ElementWrapper.js el archivo está en la parte superior y los demás archivos necesarios para la ejecución están debajo.

        Ejemplo

        _vis_configuration_html5_control_files.png

    2. Opcionalmente, en el Propiedades de control pestaña, configure la interfaz del elemento.

    3. Opcionalmente, en el Localización pestaña, configura las traducciones de los textos de la interfaz de usuario del control.

  4. Hacer clic _visu_icon_save_install.png Guardar e instalar.

    Se aplican sus ajustes y se comprueba su validez. Luego se guarda el archivo de descripción y se instala el control en el repositorio.

En el repositorio de elementos de visualización, el control se enumera en Elementos Instalados.

procedimiento. Usando un control

  1. Abre tu CODESYS proyecto.

  2. Abra un objeto de visualización.

    El control instalado recientemente está disponible en la Caja de herramientas de visualización ver en la categoría que se especificó en el archivo de descripción.

  3. Arrastre el control al editor de visualización y selecciónelo.

    La interfaz del elemento está disponible en el Propiedades vista como se define en el _visu_icon_html5controls.png Editor de controles HTML5.

Ejemplo

ejemplo 56. Controlar: HTML5DemoDonutGauge
_visu_example_html5_donutgauge.png


En esta sección: