Chapter 6
Introduction to HabPanel

After we already used HabPanel a little bit to configure the Logview and the resource view for the Raspberry Pi, we will now go more into detail.

In general you can create Tile-Based interfaces to view and control your devices. After some theory we will create a panel where we can control the power outlets we recently added.

If you visit the start page of HabPanel, you will see an almost blank site that just contains the tile that links to our “System” dashboard. But you also have two more things on this site. On the top left you can expand the menu of the starting page. A navigation will open that shows all the dashboards we already created – currently just “System”. At the bottom of the navigation you have a gear. Using this gear, you can setup the base information about HabPanel and also some advanced options. Right now we don’t need this but feel informed there is such a dialog.

Back on the start page you also have a gear at the top right. This is where we can configure the start page.

 

From bottom to top and from right to left we have the following options on this page:

  • “Panel Settings” is the same like the gear icon in the expanded navigation
  • the slider in the middle defines the width of the page. You can configure how many columns the page should have. If it is just 1, a tile will be full width of the page. If it is 2, it is half of the page and so on. 
  • The “Add new Dashboard” button is to create a new Dashboard where we can create tiles and show values of items like we already did it on the system dashboard.
  • In the tile of a dashboard, in the screenshot it is the “System” dashboard, we can edit some properties of the dashboard by click the gear or change the order by drag-n-drop the arrows. Right now we just have one tile, so there is nothing to change. If you click the tile anywhere else, you can change the content of the dashboard.

We will continue with adding a new dashboard. Click “Add new dashboard” to create it. In our lab we will name it “Lab 1”. After we confirmed the dialog, we will see the new tile for the dashboard.

Click in the “Lab 1” dashboard to start placing some tiles on it.

You will see a empty dashboard where you just see some configuration buttons.

  • The first one is the “Save” button. It does what is written on it. It saves the current setup you see.
  • The second one is the “Run” button. When you design your dashboard, you can start a preview with real values to check if everything works like expected.
  • The third one is the “Add Widget” button. If you click on it you will see a large list of available widgets. The standard widgets are described in the official documentation here.

In the first step we like to add a tile, that shows the current status of an outlet and where we can switch the outlet on or off. Open the available list of widgets and select “Switch”. A new tile will be created. In this tile at the top right, click the three dots and select “Edit”.

 

Enter a name for the new widget. That will be the text that is shown in the tile (if not hidden). I use the normal name of the device I control. That is “Outlet 2” in this case. In the “openHAB Item”-Field select the item that represents this value. In the list that expands you see all available items that are configured by Paper UI and manually via .items-config file. In this case we like to see if the outlet is turned on or off. Select the item “Outlet2_Outlet”. In the “Icon”-area select the “Builtin: Freepik Gadgets” set of icons. At the bottom there is a wall-socket icon. Select that one. Below the icon there is a field where you can configure the size of the icon. Enter “96” to the field to make the item larger than the default 16 pixels. Finally click on “Save”.

Now you have a configured tile. I like to have the tiles a little bit smaller than the default size. You can change the size by dragging the bottom left of a tile. If you do so, you can change the size.

 

if you click on “Run” now, you will see how our configured power outlet looks like.

And the best thing is: Because we configured a switch widget, we can already click on the tile to turn the outlet on or off. If the outlet is gray and the “OFF” is below the icon it has no power. If it is on, it is a light blue with the “ON” text below.

That’s it already.
After we archived this goal, we also like to know how much power the outlet is using. Hover the mouse over the name of the dashboard and click the edit-pencil in the right of it.

After that we will add a new widget of type “Dummy”. This is not a placeholder but a tile that can have text based on a value. Edit the dummy-tile like we did before with the switch-tile. In the “Name”-Field we enter “Power:” because we will show how much power we use. In the “openHab Item”-Field select the “Outlet2_Power”-item. That one shows in Watts how much power we use. In the Text size-field enter “12” do make the text a little bit larger. On the bottom check the checkbox “Value right of label instead of below” and click save.

The new tile will be added to the dashboard. Move the tile below the switch-tile and resize it.

If you click on “run” it will look like this:

You can also do the same for the temperature (if it applies to your AVM power outlet) and the all-time power consumption.

You can also display numeric values as a knob (circle that is partly filled). To do so, add a new widget of type “knob”. Select the Power item again like we did for the dummy-tile. Activate “Disable interaction” because this value is read-only. You cannot reduce the power usage by changing the knob. In the Max-filed enter a value that is a little above the highest value you ever expect.

Change to the tab “Ranges”. In my case 150 was the Max-value. So I decided that all values up until 100 are fully OK. values up to 120 are a kind of warning and higher is really bad. So I added 3 ranges that are like this and set the color to representive values (orange = warning, red = alarm). You also have to activate the “Enable Ranges” and “Match Text Color to Range” checkboxes at the top.

Change to the “Misc”-Tab and set the Font Size to 12 and click “Save”.

Run the new setup. It will look like this:

Now you know how the HabPanel works in general. You can play around with the other widgets or go on with the next chapters. We will add more and more tiles with different functionalities in the next parts.