Video: panel de administración de Habr. Le permite ajustar el karma, la calificación y la prohibición de usuarios.TL; DR: en el artículo intentaré crear un panel de control cómico para Habr usando el entorno de desarrollo industrial Webaccess / HMI Designer y el terminal WebOP.
La interfaz hombre-máquina (HMI) es un conjunto de sistemas para la interacción humana con máquinas controladas. Por lo general, este término se usa para sistemas industriales en los que hay un operador y un panel de control.
WebOP es un terminal industrial independiente para crear interfaces hombre-máquina. Se utiliza para crear paneles de control de producción, sistemas de monitoreo, salas de control, controladores inteligentes para el hogar, etc. Es compatible con la conexión directa a equipos industriales, puede funcionar como parte de un sistema SCADA.
Terminal WebOP - Hardware

El terminal WebOP es una computadora de bajo consumo de energía basada en un procesador ARM, en un solo caso con un monitor y una pantalla táctil, diseñada para ejecutar un programa con una interfaz gráfica creada en HMI Designer. Dependiendo del modelo, los terminales tienen varias interfaces industriales a bordo: RS-232/422/485, un bus CAN para conectarse a sistemas de automóviles, un puerto USB Host para conectar periféricos adicionales, un puerto USB Client para conectar el terminal a una computadora, entrada de audio y salida de audio , Lector de tarjetas MicroSD para memoria no volátil y configuraciones de transferencia.
Los dispositivos se posicionan como un reemplazo de presupuesto para monobloques, para tareas que no requieren procesadores potentes y los recursos de una computadora de escritorio completa. WebOP puede funcionar como un terminal independiente para administrar y ingresar / emitir datos, emparejado con otros WebOP, o como parte de un sistema SCADA.
El terminal WebOP puede conectarse directamente a dispositivos industrialesRefrigeración pasiva y protección IP66.
Debido a su baja disipación de calor, algunos modelos WebOP se fabrican completamente sin refrigeración por aire activa. Esto le permite montar el dispositivo en objetos que son críticos para el nivel de ruido y reduce la cantidad de polvo que cae en la carcasa.
El panel frontal está hecho sin espacios ni juntas, tiene un nivel de protección de IP66 y permite el contacto directo con el agua bajo presión.
Panel posterior del terminal WOP-3100TMemoria no volátil
Para evitar la pérdida de datos, WebOP tiene 128 KB de memoria no volátil, que puede funcionar de la misma manera que la RAM. Puede almacenar lecturas de medidores y otros datos críticos. En caso de una falla de energía, los datos se guardarán y restaurarán después de un reinicio.
Actualización remota
El programa que se ejecuta en el terminal se puede actualizar de forma remota a través de una red Ethernet o mediante interfaces seriales RS-232/485. Esto simplifica el mantenimiento, ya que elimina la necesidad de omitir todos los terminales para las actualizaciones de software.
Modelos de WebOP
La serie 2000T es el dispositivo más económico construido sobre el sistema operativo en tiempo real HMI RTOS. La serie está representada por WebOP-
2040T /
2070T /
2080T /
2100T , con una diagonal de pantalla de 4.3 pulgadas, 7 pulgadas, 8 pulgadas y 10.1 pulgadas, respectivamente.
La serie 3000T son modelos más avanzados basados en el sistema operativo Windows CE. Se diferencian de la serie 2000T en una gran cantidad de interfaces de hardware y tienen una interfaz CAN a bordo. Los dispositivos funcionan en un rango de temperatura extendido (-20 ~ 60 ° C) y tienen protección antiestática (Aire: 15KV / Contacto: 8KV). La línea cumple totalmente con los requisitos del estándar IEC-61000, que permite el uso de dispositivos en la fabricación de semiconductores, donde las descargas estáticas son un problema. La serie está representada por los modelos
WebOP -
3070T /
3100T /
3120T , con una diagonal de pantalla de 7 pulgadas, 10.1 pulgadas y 12.1 pulgadas, respectivamente.
Entorno de desarrollo de diseñador WebAccess / HMI
Fuera de la caja, el terminal WebOP es solo una computadora ARM de baja potencia en la que puede ejecutar cualquier software, pero el objetivo de esta solución se encuentra en el entorno de desarrollo de interfaz industrial patentado WebAcess / HMI. El sistema consta de dos componentes:
- HMI Designer es un entorno para desarrollar interfaces y lógica de programación. Funciona bajo Windows, en un programador de computadora. El programa final se compila en un solo archivo y se transmite al terminal para la ejecución en tiempo de ejecución. El programa está disponible en ruso.
- HMI Runtime : tiempo de ejecución para ejecutar un programa compilado en el terminal. Puede funcionar no solo en terminales WebOP, sino también en computadoras Advantech UNO, MIC y computadoras de escritorio comunes. Hay versiones de tiempo de ejecución para Linux, Windows, Windows CE.

Hola mundo: crear un proyecto
Comencemos a crear una interfaz de prueba para nuestro panel de control de Habr. Ejecutaré el programa en el terminal
WebOP-3100T con WinCE. Primero, cree un nuevo proyecto en HMI Designer. Para ejecutar el programa en WebOP, es importante elegir el modelo correcto, el formato del archivo final dependerá de esto. En este paso, también puede seleccionar una arquitectura de escritorio, luego el archivo resultante se compilará en el tiempo de ejecución X86.
Crear un nuevo proyecto y elegir una arquitecturaSelección del protocolo de comunicación mediante el cual el programa compilado se cargará en WebOP. En este paso, puede elegir una interfaz en serie o especificar la dirección IP del terminal.
Interfaz de creación de proyectos. En el lado izquierdo hay un diagrama de árbol de los componentes de un programa futuro. Si bien solo estamos interesados en el elemento Pantallas, estas son directamente pantallas con elementos GUI que se mostrarán en el terminal.
Primero, cree dos pantallas con el texto "Hola Mundo" y la capacidad de cambiar entre ellas usando los botones. Para hacer esto, agregue una nueva Pantalla de Pantalla # 2, y en cada pantalla agreguemos un elemento de texto y dos botones para cambiar entre pantallas (Botones de Pantalla). Cada botón está configurado para cambiar a la siguiente pantalla.
Interfaz para configurar el botón para cambiar entre pantallasEl programa Hello World está listo, ahora puedes compilarlo y ejecutarlo. Puede haber errores en la etapa de compilación en el caso de variables o direcciones especificadas incorrectamente. Cualquier error se considera fatal, el programa se compilará solo si no hay errores.
El entorno proporciona la capacidad de simular un terminal para que pueda depurar un programa en una computadora localmente. Hay dos tipos de simulación:
- Simulación en línea : participarán todas las fuentes de datos externas especificadas en el programa. Estos pueden ser USO o dispositivos conectados a través de interfaces seriales o Modbus TCP.
- Simulación sin conexión : simulación sin usar dispositivos externos.
Si bien no tenemos datos externos, utilizamos la simulación fuera de línea, después de compilar el programa. El programa final se ubicará en la carpeta del proyecto, con el nombre
ProjectName_Program Name.px3El programa lanzado en la simulación puede controlarse con el cursor del mouse de la misma manera que lo haría en la pantalla táctil del terminal WebOP. Vemos que todo funciona según lo previsto. Genial
Para descargar el programa al terminal físico, simplemente haga clic en el botón Descargar. Pero como no configuré la conexión del terminal al entorno de desarrollo, simplemente puede transferir el archivo usando una unidad flash USB o una tarjeta de memoria microSD.
La interfaz del programa es intuitiva, no desarmaré cada bloque gráfico. Crear fondos, formas, texto será claro para cualquiera que haya usado programas similares a Word. Crear una interfaz gráfica no requiere habilidades de programación, todos los elementos se agregan arrastrando y soltando en el formulario.
Trabajar con memoria
Ahora que somos capaces de crear elementos gráficos, estudiaremos trabajar con contenido dinámico y un lenguaje de script. Cree un gráfico de barras que muestre datos de la variable
U $ 100 . En la configuración del gráfico, seleccione el tipo de datos: entero de 16 bits y el rango de valores del gráfico: de 0 a 10.

El programa admite la escritura de scripts en tres idiomas: VBScript, JavaScript y su propio idioma. Usaré la tercera opción, porque para ello hay ejemplos en la documentación y ayuda automática sobre la sintaxis directamente en el editor.
Agregar una nueva macro:

Escribiremos un código simple para cambiar gradualmente los datos en una variable, que puede rastrearse en un diagrama. Agregaremos 10 a la variable y cero cuando sea más de 100.
$U100=$U100+10 IF $U100>100 $U100=0 ENDIF
Para ejecutar el script en un bucle, instálelo en la configuración de Configuración general como Macro principal, con un intervalo de ejecución de 250 ms.
Compila y ejecuta el programa en el simulador:

En esta etapa, aprendimos cómo manipular datos en la memoria y mostrarlos en forma visual. Esto ya es suficiente para crear un sistema de monitoreo simple, recibir datos de dispositivos externos (sensores, controladores) y escribirlos en la memoria. En HMI Designer, hay disponibles varias unidades de visualización de datos: en forma de diales circulares con flechas, varios cuadros, gráficos. Usando scripts de JavaScript, puede implementar la carga de datos de fuentes externas a través de HTTP.
Panel de control de Habr
Usando las habilidades adquiridas, crearemos una interfaz cómica del panel de administración de Habrom.
Nuestro control remoto debe ser capaz de:
- Cambiar perfiles de usuario
- Almacenar karma y datos de clasificación
- Cambie los valores de karma y calificación usando controles deslizantes
- Cuando hace clic en el botón de prohibición, el perfil debe marcarse como prohibido, la imagen de perfil debe cambiar a tachada
Cada perfil se mostrará en una página separada, por lo que crearemos una página para cada perfil. Almacenaremos el karma y la calificación en las variables locales en la memoria, que se inicializarán utilizando Macro de configuración cuando se inicie el programa.
Imagen en la que se puede hacer clicAjustar karma y calificación
Para ajustar el karma, utilizaremos el control deslizante (Interruptor deslizante). Como dirección de registro, especificamos la variable inicializada en la macro de configuración. Limitamos el rango de valores del control deslizante de 0 a 1500. Ahora, cuando el control deslizante se mueve, se escribirán nuevos datos en la memoria. En este caso, el estado inicial del control deslizante corresponderá a los valores de la variable en la memoria.
Para mostrar los valores numéricos de karma y calificación, utilizaremos el elemento de visualización numérico. El principio de su funcionamiento es similar al diagrama del programa de ejemplo "Hola Mundo", solo especifique la dirección de la variable en Dirección del monitor.
Botón de prohibición
El botón de prohibición se implementa utilizando el elemento Toggle Switch. El principio del almacenamiento de datos es similar a los ejemplos anteriores. En la configuración, puede seleccionar diferentes textos, colores o imágenes, según el estado del botón.
En el momento en que se presiona el botón, el avatar debe tacharse en rojo. Esto es fácil de implementar con la unidad Picture Display. Le permite especificar múltiples imágenes que están vinculadas al estado del botón Toggle Switch. Para esto, el bloque recibe la misma dirección que el bloque con el botón y el número de estados. Imagen configurada de manera similar con placas de identificación debajo del avatar.
Conclusión
En general, me gustó el producto. Anteriormente, tenía experiencia en el uso de una tableta Android para tareas similares, pero desarrollar una interfaz es mucho más complicado, y las API del navegador no permiten el acceso completo a los periféricos. Un terminal de WebOP puede reemplazar un paquete de una tableta, computadora y controlador Android.
HMI Designer, a pesar del diseño arcaico, es bastante avanzado. Sin habilidades especiales de programación, puede esbozar rápidamente una interfaz de trabajo. El artículo no considera todos los bloques gráficos, de los cuales hay muchos: tubos animados, cilindros, gráficos, interruptores de palanca. De fábrica, admite muchos controladores industriales populares, contiene conectores de base de datos.
Referencias
WebAccess / HMI Designer y el entorno de desarrollo Runtime se pueden descargar
aquí→
Fuentes del proyecto del panel de control de Habrom