Examples of HABPanel Solutions

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

Thanks!

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.

10 Likes

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:

Hi,

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

Frank

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):

13 Likes

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

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

Nice dashboard.
@FutureCow what tablet model are you using ?
Although we can see a kind of claw on both sides of the panel can you give us a link to product page so we can detials on it?

Thanks

I’ve made a dashboard that seems quite useful for debugging and monitoring. I stole the idea for putting Frontail along with the RPi Monitor from @ThomDietrich . It’s then it’s easy to add some widgets and see their effects in the log.

Thanks to @bwhouse for the intro

Now to try figure understand how to customise the colour of the RPi monitor to blend in :wink:

For Frontail there is are some good installation instructions here

4 Likes