HABPanel RELOADED - THEME / SKIN + Custom Widgets

css
skin
theme
Tags: #<Tag:0x00007f1e5bf71748> #<Tag:0x00007f1e5bf71478> #<Tag:0x00007f1e5bf71310>
(G) #1

People have been asking me to share my theme so here it is.

Points to note:

  • I’ve only checked it on Chrome.
  • It’s very much work in progress, if I see any interest here, I will update it as I improve it.

Screenshots:

Screenshots on a Mobile in Portrait mode:

Downloads:

orange-tree-overrides.css (12.9 KB)

Last updated: 22nd December 2018

Move the .css file to \openhab2\conf\html\

In Habpanel settings, in the field “Additional stylesheet (optional)”, add “/static/orange-tree-overrides.css”

All done.

OPTIONAL STUFF:

Generic Media Control Widget:

Widgets for the MUSIC screen:
RELOADED - MUSIC - Now Playing Cover.widget.json (281 Bytes)
RELOADED - MUSIC - Artist Title Device.widget.json (379 Bytes)
RELOADED - MUSIC - Play Button.widget.json (736 Bytes)
RELOADED - MUSIC - Next Button.widget.json (175 Bytes)
RELOADED - MUSIC - Previous Button.widget.json (183 Bytes)
Last updated: 3rd May 2018

Colour Temperature dials

To get your colour temperature dials like mine, you have to do the following:
Set knob to Tron skin, and enable ranges, then set the following hex for each.

0-10 = #cbfbff
10-20 = #d4fcfe
20-30 = #e7ffff
30-40 = #f7ffff
40-50 = #ffffff
50-60 = #fff9e6
60-70 = #fff7da
70-80 = #fee9a6
80-90 = #ffe083
90-100 =#fed967
29 Likes

Examples of HABPanel Solutions
Custom Widget: Media Control + Image Art
Examples of HABPanel Solutions
Kodi inputaction
How to create and use a custom frontail theme
(Gad Ofir) #2

looks great thanks for sharing!

0 Likes

(davorf) #3

Hello!

Thank you for sharing your theme. I was wondering, what icon set do you use?

Best regards,
Davor

0 Likes

(G) #4

@davorf

I’m slowly making my own icons for it, as and when I need them. But the Phillips HUE icons are from: http://www.developers.meethue.com/documentation/icon-pack
I just modified the colour of them.

1 Like

(Felix) #5

Hello gman,

thanks for sharing.
css works fine.
I’m looking forward to import a json file of your HABPanel to customize this to my Openhab.
I like the way you display the Grafana graph and wish to use your MUSIC part exactly you have done it.
Also the other parts like lighting will be a very good start to get a smart idea how to get things done.

0 Likes

(G) #6

The elements making up the music player are all single template widgets. I could show examples in the thread, I don’t know any other way to share the widgets, or how to make them in to downloadable widgets.

0 Likes

(Alexander) #7

hello,

really a great theme!

i got a few questions:
what kind of colorpicker are you using at the first screenshot?
are the icons of the hue lamps switches?
do you use the dimmer for a group of lamps or one for each lamp?

yours alex

0 Likes

(Felix) #8

Hello @gman,

I think you could Export your hole Theme (without external data/pictures/etc.).
Go to the main properties and click on “Edit the local panel configuration (experts only)”
Then click on Export.

OR

Try to open http(s):///habpanel/index.html#/settings/localconfig

Haven’t really done it by myself but it should do the job…

0 Likes

(G) #9

@e36Alex

I’m using the standard modal picker colour changer below the colour temperature knobs, which are just standard knobs with the tron skin setting applied.

I’m using dimmers for both single lamps and some groups too. In the room the panel is in, it will have a dimmer for each bulb, while other rooms are set as groups.

@Felix_Raetz
Interesting, I will look in to it. Is there a way to extract just template widgets I’ve made as .json files, or a single dashboard screen like the music player?

Design is my area, I’m still to learn the inner workings of openhab.

0 Likes

(Felix) #10

@gman: I think at the moment there is no comfortable way to do this. But there are different ways to handle this.

  1. Share the whole Export. After people import all parts of your dashboard, they can delete what they don’t need.
  2. You can go deeper in the json source code and select just the part you want to or modify it (that’s the hint “experts ony” is for. :wink:
  3. If you don’t want to share your whole OpenHab design, and don’t want do get deep into the json file. You could create a !BACKUP! of your cool Dashboard. Export of your dashboard shoud do the job. After having a Backup, you could delete all parts you don’t want to share. Now you could export it and share it. Restore (import json) you Dashboard.
  4. There are two different locations how HabPanel saves configurations/dashboards. Stored directly on your Server or as a local configuration. You can see it in the main configuration: “Local configuration” or “Panel configuration”. If you use “Panel configuration” (Server) than you can switch to “Local configuration”. Now you have a local copy of your dashboard. Delete all the parts, you dont want to share. Export and share. Switch back to “Panel configuration”.
  5. Export all and send it to me. I will modify it like you want wand to share it.
0 Likes

(shane kevin) #11

Really nice looking theme!
A chart question, did u use built in n3 chart or just a grafana chart?

0 Likes

(G) #12

@Felix_Raetz
Thanks, I’ll have a look at the JSON export in detail and cherry pick out the relevant parts to share.

@kevinshane
All my charts are grafana.

0 Likes

(G) #13

I’ve uploaded the music json file, let me know if it looks the same as mine does after importing.

0 Likes

(Felix) #14

Oh, there is an error when importing the file “Problem while importing: SyntaxError: JSON Parse error: Property name must be a string literal”

0 Likes

(G) #15

I thought the plan was, you highlight the code in the json file and then paste it in and merge with your own dashboards. If you create one called music, then you can replace the necessary part and save, no?

0 Likes

(Felix) #16

OK, that’s great.

Just a few curly and square brackets at the end.
I will try to implement it and will give an update, soon.

MUSIC_DASHBOARD.json (7.4 KB)
MUSIC_DASHBOARD.json

0 Likes

(Felix) #17

Without changing anything it looks like this:

0 Likes

(G) #18

The way I have it set is really only going to work on 1920x1080, so you’ll need to remove, or move about elements for smaller panels.

Broken images are there because they’re currently set to Spotify and Chromecast Audio items for my own setup.

You can replace these with your own items for image art from Spotify, or whichever your player is. Then modify the following areas in the template widgets.

{{itemValue('spotify_current_cover')}}

You’ll need persistence setup too, so it won’t show broken images and N/A when your music player isn’t active.
Persist the following items for the music screen:

spotify_current_track, spotify_current_artist, spotify_current_cover, spotify_current_device            : strategy = everyChange, restoreOnStartup 
Chromecast_Audio_IMAGE, Chromecast_Audio_ARTIST, Chromecast_Audio_TITLE, Chromecast_Audio_APP_NAME      : strategy = everyChange, restoreOnStartup
0 Likes

(G) #19

@Felix_Raetz

I’ve updated the CSS and reduced the button sizes so you should be able to fit more in there now.

I’ve made a lot of other tweaks in the CSS too.

0 Likes

(Rot Ulet) #20

Hi,
very nice views !
How did you make the climate panel? to have the house and sun illumination?

0 Likes