02 Cloud SCADA

Version 9.1 by Leo on 2022/06/16 17:12

1 Instruction

The default page of the V-BOX WEB SCADA platform after login is shown as below. The main functions of this platform includes the centralized monitoring, template management, project management, and authority management. The user could switch between the function modules through the left navigation bar, and the specific content of each function module will be displayed on the right side.

1617874482390-379.png

Introduction

  1. Centralized monitoring: project list, that is displayed in groups;
  2. Template management: add and edit templates;
  3. Project management: add and edit project;
  4. Authority management: assign a project with configuration authority for view-account

✎Note:

Google Chrome is recommended.

2 Sign in

Steps:

1) Click Cloud SCADA under service in the upper right corner, or enter [http://web.v-box.net/web/html/user/login.html] on browser.

1617874518342-186.png

2)The account of the V-box WEB SCADA platform is the same as the V-BOX account.

✎Note:

Google Chrome is recommended.

3 Centralized monitoring

Centralized monitoring is the default home page of the platform. As shown as Figure 3-1.

1617874482390-379.png

This page shows projects under each group by switching groups. User could add, delete and modify the group.

3.1 Group management

The centralized monitoring module classifies the project by group.

1617933161760-158.png

  1. Switch group: Click group name to switch group.
  2. Add a group: Click V-BOX cloud configuration user manual_html_b2953a9d44427091.png to add a new group.
  3. Edit group: Click V-BOX cloud configuration user manual_html_516339bb09efc553.png to edit the group name.
  4. Delete group: Click V-BOX cloud configuration user manual_html_c92089cb54d385cd.png to delete the current group.
  5. More group: Click V-BOX cloud configuration user manual_html_df266f0fa8d8536e.png to display the previous or next group.

3.2 Assign project

The centralized monitoring module includes following functions:add new projects, delete projects and preview projects for each group. Click on the corresponding group to display the list of projects in the group, as shown below.

1617948660671-429.png

  1. Add project: Click 1617948869319-850.png in the project list area to assign a project in the group.
  2. Delete project: Click 1617948891768-154.png in the upper right corner of a project thumbnail in the project list to move the project out of the group.
  3. Preview project: Click on 1617948906340-294.png  to view the configuration screen of the project. For details, please refer to chapter 3.3.

3.3 Browse project

Click on 1617948906340-294.png in the project list to view the configuration screen.

V-BOX cloud configuration user manual_html_72b4c2044c0ab2fe.png

  1. Real-time data: Click the [Real-time Data] to view the device name and state. Or view the current value, encoding, description, etc. of each data.
  2. Alarm data: Click the [alarm data] button to pop up the alarm record page and view the current alarm status and historical alarm information.
  3. Historical data: Click the [History Data] button to pop up the history report interface of the data. User could view all the historical data.
  4. Multi-language: multi-language drop-down menu, one object could support three language at the same time, user could switch language by this menu.
  5. V-BOX cloud configuration user manual_html_f89481c3d93517fb.png : Zoom in screen
  6. V-BOX cloud configuration user manual_html_4836056a73da4491.png : Zoom out screen

4 Template

4.1 Template management

Click the template management module on the left menu to enter the template management module.

1617949183137-615.png

The V-box WEB SCADA platform provides a template management module that could save the designed configuration screen as a template and user could import the template .

4.2 Add, edit and delete template

  1. Add template: Click the [Add] to add a template, as Figure 4-2 shows.
  2. Edit template: Click the [Edit] to edit the name and resolution of the template.
  3. Delete template: Click the [Delete] to delete the template.

1617933432286-367.png

4.3 Design template

Click the [Template Design] in the template list to access the V-box configuration platform editor page. User could edit the template in this page. More details about how to design the project please refer to Chapter 6.

5 Project management

5.1 Project management

Click the [Project management] on the left menu to enter the project list.

1617949499753-859.png

5.2 Add, edit, delete and preview project

  1. Add project: Click the [Add] in the upper right corner of [Project Management] to add a project (Set project name and cross-box options).
  2. Edit project: Click the [Edit] in a specific project line of the project list to modify the project (Set project name and cross-box options).
  3. Delete project: Click the [Delete] to delete the corresponding project.
  4. Preview project: Click the [Browse] to browse the project.

5.3 Login-free browse

Click the [Login-free browse] in a specific project line of the project list to pop up window, set the expiration time, then user could get the browsing address and QR code (just need a scan to browse).

