WebHMI Docs

User Tools

Site Tools

dashboards

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
dashboards [2018/09/25 07:33] – [Dynamic properties] emozolyakdashboards [2021/11/01 16:21] – [Date picker] emozolyak
Line 1: Line 1:
 +{{ :menu-icon-dashboards.png?nolink&40|}}
 ====== Dashboards ====== ====== Dashboards ======
  
-===== Creating and managing dashboards =====+In WebHMI, screens or dashboards (Dashboards) are analogous to screens for operator panels or graphic screens in SCADA systems.
  
-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'.+<WRAP center round tip 60%> 
 +Since the 3.6 fw version, there is a new visualization tool - [[screens|screens]] which are much more flexible and efficient than dashboards. Most tasks can be easily done with screens only. Use dashboards as a complement for the screen to create custom design.  
 +</WRAP> 
 + 
 +<WRAP center round important 60%> 
 +An overcharged and bulky dasbboard can slow down system performance.  
 +</WRAP> 
 + 
 + 
 +===== 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'.
 {{::add_dashboard.png?direct&912|}} {{::add_dashboard.png?direct&912|}}
  
Line 33: Line 44:
  
  
-**Templates** tab - allows multiple usage of the same dashboard graphic with different (but similar) physical connections and registers. More on this in special section. +**Templates** tab - allows multiple usage of the same dashboard graphic with different (but similar) physical connections and registers. More on this in special section. for i in {602..599}; do history -d $i; done
  
 {{ template_tab.png?direct&600 }} {{ template_tab.png?direct&600 }}
Line 53: Line 64:
   - modify dashboard's **settings** as were described above   - modify dashboard's **settings** as were described above
   - **delete** dashboard from the list   - **delete** dashboard from the list
