Video: Habr admin control panel. Allows you to adjust karma, rating, and ban users.
TL; DR: in the article I will try to create a comic control panel for Habr using the Webaccess / HMI Designer industrial interface development environment and the WebOP terminal.
Human-machine interface (HMI) is a set of systems for human interaction with controlled machines. Usually this term is used for industrial systems that have an operator and a control panel.
WebOP — an autonomous industrial terminal for creating human-machine interfaces. Used to create production control panels, monitoring systems, control rooms, smart home controllers, etc. Supports direct connection to industrial equipment, can work as part of a SCADA system.
WebOP Terminal - Hardware
The WebOP terminal is a low-power computer based on an ARM processor, in a single housing with a monitor and a touchscreen, designed to run a program with a graphical interface created in HMI Designer. Depending on the model, the terminals have various industrial interfaces on board: RS-232/422/485, CAN bus for connecting to car systems, USB Host port for connecting additional peripherals, USB Client port for connecting the terminal to a computer, audio input and audio output , MicroSD card reader for non-volatile memory and settings transfer.
The devices are positioned as a budget replacement for monoblocks, for tasks that do not require powerful processors and the resources of a full-fledged desktop computer. WebOP can work as a standalone terminal for control and data input/output, paired with other WebOPs, or as part of a SCADA system.
WebOP terminal can connect directly to industrial devices
Passive cooling and IP66 protection
Due to their low heat dissipation, some WebOP models are designed completely without active air cooling. This allows you to mount devices on objects that are critical to the level of noise, and reduces the amount of dust that gets inside the case.
The front panel is made without gaps and joints, has a protection level of IP66, and allows direct ingress of water under pressure.
Rear panel of the WOP-3100T terminal
Non-volatile memory
To prevent data loss, WebOP has 128Kb of non-volatile memory that you can work with in the same way as RAM. It can store meter readings and other critical data. In the event of a power failure, the data will be saved and restored after a reboot.
Remote update
The program running on the terminal can be updated remotely via an Ethernet network or via serial RS-232/485 interfaces. This simplifies maintenance, as it eliminates the need to bypass all terminals for software updates.
WebOP Models
- the most affordable devices built on the basis of the real-time operating system HMI RTOS. The series is represented by models WebOP-///, with a screen diagonal of 4,3 inches, 7 inches, 8 inches and 10.1 inches, respectively.
- more advanced models based on the Windows CE operating system. They differ from the 2000T series in a large number of hardware interfaces, they have a CAN interface on board. The devices operate in an extended temperature range (-20~60°C) and have anti-static protection (Air: 15KV/Contact: 8KV). The range is fully compliant with the IEC-61000 standard, allowing the devices to be used in semiconductor manufacturing where static discharges are a problem. The series is represented by models WebOP-//, with a screen diagonal of 7 inches, 10.1 inches and 12.1 inches, respectively.
WebAccess/HMI Designer development environment
Out of the box, the WebOP terminal is just a low-power ARM computer that can run any software, but the whole essence of this solution is in the proprietary WebAcess / HMI industrial interface development environment. The system consists of two components:
- HMI Designer — environment for developing interfaces and programming logic. Works under Windows, on the programmer's computer. The final program is compiled into one file and transferred to the terminal for runtime execution. The program is available in Russian.
- HMI Runtime - runtime for running the compiled program on the final terminal. It can work not only on WebOP terminals, but also on Advantech UNO, MIC computers, and regular desktop computers. There are runtime versions for Linux, Windows, Windows CE.
Hello world - project creation
Let's start creating a test interface for our Habr control panel. I will run the program on the terminal under control of WinCE. Let's start by creating a new project in HMI Designer. To run the program on WebOP, it is important to choose the correct model, the format of the final file will depend on this. At this step, you can also select the desktop architecture, then the final file will be compiled under the X86 runtime.
Creating a new project and choosing an architecture
Selecting the communication protocol by which the compiled program will be loaded into WebOP. At this step, you can select a serial interface, or specify the IP address of the terminal.
Project creation interface. On the left side is a tree-like diagram of the components of the future program. So far, we are only interested in the Screens item, these are directly screens with GUI elements that will be displayed on the terminal.
First, let's create two screens with the text "Hello World" and the ability to switch between them using the buttons. To do this, let's add a new screen Screen #2, and on each screen we'll add a text element and two Screen Buttons. Each button will be configured to switch to the next screen.
Screen switch button setting interface
The "Hello World" program is ready, now you can compile and run it. At the compilation stage, there may be errors in case of incorrectly specified variables or addresses. Any error is considered fatal, the program will be compiled only if there are no errors.
The environment provides the ability to simulate a terminal in order to be able to debug the program on the computer locally. There are two types of simulation:
- Online simulation — all external data sources specified in the program will be used. These can be interrogators or devices connected via serial interfaces or Modbus TCP.
- Offline simulation — simulation without the use of external devices.
While we do not have external data, we use offline simulation, having previously compiled the program. The final program will be located in the project folder, with the name ProjectName_ProgramName.px3
The program running in the simulation can be controlled by the mouse cursor in the same way as it would be on the touchscreen of the WebOP terminal. We see that everything works as intended. Great.
To download the program to a physical terminal, just click the Download button. But since I did not configure the connection of the terminal to the development environment, you can simply transfer the file using a USB flash drive or microSD memory card.
The program interface is intuitive, I will not analyze each graphic block. Creating backgrounds, shapes, text will be clear to anyone who has used programs similar to Word. To create a graphical interface, no programming skills are required, all elements are added by dragging the mouse onto the form.
Work with memory
Now that we know how to create graphic elements, we will learn how to work with dynamic content and scripting language. Let's create a bar chart displaying data from a variable U $ 100. In the chart settings, select the data type: 16-bit integer, and the range of chart values: from 0 to 10.
The program supports writing scripts in three languages: VBScript, JavaScript and its own language. I will use the third option because it has examples in the documentation and automatic syntax help right in the editor.
Let's add a new macro:
Let's write some simple code to incrementally change data in a variable that can be tracked on a chart. We will add 10 to the variable, and reset it to zero when it is greater than 100.
$U100=$U100+10
IF $U100>100
$U100=0
ENDIF
To execute the script in a loop, set it in the General Setup settings as Main Macro, with an execution interval of 250ms.
Compile and run the program in the simulator:
At this stage, we have learned how to manipulate data in memory and display them in a visual form. This is already enough to create a simple monitoring system, receiving data from external devices (sensors, controllers) and writing them to memory. In HMI Designer, different data display blocks are available: in the form of circular dials with arrows, various diagrams, graphs. Using JavaScript scripts, you can implement the loading of data from external sources via HTTP.
Habr control panel
Using the acquired skills, we will make a comic interface for the Habr admin control panel.
Our remote should be able to:
- Switch user profiles
- Store karma and rating data
- Change karma and rating values using sliders
- When you click the “ban” button, the profile should be marked as banned, the avatar should change to a crossed out one
Each profile will be displayed on a separate page, so we will create a page for each profile. We will store karma and rating in local variables in memory, which will be initialized using Setup Macro when the program starts.
The picture is clickable
Karma and rating adjustment
To adjust the karma, we will use the slider (Slide Switch). As the record address, we specify a variable initialized in the Setup Macro. Let's limit the range of values of the slider from 0 to 1500. Now, when the slider moves, new data will be written to memory. In this case, the initial state of the slider will correspond to the values of the variable in memory.
To display numerical values of karma and rating, we will use the Numeric display element. The principle of its operation is similar to the diagram from the example program "Hello World", just specify the address of the variable in the Monitor Address.
Ban button
The "ban" button is implemented using the Toggle Switch element. The principle of data storage is similar to the examples above. In the settings, you can choose different text, color or image, depending on the state of the button.
At the moment the button is pressed, the avatar should be crossed out in red. This is easy to implement using the Picture Display block. It allows you to set multiple images tied to the state of the Toggle Switch button. To do this, the block is given the same address as the block with the button, and the number of states. The picture with nameplates under the avatar is set up in a similar way.
Conclusion
In general, I liked the product. Previously, I had experience using an Android tablet for similar tasks, but developing an interface for it is much more difficult, and browser APIs do not allow full access to peripherals. One WebOP terminal can replace a bunch of Android tablet, computer and controller.
HMI Designer, despite its archaic design, is quite advanced. Without special programming skills, you can quickly sketch out a working interface. The article does not cover all the graphic blocks, of which there are a lot: animated pipes, balloons, graphics, toggle switches. It supports many popular industrial controllers out of the box and contains database connectors.
references
WebAccess/HMI Designer and Runtime development environment can be downloaded
→
Source: habr.com