5.4 Project design

Click the [Design] button in a specific project line of the project list to access the WEB SCADA editor. For more details please check Chapter 6.

6 V-box WEB SCADA design

6.1 Main screen and Menu

Click [Design] (or Template design) in [Project Management] (or Template Management) screen to access WEB SCADA editor.

1617949467765-343.png

The function partition of WEB SCADA editor.

V-BOX cloud configuration user manual_html_cb0c19aefec34494.png

  1. Toolbar: A function bar that provides pages operations and objects operations;
  2. Project Manager: It shows all pages for project;
  3. Objects Library: It provides 7 basic shapes objects and 13 common objects for creating SCADA page;
  4. Design Area: Design area for SCADA page and template;

6.2 Design

  1. Create new page and set the property;
  2. Select the object and drag the mouse in design area;
  3. Edit object property and set the variable etc;
  4. Save the screen;

6.3 Project Screen

A project or template is composed of one or several screens. And all screens are listed on [Project Manager]. Select screen name, its page would be displayed on [Design Area].

1617949566099-340.png

Project Manager would display two kinds of screen. One is page screen, and the other is Thumbnail. A project or template could contain several screens, but only one thumbnail. Thumbnail is used for displayed project on [Centralized Monitoring].

1617949620811-522.png

1617949663298-790.png

Creating thumbnail

1)Click V-BOX cloud configuration user manual_html_287ead7d4c995a28.png on [Project Manager];

1617949820581-164.png

2)Select [Page Type] as [Thumbnail] on screen attribute window;

3)Set background display and color according to real situation;

4)Click [Save] to complete operation;

Creating page screen

1)Click V-BOX cloud configuration user manual_html_287ead7d4c995a28.png on [Project Manager];

1617949844339-186.png

Figure 6 ‑15

2)Fill in properties of screen;

3)Click [Save] to complete;

✎Note:

When a thumbnail page is not created, the default picture would be displayed on [Centralized Monitoring].

Modifying screen

  1. Select the page to be modified;
  2. Click V-BOX cloud configuration user manual_html_a5f920d2d144472c.png on [Project Manager] or V-BOX cloud configuration user manual_html_56ae321f2d4418ac.png on [Toolbar];
  3. Modify screen on [Design Area];
  4. Click V-BOX cloud configuration user manual_html_5970eb09902bd1a3.png on [Toolbar] to complete modification;
  5.  

Deleting screen

1)Select screen on [Project Manager];

2)ClickV-BOX cloud configuration user manual_html_dca942a0244f9912.png , and following message would pop up to prevent accidental deletion;

V-BOX cloud configuration user manual_html_1e7f9096426ebeca.png

3)Click [OK] to delete page;

Sort screen

  1. Select page screen on [Project Manager];
  2. Click V-BOX cloud configuration user manual_html_1ab5c888bfd536c.png to sort screen upwards or downwards;

✎Note:

Thumbnail does not support sorting.

6.4 Object

The WEB SCADA platform provides a variety of visualizations for users to design screen. All objects listed on [Object Library].

6.4.1 Basic Operations

Adding objects on screen

  1. Select and click the desired object on [Objects Library];
  2. Move the cursor to the [Design Area];
  3. When cursor changes as + symbol, hold down left click draw the desired size;

Moving object

  1. Select object on [Design Area];
  2. Hold down the left click and move object to desired position.

V-BOX cloud configuration user manual_html_4a7ca599f8cf89c5.png

Scaling object

1)Select object, the positioning control point would appear around object;

2)Click any control point;

3)Move point to scale object;

Editing object

1)Select object;

2)Double-click it to open property window;

V-BOX cloud configuration user manual_html_45a8e3cf3e1113fe.png

3)Edit object settings;

4)Click [Save] to complete operation;

6.4.2 Introduction

1)Basic

1617949894556-149.png

Figure 6 ‑10

  • Line: a common line, user could set color, line type and thickness for it;
  • Rectangles: User could set transparency, Rounded Conner, color of filled and border, line type and thickness for it;
  • Circle: User could set transparency, color of filled and border, line type and thickness for it.
  • Ellipse: User could set transparency, color of filled and border, line type and thickness for it.
  • Triangle: User could set transparency, color of filled and border, line type and thickness for it.
  • Text: It is used for displaying text content. User could set text styles, background styles, also it supports three languages at the same time.
  • Picture: It is used for displaying the picture, support the user defined picture.
PropertyDescription
GalleryChoose the picture from the gallery
AngleRotation angle (0~360)
Scale

Yes: the aspect ratio is fixed

No: the aspect ratio is not fixed

2)Common

V-BOX cloud configuration user manual_html_c84a5d0032df07e2.png

  • Display Frame
ItemDescription
Monitoring PointSet operating address for this object (Read and write can be different);
Read-write permissionThere are three modes for it, users could select according to requirements;
Set TextIt is used for setting style of text and display direction
StyleIt is used for setting object display, like background color;
ExpansionIt is used for setting expansion function, like lock position;
DisplayIt is used for setting object position and size
  • Bit /Word Indicator

Indicator could monitor and display the specified PLC or HMI bit address, and its state changes according to the specified address value.

ItemsDescription
Monitor PointSet reading address for this object;
StatusSet text for every status;
PictureSet picture for every status;
ExpansionSet display expansion function, such as blink
DisplaySet object position and size
  • Bit/ Word Switch

Switch could operate the specified PLC or HMI bit address, and its state changes according to the specified address value.

ItemsDescription
Monitor PointSet operating address for this object (Read and write can be different);
Read-write permissionThere are three modes for it, users could select according to requirements;
Pop up a confirmation boxCheck it to enable confirmation box for operating;
StatusSet text for every status;
PictureSet picture for every status;
ExpansionSet display expansion function, such as blink
DisplaySet object position and size
  • Dashboard

Display the value of address in real time using the dashboard.

ItemsDescription
Monitor PointSet operating address for this object (Read and write can be different);
SelectSet dashboard display range, there are two modes, Constant and Variable
Scale valueCheck it to display value;
Select LanguageSet text for object;
StyleSet object display style such as color, scales number;
Alarm ZoneSet range and color for alarm
DisplaySet object position and size
  • Bar graph

Use the length or height of the rectangle to reflect the value of reading address so that the value could be visualized.

ItemsDescription
Monitor PointSet operating address for this object (Read and write can be different);
Digit DisplayCheck it to display digit value on bar;
Progress bar directionSelect display direction;
ScalesSet object scales display type and color;
Bar colorSet color for bar;
Background DisplaySet color of bar background;
Alarm ZoneSet range and color for alarm
DisplaySet object position and size
  • Real-Time Trend Chart

Use the curve to show the trend of the data over time. X-axis is time, Y-axis is variable.

ItemsDescription
Monitor PointSet operating address for this object (Read and write can be different);
Digit DisplayCheck it to display digit value on bar;
Progress bar directionSelect display direction;
ScalesSet object scales display type and color;
Bar colorSet color for bar;
Background DisplaySet color of bar background;
Alarm ZoneSet range and color for alarm
DisplaySet object position and size
  
  • Flow pipe

This is a flowing animation object, users could set animation trigger condition for it, the monitor point could be both bit address and word address;

ItemsDescription
Border colorSet object background color;
ColorSet flowing block color;
SpeedThree modes for flowing block speed;
Flow directionTwo modes for flowing direction;
Monitor PointSet trigger address;
Trigger Condition

Bit address: Select ON or OFF;

Word address: Set value range;

Color Block WidthSet flowing block size;
Color Block LengthSet flowing block size;
Color Block SpacingSet the spacing between flow blocks;
Display BorderSelect display or hide border;
Alarm ZoneSet range and color for alarm
DisplaySet object position and size

Tips for designing flow bar

When user need to simulate the flow of water in a pipe, please put the pipe picture at first, then hide the flow border and place it onto the pipe picture.

  • Video object

Video object is used for playing the video file provided in the video source.

ItemsDescription
Border colorSet object background color;
ColorSet flowing block color;
SpeedThree modes for flowing block speed;
Flow directionTwo modes for flowing direction;
Monitor PointSet trigger address;
Trigger Condition

Bit address: Select ON or OFF;

Word address: Set value range;

Color Block WidthSet flowing block size;
Color Block LengthSet flowing block size;
Color Block SpacingSet the spacing between flow blocks;
Display BorderSelect display or hide border;
Alarm ZoneSet range and color for alarm
DisplaySet object position and size
  • Hyperlink

The object for link website;

ItemsDescription
Link addressEnter website;
Open withThere are two options, user could select open with new window or current window;
Select LanguageOne object could support three language, user could enter text for note object;
StyleSet object display style such as color, use picture as background or not
DisplaySet object position and size
  • Function Switch

Function switch is designed to switch screens, and call and close sub screen.

ItemsDescription
ScreenSelect the target screen for switch;
Sub-screenThere are two options, user could select open with new window or current window;
PreviousSwitch to the previous screen
NextSwitch to the next screen
ReturnReturn to the screen before switch
TextSet text for object, including text font, color direction and so on;
StyleSet object display style such as color, use picture as background or not
DisplaySet object position and size
  • Combination Switch

The combination switch supports the collection of multiple functions onto one object. When the object is pressed, multiple functions are arranged in sequence to meet the special requirements of user.

ItemsDescription
Bit operationIt provides [Bit copy], [Set ON], [Set OFF], [Switch] and [Bit Copy] functions.
Word operationIt provides [Word copy], [Word set], [Increase] and [Decrease] functions,
Arithmetic[Add], [Subtract], [Multiply] and [Divide] functions
Screen changeIt provides screen switch function as [Function Switch], it supports [Previous], [Next], [Return], [Change to], and open, close sub-screen operations
DeleteDelete selected item function;
EmptyDelete all items in operation list;
UpMove the selected item up one row in operation list;
DownMove the selected item down one row in operation list;

Time

It is used for displaying the time of the V-BOX, when the V-BOX is offline, the time will stay at the time when it is offline.

ItemsDescription
Monitoring boxLink a box for the time part
PatternTwo types, one is digit and the other is clock
Format settingsSet format for time and date in digit pattern
BackgroundSet display or hide background of object
Set textSet text display style;
DisplaySet object position and size

Histogram

It is used for display more than one tag value in Bar graph format.

ItemsDescription
Add new groupMaximum is 8, add items for this object, also set colors
Add monitoring pointSet read tag for every item,
StyleSet object display style such as color, use picture as background or not
DisplaySet object position and size

Alarm record display

It is used for display alarm information of V-BOX. It can support current and history alarm.

ItemsDescription
Select boxLink to V-BOX
Alarm typeSelect current alarm or history alarm or all
Start dateAlarm display start date
End dateAlarm display end date
FormatSet display format for date and time
SequenceIt provides two type, one is order, and the other is reverse order
Display contentUsers could select display contents by check them
StyleSet colors for different parts
DisplaySet object position and size

History trend chart

The history trend will display data record with graph. X axis represents as time, and Y axis represents as data.

ItemsDescription
BasicSet numbers of curve in object and select style for every curves including color, link tag
StyleDisplay formTwo type, one is curve, and the other is table
Start dateStart date of history data
End dateEnd date of history data
FormatTime and date format for display
SequenceTwo types, order or reverse order
Y rangeTwo types, fixed and adaptive
Set textSet font size, color and other styles.
TransparencySet transparency of object
Background colorTwo types, translucent or transparent
Gradient waySet display way and color
Display barCheck it to display screen bar
DisplaySet object position and size

Indirect screen display

This object is used for calling screens when condition is met.

ItemsDescription
BasicConditional triggerIt provides bit, word condition and unconditional
Bind monitoring pointLink to tag for triggering
Trigger conditionfor bit address, it requires ON or OFF, for word address, different value corresponds to different screens.
Designated screenOnly for bit address as trigger. When condition is met, display this screen
StyleSet object display style such as display title bar or display or hide background
DisplaySet object position and size

Ring chart

Display value as ring chart

ItemsDescription
BasicMonitor pointLink to tag for data reading
RangeSet fixed range or variable range
ScalesSet scales such as major and minor numbers, colors and so on
Designated screenOnly for bit address as trigger. When condition is met, display this screen
Numerical scale displayCheck it to display scale
Start angleSet start angle for scale
ColorColor setting for bar and background
Alarm ZoneSet alarm range and colors
DisplaySet object position and size

Pie chart

Display more than one value in one pie chart

ItemsDescription
Monitor pointAdd read addresses, the maximum is 8
StylePatternSet alarm range and colors
Numerical scaleCheck it to display value in object
Monitoring name displayCheck it to display name in object
DisplaySet object position and size

6.5 Tool bar

The toolbar has the same function as the tool list. (right-click on the canvas to pop up tool list)

ToolDescription
V-BOX cloud configuration user manual_html_668218d361cc54ba.pngMouse tool for selecting parts. Hold Ctrl key and click on the part to select multiple parts at the same time.
V-BOX cloud configuration user manual_html_867a000ba1161424.pngSave current canvas
V-BOX cloud configuration user manual_html_f5dbf6b889320d6c.pngDelete the selected parts. Multiple selected parts can be deleted at the same time.
V-BOX cloud configuration user manual_html_e5d36271faf64986.pngCopy the selected parts.
V-BOX cloud configuration user manual_html_97033b77500d6b5e.pngPaste the selected parts
V-BOX cloud configuration user manual_html_53bc6f617b145720.pngThe property of the current screen
V-BOX cloud configuration user manual_html_44a3e98a692aee6a.pngImport the configured template for the current screen
V-BOX cloud configuration user manual_html_30f2f1591b0a9e66.pngBrowse the current project interface. The default home page is the top screen in the project page list.
V-BOX cloud configuration user manual_html_6aae3377add443ff.pngAlign left edge of multiple parts
V-BOX cloud configuration user manual_html_dc8fb256a13e2f91.pngAlign right edge of multiple parts
V-BOX cloud configuration user manual_html_bec295f2d25219f9.pngAlign top edge of multiple parts
V-BOX cloud configuration user manual_html_4a0c10157943d534.pngAlign bottom edge of multiple parts
V-BOX cloud configuration user manual_html_378cd8ba635ed3f4.pngPlace the selected part on top of the other parts
V-BOX cloud configuration user manual_html_6a594344368f5276.pngPlace the selected part on the bottom of the other parts

7 Authority management

Click the Authority management on the left menu to enter the Authority management module, as Figure 7-1 shows.

1617949992819-138.png

Figure 7 ‑11

This module is used for assigning project and configuring permissions for sub-accounts.

1)How to assign project for sub-account

  • Click the button V-BOX cloud configuration user manual_html_d96aea12cdb7cdb1.png at the end of the sub-account line to enter the project list page of the sub-account, as shown in Figure 7-2.
  • Click the button V-BOX cloud configuration user manual_html_5fd249946ccb44cc.png on the top right corner of window, select the project of the pop window and then click save to get the permissions of the selected project for the account, as shown in Figure 7-3.

1617934946822-979.png

Figure 7 ‑2

1617950026178-538.png

Figure 7 ‑3

2)How to unassigned project for sub-account

In the list of assigned projects in the sub-account, click “Unbind Project” to unbind the project for the account.

8 Cloud SCADA demo account

1)What is Cloud SCADA platform?

Cloud SCADA is an IoT platform that can realize terminal equipment data collection, real-time control, alarm push, group management, configuration design and other functions. With this platform, users can monitor terminal equipment more conveniently.

2)How to access?

Asean URL: http://asean.v-box.net/web/htmlnew/user/login.html

Asean account&password: weconuser 123123

EU URL: http://eu.v-box.net/web/htmlnew/user/login.html

EU account&password: weconuser weconuser123
✎Note1: users can edit Cloud SCADA project freely, and the modified results will not be saved.

✎Note2: users can enter the Cloud SCADA page by clicking the following positions:

1648577581177-590.png

3)Industry classification

There are 20 Cloud SCADA projects created in demo account, including HVAC system, water treatment system, smart farm, smart factory and smart city. 

1648577644453-821.png

4)Part of the project introduction

4.1 Heating Monitoring System

Collect the analog signals of the temperature, pressure and flow rate of the outlet water of the heat exchanger, and use PID to control the valve diameter of the heat exchanger and the rotation speed of     the circulating pump to achieve the purpose of automatic temperature adjustment.

1648577724164-599.png

1648577744837-247.png

4.2 Water Treatment System

Industry introduction: water treatment system.Mainly to improve waterquality, to meet certain water quality standards, such as drinking water, industrial wastewater discharge.In order to ensure the stable operation of the water treatment system, it is necessary to monitor the water pressure and water level, and adjust the   appropriate water pressure and water level by remote control of the pumpspeed.

1648577778435-311.png

4.3 Smart City Monitoring

The multi-functional city monitoring system can be applied to multiple scenarios such as HVAC, factory, and pump station monitoring. Monitor and control common industrial parameters such as voltage, current, power, frequency, temperature, liquid level, etc.

1648577825813-481.png

1648577843849-690.png

4.4 Smart Building Monitoring

It is used in community management to monitor various facilities in the community such as elevator equipment, lighting system, parking lot, fire fighting equipment, etc. In the event of an abnormality in the equipment, such as elevator damage, insufficient fire water, etc., an alarm prompt is sent to the manager.

1648577874801-932.png

1648577894932-957.png