Examples of HABPanel Solutions

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


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


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

1 Like

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

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

Spotify_Widget.widget-2.json (7.4 KB)

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>


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

plz help

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?

wow! this looks simply awesome

its a “button” widget. the widget can be set to open another panel. i do exactly this. it opens the same panel that i have FKB ddisplay as a screensaver that we talked briefly about in another thread

Hey Waspie,

Yeah exactly - but I wasn’t sure if this just was a regulair button. Even though I want the dim function to show the panel with cams, i still want to be able to manually press a button and then go to the page.
But thanks :slight_smile: Will try it later :).

yeah, i have a button that takes you to the same cam page that displays as a SS. i didn’t find a separate brightness setting for the SS, though.

Cool. Okay that’s okay.
Do you know if it is possible to do autobrightness in FKB or does that needs to be controlled from the Android / tablet itself?

you can use the tablet’s autodimming, just disable the brightness setting in FKB (screen brightness - leave empty to disable)

Yup my camera icon just opens my “surveillance” page where i have a stats of when doors and window sensors etc have been triggered… :slight_smile:

@Sefina Can you provide your items for the spotify_playslists item and a copy of mymodalcontent?

<script type="text/ng-template" id="myModalContent.html">
    <div class="container" style="padding: 30px; border: 1px solid #456;">
      <a ng-click="$close()" class="pull-right btn btn-danger">X</a>
      <h3 style="color: white">Playlister</h3>
        <ul ng-repeat="i in $eval(itemState('spotify_playlists'))">

This is my media dashboard.



Is it possible you perhaps could share your PIR Widget?
How does it work? I have Xioami Motions / Window - Door sensors and would like to have something like you.

New to OH, what a learning curve, but I love it, here is my lighting screen.

Network screen, not sure where I’m going with this one yet.

Music screen also in progress. All the buttons are pure css, animated, and dynamic depending what’s happening.


That is a thing of beauty

1 Like

Looks awesome @gman!

On the whole we need to continue working towards a point where people can setup HABPanel like that without having to be a web developer… Because I’m not and it makes me sad seeing these panels which people have obviously put a lot of custom code into to get looking so good.