Next generation visualization for ioBroker: vis-2

WEB visualization for ioBroker platform.

Overview

License requirements
Installation & Documentation
Bindings of objects
Filters
Control interface
Default view
Permissions System
Settings
SVG and curentColor

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

* - 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 the 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
json - operation for getting json or object property. E.g., {id;json(common.name.en)}
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)}

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}
widgetOid - use the OID of the widget to assign the widget's value in the assignment section, like {t:widgetOid.val;t}
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-2. "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-2, 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-2 and let it play as for instance /vis-2.0/main/img/myFile.mp3. Important browser cannot play audio till the user has not clicked at least once on the page. It is a browser security policy. Here you can read more.

If the user changes the view or at the start, the variables will be filled by the vis-2 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-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.

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.

fork the iobroker/iobroker.vis-2 repository into your own account via user interface of GitHub
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

open the downloaded repository with your IDE
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

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

Debugging is available in the browser e.g. chrome F12
if you change a file, automatic reload of the editor is supported

Todo

Changelog

2.10.8 (2024-11-22)

(bluefox) Added new option for view: "Limit only for instances"

2.10.7 (2024-07-23)

(bluefox) Optimization of the module federation

2.10.6 (2024-07-20)

(bluefox) Improved the typing in typescript

2.10.4 (2024-07-16)

(bluefox) Corrected the jumping by object selection
(bluefox) Implemented swipe widget

2.10.3 (2024-07-11)

(bluefox) Converted the CanJSWidget to typescript
(bluefox) Added "clone" button to the attribute groups

2.10.2 (2024-07-10)

(bluefox) Removed incompatible package for styles
(bluefox) All widgets must be updated
(bluefox) The basic input value widget was migrated to ReactJS

2.9.64 (2024-05-23)

(bluefox) Added possibility to clear a text field by button

2.9.63 (2024-05-15)

(bluefox) Migrated some files to typescript

2.9.60 (2024-05-07)

(foxriver76) test automatic release

2.9.53 (2024-05-06)

(bluefox) Allowed applying styles to jQui buttons

2.9.52 (2024-04-25)

(bluefox) Navigation was improved: adjustable menu width and bulk edit were added

2.9.50 (2024-04-19)

(bluefox) Corrected widget in widget behavior

2.9.49 (2024-04-11)

(bluefox) Corrected the scroll buttons in Tabs widget
(bluefox) Corrected resizers if the border width is set

2.9.48 (2024-03-30)

(bluefox) Showed selected view in the view dialog
(bluefox) Added customization of loading screen
(bluefox) Respected the sentry disable flag in GUI

2.9.42 (2024-03-09)

(bluefox) Allowed limiting the view size only on desktop
(bluefox) Change word "Filter" to "Search"

2.9.40 (2024-03-05)

(bluefox) Migrated the filter widget to react
(bluefox) Migrated the basic link widget to react

2.9.39 (2024-03-01)

(foxriver76) allow to use widgetOid in bindings
(foxriver76) fixed various problems with Date Picker widget
(foxriver76) made default option of Date Picker human readable and added option for full parseable date
(bluefox) Added the possibility to add suffix by navigation widgets
(bluefox) Improved the license manager

2.9.37 (2024-02-28)

(foxriver76) TimePicker widget now saves the time instead of date by default, if you want old behavior use checkbox asDate

2.9.36 (2024-02-27)

(foxriver76) fixed project-specific css not being applied

2.9.35 (2024-02-27)

(foxriver76) user-specified css has now priority over widgets css
(foxriver76) fixed crash case for broken grouped widgets

2.9.34 (2024-02-26)

(foxriver76) detect admin user correctly in project permissions dialog

2.9.33 (2024-02-21)

(foxriver76) fixed issue that last image is never shown in image8 widget
(foxriver76) added possibility to define background and title color for jqui dialog
(foxriver76) make it possible to click through signal image if in front of widget

2.9.32 (2024-02-16)

(foxriver76) implemented buttons to show or hide all views in views manager
(foxriver76) fixed issue with signals on RxWidgets
(foxriver76) allow disabling Sentry only for this instance

2.9.31 (2024-02-06)

(foxriver76) apply default overflow correctly
(foxriver76) navigation style fixes (fix an icon background and allow to customize header text color)

2.9.30 (2024-02-06)

(foxriver76) global css will no longer be deleted on adapter upload/update
(foxriver76) allowed modifying style of navigation

2.9.29 (2024-02-05)

(foxriver76) fixed multiple problems with nested groups
(foxriver76) also made group/ungroup commands working in group view
(foxriver76) allowed selecting widgets in a group via click (previously only dropdown worked)
(foxriver76) fixed issue, that Basic Image 8 is not configurable for value 0

2.9.28 (2024-02-03)

(foxriver76) correctly determine the vis instance in all cases

2.9.26 (2024-02-02)

(foxriver76) do not show empty icon category if jquery style selected for jquery button widgets
(foxriver76) added possibility to hide navigation after selection

2.9.25 (2024-01-29)

(foxriver76) fixed resizing issue for relative widgets
(foxriver76) do not crash when using visibility "only for groups"
(foxriver76) do not crash if a widget tries to update widget on non-existent view

2.9.24 (2024-01-24)

(foxriver76) Image 8 widget ported to react

2.9.23 (2024-01-24)

(foxriver76) fixed another bug due to previous versions

2.9.22 (2024-01-22)

(foxriver76) try to fix problems introduced with 2.9.21

2.9.21 (2024-01-19)

(foxriver76) fixed crash case when fixing widgets
(foxriver76) fixed bug, that opacity is applied twice on image edit mode overlay

2.9.20 (2024-01-18)

(foxriver76) increased timeout for project import
(foxriver76) added permissions on widget level

2.9.19 (2024-01-17)

(foxriver76) fixed issue when resizing widget from the left side
(foxriver76) added select box to dimension attributes if multiple widgets selected

2.9.18 (2024-01-15)

(foxriver76) fixed issue that old attributes value is shown in some scenarios
(foxriver76) dedicated permission system extended to view level

2.9.17 (2024-01-13)

(foxriver76) dedicated permission system on project level introduced

2.9.16 (2024-01-11)

(foxriver76) use the correct fallback values for widget signals determination

2.9.15 (2024-01-09)

(foxriver76) fixed issue with BulkEditor

2.9.14 (2024-01-09)

(foxriver76) fixed last change y-offset for some widgets
(foxriver76) fixed issue where JquiState did not respect data type
(foxriver76) fixed issues with BulkEdtior (dialog not closing and other dialog showing the wrong button)
(foxriver76) implemented workaround resize bug for devbookhq/splitter#15

2.9.13 (2024-01-08)

(foxriver76) correctly detect IDs in bindings when they contain hash character
(foxriver76) fix crash when multiple JquiState widgets selected
(foxriver76) prevent showing widget in a group after it is already cut out
(foxriver76) prevent usage of widgets which are not in a group for calculating rulers on group view

2.9.12 (2024-01-04)

(foxriver76) optimized copy/paste/cut in groups

2.9.11 (2024-01-02)

(foxriver76) fixed bug with visibility calculation

2.9.10 (2024-01-02)

(foxriver76) remove accidentally added script file, which leads to crash

2.9.9 (2024-01-01)

(foxriver76) allow importing views without attribute activeWidgets
(foxriver76) make BasicBulb behave more like its old version
(foxriver76) fixed issue that data of different widget is displayed in edit mode
(foxriver76) fixed issue that every state update is used for visibility calculation
(bluefox) migrated jQui select, jQui Radio steps widgets to react
(bluefox) All jQui widgets were migrated to react

2.9.8 (2023-12-21)

(foxriver76) fixed bug that no labels are shown for a background
(foxriver76) prevent short flashing of widgets with visibility condition at a page load
(foxriver76) fixed issue on theme switch

2.9.7 (2023-12-19)

(bluefox) Allowed the read-only flag for Styled/Input

2.9.6 (2023-12-14)

(foxriver76) fixed issues with the BulkEditor
(foxriver76) scripts in HTML are now added to the DOM, instead of being executed in eval
(foxriver76) fixed issues with Bulb widget if min/max was once filled
(foxriver76) migrated "speech2text" widget to react

2.9.5 (2023-12-10)

(foxriver76) open new views at the beginning
(foxriver76) fixed crash case if signals are used
(foxriver76) fixed material-design-widgets helper
(foxriver76) update references to view in widget when view is renamed
(bluefox) jQui Toggle icon widget was migrated to react
(bluefox) jQui Radio widget was migrated to react
(bluefox) jQui Radio List widget was migrated to react
(bluefox) Corrected last-change by React widgets

2.9.4 (2023-12-04)

(foxriver76) fixed issues with display width

2.9.3 (2023-12-03)

(bluefox) Added the possibility to limit hard the view size
(foxriver76) implemented simple sort mechanic for navigation
(foxriver76) fixed import of views, which were inside a folder
(foxriver76) fixed theme also applied in iframe
(foxriver76) do not simply reuse widget ids when importing or copying views
(foxriver76) implemented basic bulb widget as React widget
(foxriver76) made script tags work in basic html widget

2.9.2 (2023-11-29)

(foxriver76) fixed reactivity in custom components
(foxriver76) fixed import for groups
(foxriver76) after creating a group it is now pre-selected
(foxriver76) fields are now updated when moved via keyboard

2.9.1 (2023-11-28)

(foxriver76) recalculate fields after moving widgets
(foxriver76) fixed a pasting group on other view
(foxriver76) fixed theme also applied in iframe
(bluefox) implemented Basic Image as React widget

2.9.0 (2023-11-27)

(bluefox) implemented SVG shape and Screen Resolution widgets natively
(bluefox) implemented Basic iFrame as React widget
(foxriver76) only allow zip files at project import
(foxriver76) fix overflow being overwritten
(foxriver76) sort pages and projects alphabetically
(foxriver76) fixed problem on saving
(foxriver76) fixed problem with groups when always render is activated
(foxriver76) allow changing color and write lowercase in a tabs component
(foxriver76) fixed problem that navigation from a alwaysRender page is shown on different page

2.8.0 (2023-11-24)

(foxriver76) sort folders alphabetically in pages view
(foxriver76) fixed deselecting widgets with ctrl + click
(foxriver76) fixed display issue with a switch component
(bluefox) implemented Basic Red Number widget natively
(foxriver76) fixed copy/clone of grouped widgets
(foxriver76) fixed problem with open/close dialog via state

2.7.0 (2023-11-22)

(foxriver76) implemented Basic Bar widget natively

2.6.4 (2023-11-21)

(foxriver76) fixed typescript build

2.6.3 (2023-11-20)

(foxriver76) fixed several crash cases

2.6.2 (2023-11-20)

(foxriver76) fixed crash case when editing group
(foxriver76) fixed pasting groups
(foxriver76) fixed problem jumping cursor and removed characters while typing

2.6.1 (2023-11-17)

(bluefox) Showed "file too large" message by icon upload
(bluefox) Made navigation bar for view as an own group
(foxriver76) sorted views alphabetically
(foxriver76) respect uppercase/lowercase in projects toolbar
(bluefox) Redirect dialog and dialogClose commands to widgets

2.6.0 (2023-11-13)

(foxriver76) implemented select/unselect all buttons
(foxriver76) fixed bindings not working

2.5.0 (2023-11-11)

(foxriver76) allowed using real html in prepend-HTML and append-HTML (basic string widget)
(foxriver76) fixed problem while editing groups
(foxriver76) do not automatically format button text as uppercase
(foxriver76) do not automatically show page names as uppercase
(bluefox) Implemented the signal icons for React widgets
(bluefox) Implemented the last change indication for React widgets
(bluefox) Implemented SVG Bool widget as React Component

2.4.0 (2023-11-08)

(foxriver76) fixed issues with icon selector filter when changing category
(foxriver76) fixed problem, that only the first widget is pasted
(bluefox) added JSON binding operator
(bluefox) Allowed using function as filter for Object ID
(bluefox) Implemented View bar (with no menu)

2.3.6 (2023-11-06)

(foxriver76) fixed issues with binding editor on style attributes
(foxriver76) improved performance due to optimizations on auto save

2.3.5 (2023-11-03)

(foxriver76) update adapter-react to have enhanced image support in file selector
(foxriver76) fixed color of file browser in light mode
(foxriver76) fixed the color inputs jumping to the end of input on modifying

2.3.4 (2023-11-02)

(foxriver76) fix crash when selecting multiple widgets
(foxriver76) removed duplicate none entry in border-style dropdown
(foxriver76) fix crash when reordering widgets

2.3.3 (2023-10-30)

(foxriver76) fixed problem, that vis is not loading if a single widget has a script error
(bluefox) added the editor for bindings
(bluefox) background does not used if in iframe

2.3.2 (2023-10-14)

(bluefox) Allowed showing only selected widgets in edit mode
(bluefox) Corrected the visibility calculation for old (CanJS) widgets

2.3.1 (2023-10-13)

(bluefox) Corrected vertical gap between relative widgets
(bluefox) Better input of numbers with min/max in attribute dialog

2.3.0 (2023-09-28)

(bluefox) jQui widgets (many of them) were improved

2.2.7 (2023-09-18)

(bluefox) Improved icon selector: you can upload your own icon directly
(bluefox) Optimized loading: do not load unused widget sets

2.2.6 (2023-09-17)

(bluefox) Date binding corrected
(bluefox) Optimized loading of widgeteria
(bluefox) Horizontal navigation is fixed

2.2.5 (2023-09-12)

(bluefox) Implemented horizontal navigation

2.2.4 (2023-09-04)

(bluefox) Corrected license checking

2.2.2 (2023-08-16)

(bluefox) Changed sentry settings

2.2.1 (2023-08-15)

(bluefox) Added possibility to filter widgets in edit mode
(bluefox) Added possibility to change the order of relative widgets with drag&drop

2.2.0 (2023-08-14)

(bluefox) Release candidate 1

2.1.7 (2023-08-10)

(bluefox) Optimized the rendering of the widgets

2.1.6 (2023-07-30)

(bluefox) First beta release

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 partly compatible with the previous version

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

Files

README.md

Latest commit

History