Examples of HABPanel Solutions

(Benjamin) #271

Thanks to @pmpkk’s work, I was able to modificate his CSS style to my vision (and the requirements of my girlfriend: MORE COLORS :wink: ):

Overview Dashboard:

Living room:

Target temperature popup:

and of course, responsive design:

There’s still a lot more to do, but already awesome thanks to ppmk and @ysc. Especially the feature to poll every 10 secs the spotify and tv status, while being on the Living room view, is pretty cool. :slight_smile:


(Patrick) #272

This looks awesome!!!

Are the charts in the background of the panels real? :slight_smile:

(Hallo Ween) #273

Looks great!

Do you have some delay if you press one of the links on top to come to another page of your dashboard or is this with no delay?

Can you give me a link to the widget, to get this all with this small symbols inside one sqaure widget?

(Yannick Schaus) #274

Great work @bennYx0x and @pa1, you obviously have invested some time and it shows! :+1:

I suspect a lot of oher users would be interested in basing their own panels on your designs, since they look great, therefore you are very much welcome to open separate threads in this “HABPanel Examples” category (and perhaps create GitHub repositories to share your code).

It would be awesome for the community to have the opportunity to discuss them further, iterate on them and maybe even contribute back new stuff. After all you couldn’t have profited from @pmpkk’s work if he hadn’t done so! :wink:

(Benjamin) #275

Funny that you ask, because I also had that idea. :wink: Some days ago I played around with the python library Pillow to achieve that. I succesfully cutted out the datapoint curve from the grafana curve and joined my background. Got something like this:

The right color of the curve filling was not setted yet. I didn’t go further yet because

  1. Responsive Design makes this harder to realize while looking good
  2. I like the “mountain” graph more that I use right now. I know that in grafana you get such an outcome with a few datapoints and the spaces filled up with null values. But maybe this can be configured?

@halloween thanks! Nope I have no delay while switching pages. But I use href links instead of the habpanel feature to switch pages. Thats because the notebook Im working on has sophos antivirus installed, which (amongst other things) blocks the feature.

I can’t give you a link to any widget, but theres my code (which has a String item for changing pages anyway):

<div class="section">
	<div class="controls">
		<div class="widget.wide">
			<div class="controlGroup">
        <a href="#/view/System">
				<div class="control" ng-class="{true: 'off'}[itemValue('Menu_page')=='System']" ng-click="sendCmd('Menu_page', 'System')">
          <svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/Userinterface_setting-roll.svg#setting-roll"></use></svg></div></a>
        <a href="#/view/Badezimmer">
        <div class="control" ng-class="{true: 'off'}" ng-click="sendCmd('Menu_page', 'Badezimmer')">
          <svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/Household_pawn.svg#pawn"></use></svg></div></a>
        <a href="#/view/Flur">
        <div class="control" ng-class="{true: 'off'}[itemValue('Menu_page')=='Flur']" ng-click="sendCmd('Menu_page', 'Flur')">
          <svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/Household_door-2.svg#door-2"></use></svg></div></a>
        <a href="#/view/Schlafzimmer">
        <div class="control" ng-class="{true: 'off'}[itemValue('Menu_page')=='Schlafzimmer']" ng-click="sendCmd('Menu_page', 'Schlafzimmer')">
          <svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/Household_bed-2.svg#bed-2"></use></svg></div></a>
        <a href="#/view/Smarthome">
        <div class="control" ng-class="{true: 'on'}['1'=='1']" ng-click="sendCmd('Menu_page', 'Smarthome')">
          <svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/Household_sofa-2.svg#sofa-2"></use></svg></div></a>
        <a href="#/view/Wohnung">
        <div class="control" ng-class="{true: 'off'}[itemValue('Menu_page')=='Wohnung']" ng-click="sendCmd('Menu_page', 'Wohnung')">
          <svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/Buildings-01.svg#home"></use></svg></div></a>


@ysc thank you! Of course you’re right and I might do so as soon as I have time. The reason I didn’t yet is that it’s the first time I touched CSS and played with frontend frameworks. I started pretty late using responsive design strategies, which means most of my stuff can’t be used right out of the box.

(Hallo Ween) #276

Can i use this href-method to change the panels with a standard widget too?

Can you tell me, how i can do that? The long waiting time, when i switch panels the old way is annoying.

(Benjamin) #277

You need to use a template widget for this, since its html. (For template widgets examples see Template widget - tutorial & examples - make your own widget!)
Then you just have to wrap the part of your template that you want to be clickable to change pages:

<a href="#/view/Wohnung">
... the element which will be clickable and redirect ..

you can lookup the name of your view easily while browsing on habpanel:


(Hallo Ween) #278

I tried on my win10 computer, there is no time difference if i use one of the two methods. But on my tablet (new android 7, full hd) i get a lag, when switching panels.

Did you try the old style too? Do you get a lag too? And with the new style of changing panels you don´t get the lag?

I´m currently not at home, so i can´t try it myself, i don´t have my tablet with me.

(Benjamin) #279

Nope never had any problems.

(Marvyn Zalewski) #280

Hey Benny,

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

(Veagau) #281

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!

(-) #282

Hi @bennYx0x

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


(Christian Alexandersen) #283

Hi bennYx0x

Looks amazing :slight_smile:

Do you want to share your code?

(derhelge) #284

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.

(Hallo Ween) #285

Have a look here:

(derhelge) #286

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”.

(Hallo Ween) #287

? 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) #288

Another option is to use a template:

 .flaeche { 
    text-align: center;
    font-size: 12pt;
    border : 0;

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

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

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

(derhelge) #289

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.

 .flaeche { 
    text-align: center;
    font-size: 12pt;
    border : 0;

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

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

(SiHui) #290

Try 'OPEN' and 'CLOSED'