Matrix Theme for HABPanel

Hi,
I like also the glowing battery icon you did.
Any hint how that one can be done

@pmpkk, I got stucked at step 5.
I did first 4 steps completed successfully. Then how to move it further.
Give the client id and secret to OpenHab
Save the Client ID to spotify_client_id in OpenHab (e.g. through openhab CLI smarthome:update spotify_client_id {your_id})
Copy the Client Secret to spotify_client_secret in OpenHab (e.g. through the rest API)
Here how to give Client ID to spotify_client_id and Client Secret to spotify_client_secret in openhab.
Please guide me how to move forward it.

1 Word:

Waauw !

now an interface for the app like this :wink:

3 options:

1, use REST UI:

Make sure you have the REST UI installed (it’s an add-on), then go to the REST UI, and set the state:

http://demo.openhab.org:8080/doc/index.html

2, REST CURL

3, use CLI (command line interface):

http://docs.openhab.org/administration/console.html

command is:

smarthome:update spotify_client_id {your_id}

Hope this helps!

2 Likes

The theme is responsive so it looks great on my phone :slight_smile:

I uploaded a new version of the theme into GitHub with detailed instructions on how to install, create the SVGs, etc.:

Hope this helps. Let me know if you have more questions or suggestions for improvements!

9 Likes

@pmpkk Thanks a lot Patrick! i appreciate the time and effort!..
Cheers from Colombia!

Hey Patrick,

i really like your theme.

I want to integrate the svg icons from here:

https://www.materialdesignicons.com/

But to be honest: svg is yet not my friend. Could you give me a little advice how to embed this icons?

Cheers,Nic

Sorry for the noobs question, but your guide says:

7. Test spotify.py in SSH
* Set the REDIRECT_URI in spotify.py to the right value
* Run this in terminal /usr/bin/python /etc/openhab2/scripts/spotify.py

How do I find my REDIRECT_URI?

Thanks so much for sharing! :slight_smile:

The redirect uri is the full URL of the location of this page:

http://openhabianpi.local:8080/static/spotify-auth.html

But this depends on the IP or domain name of your set up. In the example above, openhab runs on a Raspberry Pi and this is the default domain name.

You may replace “openhabianpi.local:8080” with the domain of your openhab instance.

Makes sense?

1 Like

Hi @pmpkk

As others have said this looks awesome. My only constructive criticism so far would be to ask you to exploit the use of config items in your custom widgets so that it is not all hardcoded.

That’s a really good idea. When I have some extra time, I’ll definitely do that.

One question – my main concern about the HabPanel gridster system is that it doesn’t support response design. I want to access my panels from desktop, tablet and phone and I want it to look great on all. Do you know if there is a way to make that work with HabPanel widgets?

That would be a question for @ysc I believe.

Gridster has some options for that: mobileModeEnabled / mobileBreakPoint which basically merge all columns into one if the width is less than the breakpoint, but I found them to be problematic (random spaces between widgets) so I’ve left it disabled.

I now realize they could be added as “experimental” options in the dashboard settings dialog however, with no guarantees of giving good results - there are already a bunch of those - number of columns, spacing between widgets, font scaling etc.

I’ll keep it in mind.

Cool, I’ll be happy to play and test them out when ready.

What about dynamic height of the widgets? It would be important for the height be adjustable automatically based on content.

Thanks! :slight_smile:

I get an error:
$ /usr/bin/python /etc/openhab2/scripts/spotify.py
Successfully got state from OpenHab: spotify_client_id
Successfully got state from OpenHab: spotify_client_secret
Successfully got state from OpenHab: spotify_access_token
Successfully got state from OpenHab: spotify_refresh_token
Successfully got state from OpenHab: spotify_token_issued
Successfully got state from OpenHab: spotify_token_expiry
– Calling Token Refresh Service
Successfully got state from OpenHab: spotify_auth_code
– Calling Token Service for the first time
– Calling Service: Update
{
“error”: {
“status”: 401,
“message”: “Invalid access token”
}
}
-> Item node missing from response :frowning:

I didn’t know how to do check the check this point, maybe it has something to do with this:

Check that the spotify_auth_code is set in OpenHab?

Looks like it can’t get the token for the first time. I added some error handling to spotify.py. Can you get the latest version and try again?

I made it work, thanks:

First I got;

$ /usr/bin/python /etc/openhab2/scripts/spot                                                      ify.py
Successfully got state from OpenHab: spotify_client_id
Successfully got state from OpenHab: spotify_client_secret
Successfully got state from OpenHab: spotify_access_token
Successfully got state from OpenHab: spotify_refresh_token
Successfully got state from OpenHab: spotify_token_issued
Successfully got state from OpenHab: spotify_token_expiry
-- Calling Token Refresh Service
 -> Error refreshing token:{u'error_description': u'Invalid client secret', u'er                                                      ror': u'invalid_client'}
Successfully got state from OpenHab: spotify_auth_code
-- Calling Token Service for the first time
 -> Error getting token:{u'error_description': u'Invalid client secret', u'error                                                      ': u'invalid_client'}
-- Calling Service: Update
{
  "error": {
    "status": 401,
    "message": "Invalid access token"
  }
}
 -> Item node missing from response :(
Successfully posted state to OpenHab: spotify_lastConnectionDateTime = 2017-07-1         

Then I updated the client id and secret, and then it worked :smiley:

Done:

Actually when in mobile mode, the widgets don’t have a height fixed by the grid anymore - this was one of my gripes with this mode but it’s a good thing in your case.

Demo: http://imgur.com/QqY0Fz2

1 Like

Cool, thanks!