search

ioBroker / ioBroker.vis-2

Next generation visualisation for ioBroker platform.
Other
29 stars 4 forks source link
iobroker vis-2 vizualisation

readme

Logo

Next generation visualization for ioBroker: vis-2

Number of Installations Number of Installations NPM version Downloads

NPM

WEB visualization for ioBroker platform.

Overview

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

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} e.g. {hm-rpc.0.OEQ1880105.4.ACTUAL_TEMPERATURE} and it will be bound 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.

E.g., to calculate the hypotenuse of a triangle:

{h:javascript.0.myCustom.height;w:javascript.0.myCustom.width;Math.max(20, Math.sqrt(h*h + w*w))} will be interpreted as function:

value = await (async function () {
    var h = (await getState('javascript.0.myCustom.height')).val;
    var w = (await getState('javascript.0.myCustom.width')).val;
    return Math.max(20, Math.sqrt(h * h + w * w));
})();

or

{h:javascript.0.myCustom.height;w:javascript.0.myCustom.width;h*w} will simply multiply height with width.

You can use any javascript (browser) 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.

So our Hypotenuse calculation will be:

{h:javascript.0.myCustom.height;w:javascript.0.myCustom.width;Math.max(20, Math.sqrt(Math.pow(parseFloat(h), 2) + Math.pow(parseFloat(w), 2)))}

Deprecated format

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)}

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

Commands:

If the user changes the view or at the start, the variables will be filled by the vis-2 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-2.0.control.command', { instance: '*', command: 'refresh', data: ''});

If you write the JSON as a string, ensure that it is parseable, e.g. {"instance": "*", "command": "refresh", "data": ""}, note the ".

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.

Permissions System

Project

In the project management dialog, you can configure read and write permissions for each ioBroker user.

The read flag means that the project is accessible for this user in the Runtime. The write flag means that the project is accessible for this user in the Edit Mode.

When a new user is created via ioBroker Admin adapter, it will have both permissions by default.

View

You can also specify which views the user is allowed to access for runtime and edit mode. When one of the access rights is not granted on project level, it does not have any effect to specify them on view level, as the project as a whole will not be accessible.

Note that whenever you try to access a view, where the current user has no permission for, the user will see the project selection panel instead.

Widget

If the user has no read permissions, the widget will not be rendered in the runtime. If user has no write permissions, the widget will not be rendered in edit mode.

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 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.

Dark

SVG and currentColor

The currentColor keyword in CSS allows elements to inherit the current text color from their parent element. It can be particularly useful in SVGs (Scalable Vector Graphics) because it allows for more dynamic styling and easier integration with HTML content.

You can use the currentColor keyword in place of a specific color value for any property inside the SVG that accepts a color value. Here's a simple example with a circle in an SVG:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="currentColor" />
</svg>

In this case, if the SVG takes the color of parent element. E.g., if it was used in a menu and the menu is red, the circle would be red.

Development and Debugging

In order to make adjustments to the vis-2 editor itself, to search for errors and to debug, the following steps must be carried out.

  1. fork the iobroker/iobroker.vis-2 repository into your own account via user interface of GitHub

  2. clone the repository into a directory. copy the url from your GitHub repository. the command looks like

git clone https://github.com/<your profile name>/ioBroker.vis-2.git

  1. open the downloaded repository with your IDE

  2. to install and download all necessary libraries, run the following command in a terminal in the root directory of the repository

npm run install-monorepo
  1. to start the editor in the browser, please execute the following command. An already separately running iobroker server instance must be available on port 8082.
npm run start

Todo

Changelog

2.10.8 (2024-11-22)

2.10.7 (2024-07-23)

2.10.6 (2024-07-20)

2.10.4 (2024-07-16)

2.10.3 (2024-07-11)

2.10.2 (2024-07-10)

2.9.64 (2024-05-23)

2.9.63 (2024-05-15)

2.9.60 (2024-05-07)

2.9.53 (2024-05-06)

2.9.52 (2024-04-25)

2.9.50 (2024-04-19)

2.9.49 (2024-04-11)

2.9.48 (2024-03-30)

2.9.42 (2024-03-09)

2.9.40 (2024-03-05)

2.9.39 (2024-03-01)

2.9.37 (2024-02-28)

2.9.36 (2024-02-27)

2.9.35 (2024-02-27)

2.9.34 (2024-02-26)

2.9.33 (2024-02-21)

2.9.32 (2024-02-16)

2.9.31 (2024-02-06)

2.9.30 (2024-02-06)

2.9.29 (2024-02-05)

2.9.28 (2024-02-03)

2.9.26 (2024-02-02)

2.9.25 (2024-01-29)

2.9.24 (2024-01-24)

2.9.23 (2024-01-24)

2.9.22 (2024-01-22)

2.9.21 (2024-01-19)

2.9.20 (2024-01-18)

2.9.19 (2024-01-17)

2.9.18 (2024-01-15)

2.9.17 (2024-01-13)

2.9.16 (2024-01-11)

2.9.15 (2024-01-09)

2.9.14 (2024-01-09)

2.9.13 (2024-01-08)

2.9.12 (2024-01-04)

2.9.11 (2024-01-02)

2.9.10 (2024-01-02)

2.9.9 (2024-01-01)

2.9.8 (2023-12-21)

2.9.7 (2023-12-19)

2.9.6 (2023-12-14)

2.9.5 (2023-12-10)

2.9.4 (2023-12-04)

2.9.3 (2023-12-03)

2.9.2 (2023-11-29)

2.9.1 (2023-11-28)

2.9.0 (2023-11-27)

2.8.0 (2023-11-24)

2.7.0 (2023-11-22)

2.6.4 (2023-11-21)

2.6.3 (2023-11-20)

2.6.2 (2023-11-20)

2.6.1 (2023-11-17)

2.6.0 (2023-11-13)

2.5.0 (2023-11-11)

2.4.0 (2023-11-08)

2.3.6 (2023-11-06)

2.3.5 (2023-11-03)

2.3.4 (2023-11-02)

2.3.3 (2023-10-30)

2.3.2 (2023-10-14)

2.3.1 (2023-10-13)

2.3.0 (2023-09-28)

2.2.7 (2023-09-18)

2.2.6 (2023-09-17)

2.2.5 (2023-09-12)

2.2.4 (2023-09-04)

2.2.2 (2023-08-16)

2.2.1 (2023-08-15)

2.2.0 (2023-08-14)

2.1.7 (2023-08-10)

2.1.6 (2023-07-30)

2.1.4 (2023-07-19)

2.0.36 (2023-06-21)

2.0.29 (2023-05-17)

2.0.10 (2022-12-01)

2.0.8 (2022-11-26)

2.0.0 (2022-10-21)

License

Copyright (c) 2021-2024 Denis Haev, https://github.com/GermanBluefox dogafox@gmail.com,

Creative Common Attribution-NonCommercial (CC BY-NC)

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

CC BY-NC License

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).