I have the same problem how did you solve it?
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 ?
anyone ?
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.
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
When installing the Spotify webconnect-api everything works but at point 7: Test spotify.py in SSH.
I receive the following error:
What can I do to solve this?
Thank you
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>
<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>
</div>
</div>
2 Likes
But you have to insert this in matrix-theme.css also?!
.section .sectionIcon.glow svg {
stroke: #26bf75;
fill: #26bf75;
stroke-width: 1px;
}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 ?.
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)
even if this means somehow hosting default widgets inside the newly defined code sets . .
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 bits.you might need to look round the git hub if there are items or rules you donāt have.
habpanel
<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>
</div>
</div>
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.now() - 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.now() - Date.parse($scope.itemValue('spotify_current_update_time')));
var modVal = new Date(value + Date.now() - 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:' + Date.now() + 'offset diff' + (Date.now() - 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 = Date.now();
offVal = Date.now();
},
onChange: function(value) {
$scope.stoggle = false;
offVal = Date.now();
},
onEnd: function(value) {
$scope.stoggle = true;
},
getTime: function() {
$scope.offsetTime = Date.now();
offVal = Date.now();
return Date.now();
}
}
};
$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 https://github.com/unparagoned/openhab_spotify-webconnect-api
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.
3 Likes
well,
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 ?
ā>
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 
first you should see a black background and an other font at the moment you insert it
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 
hello,
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.
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.
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 https://www.flaticon.com/free-icon/thermometer_134124# but couldnāt get anything to display on Habpanel at allā¦
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 ā¦
Ciao
Lorenzo
Thank for the tips - so thatās basically what Iāve been trying last night, but couldnāt get the icons to show.
Here is the SVG I came up with - by grabbing the section from the temperature icon I linked in the previous post.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<symbol id="drop">
<g>
<path d="M4,20 C4,13.7372206 9.31149107,10.9606699 15.0029824,1.68773079 C15.5,1 16.5,1 17.0240493,1.73848329 C22.7239959,11.0422428 28,13.7458429 28,20 C28,26.627417 22.627417,32 16,32 C9.372583,32 4,26.627417 4,20 Z M14.9662304,5.01303063 C12.6849824,7.94803148 7.55258291,15.1489689 7.43611882,15.3380026 C6.44520133,16.9463678 6,18.343598 6,20 C6,25.5228475 10.4771525,30 16,30 C21.5228475,30 26,25.5228475 26,20 C26,18.34381 25.5574243,16.9556938 24.5697394,15.3573542 C24.4844847,15.2193893 19.3264043,7.97081698 17.0502563,5.01835622 C16.4935872,4.29628389 15.5249676,4.2941722 14.9662304,5.01303063 Z M16,27.5447247 C16,28.0447247 15.2619671,28.0225103 14.9257293,27.9794225 C11.3214673,27.5175477 8.46745417,24.6572016 8.01523409,21.0499283 C7.98381871,20.7993338 7.95268975,20 8.45268973,20 C8.95268972,20 9.03600925,21.1280442 9.03600925,21.1280442 C9.50185782,24.1265527 11.8708617,26.4955566 14.8693702,26.9614051 C14.8693702,26.9614051 16,27.0447247 16,27.5447247z">
</path>
</g>
</symbol>
<symbol id="thermometer-3">
<g>
<path d="M236.896,38.375v12.854h-49.808V38.375H236.896z M216.009,66.389h-28.921v12.854h28.921V66.389z M187.088,107.257h49.808
V94.404h-49.808V107.257z M216.009,122.425h-28.921v12.854h28.921V122.425z M187.088,163.293h49.808v-12.854h-49.808V163.293z
M194.852,236.533c0,35.881-29.191,65.072-65.072,65.072s-65.072-29.191-65.072-65.072c0-23.252,12.211-44.384,32.134-56.074
V32.938C96.843,14.775,111.618,0,129.78,0s32.938,14.775,32.938,32.938v147.522C182.641,192.137,194.852,213.275,194.852,236.533z
M181.998,236.533c0-19.73-10.964-37.565-28.619-46.53l-3.515-1.787V32.944c0-11.08-9.01-20.084-20.084-20.084
c-11.073,0-20.084,9.004-20.084,20.084v155.272l-3.515,1.787c-17.655,8.972-28.619,26.806-28.619,46.53
c0,28.792,23.426,52.218,52.218,52.218S181.998,265.325,181.998,236.533z M171.291,236.533c0,22.886-18.619,41.505-41.511,41.505
c-22.886,0-41.505-18.619-41.505-41.505c0-18.76,12.674-35.232,30.823-40.058l2.384-0.636v-79.275h16.601v79.269l2.384,0.643
C158.624,201.301,171.291,217.78,171.291,236.533z M131.837,208.866c-0.99-4.396-5.411-7.288-9.917-6.26
c-15.733,3.56-26.723,17.32-26.723,33.465c0,4.569,3.721,8.291,8.291,8.291s8.291-3.721,8.291-8.291
c0-8.207,5.797-15.482,13.798-17.288C130.024,217.76,132.839,213.313,131.837,208.866z">
</path>
</g>
</symbol>
</svg>
I named the SVG as āsquidink.svgā to keep things simple - but when I reference #thermometer-3 from HabPanel there is no icon, yet #drop works fine.
Any tips on what iām doing wrong?
Hallo,
I just started a few weeks ago with HTML and CSS. this theme is a very nice example to play with multiple settings and to see in real what it does. but I canāt figure out where I can confiure how many rows it should display in one line. as a example whenever we have a lot of switches the will be displayed in three rows. for some reason I would like to have four rows or two. could someon give me a idea where I can find this in the CSS settings?
Thanks in advance.
Marcel