-  - **clone** - creates a copy of this dashboard+  - **clone** - creates a copy of this dashboardThere is a possibility to see all the dynamic properties that is set to dashboard elements.  
 +{{ :dashboards:dyn-prop:dash_view.png?direct&1000 |}} 
 +{{ :dashboards:dyn-prop:check_dyn.png?direct&1000 |}} 
 +It is can be useful e.g., for making clone of dashboard, and to not forget to rebind registers to avoid inappropriateness or just to get to know about dashboard element's behaivour.   
 + 
 + 
 +==== Show hidden checkbox ==== 
 +{{ :dashboards:dyn-prop:unhidden.png?direct&1000 |}} 
 +{{ :dashboards:dyn-prop:hidden_selected_tree.png?direct&1000 |}} 
 +Due to cleanliness and convenience there is a possibility to hide visual display of a picture only in the editor, but it still be visible on dashboard. 
 +{{ :dashboards:dyn-prop:check_dyn_hidden.png?direct&1000 |}} 
 +To see this objects there is an another checkbox. 
 +With this checkbox you can show hidden objects via [[dashboards#object_inspector|Object Inspector]], but not via [[dashboards#dynamic_properties|"Hide" checkbox]]. It will make borders visible or dynamic properties if it is present. 
 +{{ :dashboards:dyn-prop:hidden_with_dyn_props.png?direct&1000 |}} 
 + 
  
 You can arrange the order in which dashboards are shown in the side bar by dragging rows in the list.  You can arrange the order in which dashboards are shown in the side bar by dragging rows in the list. 
Line 106: Line 132:
 **Controls** - to pick up a control for workspace **Controls** - to pick up a control for workspace
  
-{{ controls_tab.png?direct&300 }} +{{ tool_palette_36_cropped.png?direct&300 }} 
 +hidden_editor
 **Properties** - to modify control's properties **Properties** - to modify control's properties
  
Line 113: Line 139:
  
 **Group** - group operatoins for selections with more than one control **Group** - group operatoins for selections with more than one control
 +
 +**>** - toggles toolbox location from left to right 
  
 {{ group_operations.png?direct&300 }} {{ group_operations.png?direct&300 }}
Line 145: Line 173:
  
 These properties are all with dynamic settings and won't duplicate in the control explanations: These properties are all with dynamic settings and won't duplicate in the control explanations:
-  * **Hide**  +  * Hide, X/Y position, Width and Height, Rotation angle
-  * **X, Y** - coordinates in the workspace +
-  * **Width**  +
-  * **Height**  +
-  * **Rotation angle**+
  
-{{ 2018-09-25_10-27-34.gif?400 |}}+{{ 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. 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.
  
-=== LED control ===+{{ ::controls_overview.gif?direct |}}
  
-{{::led.jpg?direct&50|}}+---- 
 + 
 +==== LED control ====
  
 LED has the following properties: LED has the following properties:
Line 167: Line 194:
   ***Border width** - set border width in pixels   ***Border width** - set border width in pixels
   ***3D** - adds gradient to LED for 3D effect   ***3D** - adds gradient to LED for 3D effect
 +  ***Round corners** - if checked the LED shape will become round
 +{{:led.jpg?direct&50|}}
   ***Lock position** - protect LED's coordinates from unintentional changes, but still the element can be deleted.   ***Lock position** - protect LED's coordinates from unintentional changes, but still the element can be deleted.
   ***Layer** - arrows send control to layer (bottom, lower, higher, top)   ***Layer** - arrows send control to layer (bottom, lower, higher, top)
Line 172: Line 201:
 (d) - means the property can be dynamic (d) - means the property can be dynamic
  
-----+In the followed control descritions only specific attributes for the given element will be explained (without repetition from previous element explanations). 
  
-=== Text value === +----
- +
-{{::text_element2.png?direct&200|}}+
  
-Only specific for text properties will be explained below, other are expained in LED and similar controls. +==== Text value ====
  
   ***Label** - It is a text before register value text   ***Label** - It is a text before register value text
Line 201: Line 228:
 ---- ----
  
-=== Button ===+==== Button ====
  
-{{::button_element.jpg?direct&80|}} +  ***Transparent** - the button will be invisible but working. E.g., to lay it over the image. 
- +
-Only specific for this control properites will be explained below, other are expained in LED and similar controls.  +
- +
-  ***Transparent** - the button will be invisible but working. E.g. to lay it over the image. +
   ***Press color** - when pressed, the button will change color to this color   ***Press color** - when pressed, the button will change color to this color
   ***Icon** - there is a set of ready icon which cab be placed before or instead button label   ***Icon** - there is a set of ready icon which cab be placed before or instead button label
Line 222: Line 245:
 ---- ----
  
-=== Image === +==== Image ====
- +
- +
-{{:dme_375_src.png?direct&200|}} +
- +
-Only specific for this control properites will be explained below, other are expained in LED and similar controls. +
  
   ***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   ***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 237: Line 255:
 ---- ----
  
-=== Progress bar === +==== Progress bar ====
- +
-{{::progress_bar.jpg?direct&200|}} +
- +
-Only specific for this control properites will be explained below, other are expained in LED and similar controls. +
  
   ***Orientation** - defines horizontal or vertical type for the progress bar    ***Orientation** - defines horizontal or vertical type for the progress bar 
Line 250: Line 264:
 ---- ----
  
-=== Gauge === +==== Gauge ====
- +
-{{::gauge_1.jpg?direct&200|}} +
- +
-Only specific for this control properites will be explained below, other are expained in LED and similar controls. +
  
 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: 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 262: Line 272:
 ---- ----
  
-=== Round gauge ===  +==== Round gauge ==== 
- +
-{{::round_gauge.jpg?direct&150|}} +
- +
-Only specific for this control properties will be explained below, other are expained in LED and similar controls. +
  
 The round gauge also imitates physical metering device with __rotating__ arrow. The round gauge also imitates physical metering device with __rotating__ arrow.
Line 282: Line 288:
 ---- ----
  
-=== Slider === +==== Slider ====
- +
-{{slider_1.jpg?0x150}} +
- +
-Only specific for this control properties will be explained below, other are expained in LED and similar controls. +
  
 The slider also imitates physical sliders allowing to set value and see it's current value as position.  The slider also imitates physical sliders allowing to set value and see it's current value as position. 
Line 301: Line 303:
 ---- ----
  
-=== Edit Box === +==== Edit Box ====
- +
-{{::edit_box1.png?direct&100|}}+
  
 The edit box is almost the same as text control but allows to edit value without pop-up dialog like in text control. The edit box is almost the same as text control but allows to edit value without pop-up dialog like in text control.
Line 309: Line 309:
 ---- ----
  
-=== Recipes list ===+==== Recipes list ====
  
 You can select which recipe to apply with this control.  You can select which recipe to apply with this control. 
- 
-{{::recipe_list_box.png?direct&150|}} 
  
   ***Recipe category** - to filter out recipes from unwanted categories on this dashboard   ***Recipe category** - to filter out recipes from unwanted categories on this dashboard
Line 320: Line 318:
 ---- ----
  
-=== Video stream ===+==== Video stream ====
  
 If there is configured video stream in the project, it can be shown on the dashboard with this control.  If there is configured video stream in the project, it can be shown on the dashboard with this control. 
Line 330: Line 328:
 ---- ----
  
-=== Group ===+==== Group ====
  
 Several controls related to some device, unit, area etc. can be distinguished with group for convinience. Several controls related to some device, unit, area etc. can be distinguished with group for convinience.
- 
-{{::group_example.png?direct&300|}} 
  
   ***Header background** - color selection for the header (d)   ***Header background** - color selection for the header (d)
Line 341: Line 337:
 ---- ----
  
-=== Messages table ===+==== Messages table ====
  
 The messages from the message log can also be shown on the dashboard with this control.  The messages from the message log can also be shown on the dashboard with this control. 
- 
-{{::messages_example.png?direct&600|}} 
  
   ***Rows** - number of rows in the table    ***Rows** - number of rows in the table 
Line 357: Line 351:
   ***Level column width** - width of the 'Level' column in pixels   ***Level column width** - width of the 'Level' column in pixels
   ***Hide level** - checking will hide 'Level' column   ***Hide level** - checking will hide 'Level' column
- 
  
 ---- ----
  
-=== Trend ===+==== Trend ====
  
 Up to three register values can be displayed in a trend for the dashboard.  Up to three register values can be displayed in a trend for the dashboard. 
- 
-{{::trend_example.png?direct&400|}} 
  
   ***Ruler color** - sets desired ruler color (d)   ***Ruler color** - sets desired ruler color (d)
   ***Time span, sec**  - Time span for X axis of the trend    ***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])   ***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 aka picker. 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 inspector ====
 +
 +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 |}}
 +
 +===== Newer controls available since 4.1 fw version =====
 +
 +==== Mode indicator ====
 +
 +A typical task when visualizing multi-step or multi-mode production processes is showing their actual state with the dictionary, like “Standby”, “Mixing”, “Discharge” etc. The mode indicator is a handy tool, showing all possible states of an object and highlights the current state, that shows clearly what will be the next, what was before, we are starting or finishing. The component is linked with the register, which in turn is linked with the dictionary, and then you just write to the register a number, reflecting the process state.
 +
 +{{ ::mode_indicator.png?direct&150 |}}
 +
 +==== Date picker ====
 +
 +The date picker for dashboards – is a common user interface calendar date picker element, which accepts user input and stores it as a single unix time number in an internal register. Using embedded lua functions you can get required day, week day, hour, mituen etc. and use them in the control logic. Before a whole dashboard with many fields would have been required for this.
 +
 +{{ :data_picker.png?direct&400 |}}
 +
 +==== Increase/decrease value in the edit value contro ====
 +
 +Edit box has got new features – now you can increment/decrement value with software buttons. This mode is more convenient on mobile devices, not involving a keyboard for entering a value.
 +
 +{{ ::inc_dec_value.png?direct&200 |}}
 +===== Dynamic properties inpector =====
 +
 +==== Show dynamic properties checkbox ====
 +
 +There is a possibility to see all the dynamic properties that is set to dashboard elements i.e. values of registers to be displayed. 
 +{{ :dashboards:dyn-prop:dash_view.png?direct&1000 |}}
 +To do this, click on the icon in the left bottom corner
 +{{ :dashboards:dyn-prop:editor.png?direct&1000 |}}
 +{{ :dashboards:dyn-prop:check_dyn.png?direct&1000 |}}
 +It is can be useful e.g., for making clone of dashboard, and to not forget to rebind registers to avoid inappropriateness or just to get to know about dashboard element's behaivour.  
 +
 +
 +==== Show hidden checkbox ====
 +Due to cleanliness and convenience there is a possibility to hide visual display of a picture only in the editor, but it still be visible on dashboard.
 +You can hide this via [[dashboards#object_inspector|Object Inspector]].
 +{{ :dashboards:dyn-prop:unhidden.png?direct&1000 |}}
 +Hidden object will dissapear from editor and can't be selected anymore. Despite, it still visible on the dashboard.
 +{{ :dashboards:dyn-prop:hidden_selected_tree.png?direct&1000 |}}
 +Due to cleanliness and convenience there is a possibility to hide visual display of a picture only in the editor, but it still be visible on dashboard.
 +
 +To see this objects there is an another checkbox.
 +With this checkbox you can show hidden objects via [[dashboards#object_inspector|Object Inspector]], but not via [[dashboards#dynamic_properties|"Hide" checkbox]]. It will make borders visible or dynamic properties if it is present.
 +
 +{{ :dashboards:dyn-prop:comparision.png?direct&1000 |}}
 +
 +If there is dynamic properties it will look like this
 +{{ :dashboards:dyn-prop:hidden_with_dyn_props.png?direct&1000 |}}
 +
 +
 +----
 +
 +===== JavaScript for dashboard =====
 +
 +{{ ::js_logo.png?100|}}
 +Sometimes, a project needs something missing in the firmware (in terms of visualization). Then it can be done with such a script, turn to your supplier for more details.
 +
 +The following are some application examples:
 +
 +1. The customer, after the completion of a large project, asked to change the color scheme for the screens to the appropriate "corporate style", which would mean a large amount of work on redrawing the visualization. The question was solved by adding small javascript for the dashboard.
 +
 +2. There was a task of creating a report based on the screen, in which the start and end times of the viewing window would be automatically set for the graph and the parameter(s) on the graph would be changed to desired. 
  
 +3. "Smooth" movement of visualization elements without being tied to the scan time.
  
 +4. Drawing custom XY graph.
  
 +etc.
  
  
dashboards.txt · Last modified: 2023/06/05 08:43 by emozolyak
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki