Smart home touchscreen – HABpanel – Part 1

Today’s post is first of a two part project, where I’m making a user interface for a touchscreen – a HABpanel.

What is HABpanel?

HABpanel is a touchscreen friendly user interface built-in to openHAB. Designed to be easy and simple to use and also simple to create. It’s specifically meant for larger screens. A phone will probably be too small, but a tablet – 7’’ , or better yet, 10’’ is perfect.

HABpanel has a professional and minimalist look that I really like.

Why do I want to use HABpanel?

My plan is to have tablets, with HABpanel dashboards running, placed around my house in strategic places. Each will have a custom panel layout designed for just that location. That means, the one near the front door would have security, lights and heating access to name a few. The one in the kitchen would have temperature, lighting, audio (radio, Spotify etc) and perhaps be able to pull recipes on the screen. You get the idea.

In this post I will talk about creating a simple layout and how to save it, to be able to access it from other devices. The second post is about installing Bindings, creating Items and Things, in order to get live data on the HABpanel. And it will also serve as an introduction to working with Items, Things and Bindings.

To find out more about what Bindings, Items and Things are, have a look at this post !

Lets get started !

First head over to the local openHAB page in your web browser using the IP followed by :8080. I talk about how to find the ip in this post.
Now from the tabs choose HABpanel. You’ll see a greeting. Click on the gear icon on the top right corner. Now you can choose either to add new dashboard or load one from the server. Because this is our first dashboard, we don’t have any stored in the server yet, so choose “add new dashboard”.

OpenHABs web interface on your local IP address.

Now you can choose the size of the dashboard, as it appears on your HABpanel. It doesn’t matter at this time, what size you choose. You will use this later on, once you have more that one dashboard. At the moment I left it at three.

The number of columns doesn’t matter at this time. You can change and customise it later on.

Now click on the dark blue panel and that will take you into the dashboard designer.
Once in the dashboard designer, on the top left corner you can see a save button and a run button. Save is pretty self explanatory.
When you click on the run button, the designer runs the current dashboard configuration.As you can see, its just black, because we haven’t done anything to it yet.
To get back to the designer, hover over the name, “test” in my case, and you’ll see a little pencil icon appear. Click on it and you get back to the designer.

Adding widgets.

All these boxes on the HABpanel are called Widgets. To add a new widget, click on the “Add widget” button, top right corner of the screen. You’ll see that there are many different, standard widgets available. You also have the option to create custom widgets and use them on the HABpanel. For that you will need to know how to work with HTML and CSS files. Also have an understanding of basic Bootstrap framework and AngularJS. None of them are complicated, but still outside the scope of this post.

Now a new widget has been added to your panel. When we click “run”, we can see that the clock indeed is running, but its really boring and doesn’t really look good.
Lets go back to the designer and change that.
To configure a widget, click on the three dots on the top right corner of the widget. A menu opens, where you can delete it, copy or move it to another dashboard and lastly, edit the widget. Click “edit”. Form the opened window, first thing I’m going to do is change the name. From the mode dropdown, I going to choose analog and from the theme “dark”. If you like the look of a digital clock, you can format it from here as well. But I like the analog version a bit more.
Now save and run the dashboard again and you’ll see that the clock has a lot more appealing look to it.

An analog clock with a dark theme.

A switch widget.

The next widget I’m going to add is a switch.
To resize a widget, grab it form the bottom right corner and drag it around.
As you can see, you can’t have any size widget you want. Instead you are restricted to a grid system. A dark grey shadow indicates, what’s the closest size the widget will snap to.

A switch widget with a floor lamp icon.

In the edit window I’ll change the name to Lamp1 Slider.
On the next line you can see a drop down menu called openHAB Item. This is where you choose the Item you want to connect the widget to. Unlike Links between Items and Channels, a widget is more like a representation of an Item. We don’t have any Items though, to connect the widget to.

We will create an openHAB Item in the next post.

For now, I’ll just configure the look of the switch. I’ll hide the widget name and choose an icon for it. And here as well, you can either use the standard icons or you can use custom ones.

A companion for our switch – a slider.

I’ll move it down here and create another widget. This time a slider. Resize it and place it on to of the switch. I want to use the switch to turn a light on and off and the slider to select the brightness.
I’ll rename this as Lamp1 Slider and same again, because we don’t have any items yet, we can’t choose any.
There’s also advanced options where I’ll choose “hide the label”.
Have a look around, and you’ll see that even for the standard “out of the box” widgets have a ton of options that you could customise.
Save and run and you’ll see the new slider. Because it has no item connected, the default state is “undefined”. The same “undefined” can also happen when you do have an Item connected, but the Item doesn’t have a state. This can happens when you first start up a system. For that we can assign Item default values, such as “0” to all of them at start-up. I’m getting ahead of myself! Back to HABpanel!

Knobs everywhere!

For the fourth widget, I’m going to add a knob. I’ll resize it and change the name to Kitchen Temp Knob. A standard widget has the range from 0 to 100. But because I want to use it as a thermostat, having such a huge range is no use to me. I use metric system and 100 degrees would be boiling and 0 degrees would be freezing. To change that, I’ll head back to the edit window and from the minimum and maximum tabs choose 18 and 26 respectively , because that seems like the range I would use it at. Save and run and we see that now, it looks much more like a thermostat.

If I want to customise the look a bit, I can open the edit window and from the tabs choose bar&track. I’ll choose a dark orange for the bar and dark grey for the track and a lighter shade for the previous value.

An intelligent Dummy !

The fifth widget I’ll add is a dummy widget. Dummy widgets are used as a display for data. Right now , I want something to display the current kitchen temperature. So I’ll resize this to the same width as the temperature knob and name it Kitchen Temp. Here you can also specify the format you want data to be displayed. I’ll just specify the font size and won’t choose any icons.

Now that we are done with creating the dashboard, we want to save it and be able to open it from another device. To do that either swipe right on the screen or click on the three little bars on the top left corner. Form the tab that opened, go to the bottom and click on the gear icon.
Here you can change the different properties of the dashboard, but I’m not worried about that at the moment.
Currently the dashboard is saved on your local device and you won’t be able to open it from you tablet for example. To be able to do that, click on the “Save to current configuration to a new panel configuration”.
Now the dashboard is available for other devices.

Get it on your tablet!

Open a web browser in your tablet, go to openHABs local page. Click on HABpanel and top left corner click on the three bars. Now go to the gear icon and choose the panel configuration you just created. Click OK on the prompted window. And now you have the dashboard you just made, opened on your tablet.

Now you have the dashboard you created opened on a touchscreen.

You can also find videos about my posts on my YouTube channel – smartESThouse. I will be adding videos weekly, same as these blog posts. If you want to be notified when I add a new video, consider subscribing here.

In the next post I will show how to get live weather and astro data on your panel and we will be dealing with Bindings, Items and Things.