search

ioBroker / ioBroker.vis

Visualisation for ioBroker platform.
MIT License
302 stars 70 forks source link
iobroker scada smarthome visualization

readme

Logo

Visualisation

Number of Installations Number of Installations NPM version Downloads

NPM

WEB visualization for ioBroker platform.

The development of this version is stopped. Please migrate your projects to vis-2.

License requirements

The adapter is free for all kinds of usage.

Installation & Documentation

Demo interface Demo interface

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:

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:

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 number 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:

Commands:

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

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 real time mode it will not be visible and all widgets outside of 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 synchronize the project. You can configure it in the menu "Settings...". If you set an 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 a dark loading screen. With this option, you can set it.

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

Dark

Changelog

WORK IN PROGRESS

1.5.5 (2024-04-12)

1.5.4 (2023-11-29)

1.5.1 (2023-11-06)

1.4.16 (2023-01-27)

1.4.15 (2022-04-10)

1.4.14 (2022-03-31)

1.4.13 (2022-03-22)

1.4.12 (2022-02-12)

1.4.11 (2022-02-12)

1.4.8 (2022-01-29)

1.4.7 (2021-12-28)

1.4.6 (2021-11-20)

1.4.5 (2021-10-08)

1.4.4 (2021-08-31)

1.4.3 (2021-07-11)

1.4.0 (2021-07-01)

1.3.10 (2021-05-25)

1.3.9 (2021-04-29)

1.3.8 (2021-03-03)

1.3.7 (2021-01-20)

1.3.6 (2020-12-13)

1.3.4 (2020-10-04)

1.3.3 (2020-09-21)

1.3.1 (2020-09-18)

1.3.0 (2020-09-17)

1.2.12 (2020-09-08)

1.2.11 (2020-08-25)

1.2.10 (2020-08-23)

1.2.9 (2020-08-22)

1.2.6 (2020-03-22)

1.2.4 (2020-02-11)

1.2.3 (2019-12-14)

1.2.2 (2019-10-27)

1.2.1 (2019-09-10)

1.2.0 (2019-05-07)

1.1.11 (2019-02-07)

1.1.10 (2019-01-30)

1.1.8 (2018-10-29)

1.1.7 (2018-07-24)

1.1.6 (2018-07-18)

1.1.5 (2018-06-10)

1.1.4 (2018-04-23)

1.1.3 (2018-04-12)

1.1.2 (2018-02-02)

1.1.1 (2018-01-07)

1.0.5 (2017-11-19)

1.0.4 (2017-10-22)

1.0.3 (2017-10-20)

1.0.0 release candidate (2017-10-13)

0.15.7 (2017-10-01)

0.15.5 (2017-07-24)

0.15.4 (2017-07-19)

0.15.3 (2017-07-12)

0.15.2 (2017-07-07)

0.15.1 (2017-06-30)

0.15.0 (2017-05-25)

0.14.7 (2017-05-19)

0.14.6 (2017-05-16)

0.14.3 (2017-05-11)

0.14.2 (2017-04-29)

0.14.1 (2017-04-27)

0.14.0 (2017-04-10)

0.12.7 (2017-02-09)

0.12.6 (2017-01-29)

0.12.6 (2017-01-29)

0.12.2 (2016-12-04)

0.12.1 (2016-11-30)

0.12.0 (2016-11-24)

0.10.15 (2016-11-06)

0.10.14 (2016-10-09)

0.10.13 (2016-09-23)

0.10.12 (2016-09-16)

0.10.11 (2016-09-15)

0.10.10 (2016-09-14)

0.10.9 (2016-09-04)

0.10.7 (2016-07-09)

0.10.5 (2016-06-15)

0.10.4 (2016-06-14)

0.10.3 (2016-05-30)

0.10.2 (2016-05-24)

0.10.1 (2016-05-23)

0.10.0 (2016-05-23)

License

The MIT License (MIT)

Copyright (c) 2013-2024 Denis Haev dogafox@gmail.com, Copyright (c) 2013 hobbyquaker

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.