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
dashboards [2021/11/01 16:17] – [Mode indicator] emozolyakdashboards [2023/06/05 08:43] (current) – [JavaScript for dashboard] emozolyak
Line 1: Line 1:
-{{ :menu-icon-dashboards.png?nolink&40|}}+{{ network:menu-icon-dashboards.png?nolink&40|}}
 ====== Dashboards ====== ====== Dashboards ======
  
Line 15: Line 15:
 ===== Creating and managing dashboards ===== ===== 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'.  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|}}+{{network:add_dashboard.png?direct&912|}}
  
 The basic info tab has the following settings: The basic info tab has the following settings:
  
-{{::add_dashboard_2.png?direct&912|}}+{{network:add_dashboard_2.png?direct&912|}}
  
   ***Version** - starting from 3.1 firmware version, the dashboard editor is incompatible with previous versions, and for compatibility reasons this option allows users to choose dashboard version, so that existing project in version below 3.1 still can be upgraded without modifications of the original dashboards. The project may have several dashbards in different versions.    ***Version** - starting from 3.1 firmware version, the dashboard editor is incompatible with previous versions, and for compatibility reasons this option allows users to choose dashboard version, so that existing project in version below 3.1 still can be upgraded without modifications of the original dashboards. The project may have several dashbards in different versions. 
Line 25: Line 25:
   ***Category** - allows to arrange dashboards in the menu:   ***Category** - allows to arrange dashboards in the menu:
  
-{{ dashboard_categories.png?direct }}+{{ network:dashboard_categories.png?direct }}
  
 But if it is the only dashboard, its title will be displayed in the side bar without Dashboards or Category entries: But if it is the only dashboard, its title will be displayed in the side bar without Dashboards or Category entries:
  
-{{ only_dashboard.png?direct }}+{{ network:only_dashboard.png?direct }}
  
   ***Hide from menu** checkbox  - if checked this dashboard won't be shown in the Dashboards menu on the side bar. Is still can be accessed via link buttons on the dashboards.    ***Hide from menu** checkbox  - if checked this dashboard won't be shown in the Dashboards menu on the side bar. Is still can be accessed via link buttons on the dashboards. 
Line 39: Line 39:
   ***Top panel background color** - it is this color:   ***Top panel background color** - it is this color:
  
-{{ dash_top_panel_color.png?direct&600 }}+{{ network:dash_top_panel_color.png?direct&600 }}
  
 ---- ----
Line 46: Line 46:
 **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 **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 }}+{{ network:template_tab.png?direct&600 }}
  
 ---- ----
Line 53: Line 53:
 **Permissions** tab - here you may select which users can access this dashboard.  **Permissions** tab - here you may select which users can access this dashboard. 
  
-{{ permissions_tab.png?direct&600 }}+{{ network:permissions_tab.png?direct&600 }}
  
 ===== Dashboard list ===== ===== Dashboard list =====
  
 ---- ----
-{{::dashb_list.png?direct&912|}}+{{network:dashb_list.png?direct&912|}}
  
   - go to the dashboard page for **viewing**   - go to the dashboard page for **viewing**
Line 89: Line 89:
 You can start editing dashboard either from the dashboard workspace or from the (2)  button in the list: You can start editing dashboard either from the dashboard workspace or from the (2)  button in the list:
  
-{{ ::dashb_list_options.png?direct |}}+{{ network:dashb_list_options.png?direct |}}
  
 The editor layout is given below: The editor layout is given below:
  
-{{::editor_main_elements.png?direct&912|}}+{{network:editor_main_elements.png?direct&912|}}
  
   - **Workspace**    - **Workspace** 
Line 107: Line 107:
 The grid facilitates neat alignment of the objects. Bold lines are placed at x2 interval of the actual grid size defined in settings so the grid size is a distance from bold line to thin one.  The grid facilitates neat alignment of the objects. Bold lines are placed at x2 interval of the actual grid size defined in settings so the grid size is a distance from bold line to thin one. 
  
-{{ ::grid_size.png?direct&200 }}+{{ network:grid_size.png?direct&200 }}
  
 Holding //Shift// down while moving an object switch off gluing to grid for precise placement.  Holding //Shift// down while moving an object switch off gluing to grid for precise placement. 
Line 125: Line 125:
 //Mouse Right - click// activates context menu if there is an object at the cursor position (if there are many objects, a selection list will be provided).: //Mouse Right - click// activates context menu if there is an object at the cursor position (if there are many objects, a selection list will be provided).:
  
-{{ right_click_menu.png?direct  }}+{{ network:right_click_menu.png?direct  }}
  
 ==== Tool pallette ==== ==== Tool pallette ====
Line 132: Line 132:
 **Controls** - to pick up a control for workspace **Controls** - to pick up a control for workspace
  
-{{ tool_palette_36_cropped.png?direct&300 }}+{{ network:tool_palette_36_cropped.png?direct&300 }}
 hidden_editor hidden_editor
 **Properties** - to modify control's properties **Properties** - to modify control's properties
  
-{{ ::properties_tab.png?direct&300 }}+{{ network:properties_tab.png?direct&300 }}
  
 **Group** - group operatoins for selections with more than one control **Group** - group operatoins for selections with more than one control
Line 142: Line 142:
 **>** - toggles toolbox location from left to right  **>** - toggles toolbox location from left to right 
  
-{{ group_operations.png?direct&300 }}+{{ network:group_operations.png?direct&300 }}
  
 ==== Dynamic properties ==== ==== Dynamic properties ====
Line 150: Line 150:
 The controls reflects the process or system being monitored state changings its properties which in their turn are linked to the register values. This is called dynamic properties. For exammple, a button coordinates, layer, size are static (constant), while the button text or color may change dynamically.  The controls reflects the process or system being monitored state changings its properties which in their turn are linked to the register values. This is called dynamic properties. For exammple, a button coordinates, layer, size are static (constant), while the button text or color may change dynamically. 
  
-{{dynamic_prop_button.png?direct&30 |}} - this mini button marks the control's property which can be dynamic. E.g. for the LED control these properties may be dynamic:+{{network:dynamic_prop_button.png?direct&30 |}} - this mini button marks the control's property which can be dynamic. E.g. for the LED control these properties may be dynamic:
  
-{{ led_properties.png?direct&600 }}+{{ network:led_properties.png?direct&600 }}
  
 If the element has dynamic property enabled, this button becomes colorized: If the element has dynamic property enabled, this button becomes colorized:
  
-{{ dyn_prop_set.png?direct&300 }}+{{ network:dyn_prop_set.png?direct&300 }}
  
 The example of dynamic property setup dialog is given below: The example of dynamic property setup dialog is given below:
  
-{{ dynamic_property_setup.png?direct&800 }}+{{ network:dynamic_property_setup.png?direct&800 }}
  
 In the example the //Color// property of the LED is controlled from the **DS0** register . If the register has 0 or 1 value, color property will change accordingly to green or red (also it will blink when DS0 = 1).  In the example the //Color// property of the LED is controlled from the **DS0** register . If the register has 0 or 1 value, color property will change accordingly to green or red (also it will blink when DS0 = 1). 
Line 166: Line 166:
 Propertiies can match not only to specific register values, but to state, bit, or some range:  Propertiies can match not only to specific register values, but to state, bit, or some range: 
  
-{{ dynamic_property_listbox.png?direct&500 }}+{{ network:dynamic_property_listbox.png?direct&500 }}
  
 The **Add** button serves to extend the properties set, with only __exception__ - if you choose **get register's value**, then this value itself will become color RGB mask, height in pixels, rotation angle or other control's property.  The **Add** button serves to extend the properties set, with only __exception__ - if you choose **get register's value**, then this value itself will become color RGB mask, height in pixels, rotation angle or other control's property. 
Line 175: Line 175:
   * Hide, X/Y position, Width and Height, Rotation angle   * Hide, X/Y position, Width and Height, Rotation angle
  
-{{ 2018-09-25_10-27-34.gif }}+{{ network:2018-09-25_10-27-34.gif }}
  
 ===== Controls description before 3.4 fw version ===== ===== Controls description before 3.4 fw version =====
Line 182: Line 182:
 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. 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 |}}+{{ network:controls_overview.gif?direct |}}
  
 ---- ----
Line 195: Line 195:
   ***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|}}+{{network: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 222: Line 222:
 After click on the text with 'allow change value' enabled, a pop-up dialog will displayed: After click on the text with 'allow change value' enabled, a pop-up dialog will displayed:
  
-{{::text-edit_pop_up.png?direct&250|}}+{{network:text-edit_pop_up.png?direct&250|}}
  
 (d) - means the property can be dynamic (d) - means the property can be dynamic
Line 322: Line 322:
 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. 
  
-{{:camera_icon.png?direct&150|}}+{{network:camera_icon.png?direct&150|}}
  
   ***Video stream** - selection listbox for videstreams    ***Video stream** - selection listbox for videstreams 
Line 369: Line 369:
 This control resembles a progress bar that has a round shape.  This control resembles a progress bar that has a round shape. 
  
-{{ ::radial_indicators..png?direct&400 |}}+{{ network:radial_indicators..png?direct&400 |}}
  
  
Line 386: Line 386:
   ***To remove a node/segment**: "left Alt + click" the node inside the polyline or endpoint to remove the whole segment    ***To remove a node/segment**: "left Alt + click" the node inside the polyline or endpoint to remove the whole segment 
  
-{{pline_gif.gif}}+{{network:pline_gif.gif}}
  
 There are new properties for the polyline and every control in the 3.5 fw and above: There are new properties for the polyline and every control in the 3.5 fw and above:
Line 398: Line 398:
 There are ready shapes with properties adjustments similar to previous controls.  There are ready shapes with properties adjustments similar to previous controls. 
  
-{{rec_circle_oval.png?nolink&400}}+{{network:rec_circle_oval.png?nolink&400}}
  
 ==== Switch ==== ==== Switch ====
Line 404: Line 404:
 This control toggles value between two values, and has similar properties to button. You can also run script, apply recipe etc.  This control toggles value between two values, and has similar properties to button. You can also run script, apply recipe etc. 
  
-{{sw_demo.gif }}+{{network:sw_demo.gif }}
  
  
Line 411: Line 411:
 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.  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.  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 |}}+{{ network: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.  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 }}+{{ network:dict_list.gif }}
  
  
Line 422: Line 422:
  
 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. 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 |}}+{{ network:object_inspector.gif |}}
  
 To change the attributes of the selected individual item, you just switch to //Properties// tab right after object selection. To change the attributes of the selected individual item, you just switch to //Properties// tab right after object selection.
Line 428: Line 428:
 Right click on the object in the tree, gives more options: Right click on the object in the tree, gives more options:
  
-{{ ::obj_inspector_options.png?direct&300 |}}+{{ network:obj_inspector_options.png?direct&300 |}}
  
 ===== Pop-up dashboard ===== ===== Pop-up dashboard =====
Line 434: Line 434:
 The pop-up dialog can be done with this type of dasboard.  The pop-up dialog can be done with this type of dasboard. 
  
-{{ ::popup.png?direct&600 |}}+{{ network: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.  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 |}}+{{ network:popup_dashboard.png?direct&400 |}}
  
 ===== Newer controls available since 4.1 fw version ===== ===== Newer controls available since 4.1 fw version =====
Line 446: Line 446:
 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. 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 |}}+{{ network:mode_indicator.png?direct&150 |}}
  
 ==== Date picker ==== ==== 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.
  
-24 Sep New WebHMI firmware release 4.1 +{{ network:data_picker.png?direct&400 |}}
-We are pleased to announce the release of a new version of the WebHMI 4.1 firmware, which has a lot of useful functions:+
  
-The new firmware highlights: +==== Increase/decrease value in the edit value contro ====
- +
-Screencast function +
-Report constructor for events +
-Resource analytics +
-New Modbus TCP server configuration page +
-HTML editor and JSON visualizer +
-Links to the help site +
-Better work with registers and  connections +
-Security improvement +
-New components and much more! +
- +
-Screencast function +
-It is a new function which allows switching the page content (screen, dashboards, graphs, reports) for the user – either remotely or automatically by control script (using condition or schedule). This feature is very useful for managing the content of the IPTV screen, video walls or tablets used as an information table when the usual navigation through the project is inconvenient or accessible. +
- +
-A new user is created in the system, for whom the “Screen sharing” option is set in the properties. Along with this, a new connection “WebHMI ScreenCast” will appear in the registers, with a string register “username_link”. To control the screen content for this user, it will be enough just to write a link to this register using dashboards or scripts. +
-In addition, the administrator can control screencast right from his interface, setting the link for the user to switch him to the required page. More information can be found +
-on the docs page. +
- +
- +
- +
-Report constructor for events +
-To analyze complex processes, you may need a complex and informative report. The updated firmware version has a special editor for reports, similar to the screen editor, with a difference in that it uses data from the registers stored in the event report (including reports of child events). For Gantt charts and graphs, the time interval of registration of the event itself will be used, and the data will be from the standard log. +
-There is a similar to screens tool set in the report constructor: +
- +
-Gantt diagrams +
-Tables of values +
-Graphs +
-Register value +
-Bar chart +
-Histogram +
-Pie chart +
-HTML text editor +
- +
- +
- +
-Resource analytics +
-The new firmware version has built-in tools for visualizing and analyzing readings of arbitrary meters – both resources such as water, heat, electricity, and other meters such as products manufactured, downtime or work time – in the form of various tables, graphs and diagrams that allow you to quickly analyze and correlate the values ​​of their consumption for certain periods or among themselves. +
- +
-Also, earlier, for the analysis of resource consumption, it was possible to use only standard categories – water, gas, heat, electricity. Now you can define your own categories, for example, the name of the product. It is enough to specify it as a counter of a certain category in the properties of the register, and the system itself will begin to calculate the hourly costs and write them to the database with the ability to automatically generate reports or export to other systems. +
- +
-The starting page shows a summary (current readings, this and previous month, last 30 days) +
-For any counter there are hourly, daily and monthly reports +
- +
-Multiple compare is also possible: +
- +
- +
-New Modbus TCP server configuration page +
-The Modbus TCP server, as an inter-system integration tool, has been available in WebHMI since the very first firmware versions. The new Modbus TCP configuration page will certainly please you. Now its structure resembles a project registers tree with straightforward navigation and assigning addresses (with auto boundaries check), which is especially valuable for big register lists. +
- +
- +
-New screen widget – HTML editor +
-Tables are one of the common and practical means to represent data. Despite its plainness if one started to implement them, quite a number or complexities would arised. So far, imitating a table in WebHMI has been a troublesome thing. Now we’ve added a functional WYSIWYG HTML editor for easy table drawing or arbitrary text formatting. +
-By default, the “from factory” firmware has a light version of the editor, and the full version will be installed via DLC mechanism. +
- +
- +
- +
-Visualizing JSON data +
-There are many applications where a big set of user’s parameter has to be processed, e.g. settings for a complex machine, lists or schedules in the form of tables. In the usual approach, a whole set of registers had to be used to organize the table, which could be very cumbersome both in implementation (thousands of registers may be required) and in processing (increasing the load on the system). +
-To store such tables and structures, it is convenient to use JSON – a widely used format for transferring and storing small data structures. It is also supported by Lua scripting functions on WebHMI, and thus only one string variable can be used to work with such structures. For convenient user work with data in this format, there is a special component built into the widget with an HTML editor. It allows you to display data stored in JSON format as a scrolling table, for this you just need to specify in which variable it is stored. You can also edit them here. In addition, conditional formatting of table cells is also provided to improve readability, highlighting data in rows or cells that meet certain criteria. +
- +
- +
- +
- +
- +
-Links to the help site +
-We are trying our best to make the user interface for the WebHMI fully intuitive, and we think we’re not bad at it. Probably because of this, some customers make their projects without even knowing about the documentation site docs.webhmi.com.ua. For your convenience we’ve added context backlinks to the help site right into the interface which will lead you to a respective topic (an internet connection is required). +
- +
- +
- +
-Better work with registers and  connections +
-Group register properties editing +
-Actually, as the name implies, this function allows you to quickly and conveniently change the properties of the same type (such as: the polling period, units of measurement, states, etc.) immediately at a group of registers, which greatly speeds up the work with them. Previously, this was possible only through the export of registers to a csv file, editing it and importing it back into the project, but now it can be done immediately through the interface. More information can be found here.. +
- +
- +
-RW mode for registers +
-There is now a convenient function for assigning register access mode – “read / write”, “read-only”, “write-only”. There are devices for some registers of which only writing is possible, for example, the control word of some frequency converters, refrigeration controllers, etc. For these devices a custom protocol. +
-Read-only mode is also useful for distributed systems with shared data. For example, this situation can arise when using the MQTT protocol, when the user can inadvertently override the data of another device. +
- +
- +
- Adding devices via Device manager +
-With this new function you can add ready device profiles from the library in one click. At the moment there are few – 7bit Synapse, Modbus Proxy & Mediator gateways as well as AirGate AirPoint wireless remote data acquisition modules, but the list is going to grow. +
- +
- +
-Topic search when adding the MQTT devices +
-A new topic search function has been added, for easy adding MQTT topics to the register tree. You just click on the search icon in the connection title and the system will start forming a list of changed topics in the broker. The only thing left then is to mark necessary ones and save them to the register table. +
- +
- +
-Save and Apply +
-When editing a project, it is often necessary to make several edits in different places in the project. Before, each small change was accompanied by re-initialization of the system, which in turn caused a heavy load on the processor in large projects. Now, there is a tool that allows you to make many edits and then apply them in one go, which ultimately speeds up the time to complete these operations. +
- +
- +
-  +
- +
-Security improvement +
-The Polish Center for IT Services and Cyber Security CERT.PL at the NASK Institute (Research and Education in Computer Networks) has tested WebHMI’s potential security issues. The vulnerabilities found have been removed. +
- +
- +
-New components +
-Curve component +
-With curves it is possible to describe a transfer function “input – output” for the system controlled flexibly and clearly, continuously in the whole range of values . Their popular use is setting up daytime schedules for the parameters like temperature or pressure, but there can be much more – you can set any dependencies of x(y). E.g. you set temperature setpoint along a multi zone furnace etc. The curves are managed in a special menu and then are available for scripts and dashboards. Read more on the docs page. +
- +
- +
-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. +
- +
- +
- +
-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.+
  
 +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.
  
 +{{ network:inc_dec_value.png?direct&200 |}}
 ===== Dynamic properties inpector ===== ===== Dynamic properties inpector =====
  
Line 599: Line 492:
 ===== JavaScript for dashboard ===== ===== JavaScript for dashboard =====
  
-{{ ::js_logo.png?100|}}+{{ network: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. 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.
  
Line 611: Line 504:
  
 4. Drawing custom XY graph. 4. Drawing custom XY graph.
 +
 +5. Other custom user interaction which can not be done with standard tools. E.g. with the dashboards made on templates, you can not make subsitutions in the descendants for some elements, like links to other dashboards. However, you may override the link property (which may lead to target page) of the button depending on the dashboard where this button is.
 +
 +6. Downloading graph data with full data set. The graphs in WebHMI can be exported into csv/xls/html files, however, the output file will contain only the data corresponding current graph view scale (e.g. if your viewing area is 1024 px wide, only these data pixels will be downloaded). If you need to have full data export tool in the WebHMI project, you can make it with the JS for dashboards. 
  
 etc. etc.
 +== Object properties control example ==
 +
 +<code javascript>
 +// Image rotation example 
 +var IMAGE_ID = 2;
 +var currentAngle = 0;
 + 
 +function setAngle() {
 +    setObjProperty(IMAGE_ID, {angle:currentAngle}); 
 +    currentAngle = currentAngle + 10;
 +    if (currentAngle >= 360) {
 + currentAngle = 0}
 +    }
 +}
 +
 +setInterval(setAngle, 40); // will be called every 40 ms 
  
 +</code>
  
  
  
  
dashboards.1635783473.txt.gz · Last modified: 2021/11/01 16:17 by emozolyak
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki