Proceso de desarrollo recomendado

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

Probar la funcionalidad del control HTML5

Le recomendamos que primero pruebe el control de HTML5 en una página de demostración de HTML. El control HTML5 se puede mostrar en el navegador ElementWrapper el script y la funcionalidad se pueden probar. Empiezas a crear el JavaScript archivo (ElementWrapper.js) solo después de que la funcionalidad se haya probado satisfactoriamente.

Nota

Para CODESYS Visualization V4.8.0.0 y versiones posteriores, el archivo JS ElementWrapper se crea automáticamente cuando se crea un nuevo control HTML5. Contiene solo el marco. La funcionalidad específica del elemento debe añadirse en el siguiente paso

Crear la página HTML TestControl.html para probar el script sin necesidad de instalación adicional en CODESYS.

Estructura de la página HTML

<!DOCTYPE html>
<html>
    <head>
        <title>MyTestControl Test Page</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
        <meta name='HandheldFriendly' content='True' />
        <meta name='MobileOptimized' content='480' />
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='theme-color' content='#2f434e' />
        <meta http-equiv='cleartype' content='on' />
        <scripttype='text/javascript' src='ElementWrapper.js'> </script>
    </head>
    <body>
        <script>
            var wrapper = new MyTestControlElementWrapper();
            (function loop() {
                var testValue = Math.random() * 100;  
                wrapper.setText(testValue + "");      
                wrapper.setColor("#0079FF");       
                window.setTimeout(loop, 4000);     
            })();    
        </script>    
    </body>
</html>

Incluir archivos adicionales (JavaScript archivos (o archivos de hojas de estilo) para el control HTML5 en esta página de prueba. Se trata de archivos que son responsables del diseño o que proporcionan
Esto corresponde a una importación de scripts para que las fuentes estén disponibles.
Ejemplo de código
```
<link rel="stylesheet" href="gauge.css" />
<script type="text/javascript" src="gauge.js"> </script>
```
Puede insertarse encima de la línea siguiente:
```
<script type="text/javascript" src="ElementWrapper.js"> 
 </script> 
```
Mostrar el elemento (sin ElementWrapper) en el navegador y pruebe la funcionalidad.
Una vez que la prueba se haya completado correctamente, puede empezar a crear el JavaScript archivo (ElementWrapper.js).

Creando el `ElementWrapper`

Programa el ElementWrapper guion.

El código de ejemplo crea un botón con un texto y un color. El tamaño se establece en el 100% porque el control HTML5 puede llenar completamente el espacio creado por el marco. Además, un IFrame se crea para cada control HTML5. Por lo tanto, el control HTML5 se puede agregar directamente document.body.

Código de muestra

var MyTestControlElementWrapper;

(function ()
{
    MyTestControlElementWrapper = function()
    {
        this.domNode = document.createElement("div");
        this.domNode.className = "button";
        this.domNode.style.width = "100%";
        this.domNode.style.height = "100%";
        this.domNode.style.overflow = "visible";
        this.domNode.style.backgroundColor = "#0079FF";

        document.body.appendChild(this.domNode);
     };
    
    MyTestControlElementWrapper.prototype =
    {
        setText:function(value)
        {
            this.domNode.innerHTML = value;
        },

        setColor: function(value)
        {
        this.domNode.style.backgroundColor = value;
        },
    };
})();

Puede crear una instancia y mostrar el control HTML5 mediante la página HTML. Test.html y el ElementWrapper guion.
También puede probar los métodos individuales en el ElementWrapper usando un loop función que se inicia mediante un temporizador.
El ElementWrapper el script proporciona la funcionalidad.

Creación de un control HTML5

Ahora puede crear el control HTML5. El editor de controles HTML5 le ayuda con esto
1. En el General pestaña, configure el nuevo elemento.
2. En el Propiedades de control especifique las propiedades deseadas.
3. Crear una nueva propiedad de tipo Variable. En el Llamada al método columna, especifique el nombre del método deseado.
  Así es como se transfieren las variables a los métodos del control.
  Sugerencia
  Para familiarizarse con las funciones, es útil abrir los ejemplos en el editor de control HTML5.
  Para obtener más información, consulte: Referencia: Editor de controles HTML5
4. En el Localización localice los textos de la interfaz del control para los distintos idiomas.
  Los textos están localizados. El elemento se puede localizar en diferentes idiomas.
5. Guarde la configuración con el nombre del control e instálela en CODESYS Repositorio de elementos de visualización.
  Para ello, utilice el icono de comando.
  Para obtener más información, consulte: Primera instalación de un control HTML5
Ahora puede usar el control HTML5 en una visualización.

Uso de un control HTML5

Crea un CODESYS proyecta con una visualización y arrastra el nuevo elemento al editor de visualización.
Configure las propiedades del elemento y asigne la variable que debe mostrar el nuevo control.
Compila e inicia la aplicación. E inicie la visualización en un WebVisu
Pueden monitorear su visualización en modo en línea.

Depuración del control HTML5

En la siguiente sección se describe cómo comprobar si hay errores en el navegador en el control HTML5.

Para habilitar la funcionalidad, debe llamar a la URL con el parámetro de depuración DebugHTML5=true:

http://localhost:8080/webvisu.htm?CFG_DebugHTML5=true

procedimiento. Debugging in the browser

Right-click the page in the browser. Select the "Inspect" option in the context menu which opens.
The "DevTools" browser page opens.
Haga clic en el Fuentes pestaña.
On the "Sources" tab, you will find a tree structure where the file elementwrapper<index>.js is located. The index is automatically appended to the file name to ensure uniqueness on the controller.
El archivo se guarda en el sistema de ejecución en el carpeta PlcLogic/visu.
La forma más rápida de implementar y probar las correcciones de errores es realizar los cambios necesarios en el archivo almacenado en el sistema de ejecución.
1. Cambie el ElementWrapper archivo para depurar.
2. Seleccione la opción Recargar en el navegador.
  El elemento se actualiza y se puede probar.
3. Sugerencia
  Se recomienda iniciar el local CODESYS Control como tiempo de ejecución. El tiempo de ejecución se ejecuta localmente en su propio ordenador. Esto le permite abrir la carpeta del sistema de ejecución en el Explorador y abrir y editar el JavaScript con un editor de texto externo.
  elementwrapper<index>.js
4. Establezca un punto de interrupción en el constructor o en los métodos para depurar la funcionalidad en el navegador. Debe estar familiarizado con las opciones de depuración
Los errores se han identificado y corregido. El elemento de prueba ahora se comporta correctamente.
Transfiera los cambios en el elementwrapper<index>.js de JavaScript de prueba al archivo ElementWrapper.js original.
Vuelva a instalar el control HTML5.
Los cambios están en vigor. El elemento se comporta en consecuencia.

Ejemplo

La página enlazada a continuación proporciona ejemplos de las diversas funciones y características relacionadas con los controles HTML5.

Aviso

Ejemplo de proyecto: API HTML5

Las llamadas a la API utilizadas se describen en la siguiente referencia para desarrolladores:

Referencia: Desarrollo de control HTML5

En esta sección: