ioBroker visualization – VIS adapter

VIS adapter

The VIS adapter is one of the most common display solutions in ioBroker. The user interface can be flexibly adapter with additional widgets.

With the help of the VIS Editor we can create creative Smart Home visualizations that meet our needs. VIS provides the editor and the user interface via a web server that can be displayed in a browser.

Beelink SER5 Mini PC

ad

Beelink SER5 Mini PC

AMD Ryzen 7 5800H Processor,Mini Computer with 16G DDR4 RAM/500GB M.2 NVMe 2280 SSD,4K FPS/Three-Screen Display/WiFi 6/BT5.2/Support Auto Power On.

Ideal for Smart Home, Mosquitto, ioBrokers or media servers.

The VIS adapter is easy to install. We select the VIS adapter on the iobroker adapter page and click the “+” button to install it.

After installing the VIS adapter, we enter the license key on the configuration page. We can  request this on  iobroker.net , it’s free for personal use.

VIS adapter - enter license key
VIS adapter – enter license key

Then we can create our own visualizations with the VIS adapter. We can find the VIS editor at: 192.168.x.xxx:8082/vis/edit.html

VIS editing interface
VIS editing interface

On the Adapter page you can install additional widgets for the VIS adapter, with which we can make the display more varied.

We can choose from the widgets from the list on the left. Let’s just place it at the desired location using drag and drop. We then set the widget properties on the right. The most important thing is to choose the object ID for the widget. This is how we can connect widgets to ioBroker data points.

Add VIS object ID
Add VIS object ID

In the example below, I’ve selected a data point named Living Room Light for the Bulb widget. So when I open the URL “http://192.168.x.xxx:8082/vis/index.html#Test-Wiew” and click on the light bulb symbol, the light in the living room goes on.

VIS Bulb widget
VIS – light bulb widget

If “Read only” is activated, the symbol is only used as an indicator. We add a switch and we enter the same data point for this switch, so we can switch the lamp with the switch and the lightbulb symbol only shows the status of the lamp.

Add a switch to the light bulb in the VIS editor
Add a switch to the light bulb in the VIS editor

Let’s look at the result:

It works well.

Light bulb symbol with switch in the VIS user interface
Light bulb symbol with switch in the VIS user interface
Widget grouping in the VIS constructor
Widget grouping in the VIS constructor

Widgets can be easily grouped by selecting them, then left-clicking and selecting Group from the menu.

This means that their relative position is retained when they are moved or copied.

In the following example we use the MeterGauge widget to display the living room temperature. Here, too, let’s first select the object ID and then fine-tune.

Temperature display with MeterGauge widget on the ioBroker VIS adapter
Temperature display with  MeterGauge widget  on the ioBroker VIS adapter

With the iCal adapter installed, this way we can easily view the dates of our upcoming events. Let’s select the widget “String (unescaped)” and set the data point.

VIS - iCal Event Viewer
VIS – iCal Event Viewer

As can be seen from the examples above, the VIS adapter is simple to use and easy to learn. The possibilities are almost endless, with a little practice we can create a very nice interface to monitor our smart home.