Examples of HABPanel Solutions

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

Oh! That’s nice. I was thinking about mixing them together but never thought about habpanel to solve that task :smiley:
Great one :wink:

This was set up on my 15in laptop, so screen real estate is very limited. I would imagine with a hi-res 24in monitor one can build a very nice development and monitoring panel.

I suppose one with good REST skills could extract snippets from the RPI monitor and display them in individual panels. I’ll try play around with that, but am I going in the right direction with REST?

The RPi Monitor is customisable according to their website so maybe that’s the place to start.

Not real familiar with the RPI monitor, but from the screenshot it looks you could also pull that information from the system info binding. Then you could display them in individual panels.

@david That’s a good call. I’ll try put something together and post it up here if I’m successful.

Hi, using the great template widget and the example of @Signal11 (who’s styling I like a lot), I created a little widget to examine the state of my Nest Protect Smoke and CO alarms. So far I am happy with it, but I think it consumes slightly too much space. I still want to make some little changes, replace the date/time of the last connection to how long ago it was. This should make the widget also a bit more compact. I also want the nest logo to display the correct color, so green when everything is OK, yellow when there is a minor problem (or “heads up”) and red when there is a serious problem.

2 Likes

Hey Peter that’s an awesome overview. I could see this useful for a lot of things mind posting the Json?

Hi,

I used the template widget, and borrowed the styling idea from @Signal11, who posted his json a couple of days ago. Here is the code I put in the template:

<div ng-init="ServerPath='/static'; IconSet='nest'"></div>

<table style="width: 100%; border-collapse: separate; border-spacing: 4px;">

  <tr>
    <td colspan=3 style="padding: 0;"><h4 style="color: #ffaa00; line-height: .1em;">Nest Protect Livingroom</h3></td>
  </tr>

  <tr>
    <td style="border: 2px solid #76899e; border-radius: 10px;">
      <table style="width: 100%;">
        <tr>
          <td rowspan="4" style="padding: 0px; padding-top: 0px; padding-bottom: 0px"><img id="nest-icon" height="80" width="80" src="{{ServerPath}}/images/{{IconSet}}/nest-protect-glow-blue.png"/></td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">Smoke:</td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px" ng-style="{ color: itemValue('NestProtectLivingRoom_smoke')=='ok' ? 'green' : 'red' }">{{itemValue('NestProtectLivingRoom_smoke')}}</td>
        </tr>
        <tr>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">CO:</td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px" ng-style="{ color: itemValue('NestProtectLivingRoom_co')=='ok' ? 'green' : 'red' }">{{itemValue('NestProtectLivingRoom_co')}}</td>
        </tr>
        <tr>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">Battery:</td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px"ng-style="{ color: itemValue('NestProtectLivingRoom_battery_health')=='ok' ? 'green' : 'red' }">{{itemValue('NestProtectLivingRoom_battery_health')}}</td>
        </tr>
        <tr>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">Last connection:</td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">{{itemValue('NestProtectLivingRoom_last_connection') | date:'dd-MM-yyyy HH:mm'}}</td>
        </tr>

      </table>
    </td>
  </tr>
</table>

My default page

/Mike

8 Likes