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/10/09 09:52] – [Controls description] emozolyakdashboards [2020/06/02 08:04] – [Object insector] emozolyak
Line 106: Line 106:
 **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 }}
  
 **Properties** - to modify control's properties **Properties** - to modify control's properties
Line 113: Line 113:
  
 **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 149: Line 151:
 {{ 2018-09-25_10-27-34.gif }} {{ 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 |}} {{ ::controls_overview.gif?direct |}}
Line 167: Line 169:
   ***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   ***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 275: Line 278:
  
 === 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 334: Line 335:
   ***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. 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 daschboard, 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&200 |}}
  
 +===== 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 |}}
  
  
dashboards.txt · Last modified: 2023/06/05 08:43 by emozolyak

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki