Visualisation

WEB visualisation for ioBroker platform.

License requirements

To use this adapter in ioBroker you need to accept the source code license of the adapter. The source code of this adapter is available under the CC BY-NC license.

Additionally, you need a license to use the adapter. The following license editions are available on https://iobroker.net/www/pricing

Community-License: Free for private use!: Get a free license by registering an account on https://iobroker.net. The license if checked online against the ioBroker license server when the vis adapter is started, so an online connection at this time point is required!
Private use Offline-License: For paying a small support fee, you can get rid of the required online license check on adapter startup. Only for Private use!
Commercial License: When using Vis in a commercial environment or selling Vis as part of ioBroker packages to your customers, this license is for you. License check is also not requiring an online connection.

Installation & Documentation

Online Demos

Bindings of objects

Normally, most of the widgets have ObjectID attribute and this attribute can be bound with some value of object ID. But there is another option for how to bind any attribute of widget to some ObjectID.

Just write into attribute {object.id} and it will be bound (not in edit mode) to this object's value. If you use the special format, you can even make some simple operations with it, e.g., multiplying or formatting. Patten has the following format:

{objectID;operation1;operation2;...}

The following operations are supported:

\* - multiplying. Argument must be in brackets, like "*(4)". In this sample, we multiply the value with 4.
\+ - add. Argument must be in brackets, like "+(4.5)". In this sample we add to value 4.5.
\- - subtract. Argument must be in brackets, like "-(-674.5)". In this sample we subtract from value -674.5.
/ - dividing. Argument must be in brackets, like "/(0.5)". In this sample we divide value by 0.5.
% - modulo. Argument must be in brackets, like "%(5)". In this sample, we take modulo of 5.
round - round the value.
round(N) - round the value with N places after point, e.g. 34.678;round(1) => 34.7
hex - convert value to hexadecimal value. All letters are lower cased.
hex2 - convert value to hexadecimal value. All letters are lower cased. If value less 16, so the leading zero will be added.
HEX - same as hex, but upper-cased.
HEX2 - same as hex2, but upper-cased.
date - format date according to given format. Format is the same as in iobroker.javascript
min(N) - if value is less than N, take the N, else value
max(M) - if value is greater than M, take the M, else value
sqrt - square root
pow(n) - power of N.
pow - power of 2.
floor - Math.floor
ceil - Math.ceil
random(R) - Math.random() * R, or just Math.random() if no argument
formatValue(decimals) - format value according to system settings and use decimals
date(format) - format value as date. The format is like: "YYYY-MM-DD hh:mm:ss.sss"
momentDate(format, useTodayOrYesterday) - format value as date using Moment.js. Approved formats must be entered according to the moment.js library. With useTodayOrYesterday=true the moment.js format ddd/dddd are overwritten with today / yesterday
array(element1,element2[,element3,element4]) - returns the element of index. e.g.: {id.ack;array(ack is false,ack is true)}

You can use this pattern in any text, like

My calculations with {objectID1;operation1;operation2;...} are {objectID2;operation3;operation4;...}

or color calculations:

#{objectRed;/(100);*(255);HEX2}{objectGreen;HEX2}{objectBlue;HEX2}

To show timestamp of object write .ts or .lc (for last change) at the end of object id, e.g.:

Last change: {objectRed.lc;date(hh:mm)}

There is another possibility to write the pattern:

Hypotenuse of {height} and {width} = {h:height;w:width;Math.max(20, Math.sqrt(h*h + w*w))}

{h:height;w:width;h*w} will be interpreted as function:

value = (function () {
    var h = "10";
    var w = "20";
    return Math.max(20, Math.sqrt(h*h + w*w));
})();

You can use any javascript functions. Arguments must be defined with ':', if not, it will be interpreted as formula.

Take care about types. All of them are defined as strings. To be sure, that value will be treated as number use parseFloat function.

Hypotenuse of {height} and {width} = {h:height;w:width;Math.max(20, Math.sqrt(Math.pow(parseFloat(h), 2) + Math.pow(parseFloat(w), 2)))}

Special bindings

There are a number of different internal bindings to provide additional information in views:

username - shows logged-in user
view - name of actual view
wname - widget name
widget - is an object with all data of widget. Can be used only in JS part, like {a:a;widget.data.name}
wid - name of actual widget
language - can be de, en or ru.
instance - browser instance
login - if login required or not (e.g., to show/hide logout button)
local_* - if state name is started from local_ it will not be reported to ioBroker but will update all widgets, that depends on this state. (Local variable for current browser session)

Note: to use ":" in calculations (e.g. in string formula) use "::" instead.

Remember, that style definitions will be interpreted as bindings, so use {{style: value}} or just

