Wiki source code of 04 SCADA Design
Last modified by Wecon on 2025/09/03 21:04
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
1.1 | 1 | = 4.1 Main Interface = |
| 2 | |||
| 3 | In "Centralized Monitoring" or "Template Management", click the [Edit] or [Design] button to enter the main interface of the V-IEC SCADA editor and design the screen for the template or project, as shown in the figure below. | ||
| 4 | |||
| 5 | (% style="text-align:center" %) | ||
| 6 | [[image:1745802560210-844.png||height="604" width="1200"]] | ||
| 7 | |||
| 8 | |||
| 9 | The functional divisions of V-Net SCADA editor are shown in the figure below. | ||
| 10 | |||
| 11 | (% style="text-align:center" %) | ||
| 12 | [[image:1745803245643-429.png||height="604" width="1200"]] | ||
| 13 | |||
| 14 | |||
| 15 | * **Toolbar:** A button bar that provides the functions required for screen operation and component operation. | ||
| 16 | * **Page/Component Panel Switching Bar:** Switches between the screen panel and the component panel. | ||
| 17 | * **Page/Component Bar:** The Cloud SCADA editor provides 8 basic components and 20 commonly used components for design. | ||
| 18 | * **Canvas Area:** A canvas used to design SCADA screens. | ||
| 19 | * **Error Correction Area: **Click the [Check] button in the toolbar to check the program of the project and display the results of the check in the output interface of the Error Correction Area. Clicking the corresponding content will jump to the corresponding component. (blue words are warnings and red words are errors.) | ||
| 20 | |||
| 21 | = 4.2 Design Process = | ||
| 22 | |||
| 23 | **SCADA design process:** | ||
| 24 | |||
| 25 | Step 1: When creating a new SCADA project, a main screen exists by default. Multiple screens can also be created in the page bar, and screen properties can be set. | ||
| 26 | |||
| 27 | Step 2: Select the component type, switch the page panel to the component panel, click to select the target component, then drag the mouse in the canvas area to draw the component. | ||
| 28 | |||
| 29 | Step 3: To design a configuration screen, double-click a component to open its property panel and edit the component properties. (set variables, define styles, etc.). | ||
| 30 | |||
| 31 | Step 4: Save the screen.(Click the save button on the toolbar or use the shortcut Ctrl+S.) | ||
| 32 | |||
| 33 | |||
| 34 | == 4.2.1 Normal page and sub screen == | ||
| 35 | |||
| 36 | "Project or template" is composed of screens, which can be composed of one or more screens. | ||
| 37 | |||
| 38 | Screen types are divided into: normal page, sub screen. The icons of each type of screen are different, as shown below: | ||
| 39 | |||
| 40 | [[image:1745717236862-334.png]] ※Normal page: will be displayed when browsing projects or templates. | ||
| 41 | |||
| 42 | [[image:1745717236863-800.png]] ※Sub-screen: Embedded in the pop-up box of the normal page, use function switches and other components, click to display the sub-screen. | ||
| 43 | |||
| 44 | The names of all screens will be displayed in the form of a "list". When browsing the project, the top normal screen in the screen list is displayed by default, such as the main screen 1 in the figure. Other screens will be switched and displayed through screen jumps or links. | ||
| 45 | |||
| 46 | In the screen area of the editor, the SCADA content designed on the screen will be displayed in the canvas area, as shown in the figure below. | ||
| 47 | |||
| 48 | (% style="text-align:center" %) | ||
| 49 | [[image:1745803448301-811.png||height="604" width="1200"]] | ||
| 50 | |||
| 51 | |||
| 52 | == 4.2.2 Create page == | ||
| 53 | |||
| 54 | Click the [Create page] button[[image:1745717258719-455.png]]in the screen area to create a new screen. In the pop-up box, fill in the relevant properties of the new screen: "subject, type, canvas size, gird hide/display, background display", etc., and click [Confirm], as shown in the figure below. | ||
| 55 | |||
| 56 | (% style="text-align:center" %) | ||
| 57 | [[image:1745803872223-332.png||height="604" width="1200"]] | ||
| 58 | |||
| 59 | |||
| 60 | == 4.2.3 Edit page == | ||
| 61 | |||
| 62 | Select the screen that needs to be modified, click the [Edit page] button[[image:1745717258722-649.png]], and modify the properties of the current screen in the pop-up box. | ||
| 63 | |||
| 64 | (% style="text-align:center" %) | ||
| 65 | [[image:1745804080110-149.png||height="604" width="1200"]] | ||
| 66 | |||
| 67 | |||
| 68 | == 4.2.4 Delete page == | ||
| 69 | |||
| 70 | Select the screen to be deleted and click the button[[image:1745717258723-299.png]] to delete the current screen. | ||
| 71 | |||
| 72 | (% style="text-align:center" %) | ||
| 73 | [[image:1745804120960-326.png||height="604" width="1200"]] | ||
| 74 | |||
| 75 | |||
| 76 | == 4.2.5 Page sorting == | ||
| 77 | |||
| 78 | Select a "normal screen or sub screen" that needs to be sorted, and click the [Move up/down page] button[[image:1745717258725-600.png]]to sort the current screen up or down, or directly drag the screen to the desired position. | ||
| 79 | |||
| 80 | (% style="text-align:center" %) | ||
| 81 | [[image:RaUxRuL9mz.png]] | ||
| 82 | |||
| 83 | |||
| 84 | |||
| 85 |