Examples of HABPanel Solutions

Tutorials & Examples HABPanel Examples
52

Hi,

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 !

53

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:

54

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 


55

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

56

I love your dashboard but particularly your weather widget.

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

57

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

58

Thanks!

59

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

habpanel.png1059×792 65 KB

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

10 Likes
60

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

61

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:

62

Hi,

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

Frank

63

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.

sshot-172.png1280×800 12 KB
sshot-169.png1280×800 17.2 KB
sshot-179.png1280×800 2.29 KB
sshot-170.png1280×800 25.9 KB
sshot-176.png1280×800 14.9 KB
sshot-180.png1280×800 9.84 KB
sshot-182.png1280×800 13.8 KB
sshot-168.png1280×800 22 KB
sshot-181.png1280×800 20.7 KB
sshot-175.png1280×800 25.8 KB
sshot-174.png1280×800 40 KB
sshot-171.png1280×800 52.4 KB
sshot-177.png1280×800 74.5 KB
sshot-173.png1280×800 116 KB
sshot-178.png1280×800 126 KB

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!

64

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.

65

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?

66

Hi @Signal11

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

image.png747×113 9.83 KB

Then you can export the configuration from there

67

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)

68

Thank you very much @Signal11.

69

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

13 Likes
70

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

71

Using a template with css

Template:

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

css:

#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;
}
4 Likes