What are the uses of web visualization?
Web visualization is a visual interface based on an HTML5 web browser, allowing for convenient operation and browsing on devices such as PCs, smartphones, and tablets. This interface allows for the simultaneous development of PLC applications and visualization applications within the same project, without the need for additional software. Since the visualization component is fully integrated into the Leadsys Studio programming software, direct access to application variables significantly improves development efficiency. Furthermore, the interface provides debugging capabilities, allowing real-time observation of the execution status through the visual interface, effectively shortening debugging time and improving work efficiency.
As shown in Figure 1, the web visualization interface enables real-time monitoring and control of the device.
Figure 1
How do I create a new web visualization project?
You can follow these steps to create a new Web visualization project.
1) Create a new visualization view:
In the navigation tree menu, right-click "Application," select "Add Object," and then select "View." Enter a name for the view object and click "Open" to add a new web visualization view. Repeat the above steps to add multiple views. The newly created web visualization view includes a view manager, a visualization editor, a visualization toolbox, and element properties. See Figure 2:
Figure 2
①View Manager: Allows configuration of visualization-related parameters.
② Visual Editor: This page allows you to perform basic operations such as adding, aligning, and deleting visual elements.
③ Toolbox: Provides various graphics in the visual editor page.
④ Attributes: Edit the relevant attributes of the visual elements
2) Configuration screen and visualization elements:
As needed for the project, drag and drop visual elements such as buttons and text onto the screen and associate them with variables.
Figure 3
3) Configuration and settings:
After configuration, in the "View Manager," configure the language, control styles, etc., of the visualization interface. In the "Network View," configure the starting display page, then compile. If the application and visualization manager report no errors, download them to the PLC. After logging into the PLC, enter the visualization view and observe whether the elements of the visualization interface are displayed correctly according to the variable data content. Please refer to Figures 4-6 for the above process:
Figure 4
Figure 5
Figure 6
4) Browser browsing:
Ensure the PLC and mobile terminal are on the same local area network. Enter the PLC's IP address and port number (e.g., 192.168.188.100:8080) into a web browser to access the PLC's internal visual interface. See Figure 7 below:
Figure 7
How do I add the required elements to the visualization interface?
The Web Visualization Toolkit includes basic tools and general control tools.
Part 1: Basic Tools
The basic tools mainly include some commonly used graphic elements, as shown in Figure 8 below. These elements can be used to create text input boxes/text display boxes/color display boxes and graphics.
Figure 8
II. General Control Tools
The general control tools mainly include commonly used graphic elements, as shown in Figure 9, which can be used to create labels, combo boxes, tables, and buttons. Below, we will use some of the more frequently used view elements as examples.
Figure 9
◎Button
Button controls allow users to perform actions by clicking. The space style of a button control can display text or add images. When a button control is clicked, its trigger method can be selected through the control's properties.
Example: In the visual interface, create two buttons as the forward and reverse rotation buttons for the motor. When the forward rotation button is pressed, the motor rotates forward; when the button is released, the motor stops. When the reverse rotation button is pressed, the motor rotates in reverse; when the button is released, the motor stops. The steps are as follows.
1) Select the button element you want to add from the toolbar and drag it to the visual editing area. Enter the text "JOG+" and "JOG-" as identifiers in the button. See Figure 10:
Figure 10
2) The button should generate a signal when pressed and disappear automatically when released. Locate "Input Configuration" in the properties, select the "Trigger" input method, and complete the variable mapping using the input assistant in its "Variables" section. See Figure 11:
Figure 11
There are two ways to trigger the button: one is "toggle" and the other is "tap".
① "Toggle": When the button is pressed, the variable is always set to ON. If you need to make it FALSE, you need to manually trigger the button again. Similarly, you can use the variable mapping under "Toggle" → "Variable". If you need the button to be FALSE when pressed, check "Toggle FALSE".
② "Tap": When the button is pressed, the variable is set to ON; when the button is released, the variable is set to FALSE.
◎Progress bar
The progress bar allows users to map the current progress variable to a control. This element displays the current progress based on the user-defined "minimum" and "maximum" values, and according to the value of the current mapped variable.
Example: Simulate the progress bar's increment process by creating an auto-accumulator program in the program. The program editing is shown in Figure 12 below:
Figure 12
1) In the toolbox of the visual editing interface, find the "General Controls" category, add a progress bar control to the visual editing window, select the progress bar control in the visual editing window, and then find "Variables" in the properties window to map the variable. At the same time, set the "Minimum Value" and "Maximum Value" according to the example program. See Figure 13:
Figure 13
2) There are two display styles for the progress bar. You can select the style by finding "Type" in the properties menu, as shown in Figure 14:
Figure 14
3) After running online, the progress bar will slowly increase as the variable value increases. See Figure 15:
Figure 15
◎GroupBox
Chunk controls primarily provide grouping for other tools, breaking down the functionality of the visualization interface according to the grouping of controls. They display borders around the toolsets they contain and can show titles, but chunked tools do not support scrollbars.
In the toolbox, locate "General Controls" and add it to the view editing window. After selecting the control, you can change the title in the "Text" property menu. Then, drag the tools that need to be grouped to the group to achieve the grouping of view elements.
Figure 16
Web visualization function considerations
Leadshine's large-scale PLCs now all support web visualization functionality. Special attention should be paid to:
1. PLCs using Web visualization must use device description files (XML) that support Web visualization. 2. The PLC firmware must support this function. For previous firmware versions, please contact the manufacturer for firmware upgrade files.
Other models will be updated soon, so stay tuned!
