By the already integrated Dasboard solution in openHAB an interactive handling is possible and not always individual configuration files must be changed. A simple example is the display of temperature curves using graphana and influxDB in a single dashboard.
Installation of HABPanel
In each installation of openHAB the HABPanel is already integrated, so no further steps are necessary.
Local storage in the browser
Until a panel configuration is created and saved, HABPanel runs only in the local memory of the currently used browser. Therefore, the settings for the point of time are not yet saved on the server. Therefore, after a successful creation and editing, it is always necessary to save the configuration in order to be able to access this dashboard from the rest of the devices.
Main menu in HABPanel
The main menu is the start page of the HABPanel, which can be accessed using the following link:
{{IP_ADDRESS}}}:{{{{PORT}}/habpanel/index.html#/
It contains the links to the individual dashboards, which are available. This display can be edited and saved by anyone to enlarge the most important dashboards and display them in the first rows.
The sidebar in the HABPanel
Clicking on the hamburger icon opens the sidebar, which consists of three components:
Header, which takes you to the start page.
List of dashboards to allow quick switching within the dashboards.
Footer, which displays the current time and date.
Setup using the Dasbhoard Designer
Within the Designer, the individual widgets can be created and optimized for display (size, arrangement) and configuration. Here there is a large selection from very many different different widgets. Examples are buttons, charts, sliders, switches or own templates.
Interactive Dashboards
Once the configuration is done, the dashboards can be loaded and thus an interactive dashboard solution is available in which the states of the items are automatically updated.
Further outlook
Personally, I use the HABPanel mainly for visualization and control by means of a SVG image of my home. Furthermore, some interesting graphs are shown, which help me to keep track of important figures like power consumption, temperature and download speed. Since especially the SVG-image is very interesting for the control of single components, I will explain the setup, creation and visualization in the next article.
I hope you continue to enjoy reading!
Matthias
