This looks awesome!!!
Are the charts in the background of the panels real? 
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?
Great work @bennYx0x and @pa1, you obviously have invested some time and it shows! 
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! 
2 Likes
Funny that you ask, because I also had that idea. 
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
- Responsive Design makes this harder to realize while looking good
- 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>
</div>
</div>
</div>
</div>
@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.
2 Likes
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.
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 ..
</a>
you can lookup the name of your view easily while browsing on habpanel:
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.
Nope never had any problems.
Hey Benny,
this looks really awesome. How did you managed to get it up and running?
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!
Hi bennYx0x
Looks amazing
Do you want to share your code?
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.
Have a look here:
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”.
? 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.
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>
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>
Try 'OPEN' and 'CLOSED'
Okay this works, thx