Hello,
I’m using this theme a while now an desided to make a change for the playlists, for Spotify and Sonos also.
I change it from buttons to a dropdown menu.
This is working fine, but since the sonos is at the bottom, I would like to have the menu go upwards.
My html and css skills are good enough to make some simple changes but have no idea how to do this.
Is there someone who knows how to do this?
Thanks!
Edwin
Hello forum,
I can’t display the % value of the particular battery status in my group 
I tried item.status, item.value … without success. What do i do wrong?
<div class="title">Batteries</div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gBattery')">
<div class="widget wide" ng-if="itemValue(item.name)>='90'">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#charging-3"></use></svg></div>
<div class="name">{{item.label}}</div>
<div class="valueGroup">
<div class="value">{{item.value}}%</div>
</div>
</div>
</div>
no feedback at all
Have you tried itemValue(item.name)?
yes. it returns only the name of the item
EDIT: did a quick spike and seems as below is working
<div ng-repeat="item in itemsInGroup('Lights')">
<div class="widget wide" ng-if="itemValue(item.name)>50">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#charging-3"></use></svg></div>
<div class="name">{{item.label}}</div>
<div class="valueGroup">
<div class="value">{{itemValue(item.name)}}%</div>
</div>
</div>
</div>
@wiewior - please note you probably have to remove apostrophe in >='90' so >=90.
With the code above I can see which (dimmer) lights are turned on more than 50% …
This can not work. There is a loop for going through all of the sensors in the group. So I need to refer to the each of the item.name and its value. Somehow it does not work and I do not know how to debug this kind of code…
Hi I’m starting to dip my toes into a fancier Habpanel but I’m getting this error when using the svg-combiner script
Processing file: Squid_Ink_License.pdf
200
Traceback (most recent call last):
File “svg_combiner.py”, line 74, in
xml = ET.fromstring(r.text)
File “/usr/lib/python2.7/xml/etree/ElementTree.py”, line 1311, in XML
parser.feed(text)
File “/usr/lib/python2.7/xml/etree/ElementTree.py”, line 1657, in feed
self._parser.Parse(data, 0)
UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position 10-13: ordinal not in range(128)
I’m really not sure how to fix this…yet.
Using Ubuntu 19.10 with both python 2.7.x and 3.7.x installed
EDIT also tried it with the pdf file removed…different error
Processing file: svg_combiner.py
200
Traceback (most recent call last):
File “svg_combiner.py”, line 74, in
xml = ET.fromstring(r.text)
File “/usr/lib/python2.7/xml/etree/ElementTree.py”, line 1311, in XML
parser.feed(text)
File “/usr/lib/python2.7/xml/etree/ElementTree.py”, line 1659, in feed
self._raiseerror(v)
File “/usr/lib/python2.7/xml/etree/ElementTree.py”, line 1523, in _raiseerror
raise err
xml.etree.ElementTree.ParseError: syntax error: line 2, column 0
Hi @Nognog,
Very good work! I’d be happy if you would share your configuration with me. I’ll send you a PM.
Also thanks to @pmpkk for the theme!
Never mind figured it out
I’ve downloaded the icons package (thesquid) but I’m missing some usable icons for co2/hPa and such values. What’s the easiest way of achieving this being a complete n00b regarding SVG files. I’ve added some svg’s I’ve downloaded from random libs on the internet but they’re completely off size wise or just doesn’t show up at all…are there some parameters I need to fix/edit in inkscape or ?
hi guys,
does someone know, why there is a movement of the “icon on” and “icon off”?
thank you
I edited the python script to be working with python 3 and to read from your hard drive instead of the webserver.
The script will just convert all svgs in the selected folder. Just make sure to replace the mypath and the outputPath accordingly.
Credits go to pmpkk of course 
import json
import requests
import time
import sys
from os import listdir
from os.path import isfile, join
import xml.etree.ElementTree as ET
t1 = time.time()
symbol_count = 0
mypath = '/Path/to/your/svgs'
outputPath = '/export/path/for/squidink'
onlyfiles = [f for f in listdir(mypath) if isfile(join(mypath, f))]
ET.register_namespace("","http://www.w3.org/2000/svg")
top = ET.Element('svg', attrib = { 'version':'1.1', '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"})
comment = ET.Comment('Generated by SVG-Combiner')
top.append(comment)
for file in onlyfiles:
if(file[:1] != '.'):
print ('Processing file: ' + file)
f = open(mypath + '/' + file,'r')
r = f.read()
if(len(r)>0):
xml = ET.fromstring(r)
for child in xml:
if(len(child.getchildren())>0 and 'id' in child.attrib):
for node in child.findall('.//*[@fill]'):
if ('stroke' in node.attrib): node.attrib.pop('stroke')
if ('stroke-width' in node.attrib): node.attrib.pop('stroke-width')
#print child.attrib['id'], ET.tostring(child,encoding='utf8', method='xml')
top.append(child)
symbol_count = symbol_count + 1
print (" --> added " + child.attrib['id'])
f.close()
f = open(outputPath + '/squidink.svg', 'w')
f.write(ET.tostring(top,encoding='unicode', method='xml'))
f.close()
t2 = time.time()
print ("Done in " + str(t2-t1) + " seconds " + str(symbol_count) + " symbols created")
Sorry for getting back to this old post. I’m using the Matrix CSS, but have some legacy dashboards, that I created in the built-in habpanel way.
I’d now like to change the color of all SVG icons via the global CSS file and struggle to find the solution. Any hint on where to put the CSS code into the CSS file?
Thank you!
Hi Michael
This topic is an oldie but a goodie.
I just wanted to know where you got the ‘light-bulb’ icon as i can’t seem to find it in the squidink svg files?
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#light_bulb"></use></svg></div>In the original file is says: “/static/matrix-theme/matrixicons.svg#light_bulb”
Hello
I have some trouble with this code:
<div class="section" ng-init="hueColors = [ { hsb: '0,0,100', hex: '#fff' }, { hsb: '74,78,100', hex: '#fecc2f' }, { hsb: '46,100,100', hex: '#f9a228' }, { hsb: '26,100,100', hex: '#f6621f' }, { hsb: '0,100,100', hex: '#db3838' }, { hsb: '273,100,100', hex: '#a363d9' }, { hsb: '201,100,100', hex: '#40a4d8' }, { hsb: '177,100,100', hex: '#33beb8' }, { hsb: '140,100,100', hex: '#b2c225' } ]">
<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg></div></div>
<div class="title"><div class="name">Lights</div><div class="summary">ON: {{ ( filtered | filter: { state: 'ON' } ).length + (itemsInGroup('gLicht') | filter:{type:'Dimmer', state:'!0'}:true).length}} of {{filtered.length}}</div></div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gLicht') | filter:query as filtered">
<div class="widget" ng-if="item.type=='Color' && itemValue(item.name)=='0,0,0'" ng-click="showHueSelect = !showHueSelect">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
<div class="name"><div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name) + ')'}"></div><div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div><div class="hueSelectOptions"><a href="" ng-click="sendCmd(item.name, '0,0,0')"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#cross-line"></use></svg></a><a href="" ng-click="sendCmd(item.name, color.hsb)" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></a>
</div></div>{{item.label}} {{itemValue(item.name)}} %</div>
</div>
<div class="widget" ng-if="item.type=='Color' && itemValue(item.name)!='0,0,0'" ng-click="showHueSelect = !showHueSelect">
<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
<div class="name"><div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name) + ')'}"></div><div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div><div class="hueSelectOptions"><a href="" ng-click="sendCmd(item.name, '0,0,0')"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#cross-line"></use></svg></a><a href="" ng-click="sendCmd(item.name, color.hsb)" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></a>
</div></div>{{item.label}} {{itemValue(item.name)}} %</div>
</div>
<div class="widget" ng-if="item.type=='Switch' && itemValue(item.name)=='OFF'" ng-click="sendCmd(item.name, 'ON')">
<div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
<div class="name">{{item.label}}</div>
</div>
<div class="widget" ng-if="item.type=='Switch' && itemValue(item.name)=='ON'" ng-click="sendCmd(item.name, 'OFF')">
<div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
<div class="name">{{item.label}}</div>
</div>
<div class="widget" ng-if="item.type=='Switch' && itemValue(item.name)=='NULL'" ng-click="sendCmd(item.name, 'ON')">
<div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
<div class="name">{{item.label}}</div>
</div>
<div class="widget" ng-if="item.type=='Dimmer' && (itemValue(item.name)=='ON' || itemValue(item.name)>'0')">
<div class="icon on" ng-click="sendCmd(item.name, 'OFF')"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
<div class="control" ng-click="sendCmd(item.name, +itemState(item.name)+10)"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#top-arrow-2"></use></svg></div>
<div class="control" ng-click="sendCmd(item.name, +itemState(item.name)-10)"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
<div class="name">
{{item.label}} {{itemValue(item.name)}} %
</div>
</div>
<div class="widget" ng-if="((item.type=='Dimmer' && (itemValue(item.name)=='0' || itemValue(item.name)=='OFF')) || (item.type=='Group' && (itemValue(item.name)=='OFF' || itemValue(item.name)=='NULL')))">
<div class="icon off" ng-click="sendCmd(item.name, 'ON')"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
<div class="control" ng-click="sendCmd(item.name, +itemState(item.name)+10)"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#top-arrow-2"></use></svg></div>
<div class="control" ng-click="sendCmd(item.name, +itemState(item.name)-10)"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
<div class="name">
{{item.label}}
</div>
</div>
</div>
</div>
Dimmer and switches are working fine. I have problems with the color lights:
Since I took so much inspiration from this forum I’d like to share my own result.
Essentially it’s based on the matrix template with only minor modifications …
Many of my devices are battery powered. I still do not trust those Z-wave devices 100% therefore regularly check for the last battery update. In case the update is older than 24 hours the icon get’s coloured in red as a warning of a potential offline-state.
The weather widget I did by myself (almost everything else is picked from somewhere …). Sun Position comes from < Show Current Sun Position and Shadow of House (Generate SVG)>
S-Bahn schedule comes from < [https://knx-user-forum.de/forum/supportforen/openhab/901885-deutsche-bahn-monitor-denkanstöße-gesucht/page2]
Calendar : < [Solved] Show Google Calendar Events in HabPanel/Sitemap - CalDav Personal - Openhab 2.4>
Neato Botvac: < Neato BotVac Vacuum Cleaner Widget for HABPanel>
Solvis Heating: < [SOLVED] SOLVIS Heating>
Obviously there’s still much to be done. Camera’s shall be added, attendance record based on wifi-login, email notifications … maybe adding the SmartTV …
As it seems I’ll be grounded (Corona / Covid-19) for a couple of more weeks so I’m positive for some good progress …
Hey, first off all this theme is awesome. Since I found it two weeks ago I’m working on implementing it to my home. I have a fair knowledge with openhab but I’m not very good with rules, I do use rules but with a lot of trial and error, and I’m a total noob with habpanel custom widgets.
At this moment I’m stuck with the LG TV binding at displaying the curent channel. Here is a screenshot, I don’t have the icons yet.
The problem is that the channel item seems to be a list of all my channels and not the curent channel. The item looks like this in paper ui
This is the item configuration
String LG_TV0_Channel "Channel [%s]" { channel="lgwebos:WebOSTV:tv1:channel" }
And this is the part of the widget code
<div class="name">Channel<div class="value">{{itemValue('LG_TV0_Channel')}}</div></div>
Is there a whey to display what I selected in blue color on the widget and not the full list?
I forgot to mention I use the 2.5.6 LG webOS Binding
Cheers!
