Skip to main content

Ejemplo: API HTML5

Producto: CODESYS Visualization

El HTML5_DemoControls.project ejemplo muestra cómo usar controles HTML5 sencillos. Contiene los archivos adicionales necesarios para mostrar los controles como elementos de visualización en el CODESYS visualización.

Descripción

El proyecto de ejemplo contiene varios controles HTML5 configurados. La funcionalidad de los controles HTML5 es fácil de reconocer en el modo en línea

Los controles son solo para fines de demostración. Por eso tienen un aspecto sencillo.

Importante

Si un elemento no se puede descargar al controlador porque falta una firma, aparece una advertencia en la vista de mensajes (Visualización categoría). Haga clic en el _visu_icon_three_dots.png y confirme el siguiente cuadro de diálogo si confía en este elemento.

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

Información adicional

HTML5DemoButton

Este control muestra cómo evaluar las acciones del ratón mediante un control HTML5 y reenviarlas a IEC mediante la configuración de entrada. Puede ejecutar los eventos de entrada configurados OnMouseDown, OnMouseUp, y OnMouseMove.

HTML5DemoCombobox

Este control muestra cómo usar una enumeración IEC en un cuadro combinado. El ejemplo muestra cómo consultar la información del tipogetTypeDesc) a partir de una variable. También muestra cómo puede transferir y usar colores y fuentes.

HTML5DemoImage

Este control muestra cómo usar imágenes en un control HTML5.

HTML5DemoResize

Este control muestra cómo utilizar las funciones de WebVisu-Support.js para adaptar su tamaño y su orden Z. Esta funcionalidad se puede utilizar para implementar elementos que se superpongan a otros elementos, lo que, por ejemplo, puede ocurrir en una lista desplegable

HTML5DemoTable

Este control muestra cómo mostrar y modificar una matriz IEC en un control HTML5. Los datos se transmiten de forma optimizada. Solo se transmite un área específica. Esta solución también es posible para matrices más grandes con muchas filas. Puede cambiar los valores de las celdas de la tabla y, como resultado, cambiar los valores de las variables de la matriz

HTML5DemoTableNoScrollRange

Este control muestra cómo mostrar y modificar una matriz IEC en un control HTML5. La matriz completa se transfiere cuando un valor de la matriz cambia. Puede cambiar los valores de las celdas y, como resultado, cambiar los valores de las variables de la matriz.

HTML5DemoTextfield

Este control muestra cómo se pueden manejar los diferentes tipos de valores escalares de IEC en ambas direcciones (lectura/escritura).

HTML5DemoDonutGauge

Este control muestra cómo usar un elemento HTML5 con la biblioteca d3. El tamaño variable del área del marco se transfiere directamente a través de la anchura y la altura. Consta de una pantalla y un botón para arrastrar.

HTML5DemoBarGauge

Este control muestra cómo usar un elemento HTML5 con la biblioteca d3. El tamaño variable del área del marco se transfiere directamente a través de la anchura y la altura. Se muestra un elemento de barra editable

Requisitos y restricciones del sistema

Sistema de programación

CODESYS Development System (versión 3.5.18.0 o superior)

Sistema de tiempo de ejecución

CODESYS Control Win (versión 3.5.18.0)

Componentes adicionales

CODESYS Visualization (versión 4.5.0.0 o superior)

Aviso

_example_icon.png DESCARGAR Proyecto