Today I want to talk about one of the most important features of a Home Automation Project, a wall dashboard. There are many ways you can interact with your Home Automation system, voice control, smartphone apps and of course a Wall Dashboard. In this post, I want to walk you through the steps of creating your very first OpenHab Dashboard using openHAB HabPanel and how you can extend its functionality using custom widgets.
I have to admit that I had reservations about HabPanel. I used it a couple of years ago but never bought into it. Up until now, I was using a Dashing.io based OpenHab Dashboard.
Before I get into details I want to thank the users in the OpenHab Community at Google+, they made me realize that I was missing out by not using HabPanel and I decided to create a new OpenHab Dashboard.
What am I going to talk about today?
- Create your first OpenHab Dashboard.
- Choosing the hardware for your OpenHab Dashboard.
- First Steps with HabPanel.
- Create Your first Dashboard.
- Extending the functionality of the OpenHab Dashboard.
- The HABPAnel Widget Gallery.
- Creating your first custom HABPanel widget.
If you want to know about the possibilities of HabPanel you should check this demo that BK did on his Youtube channel. He has lots of interesting content about Home Automation and electronics.
Let’s get started with the HABPanel tutorial.
Create Your first OpenHab Dashboard
I want to keep this section brief since the HabPanel UI is intuitive enough for you to grasp the concepts very quickly. If you get stuck with something, let me know in the comments and I will add some additional content.
Choosing the Hardware
The first thing that you need is the hardware where your dashboard will be displayed. There is only one requirement for this and it is very simple:
THE CHEAPEST ONE!
That’s right, the table is going to be sitting there displaying a website, it doesn’t have to be a monster. Actually, if you have an old tablet collecting dust somewhere at home, that is is the perfect candidate.
If you need to buy one, you may want to check the Amazon Fire 7. Full disclosure, I haven’t used it myself but for that price and with Alexa integrated it can’t be that bad…If you have other recommendations let me know in the comments section.
First Steps with openHAB HabPanel
You already have a tablet and you are ready to start creating the dashboard. What is next?
The first step is installing HabPanel if you haven’t done it yet.
Open PaperUI and go to addons->User Interfaces.
Just click on install and wait until the process finishes, usual stuff…
We are about to start creating the dashboard but first I want you to know the difference between a Panel, a Dashboard and a Widget on HabPanel.
- Panel: A panel is a collection of Dashboards.
- Dashboard: A dashboard is one of the screens or sections within your panel and they are filled with widgets. You can have one dashboard per room for example.
- Widgets: The HABPanel widgets are the components on your Dashboard that allow you to interact with your Home Automation System and they can have different purposes:
- Display Information about Openhab items or even external services like Google Maps or Google Calendar.
- Allow you to interact with the Openhab items or other external services. An example of this is a button that turns on the Kitchen Lights.
Not Clear yet? Let’s see an example:
openHAB Panel
When you click on the Home icon, top-left corner, HabPanel takes you to your panel. As you can see, the panel is composed by 3 different Dashboards one for the Bedroom, one for the Living Room and another one that controls multimedia devices.
Dashboard
If you click on Living Room, for example, HabPanel takes you to to the Living Room specific Dashboard. Each one of the square-shaped components is a widget.
Create Your first Dashboard with openHAB HABPanel
Enough with the theory, let’s have some fun!
Open your browser and go to the HabPanel URL.
When you open HabPanel for the first time, it welcomes you with a black screen that guides you through the first steps of creating a Dashboard. Believe me…you can’t get lost here.
Create a Dashboard following the indications and assign a name of your choice. In my example, the name is Living Room.
Once you create the first Dashboard, HabPanel takes you to your panel which in this case will only have one Dashboard…
The slider with the blue dot allows you to select the number of columns in your openHAB panel, basically how many Dashboards will you fit per panel. Don’t worry too much about this…You can change it later.
Click on the Dashboard that you just created to go to the edit mode.
Adding the first component to your newly created OpenHab Dashboard
There are mainly two types of components that you can add to every dashboard:
- Out-Of-The-Box Widgets: These are plug and play components that cover the majority of the use cases for the average Home Automation System.
- Custom Widgets: As I said before, average Home Automation System. The Out-Of-The-Box functionality has limitations, but don’t worry, I will show you how you can overcome that limitation building your own widgets.
There are 13 out of the box HABPanel Widgets. If I go through every single one of them I will bore you to death…fortunately they are all pretty intuitive. On this post, I will go through only one example and I encourage you to explore the rest. If you need help with any of them, let me know in the comments.
For this example, I will be using a widget named Dummy. I know, the name is not overly intuitive…
Despite its misleading name, this widget takes an OpenHab item and shows its value. You only need to worry about linking it to the item, everything else is taking care of.
Go ahead and add it to your Dashboard.
Once you add it, you will see a big box with two action points. In the top-right corner the button to access the configuration of the widget. In the bottom-right, you have the option to resize the widget.
Open the settings using the three dots in the top-right corner. The settings are pretty simple, you just need a name to show on top of the widget and the item that you want to link it to. The rest of the settings are to tweak format and style.
I have decided to link this widget to the sensor I built for the tutorial How to Build DIY Home Automation Sensors: The Ultimate Guide.
Once you have filled out all the details you are good to go, just click on run and check the results. Remember that HabPanel also takes care of refreshing the value when it changes so you don’t have to worry about anything else.
At this point you should play around with all the widgets to see which ones are suitable for your system.
Extending the functionality of the OpenHab Dashboard
As I said before, the out of the box functionality covers the majority of the requirements of an average installation, but what happens if you need more?
This section will bring you up to speed on the different ways you can extend HabPanel to accommodate every need for your OpenHab Dashboard.
Widget Gallery
The Widget Gallery is one of the brand new additions to the latest openHAB HabPanel version. The best part of OpenHab is its community of users and the Widget Gallery is just another proof of that. HabPanel gives you the ability to create your own widgets and share them with the community and the Widget Gallery is the vehicle for that.
In order to open Widget Gallery, you need to be in the edit mode of a Dashboard.
Click on Add Widget and then Get more.
This will pull up a screen that contains all the widgets built by the OpenHab Community. Right now there are 41 widgets and I am sure this list will keep growing.
For the sake of simplicity, I will import the Color Light Widget. Most people have at least a smart lightbulb so you can easily test this out.
Click on the Color Light Widget and HabPanel will take to a screen with the info of the widget. Click and Import Widget to continue.
Once you have imported the widget, it is no different than any of the out of the box widget although it depends on how the designer has configured it.
Once you have all the settings, click on run and test your widget.
Simple huh? Now it is time to step up the game. If neither the out of the box functionality nor the Widget Gallery has what you need there is still hope, you can create a custom widget for your Openhab Dashboard.
Custom Widgets
For this tutorial, I have created a widget myself that you can actually import from the Widget Gallery. It is the Chromecast Widget.
I don’t know if you have a Chromecast but the functionality that I will be using cover the majority of the use cases so you can definitely use this as your starting point.
Create the widget
To start with the creation of your custom widget first you need to go to the edit mode of one of your widgets. After the dashboard is editable you can click on Add Widget->Custom Widgets on the top-right corner. Click on the gear next to the Custom Widget label.
HabPanel will take you to a screen where it shows all the custom widgets that you have created or imported. Most likely you will only have the one that you imported earlier.
Click on New Widget and chose a name to start the process. The name has to be unique.
Click on the widget to start editing. You are going to see a screen with 3 tabs. In your case they will be empty but no worries, we will be filling them out together.
The custom widget functionality uses Bootstrap and AngularJS along with some additional functions that are OpenHab specific. I will give you the basics but if you are completely new to Bootstrap and AngularJS I would suggest you check the following links:
You don’t need to be an expert but at least have a look at the grid system of Bootstrap.
Before we get into the details let me explain to you what the 3 tabs that you see are.
- Code: This tab contains the structure of your widget. The elements that you want to show along with the format and structure that you want to give them. This section is coded using Bootstrap and AngularJS.
- Settings: In this section, you can define the parameters that will be used in your code. There are mainly 2 categories.
- Static Parameters: They can be of different types (String, Number, Checkbox). They are defined in the configuration and don’t change while the widget is on display. You can use this category to define the title of your widget for example.
- Items: These parameters are linked to Openhab Items and can be used to retrieve information from Openhab or to send commands to your controller. The best about this is that you don’t need to write any code to retrieve and refresh the value. It is all taking care of in the background.
- Preview: I don’t think I have much to explain here… 🙂
Let’s start with the configuration of the widget.
Settings Tab
The settings tab has mainly 2 sections:
- General settings: General information like the name of the widget and who implemented it.
- Parameters: The variables that you can use in the code section.
Code Tab
Here is the full code section of the widget. No worries, I will explain all the relevant parts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<div class="row"> <div class="col-xs-12"> <h4 ng-style="{'color': (config.color) ,'font-size': (config.font)}">{{config.widget_name}}</h4></div> </div> <div class="row"> <div class="col-xs-12" ng-if="itemValue(config.title) !='UNDEF'"> <h4>{{itemValue(config.title)}}</h4></div> <div class="col-xs-12" ng-if="itemValue(config.seriesTitle) !='UNDEF'"> <h4>{{itemValue(config.seriesTitle)}}</h4></div> </div> <div class="row"> <div class="col-xs-12"> <img src="{{itemValue(config.image_url)}}" class="img-thumbnail" ng-if="itemValue(config.image_url) !='UNDEF'"></img> <img src="{{(config.default_image)}}" class="img-thumbnail" ng-if="itemValue(config.image_url) =='UNDEF'"></img> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow={{itemValue(config.current_time)}} aria-valuemin="0" aria-valuemax="{{itemValue(config.duration)}}" style="width:{{(itemValue(config.current_time)*100)/itemValue(config.duration)}}%"> <span class="sr-only">100% Complete</span> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <label class="btn btn-primary btn-lg btn-block btn-danger" ng-if="itemValue(config.control) !='PLAY'" ng-click="sendCmd(config.control, 'PLAY')"> <i class="glyphicon glyphicon-play glyphicon-text"></i> </label> <label class="btn btn-primary btn-lg btn-block btn-danger" ng-if="itemValue(config.control) =='PLAY'" ng-click="sendCmd(config.control, 'PAUSE')"> <i class="glyphicon glyphicon-pause glyphicon-text"></i> </label> </div> </div> <div class="row"> <div class="col-xs-12"> <div ng-init="model={ name: 'My switch', item: (config.volume), hidelabel: 'true', hidepointer: 'true' }"> <widget-slider ng-model="model"></widget-slider> </div> </div> </div> |
Display the Value of a parameter
The parameters that you have defined in the settings section can be used in your code. Remeber to use config.label when you retrieve or use the parameter.
|
1 2 3 4 |
//Show the value of a static parameter {{config.widget_name}} //Show the value of an OpenHab Item {{itemValue(config.duration)}} |
The itemValue function takes care of retrieving the value an refreshing it when it is updated.
Modify the style of an HTML tag
The ng-style function allows you to change the style of an HTML tag. In this case is a heading but you can apply it for any tag.
|
1 |
<div class="col-xs-12"> <h4 ng-style="{'color': (config.color) ,'font-size': (config.font)}">{{config.widget_name}}</h4></div> |
Conditional clauses
Using the ng-if functions you can show an HTML tag only if a certain condition is met.
|
1 |
<div class="col-xs-12" ng-if="itemValue(config.title) !='UNDEF'"> <h4>{{itemValue(config.title)}}</h4></div> |
Arithmetic Expressions
You can combine different operators to produce a result. In this case, I am calculating the percentage video played to update the progress bar.
|
1 |
{{(itemValue(config.current_time)*100)/itemValue(config.duration)}} |
Embedded Widgets
This is exceptionally cool. openHAB HABPanel gives you the ability to embed out of the box widgets into your custom widget. The example below uses the slider widget to implement a volume bar.
|
1 2 3 |
<div ng-init="model={ name: 'Volume Slider', item: (config.volume), hidelabel: 'true', hidepointer: 'true' }"> <widget-slider ng-model="model"></widget-slider> </div> |
You can use any of the out of the box widgets using the following structure:
|
1 2 3 |
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">ng-init</span>=<span class="hljs-string">"model={ name: 'My widget', ... }"</span>> </span><span class="hljs-tag"> <<span class="hljs-name">widget-{type}</span> <span class="hljs-attr">ng-model</span>=<span class="hljs-string">"model"</span>> </span><span class="hljs-tag"></<span class="hljs-name">widget-{type}</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> |
Replace {type} by the widget type, slider, switch…
Sending Commands to OpenHab
The sendCmd function allows you to create buttons that can send a command to OpenHab.
|
1 2 3 |
<label class="btn btn-primary btn-lg btn-block btn-danger" ng-if="itemValue(config.control) !='PLAY'" ng-click="sendCmd(config.control, 'PLAY')"> <i class="glyphicon glyphicon-play glyphicon-text"></i> </label> |
Combining those 6 things you can pretty much create anything that you have in mind. If you find anything missing or unclear post it in the comments, I am happy to add more information.
If you want some extra information about OpenHab specific functions check this site.
After all the configurations here you have the final result:
There is room for improvement so if you guys have any suggestions fire at will! It is available for import in the Widget Gallery in case you want to check it out.
Save your OpenHab Dashboard
One of the odd things in the first versions of HabPanel is that you needed to define the panel locally and then import it to the rest of the devices you wanted to use it on. Fortunately, this has changed and now you can save the openHAB panel directly on the server so the rest of your devices can retrieve it.
You should do this because it allows you to have only one centralized version instead of an independent one per device.
That was long…No more HabPanel for the day…
I think this gives you a pretty good idea of the capabilities that HabPanel offers. If you have questions please post them in the comments and if you think that somebody else might be interested on this topic share it!
I’m officially hooked! Spent all evening yesterday playing with my panel setup, and even started creating my own widget, for the CT100 thermostat. Really glad you wrote this up to get me started! Thanks!
Thanks for your kind words! Let me know when you publish the widget so I can take a look!
How do you like the CT100? I made myself a DIY thermostat but I was looking for an alternative suitable for people that don’t want to mess with their HVAC systems.
Honestly, it was the cheapest/most reliable Zwave thermostat I could find 🙂 And, it’s been working well for the past 3 years, so i can’t complain. We mostly control it remotely via openHAB, so the physical UI doesn’t get much use at all.
I’m publishing the widget now – I adapted an existing ecobee one, so it’s a work in progress!
I checked the price and it looks very nice. I understand investing in a Nest or an Ecobee if you are not going to have a home automation controller running the show behind the scenes. A dummy thermostat that you can control using Openhab can be as smart as you want it to be.
Hahaha you have traumatized the kid! Thanks for reading the post by the way!
Great article. I have been able to do almost everything in this article and dashboard is running great. I am trying to get the Chromecast widget and I’m stuck with it just blank on my dashboard. I’ve copied your code to the widget after I bring it in with your first example. Not really understanding the syntax. I think i need to create title and ?. Enjoy your blog, keep it going.
Hi Mike,
Thanks for the feedback!
Did you imported using the OpenHab gallery or created it from scratch? If you just want to use it, the easiest way is to import it from the gallery.
In case you are building it from scratch, have you created the fields on the settings tab?
I am in the chat by the way in case you need help. It should be in the bottom-right part of your screen.
The ability to import from the gallery says there is nothing to import when you click on download. I’ll try to create the fields in the settings tab and see how that goes.
Yay! I downloaded the json file and imported it and it works. I get the structure now, thanks so much for your help! Look forward to some new articles.
That is so strange. Thanks for letting me know Mike. I review it to see what is going on there.
What are you up for next? I am always looking for new topics.
I haven’t started with OpenHAB yet but was wondering if you still need a dedicated PC/Laptop or other device runnign openHAB in the background in addtion to a tablet for displaying openHAB panel dashboard?
Hey Rob,
Sorry for the late response, I am getting a lot of spam comments lately. You would need a dedicated PC but you can use a Raspberry Pi which costs 35 bucks and consumes almost no electricity plus your tablet. You could go with a cloud based solution but I fell that you have less control with that option.
Buenas, Como puedo apagar mi computadora de escritorio mediante openhab instalado en una netbook?
Hola Sofia,
La computadore que quieres apagar es la misma en la que openhab esta instalado?