Custom Theme in HabPanel 2.1 Example

Tags: #<Tag:0x00007f6ce4fa2988> #<Tag:0x00007f6ce4fa2820> #<Tag:0x00007f6ce4fa2668>

(Unparagoned) #284

I had a PM asking about my harmony integration. I thought I’ll put the response here for others who want to integrate harmony. I’ve got it working so it automatically gets the keys for all the remotes, etc. There need to be some formatting but it’s useful to be able to control everything from one place.

Check out the ground floor widget

(salphonso) #285

Thanks for this. In the widget, what value should be use for the itemValue? I see you use harmonyActivity. Is that what everyone should use or is that where the item id would go? I am still getting familiar with the code and schema of everything. Only been on OpenHab for a little less than a week now.

(OltiDev) #286

Hi, I am getting error when trying to import widgets.
Can you please tell what can be the problem?

(Unparagoned) #287

So harmonyActivity is defined in my.items as

String HarmonyActivity "Activity"(gharmony) { channel="harmonyhub:hub:Master:currentActivity" }

In paper UI it’s default as harmonyhub_hub_Master_currentActivity, so you should just be able to use that if you hub is called Master.

So currentActivity shows you what your current activity is and if you send a command to it it will change the current activity.

If you are still figuring out what is what and what things are called, etc. Pop over the rest api interface, get all items, and then search for harmony and see what your activities, remotes are called, etc.

(salphonso) #288

@unparagoned - Thanks. That was it. I had the item HarmonyActivity but my hub is LivingRoom not Master and I didnt even think to check that Now I have everything working well minus a few glitches/user setup errors.

I hooked up my Volume up do to my Pioneer AVR via Harmony for the TV Panel but if Spotify is active it turns down my spotify device volume as well. Also, I can only click the first item on the input Icons. For you its the TV for me its the Netflix Icon. Still trying to figure that out but making progress and understanding thing more and more.

(Unparagoned) #289

I have the same setup. You’ll see some code where it detect the AVR device and uses the device volume rather than spotify.

(salphonso) #290

I saw the code in the spotify.rules and changed it up but it was still doing it. Restarted the service and that seems to have it cleared up.

How are you making the custom SVG files? I have a shield TV and use Plex and am trying to make svg files that will work like what you have for amazon, youtube, etc. All my attempts fail to load to icon. I basically took a png and converted it to a svg then copied that code into the appicons.svg and when I call it by the ID nothing shows. So, I’m assuming my failure is at the conversion part.

(Unparagoned) #291

The svg stuff is pretty much magic to me, every time I try and change anything to do with them they break. pmpkk designed the theme and the api, so will be your best port of call. From what I’ve seen you start from a SVG for most icons. I haven’t touched the app icons though. Have a look at the nvdia and plex sites to see if they have any svg’s under the developers section. pmpkk They did a pretty detailed write-up of how to create the svg sheet from the individual svg’s. They even made a script that does all the hardwork for you. So I would suggest trying out their script rather than copying and pasting.

(Aaron Khare) #292

Instead try using one of the SVG logos from here for nvidia: and the attachment is for the Plex icon (plus YouTube and Google Play Music) I made.

Here: AppLogos-Plex
Might need to remove the outline stroke colour in the SVG code though.

(salphonso) #293

Thanks. Plex icon worked perfect. I tried all kinds of things following the guide. Either the icons, no matter what size I download, end up to big or don’t show at all. CSS is not my strong point to say the least. I know enough to get by on it and this is the first time I have touched SVG files.

(Christian Alexandersen) #294

Hi Kubawolanin

This look nice - have you gone further whith this?


(salphonso) #295

Made some progress, learned how to scale SVG images properly and plenty of other stuff. Here are some Screen shots of what I have so far. Dynamic screen based on activity and have some future plans for deeper plex integration but that project will take some time if I can pull it off at all. One thing I can’t figure out is why it only shows 3 of my playlists and not all of them. I only have about 14 total. Some are mine some are followed. Of the 3 showing only 1 is mine.

(Mike Klein) #296

the images are not working for me (I know that those which are bought are not included) but it is only the Spotify which is visible. If I copy the link to that one to another place, it doesn’t show up

anybody with an idea?

(Adrian) #297


first of all thank you for the effort you put in this theme, i really like it.

Since i am new to this stuff, i have some trouble.

First i get this error when executing the svg combiner:

Processing file: x_paypal.png
Traceback (most recent call last):
File “”, line 74, in
xml = ET.fromstring(r.text)
File “/usr/lib/python2.7/xml/etree/”, line 1300, in XML
File “/usr/lib/python2.7/xml/etree/”, line 1640, in feed
self._parser.Parse(data, 0)
UnicodeEncodeError: ‘ascii’ codec can’t encode character u’\ufffd’ in position 0: ordinal not in range(128)

I used the folders stated and can access the icons through the webbrowser, but i don’t know what is wrong right now.


I installed the systeminfo binding and copied all examples in a systeminfo.items, but nothing gets shown in the system widget. I only see the desing but no values. Since so i haven’t edited the others for my needs.

Thank you for some help.

Greetings Adrian

(Patrick) #298

Looks like you have PNG files in the folder. You can’t combine PNG files into an SVG file.

(Adrian) #299

Oops yes, just extracted the whole file from squid. So the svgs are working now, but can you also give me a hint why systeminfo won’t get data?

(Patrick) #300

Can you see the system items in Paper UI or in the console?

(Christian) #301

@aletor Hi Alexandre

I’m still curious about any progress concerning the slider. :thinking:
I’ve also tried to implement the slider but the result was not satisfying :disappointed_relieved:

Thank you very much in advance.

(Florian Mulatz) #302

Hey Guys,

Maybe a really dumb question but I don’t get it :open_mouth:

I’ve one Group of Lights on my dining table and want to switch them as a group item. In the ground-floor widget there is the following declaration (of course updated with my own item/group names :slight_smile:)

 <div ng-repeat="item in itemsInGroup('gLivingRoom').concat(itemsInGroup('gDiningTable')) | filter:query as filtered"> 

As it is - i get every single Bulb of this group as a separate item. In my case it makes no sense to switch one of them. Therefore I want to - as mentioned - switch all of them at a time.

When I leave out the


then I only can see my light-strip but the dining-table (which is a group member of gLivingRoom) is missing. Is there anything I oversee?

BR & thx for any hint

(Pim Verschueren) #303


Great job, I love the panel. Just one question, I can’t get the playlist to load, what is the item name for the current playlist as spotify_current_playlist us not returning anything.