Examples of HABPanel Solutions

hExPY · December 22, 2017, 12:05pm

Hey Benny,

this looks really awesome. How did you managed to get it up and running?

Veagau · December 23, 2017, 2:43pm

It’s awesome! I’m making such a Habpanel too(I have an official Raspberry pi2 camera module), could you please tell me how to control the camera with raspberry in a Wired way?
Thanks a lot!

smar · December 27, 2017, 2:13pm

Hi @bennYx0x

Could you share how you did the pop-up. Looks great!

Thanks

Alexandersen · January 6, 2018, 6:03pm

Hi bennYx0x

Looks amazing

Do you want to share your code?

derhelge · January 18, 2018, 8:33am

Hello Guys

i build a very Simple HAB Panel.

Is there an easy way (i am very bad in writing code) to do to following thing:

i have a dummy for every window, i want if the dummy says OPEN the background color should change to red.
i have some rules in my openhab setup and these rules uses a switch Item, i want change the background color Buttons too

maybe someone can help me.

halloween · January 18, 2018, 8:43am

Have a look here:

derhelge · January 18, 2018, 9:17am

so there is no solution? or can i use the Button widget?
In the button widget i can send two commands, but i have no clue about the syntax to switch an item “ON”.

halloween · January 18, 2018, 9:27am

? Have you read the answers in my previuos postet thread?

You have to use the “button” widget. There you can select background colors for your buttons. One color for “ON” and another for “OFF”.

It´s the same with contacts. One color for “OPEN” and another one for “CLOSED”.

Only problem which i said in the last post of this thread was, that i not longer have this switch icons on my button, like the switch-buttons have it (different icons for on and off).

But with the colors it is working like expected.

sihui · January 18, 2018, 10:38am

Another option is to use a template:

<style>
 .flaeche { 
    vertical-align:center;
    width:98px;
    height:98px;
    text-align: center;
    font-size: 12pt;
    border : 0;
    }
</style>

<div ng-if="itemState('Gate_Show_OC',true)==2">
  <button class="flaeche" style="background: red;" ng-click="sendCmd('Garage', 'ON')">
  Garage ist offen
  </button>
</div>

<div ng-if="itemState('Gate_Show_OC',true)==1">
  <button class="flaeche" style="background: green;" ng-click="sendCmd('Garage', 'ON')">
  Garage ist zu!
  </button>
</div>

<div ng-if="itemState('Gate_Show_OC',true)==3">
  <button class="flaeche" style="background: blue;" ng-click="sendCmd('Garage', 'ON')">
  Tor in Bewegung
  </button>
</div>

derhelge · January 18, 2018, 3:13pm

Thx for your Help but I think I have somewhere an error my item is FensterKueche_FensterZustand

and i tryed this but I didn’t show a color.

<style>
 .flaeche { 
    vertical-align:center;
    width:98px;
    height:98px;
    text-align: center;
    font-size: 12pt;
    border : 0;
    }
</style>

<div ng-if="itemState('FensterKueche_FensterZustand',true)==OPEN">
  <button class="flaeche" style="background: red;" ng-click="sendCmd('Garage', 'ON')">
    offen
  </button>
</div>

<div ng-if="itemState('FensterKueche_FensterZustand',true)==CLOSED">
  <button class="flaeche" style="background: green;" ng-click="sendCmd('Garage', 'ON')">
  zu!
  </button>
</div>

sihui · January 18, 2018, 4:49pm

Try 'OPEN' and 'CLOSED'

derhelge · January 19, 2018, 3:53pm

Okay this works, thx

alijaf · January 27, 2018, 4:16am

Here’s the example of what I have came up with.

bulletprooffool · February 9, 2018, 11:40am

Daniel - your weather looks great.
Do you mind sharing how you managed to get rid of the location serach box and wind speed indicators?

Thanks

CoooLdk · February 11, 2018, 6:02pm

Well here goes:

This is my start panel, with basic info about sensors etc. I will have to change the battery for one of my sensors soon…

First floor panel… pretty self explainatory?

And my ground floor panel, turns on all lights, and controls all color/ambiance on hue or individual light groups

Playlist selector for spotify…

Spotify web api code from pmpkk, which ive modified to get playlists and enable it to set shuffle on, and two users so my Spotify doesn’t get girlified by the mrs. music…

Spotify widget is 100% home grown…

Weather widget is some what home grown and some what from Current Weather widget

zbot473 · February 13, 2018, 2:03am

Can I see the code for the spotify widget, please?

CoooLdk · February 13, 2018, 4:50pm

shure… it ain’t pretty though…
the spotify items are hardcoded into it…

Spotify_Widget.widget-2.json (7.4 KB)

Sefina · February 19, 2018, 7:23pm

Hi at all,

I have copy this code and use this :

<div class="section">
	<div class="controls">
		<div class="widget.wide">
      
			<div class="controlGroup">
        <a href="#/view/Erdgeschoss">
				<div class="control" ng-class="{true: 'off'}[itemValue('Menu_page')=='Erdgeschoss']" ng-click="sendCmd('Menu_page', 'Erdgeschoss')">
          <svg viewBox="0 0 30 30"><use xlink:href="/static/Design01/Icons/girl_2.svg#setting-roll"></use></svg></div></a>
        <a href="#/view/Obergeschoss">
        <div class="control" ng-class="{true: 'off'}" ng-click="sendCmd('Menu_page', 'Obergeschoss')">
          <svg viewBox="0 0 30 30"><use xlink:href="/static/Design01/Icons/alarm.svg#pawn"></use></svg></div></a>
      </div>		
		</div>

	</div>
</div>

This not work, the icons cant see, the Butons dont find …

plz help

Yoinkz · February 21, 2018, 2:28pm

Your Camera “Icon” on the first page, is that just a “link” that opens another panel where you have some cams or? How does your setting looks like on that “button” in order to change the panel to another panel?

waspie · February 21, 2018, 3:19pm

wow! this looks simply awesome