{
	style: value
}

for that.

Filters

To visualize on the one view the whole number of widgets, you can use filters to reduce the count of widgets simultaneously shown on the view.

Every widget has a field filter. If you set it to some value, e.g. light, so you can use other widget (bars - filters, filter - dropdown) to control which filter is actually active.

Control interface

Vis creates 3 variables:

control.instance - Here the browser instance should be written or FFFFFFFF if every browser must be controlled.
control.data - Parameter for command. See specific command description.
control.command - Command name. Write this variable triggers the command. That means before command will be written, the "instance" and "data" must be prepared with data.

Commands:

alert - show an alert window in the vis. "control.data" has the following format "message;title;jquery-icon". Title and jquery-icon are optional. Icon names can be found here. To show icon "ui-icon-info" write Message;;info.
changeView - switch to desired view. "control.data" must have the name of view. You can specify the project name too as "project/view". The default project is main.
refresh - reload the vis, for instance after the project is changed to reload on all browsers.
reload - same as refresh.
dialog - Show dialog window. Dialog must exist on view. One of:
- static - HTML - Dialog,
- static - Icon - Dialog,
- container - HTML - view in jqui Dialog,
- container - ext cmd - view in jqui Dialog,
- container - Icon - view in jqui Dialog,
- container - Button - view in jqui Dialog.
control.data must have id of dialog widget, e.g. w00056.
dialogClose
popup - opens a new browser window. Link must be specified in control.data, e.g. http://google.com
playSound - play sound file. The link to file is specified in control.data, e.g. http://www.modular-planet.de/fx/marsians/Marsiansrev.mp3. You can upload your own file in vis and let it play as for instance /vis.0/main/img/myFile.mp3.

If the user changes the view or at the start, the variables will be filled by the vis with

control.instance: browser instance and ack=true
control.data: project and view name in form project/view, e.g. main/view (and ack=true)
control.command: changedView and ack=true

You can write the JSON-string or Object into control.command as {instance: 'AABBCCDD', command: 'cmd', data: 'ddd'}. In this case, the instance and data will be taken from JSON object.

Example for javascript adapter:

setState('vis.0.control.command', {"instance": "*", "command": "refresh", "data": ""});

Default view

You can define for every view the desired resolution (Menu=>Tools=>Resolution). This is only the visual border in edit mode to show you the screen size on some specific device. In the real-time mode, it will not be visible and all widgets outside the border will be visible.

Additionally, you can define if this view must be used as default for this resolution.

So every time the index.html (without #viewName) is called, the best suitable for this resolution view will be opened. If only one view has "Default" flag, so this view will be opened independently of screen resolution or orientation.

E.g., you can create two views "Landscape-Mobile" and "Portrait-Mobile" and these two views will be switched automatically when you change the orientation or screen size.

There is a helper widget "basic - Screen Resolution" that shows actual screen resolution and best suitable default view for this resolution.

Settings

Reload if sleep longer than

There is a rule that after some disconnection period, the whole VIS page will be reloaded to synchronise the project. You can configure it in the menu "Settings...". If you set the interval to "never" so the page will never be reloaded.

Reconnect interval

Set the interval between the connection attempts if disconnected. If you set 2 seconds, it will try to establish the connection every 2 seconds.

Dark reconnect screen

Sometimes (in the night) it is required to have the dark loading screen. With this option, you can set it.

Notice that these settings are valid only for reconnection and not for the first connecting.

Changelog

2.1.4 (2023-07-19)

(bluefox) Allowed to add widgets to widgets

2.0.36 (2023-06-21)

(bluefox) Added widgeteria

2.0.29 (2023-05-17)

(bluefox) Corrected errors

2.0.10 (2022-12-01)

(bluefox) Added the file browser

2.0.8 (2022-11-26)

(bluefox) Improved the error handling

2.0.0 (2022-10-21)

(bluefox) Completely new visualization, but compatible with the previous version

1.4.15 (2022-04-10)

(bluefox) Better check of the offline license

1.4.14 (2022-03-31)

(bluefox) Corrected GUI bug

1.4.13 (2022-03-22)

(pascal-hari) The group attributes will be replaced recursively

License

Creative Common Attribution-NonCommercial (CC BY-NC)

http://creativecommons.org/licenses/by-nc/4.0/

Short content: Licensees may copy, distribute, display and perform the work and make derivative works based on it only if they give the author or licensor the credits in the manner specified by these. Licensees may copy, distribute, display, and perform the work and make derivative works based on it only for noncommercial purposes. (Free for non-commercial use).

ioBroker/ioBroker.vis

ioBroker

Reviews

Repository Details