Differences

This shows you the differences between two versions of the page.

--- dashboards [2019/11/20 16:15] – [Tool pallette] emozolyak
+++ dashboards [2020/07/31 14:28] – contents table: levels === to ==== atolstov
@@ Line 1: / Line 1: @@
 ====== Dashboards ======
+In WebHMI, screens or dashboards (Dashboards) are analogous to screens for operator panels or graphic screens in SCADA systems.
 ===== Creating and managing dashboards =====
+ You can create multiple screens that will be available after you create them in the Dashboard menu. For example, let's create the '//The only dashboard//' screen, using the menu item 'Setup / Dashboards'.
-In WebHMI, screens or dashboards (Dashboards) are analogous to screens for operator panels or graphic screens in SCADA systems. You can create multiple screens that will be available after you create them in the Dashboard menu. For example, let's create the '//The only dashboard//' screen, using the menu item 'Setup / Dashboards'.
 {{::add_dashboard.png?direct&912|}}
@@ Line 113: / Line 113: @@
 **Group** - group operatoins for selections with more than one control
+**>** - toggles toolbox location from left to right
 {{ group_operations.png?direct&300 }}
@@ Line 149: / Line 151: @@
 {{ 2018-09-25_10-27-34.gif }}
-==== Controls description ====
+===== Controls description before 3.4 fw version =====
 ----
-The overview of controls is presented on the following animated picture:
+The overview of controls is presented on the following animated picture. This set is for WebHMI firmware version up to 3.4 version. For 3.5 and above versions there are extra controls available which will be given in the end of the article.
 {{ ::controls_overview.gif?direct |}}
@@ Line 158: / Line 160: @@
 ----
-=== LED control ===
+==== LED control ====
 LED has the following properties:
@@ Line 177: / Line 179: @@
 ----
-=== Text value ===
+==== Text value ====
   ***Label** - It is a text before register value text
@@ Line 200: / Line 202: @@
 ----
-=== Button ===
+==== Button ====
   ***Transparent** - the button will be invisible but working. E.g. to lay it over the image.
@@ Line 217: / Line 219: @@
 ----
-=== Image ===
+==== Image ====
   ***Image** - this image is the default image on display, when no register is linked to the image or no dynamic property for the image is defined
@@ Line 227: / Line 229: @@
 ----
-=== Progress bar ===
+==== Progress bar ====
   ***Orientation** - defines horizontal or vertical type for the progress bar
@@ Line 236: / Line 238: @@
 ----
-=== Gauge ===
+==== Gauge ====
 The gauge imitates physical metering device with arrow or other point moving along the ruler. And has almost the same settings as in progress bar:
@@ Line 244: / Line 246: @@
 ----
-=== Round gauge ===
+==== Round gauge ====
 The round gauge also imitates physical metering device with __rotating__ arrow.
@@ Line 260: / Line 262: @@
 ----
-=== Slider ===
+==== Slider ====
 The slider also imitates physical sliders allowing to set value and see it's current value as position.
@@ Line 275: / Line 277: @@
 ----
-=== Edit Box ===
+==== Edit Box ====
 The edit box is almost the same as text control but allows to edit value without pop-up dialog like in text control.
@@ Line 281: / Line 283: @@
 ----
-=== Recipes list ===
+==== Recipes list ====
 You can select which recipe to apply with this control.
@@ Line 290: / Line 292: @@
 ----
-=== Video stream ===
+==== Video stream ====
 If there is configured video stream in the project, it can be shown on the dashboard with this control.
@@ Line 300: / Line 302: @@
 ----
-=== Group ===
+==== Group ====
 Several controls related to some device, unit, area etc. can be distinguished with group for convinience.
@@ Line 309: / Line 311: @@
 ----
-=== Messages table ===
+==== Messages table ====
 The messages from the message log can also be shown on the dashboard with this control.
@@ Line 326: / Line 328: @@
 ----
-=== Trend ===
+==== Trend ====
 Up to three register values can be displayed in a trend for the dashboard.
@@ Line 333: / Line 335: @@
   ***Time span, sec**  - Time span for X axis of the trend
   ***Refresh rate** - data refresh rate for the trend referenced to dashboard refresh rate ( 1 / [1,2,4,8,16,32,64])
+===== Controls available from 3.5 fw version and above =====
 ----
+==== Radial indicator ====
+This control resembles a progress bar that has a round shape.
+{{ ::radial_indicators..png?direct&400 |}}
+  ***Use registers state** - the color of the indicator and text will change according to registers state
+  ***Label** - inside the indicator, there can be register value text, static text, or image
+  ***Units of measurement** - with this checkbox you can remove units without going to the register's properties
+  ***Zero point** - is for the start value place
+  ***Padding** - is a space between outer controls outline and the edge of the indicator
+----
+=== Polyline ===
+The polyline has multiple segments and nodes. You can change its width, corners radius, add arrows and make it dotted. With __Closed polyline__ checkbox, two ends nodes will combine into a single one.
+  ***To move the polyline**: drag it by the segment or select and use arrow keys. The Shift will skip gluing to the grid.
+  ***To add a node**: double-click the segment to add a node in the middle or double-click the node to add one more next to it.
+  ***To remove a node/segment**: "left Alt + click" the node inside the polyline or endpoint to remove the whole segment
+{{pline_gif.gif}}
+There are new properties for the polyline and every control in the 3.5 fw and above:
+  ***Tranparency** - sets overall transparency for every element of the indicator
+  ***JS label** - sets the name of control for using it JavaScripts executed on dashboards.
+  ***Permissions** - enables visibility for specific users
+----
+=== Rectangle, ellipse and circle ===
+There are ready shapes with properties adjustments similar to previous controls.
+{{rec_circle_oval.png?nolink&400}}
+=== Switch ===
+This control toggles value between two values, and has similar properties to button. You can also run script, apply recipe etc.
+{{sw_demo.gif }}
+=== Dictionary list ===
+This control gives the possibility to choose some pre-defined options in the dropdown list. The prerequisite for this control is that the register you want to bind to it, should already have link to the existing dictionary.
+You can also create a lua script that will run upon this register change and load some data to the dashboard or make other actions.
+{{ ::dict_plate_link.png?direct&300 |}}
+This control is available staring from fw 4.0.7161, and before that recipe dropdown lists had been used for the same purpose.
+{{ dict_list.gif }}
+==== Object insector ====
+The object inspector makes it easy to work with components on the dashboard, displaying them in a tree, as in graphic editors. With it, you can quickly select the necessary objects and perform the necessary manipulations with them: copy, delete, group, hide, change attributes for several objects etc.
+{{ object_inspector.gif |}}
+To change the attributes of the selected individual item, you just switch to //Properties// tab right after object selection.
+Right click on the object in the tree, gives more options:
+{{ ::obj_inspector_options.png?direct&300 |}}
+===== Pop-up dashboard =====
+The pop-up dialog can be done with this type of dasboard.
+{{ ::popup.png?direct&600 |}}
+To create a pop-up dashboard you use link to dashboard property for a button and then there will be checkbox to make the dashboard a pop-up one.
+{{ ::popup_dashboard.png?direct&400 |}}