Examples of HABPanel Solutions


I really like your habpanel layout, it is very clean. Could you also post other screenshot (e.g. Multimedia, meteo, kalender, …).
It can help other people to build up their panel as well …

Many thanks !

I’ll do that asap, when i get home. json too?

@ysc any suggestions on a home button on top right next to the wheel? or a title in the top-zone? I’ve seen this done before, but I’m nog agular.js or webwizard. Long time ago I made my first site in notepad :wink:

Yes, json would be very welcome as well.
I am also still thinking about a home button, but have not found a solution yet …
Hope someone on the forum can help …

hello I love your dashboard’s arrangement, where did you get the music player like that? Can you share with us? Thanks

I love your dashboard but particularly your weather widget.

Did you make the weather widget yourself?
Would it be possible to get a copy?

@wolfsbane1066 thanks for your post :slight_smile: in fact no, the weather widget was developed by another member here is a link

1 Like


Thank you to everyone here who helped me out with all of my questions. Here is what I have so far:

The “living room lights” and “stereo” buttons go to secondary pages, which are no where near complete, but everything else is working.


That looks beautiful @Signal11 - What do you display it on and at what resolution?

I am running openHAB on a Raspberry Pi 3 with a 10.1" touchscreen display. The resolution is currently at 1024x600. I need to build a wall mount for it, as it is currently sitting on the counter… too many projects, not enough time :slight_smile:


@bwhouse how do You get the current power consumption of the house?


As requested.

Sorry in advance, but I don’t find how to put multiple images in a sort of carrousel. So sorry for those who visit the site mobile for al the scrolling.

And here the json: 20170111.json (52.8 KB)

Hope you’re something with it.

Still a lot of work to do… clocks, rules, scenes, … so much ideas, so little time!

Hi @Signal11

That looks great. Good Job. Would you be happy to share the json for that setup? You’ve got lots of stuff there that I can get inspiration from.

Hello @neohusky

I would be happy to, but I’m having some trouble finding an export json button for the whole page. I see others have done it, but I can’t find the button.

How do I export the json for the whole site?

Hi @Signal11

Take a look under the local storage option, click on the “Edit the local panel config…” link

Then you can export the configuration from there

Thank you! (I have actually been wondering for a while how people did that, but couldn’t find the button :slight_smile: )

At any rate, here is my json:

habpanel-config.json (31.5 KB)

Thank you very much @Signal11.

Here is my panel on the wall(still working on it):


Cool, how did you do. the Temperature / humidity?

Using a template with css


<div ng-init="ServerPath=''; IconSet='climacon'">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/example.css" />
<table id="weather-table">
		<td align="right"><img id="temp-icon" src=""/></td>
        <td id="temp-temp">{{'%.1f' | sprintf:itemValue('Sensor_Temp_Woonkamer')}}</td>
		<td align="left" id="temp-sign">°C</td>
<table id="weather-table">
		<td align="right"><img id="hum-icon" src=""/></td>
        <td id="hum-hum">{{'%.1f' | sprintf:itemValue('Sensor_Hum_Woonkamer')}}</td>
		<td align="left" id="hum-sign">%</td>


#weather-table, #weather-location-name{
        padding-bottom: 1px;

#temp-icon {
        width: 150px;
        height: 150px;
        padding-right: 5px;

#temp-temp {
        font-size: 55px;
        color: cyan;
        width: 1px;

#temp-sign {
        vertical-align: top;
        padding-top: 10px;
        font-size: 20px;
        color: cyan;

#hum-hum {
        font-size: 35px;
        width: 1px;
        color: cyan;

#hum-sign {
        vertical-align: top;
        padding-top: 10px;
        font-size: 16px;
        color: cyan;

#hum-icon {
        width: 25px;
        height: 25px;
        padding-right: 0px;
        margin: 0px 0px 0px 32px;