Custom Theme in HabPanel 2.1 Example

Tags: #<Tag:0x00007f6ce3059b58> #<Tag:0x00007f6ce3059a18> #<Tag:0x00007f6ce30598d8>

(Marco Schnubel) #324

Delete stroke="#000000" complete and see what happens.

The buttons problem should be solved if you click them for the first time.

(K4nape) #325

My buttons, so big :confused: i don’t undarstand.
I delleted, but nothing.

(Stefano Bordini) #326

I have the same problem how did you solve it?

(wolf_from_the_north) #327

Same problem here , followed tutorial as i wanted to start with this dash board but then it gave me following error.

Widget import error: SyntaxError: Unexpected token < in JSON at position 6

anyone same problem ?

(wolf_from_the_north) #328

anyone ?

(OltiDev) #329

Using Notepad++ open the file you want to install and copy the content, go to New Widget and paste the content on the New widget and you will get the widget.

(wolf_from_the_north) #330

OK supper , i will try that tonight, i followed the instructions on the Github page so now i know what went wrong.
thank you for informing me.

kindest regards

(Kevin van Luijtelaar) #331

When installing the Spotify webconnect-api everything works but at point 7: Test in SSH.
I receive the following error:

What can I do to solve this?

Thank you

(shane kevin) #332

Answered my own question, after lots of googling, here we are:

<div class="sectionIconContainer">
    <div class="sectionIcon glow" ng-if="itemValue('gLiving')=='ON'">
      <svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg>    
    <div class="sectionIcon" ng-if="itemValue('gLiving')=='OFF'">
      <svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg>    

(Marco Schnubel) #333

But you have to insert this in matrix-theme.css also?!

.section .sectionIcon.glow svg {
stroke: #26bf75;
fill: #26bf75;
stroke-width: 1px;

(wolf_from_the_north) #334

Hello All,

can i make 1 sugestion as i have been searching 3 days now how to configure this.
is there someone that can update the manual on the github page to contain correct + complete information from scratch ?
I believe that people who never worked with happanel before will not be able to use this.

Me personal i got so far to create a dashboard and link the css + load the widgets from the github page but uppon editing the widgets i’m stummed with what to change exactly to get something to work.

Also i have no idea what that css does , i do not see anything different ?.

(Alan van Wyk) #335

Quick question,

CSS / HTML / Angular are not really my strength,
I am trying to recycle built in widgets (e.g. the swimlane / timeline widget) and use them together with a matrix theme based panel.
Is there a way to get these to shift and rezise as the Matrix theme panels change size?
I appreciate that some config maty be required - for now I will be happy for the widgets to simply never overlap.
(pretty please)

(Alan van Wyk) #336

even if this means somehow hosting default widgets inside the newly defined code sets . .

(Unparagoned) #337

I finally got a decent slider for spotify. It uses js for progress so you don’t need to hammer spotify’s servers for updates every second. It lets you drag the time anywhere. It shows current and end times in min:sec.

My python skills meant I forked the api which means you may need to do a bit of work to get this working with your setup.

It’s a bit of a mess but it works. Here are the key might need to look round the git hub if there are items or rules you don’t have.


 <div class="playback" oc-lazy-load="['/static/js/spotifySlider.js']" >

            <div ng-app="spotifySlider">

              <div ng-controller="MainCtrl" class="wrapper">
                <div class="name" ng-init="stoggle=true" ></div>
                <div ng-model="slider_callbacks.options.ceil=itemValue('spotify_current_duration')"></div>
                <div ng-if="stoggle!=false" ng-model="slider_callbacks.value=itemValue('spotify_current_progress')"></div>
                <div ng-if="stoggle==false" ng-init="slider_callbacks.value=itemValue('spotify_current_progress')"></div>
                <rzslider  rz-slider-model="slider_callbacks.value"
                          rz-slider-options="slider_callbacks.options"  ng-click="sendCmd('spotify_current_progress',slider_callbacks.value)"></rzslider>
here is the js it's a complete mess with lots of fat you can remove

var app = angular.module('spotifySlider', ['rzModule', 'ui.bootstrap']);

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {

    $scope.slider_callbacks = {

        value: "1",
        offVal: new Date( - Date.parse($scope.itemValue('spotify_current_update_time'))),

        options: {
            floor: 0,
            ceil: $scope.itemValue('spotify_current_duration'),
            step: 1,
            translate: function(value) {
                if (value == null || value == 0) {
                    return value;
                offVal = new Date( - Date.parse($scope.itemValue('spotify_current_update_time')));
                var modVal = new Date(value + - Date.parse($scope.itemValue('spotify_current_update_time')));

                if ($scope.itemValue('spotify_current_playing') == 'OFF') {
                    modVal = new Date(parseInt(value));
                    console.log('Paused value:' + value + 'and modVal' + modVal + 'for state' + $scope.itemValue('spotify_current_playing.state'));

                if (value === $scope.itemValue('spotify_current_duration')) {
                    console.log('Translate ceil value:' + value);
                    modVal = new Date(parseInt(value));
                    console.log('Translate ceil value:' + value + 'and modVal' + modVal);
                //console.log('value :' + value + 'now:' + + 'offset diff' + ( - Date.parse($scope.itemValue('spotify_current_update_time'))) + 'offVal: ' + Date.parse($scope.itemValue('spotify_current_update_time')));

                var minutes = Math.floor(modVal / 60000);
                var seconds = modVal.getSeconds(); //(value / 10000) % 60;
                var out = minutes + ":" + ("0" + seconds).slice(-2);
                //console.log('value:' + value + 'seconds' + seconds);
                console.log('Time log value:' + out);
                return out;
            onStart: function(value) {
                $scope.stoggle = false;
                $scope.offsetTime =;
                offVal =;
            onChange: function(value) {
                $scope.stoggle = false;
                offVal =;
            onEnd: function(value) {
                $scope.stoggle = true;
            getTime: function() {
                $scope.offsetTime =;
                offVal =;


    $scope.slider_volume = {

        value: $scope.itemValue('spotify_current_volume'),
        toggle: true,
        options: {
            floor: 0,
            ceil: 100,
            step: 1,

            onStart: function(value) {
                $scope.slider_volume.toggle = false;
            onChange: function(value) {
                $scope.slider_volume.toggle = true;
            onEnd: function(value) {
                $scope.slider_volume.toggle = true;



Hopefully you can find anything you need here
I really should have learnt how to add to the main project rather than forking off. IF I have time I might look to see if I can merge it all together.

(wolf_from_the_north) #338


its clear that i cannot get this to work at all without help so if some could please help me getting the basic ,???
currently all i can get when configuring according to the git page is the following.
i added some icons as i have the line package icons set --> followed tut to create a squidink.svg
adjusted the custom widgets with my items etc …
added the matrix-theme.css in the /html/matrix-theme/ folder of my openhab install.
i have openhab 2.2 running on a synology.
i tried playing with the width of the widgets to but without result.
when starting from scratch how do you create a dashboard ? i clicked on new dashboard and then it asks via a slider how many colums ? what to set there ?


(Marco Schnubel) #339

I am sorry to say that, but you have fundamental problems with habpanel. The problems you describe, are not problems with the theme.
I think you should read here and here to learn about habpanel.
You should try to understand habpanel itself in “normal” mode and after that you can try setting up this theme.

The github page is complete, and there is everything you need to set up.

I agree with you -> once again -> try to understand habpanel first

There are a lot of differences to see :wink: first you should see a black background and an other font at the moment you insert it :wink:

You do it the correct way. No matter how many colums you use, that are only “dashboards” and have no impact on the screens you see in first post.
I am really sorry repeating myself, but learn and try to understand habpanel first :worried:

(wolf_from_the_north) #340


thank you for replying.
I have read the manuals you send me from the doc pages and habpanel does make more sence now to me.
Reading the manual on the page of this theme i still have some questions as there are more files to download there then described in the manual.
the file matrix.js & jquery-3.2.1.min are not needed then ?

1: i created the map on my openhab install openHab/conf/html/matrix-theme --> first difference there is that in the manual the install directory is different /etc/openHAB while mine is on volume1/@appstore/openHAB
2: i copied the files like said on the manual to there + the fonttypes
3: i bought the icons from the squidink ( line icons )
4: i created a file in the theme directory squidink.svg and added the code from the icons to test ( fox ex. thermometer-3 )
5: i imported the custom widgets directly from the githubpage via the habpanel wizard to add custom widgets.
6: i edited the custom widgets code to contain my items for weather and temperatures
7:i created new dashboards for every widget i want to use and put the slider to 1 to get them arranged verticaly
8:i went to advanced settings and entered the link like in the manual /static/matrix-theme/matrix-theme.css at the aditional stylesheet.
9:i opened the home dashboard i created in edit mode and added the custom widget home to it.

10: problem , same result as before.

i am beginning to think that this theme is made for a install on a raspberry pi and not a syno install.

(wolf_from_the_north) #341

For the record i do indeed get a black background but for the rest nothing happens.
which means i’m doing something wrong or i don’t get the template’s coding.

this is what i got following exact instructions and activating the home widget.

(Realroywalker) #342

Has anyone made an SVG comprising of free icons that works with this theme ?

I tried to get custom icons working most of the night and failed with most of them, I did get some working from the smart house icon set, but they didn’t look great.
Example - I tried using this one but couldn’t get anything to display on Habpanel at all…

(Lorenzo Giordano) #343

Download the flaticon as SVG sprite.
Edit the svg file downloaded with a text editor ad follow:
Remane the id after the tag as you like.
Each SVG i con is a stringe between and tags.
Take the theme SVG file end edit with text editor…replace or add the
previous download ed stringe between and and save.

That’s all very easy …