Skip to main content

Procedimiento básico

Control de demostración como plantilla

Descarga el ejemplo de la API HTML5 en tu ordenador. Luego, los controles de demostración con contenedores de elementos JavaScript están disponibles para ti.

We recommend using the copy of an ElementWrapper.js from the HTML5 examples as a template and adapting the name and functionality to your HTML5 control.

Para obtener más información, consulte Ejemplo: HTML5-API

Puede integrar un control HTML5 que haya desarrollado usted mismo o tomado de una fuente externa en su CODESYS sistema de programación. Para ello, proceda de la siguiente manera.

procedimiento. Preparación

  1. Crea un JavaScript archivo llamado ElementWrapper.js para tu control de HTML5. O copie un archivo contenedor de elementos del ejemplo de la API HTML5 (por ejemplo, el archivo JS del HTML5DemoButton elemento).

  2. Cambie el nombre del objeto contenedor en el archivo JS. El nombre está predefinido y se compone del nombre del elemento con ElementWrapper agregado a él.

    Importante

    El nombre del archivo siempre debe ser ElementWrapper.js. Y la llamada al objeto contenedor que contiene, que el marco genera en tiempo de ejecución, requiere un nombre que se asigne al elemento de acuerdo con la siguiente lógica:

    <element name>ElementWrapper

    En el archivo JS de su elemento, el nombre del objeto contenedor coincide con el nuevo control.

    El siguiente fragmento de código muestra esto para HTML5DemoButton control:

    var HTML5DemoButtonElementWrapper;
HTML5DemoButtonElementWrapper = function(idGenerator)
…

  3. Especifique todos los archivos necesarios para ejecutar el elemento. Pueden ser archivos de hojas de estilo (CSS JavaScript archivos (JS) o archivos de imagen (SVG).

  4. Crear una imagen de elemento (ElementImage.svg). Tras la instalación, el elemento se muestra en el Caja de herramientas de visualización vista.

procedimiento. Integración en el sistema de programación.

  1. Crear un archivo XML (.html5control.xml) con información general. Editor de control HTML5 te ayuda con esto.

    Sugerencia

    Las opciones del editor de control HTML5 se describen en el capítulo "Editor de controles HTML5«.

  2. Cree la asignación de las propiedades del control HTML5 al CODESYS propiedades del elemento de visualización.

  3. Localiza los textos de la interfaz.

  4. Instale el elemento.

  5. Firma el elemento.

Sugerencia

Siga las instrucciones paso a paso Proceso de desarrollo recomendado con recomendaciones detalladas para la depuración.

En esta sección: