Hi!
Unfortunately it did not work …
I changed both things you mentioned.
The Rule is still not executed.
And REST-Api says GrFarblicht is NULL.
It is working now, even if i don’t know why.
I thought: I won’t come further with this issue alone so i’ll do something else.
In my openHab log my hue bridge always got recognized (every 10 seconds) so i wanted to solve this.
I changed the bridge name to the SN (that was recognized via paperui) and hoped i will get rid of the discovery every ten seconds.
It worked. i got rid of it and now everything works fine.
I think something was stuck although everything seemed to work …
Glad it’s running now at least 
Thanks for your support, unparagoned!
Now it’s time to dig deeper into HTML since some divisions do look nice on my laptop but not on my phone.
Can someone help with this part of the code? -
ON: {{ ( filtered | filter: { state: ‘100’ } ).length }} of {{filtered.length}}
I need to filter state to any number more than 0. F.e state: >=0. Any ideas how to properly format this ?
Hi! I have a problem with the tagging of the svg-sections:
I need to use a string-value to be able to include svg’s-dynamically.
<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#{{itemValue('CommonId')}}"></use></svg></div>
does not work for me.
when i include it with <img src it works with the variable.
Can i get it working whit the hashtags?
I tried the following which worked. From a quick google search it seems like xlink:href is old and on it’s way out, so using href should be fine but there may be some backwards compatibility issues.
<div class="icon on"><svg viewBox="0 0 48 48"><use href="/static/matrix-theme/squidink.svg#{{itemValue('testRegexString')}}"></use></svg></div>
Hi! I also read that it’s outdated but i decided to stick with it in the first place because i also was afraid of potential backwards compatibility issues.
Unfortunately just using href instead of xlink:href doesn’t work for me either. If i don’t use the xlink no icon is displayed at all. When i use xlink i get the following:
I think it’s a problem with the tagging (#) so that the itemValue (which is a string) is not integrated correctly … Unfortunately i’m not skilled in programming html at all so i was hoping to get some feedback here 
But anyways, thanks a lot unparagoned!
Edit:
Just read that Safari is the problem … Still present in the latest version - oh boy …
when i use href (instead of xlink:href) and try it with firefox it works - even with the itemValue.
I tried to define href AND xlink:href but it’s causing the image i posted - even in firefox.
Is there a workaround?
This is absolutely really really cool!
Is one of the linked json files also for the Astro Widget?
Sorry I’m not skilled at all, but do I also need to download the css file and then place it where?
Long time ago… All should be there
Hi,
I have a problem with my downloaded svg sprote file.
If i put a icon from the svg into the widget it have not the color green like the icons from matrixicons.svg it haves a terrible yellow. Have anybody an idea what the problem is?
Here a screenshot of the yellow icon and the green appl icon.
and here the yellow icon data from the svg-file.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="drop" viewBox="0 0 248.151 248.151"><title>drop</title><path d="M134.475,8.551c-6.8-11.6-14-11.2-20.8,0c-31.2,46.4-78.4,116-78.4,150.8c0,24.4,10,46.8,26,62.8s38.4,26,62.8,26 c24.4,0,46.8-10,62.8-26s26-38.4,26-62.8C212.875,124.151,165.675,54.951,134.475,8.551z M188.075,198.951 c-6.4,10.4-15.6,19.6-26.8,26c-5.2,2.8-11.6,1.2-14.4-4c-3.2-5.6-1.2-12,4-14.8c8-4.4,14.4-10.8,19.2-18.4 c4.8-7.6,7.6-16.4,8-25.6c0.4-6,5.2-10.4,11.2-10c6,0.4,10.4,5.2,10,11.2C198.475,176.151,194.475,188.151,188.075,198.951z"/></symbol><symbol id="temperature-1" viewBox="0 0 340 340"><title>temperature-1</title><path d="M192.4,226.4c-2-4-4.8-7.2-7.6-10.4c-3.2-3.2-6.4-6-10-8.4l-3.6-2.4v-4V60c0-13.2-10.4-24.4-24.4-24.4 c-3.2,0-6.4,0.8-9.2,2c-9.2,4-15.2,12.4-15.2,22.4v141.2v4l-3.6,2.4c-3.6,2.4-7.2,5.2-10,8.4c-3.2,3.2-5.6,6.8-7.6,10.4 c-2,3.6-3.6,8-4.8,12s-1.6,8.4-1.6,12.8c0,6.8,1.6,13.6,4,20c2.8,6.4,6.4,12,11.2,16.8s10.4,8.8,16.8,11.2c6,2.4,12.8,4,20,4 c7.2,0,13.6-1.6,20-4c6.4-2.8,12-6.4,16.8-11.2c4.8-4.8,8.8-10.4,11.2-16.8c2.4-6,4-12.8,4-20c0-4.4-0.4-8.8-1.6-12.8 C196,234.4,194.4,230.4,192.4,226.4z"/><path d="M223.6,209.2c-2.8-4.8-5.6-9.2-9.2-13.6c-2.4-2.8-5.2-5.6-7.6-8.4V60c0-8-1.6-16-4.4-22.8C192.8,14.4,171.6,0,146.8,0 c-24.8,0-46,14.4-55.6,37.2C88.4,44.4,86.8,52,86.8,60v127.6c-2.8,2.4-5.2,5.2-7.6,8.4c-3.6,4.4-6.4,8.8-9.2,13.6 c-3.6,6.4-6.4,13.2-8,20.4c-2,7.2-2.8,14.4-2.8,22c0,12,2.4,23.2,6.8,33.6c4.4,10.8,11.2,20.4,19.2,28.4s17.6,14.4,28.4,19.2 c10.4,4.4,21.6,6.8,33.6,6.8s23.2-2.4,33.6-6.8c10.8-4.4,20.4-11.2,28.4-19.2s14.4-17.6,19.2-28.4c4.4-10.4,6.8-21.6,6.8-33.6 c0-7.6-0.8-14.8-2.8-22C230,222.4,227.2,215.6,223.6,209.2z M208.8,277.2c-3.2,8-8.4,15.6-14.8,22c-6.4,6.4-13.6,11.2-22,14.8 c-8,3.2-16.4,5.2-25.6,5.2s-18-2-25.6-5.2c-8-3.2-15.6-8.4-22-14.8c-6.4-6.4-11.2-13.6-14.8-22c-3.2-8-5.2-16.4-5.2-25.6 c0-6,0.8-11.6,2-16.8c1.2-5.6,3.6-10.8,6.4-15.6c2-3.6,4.4-7.2,6.8-10.4c2.8-3.2,5.6-6,8.8-8.8l3.6-3.2V192V60 c0-5.2,1.2-10.4,2.8-15.2c2-4.4,4.4-8.4,7.6-12l0.8-0.8c3.6-3.6,8-6.8,12.8-8.8s9.6-2.8,15.2-2.8c5.2,0,10.4,1.2,15.2,2.8 c4.8,2,9.2,4.8,12.8,8.8l0.8,0.8c3.2,3.6,6,7.6,7.6,12c2,4.8,2.8,9.6,2.8,15.2v132.4v4.8l3.6,3.2c3.2,2.8,6,5.6,8.8,8.8 c2.4,3.2,4.8,6.8,6.8,10.4c2.8,4.8,4.8,10.4,6.4,15.6c1.2,5.2,2,10.8,2,16.8C214,260.8,212,269.6,208.8,277.2z"/><path d="M270.4,153.6H224c-5.6,0-10.4,4.4-10.4,10.4c0,5.6,4.4,10.4,10.4,10.4h46.4c5.6,0,10.4-4.4,10.4-10.4 S276,153.6,270.4,153.6z"/><path d="M224,68h30.4c5.6,0,10.4-4.4,10.4-10.4c0-5.6-4.4-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4S218.4,68,224,68z"/><path d="M224,103.6h46.4c5.6,0,10.4-4.4,10.4-10.4c-0.4-6-4.8-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4 C213.6,98.8,218,103.6,224,103.6z"/><path d="M224,138.8h30.4c5.6,0,10.4-4.4,10.4-10.4c0-5.6-4.4-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4 C213.6,134,218.4,138.8,224,138.8z"/></symbol>
Oh okay - just cant seem to figure out which one it is and where to place the matrix.css file :(.
matrix-theme.css goes anywhere in the config/html folder. I have it in html/matrix-theme/matrix-theme.css. Then open up habpanel setting /habpanel/index.html#/settings. Then under additional stylesheets put in the location of your matrix-theme.css file replacing html with static.
So for me the setting it /static/matrix-theme/matrix-theme-mod.css, for the file that is stored at config/html/matrix-theme/matrix-theme-mod.css.
The svg file is correct. It is a style issue.
Please post the HTML offline both Yellow and Green and we Will help you
Regards
Lorenzo
I made a couple tweaks to make this work but it looked fine. Nice and green like everything else on chrome.
<div class="icon on">
<svg viewBox="0 0 248.151 248.151">
<title>drop</title>
<path d="M134.475,8.551c-6.8-11.6-14-11.2-20.8,0c-31.2,46.4-78.4,116-78.4,150.8c0,24.4,10,46.8,26,62.8s38.4,26,62.8,26 c24.4,0,46.8-10,62.8-26s26-38.4,26-62.8C212.875,124.151,165.675,54.951,134.475,8.551z M188.075,198.951 c-6.4,10.4-15.6,19.6-26.8,26c-5.2,2.8-11.6,1.2-14.4-4c-3.2-5.6-1.2-12,4-14.8c8-4.4,14.4-10.8,19.2-18.4 c4.8-7.6,7.6-16.4,8-25.6c0.4-6,5.2-10.4,11.2-10c6,0.4,10.4,5.2,10,11.2C198.475,176.151,194.475,188.151,188.075,198.951z"
/>
</svg>
<svg id="temperature-1" viewBox="0 0 340 340">
<title>temperature-1</title>
<path d="M192.4,226.4c-2-4-4.8-7.2-7.6-10.4c-3.2-3.2-6.4-6-10-8.4l-3.6-2.4v-4V60c0-13.2-10.4-24.4-24.4-24.4 c-3.2,0-6.4,0.8-9.2,2c-9.2,4-15.2,12.4-15.2,22.4v141.2v4l-3.6,2.4c-3.6,2.4-7.2,5.2-10,8.4c-3.2,3.2-5.6,6.8-7.6,10.4 c-2,3.6-3.6,8-4.8,12s-1.6,8.4-1.6,12.8c0,6.8,1.6,13.6,4,20c2.8,6.4,6.4,12,11.2,16.8s10.4,8.8,16.8,11.2c6,2.4,12.8,4,20,4 c7.2,0,13.6-1.6,20-4c6.4-2.8,12-6.4,16.8-11.2c4.8-4.8,8.8-10.4,11.2-16.8c2.4-6,4-12.8,4-20c0-4.4-0.4-8.8-1.6-12.8 C196,234.4,194.4,230.4,192.4,226.4z"
/>
<path d="M223.6,209.2c-2.8-4.8-5.6-9.2-9.2-13.6c-2.4-2.8-5.2-5.6-7.6-8.4V60c0-8-1.6-16-4.4-22.8C192.8,14.4,171.6,0,146.8,0 c-24.8,0-46,14.4-55.6,37.2C88.4,44.4,86.8,52,86.8,60v127.6c-2.8,2.4-5.2,5.2-7.6,8.4c-3.6,4.4-6.4,8.8-9.2,13.6 c-3.6,6.4-6.4,13.2-8,20.4c-2,7.2-2.8,14.4-2.8,22c0,12,2.4,23.2,6.8,33.6c4.4,10.8,11.2,20.4,19.2,28.4s17.6,14.4,28.4,19.2 c10.4,4.4,21.6,6.8,33.6,6.8s23.2-2.4,33.6-6.8c10.8-4.4,20.4-11.2,28.4-19.2s14.4-17.6,19.2-28.4c4.4-10.4,6.8-21.6,6.8-33.6 c0-7.6-0.8-14.8-2.8-22C230,222.4,227.2,215.6,223.6,209.2z M208.8,277.2c-3.2,8-8.4,15.6-14.8,22c-6.4,6.4-13.6,11.2-22,14.8 c-8,3.2-16.4,5.2-25.6,5.2s-18-2-25.6-5.2c-8-3.2-15.6-8.4-22-14.8c-6.4-6.4-11.2-13.6-14.8-22c-3.2-8-5.2-16.4-5.2-25.6 c0-6,0.8-11.6,2-16.8c1.2-5.6,3.6-10.8,6.4-15.6c2-3.6,4.4-7.2,6.8-10.4c2.8-3.2,5.6-6,8.8-8.8l3.6-3.2V192V60 c0-5.2,1.2-10.4,2.8-15.2c2-4.4,4.4-8.4,7.6-12l0.8-0.8c3.6-3.6,8-6.8,12.8-8.8s9.6-2.8,15.2-2.8c5.2,0,10.4,1.2,15.2,2.8 c4.8,2,9.2,4.8,12.8,8.8l0.8,0.8c3.2,3.6,6,7.6,7.6,12c2,4.8,2.8,9.6,2.8,15.2v132.4v4.8l3.6,3.2c3.2,2.8,6,5.6,8.8,8.8 c2.4,3.2,4.8,6.8,6.8,10.4c2.8,4.8,4.8,10.4,6.4,15.6c1.2,5.2,2,10.8,2,16.8C214,260.8,212,269.6,208.8,277.2z"
/>
<path d="M270.4,153.6H224c-5.6,0-10.4,4.4-10.4,10.4c0,5.6,4.4,10.4,10.4,10.4h46.4c5.6,0,10.4-4.4,10.4-10.4 S276,153.6,270.4,153.6z"
/>
<path d="M224,68h30.4c5.6,0,10.4-4.4,10.4-10.4c0-5.6-4.4-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4S218.4,68,224,68z" />
<path d="M224,103.6h46.4c5.6,0,10.4-4.4,10.4-10.4c-0.4-6-4.8-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4 C213.6,98.8,218,103.6,224,103.6z"
/>
<path d="M224,138.8h30.4c5.6,0,10.4-4.4,10.4-10.4c0-5.6-4.4-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4 C213.6,134,218.4,138.8,224,138.8z"
/>
</svg>
</div>
Hi,
Here is my code, i only changed the filename of the svg file and the icon-name. All other is like descipted for the matrix-them on github.
<div oc-lazy-load="['/static/matrix-theme/jquery-3.2.1.min.js','/static/matrix-theme/matrix.js']"></div>
<div class="section">
<div class="bigDash">
<div class="description">Outdoor</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/icons0.svg#temperature-1"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('Temp_Current') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
<div class="bottom">
<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoApple"></use></svg></div>
<div class="value">feels like {{itemValue('Humidity_current') | number:0}} °C</div>
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#drop"></use></svg></div>
<div class="value">{{itemValue('Humidity_current') | number:0}} %</div>
</div>
<div class="graph">
<img width="250" height="100" src="http://openhabianpi.local:3000/render/dashboard-solo/db/mini-graphs?orgId=1&panelId=2&from=now-24h&to=now&width=500&height=250&tz=UTC%2B02%3A00" />
<div class="legend">Last 24 hours</div>
</div>
</div>
I’m having problems with generating the squidink.svg. Running the svg_combiner.py returns this:
..........
Processing file: Celebration & Holidays_star.svg
200
Processing file: Buildings-07.svg
200
--> added window
Processing file: Squid_Ink_License.pdf
200
Traceback (most recent call last):
File "svg_combiner.py", line 74, in <module>
xml = ET.fromstring(r.text)
File "/usr/lib/python2.7/xml/etree/ElementTree.py", line 1300, in XML
parser.feed(text)
File "/usr/lib/python2.7/xml/etree/ElementTree.py", line 1640, in feed
self._parser.Parse(data, 0)
UnicodeEncodeError: 'ascii' codec can't encode characters in position 10-13: ordinal not in range(128)
Any idea how to fix this?
Remove Squid_Ink_License.pdf from the folder.
1 Like
Hi!
I am still having issues …
i managed to get it working with safari. I want to add a variable to the path of the svg.
it’s not possible to use it with tagging (#) since safari does not support just href but only xlink:href.
so i created single svg’s for it. now i struggle formatting them.
i have to implement them using img not svg to make it work. like:
<div class="bigDash">
<div class="description">Wetter</div>
<div class="top">
<div class="weather">
<div class="icon on"><img src="/static/matrix-theme/original-svgs/{{itemValue('CommonId')}}.svg"></div>
</div>
<div class="value">
<div class="main">{{itemValue('Indoor_Temperature') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
but i don’t know if a img can be formatted - at least i don’t know how.
my icon is black and if i change the stroke inside the svg it colors it.
my question is now: how can i color it using the matrix.css - file.
I’m not that experienced with creating that style attributes.
It’d be nice if you could post an example or explain a little bit.
I have a problem with a slider inside the matrix-theme. I created an vertical rzslider. I cannot change the bar color and i also try to use the “selectionBarGradiant”, but if i put it inside nothing happen.
I put it inside the slider option. Here my code:
<div ng-init="slider = { value: 12, options: {
vertical: true,
floor: 0,
ceil: 30,
step: 1,
showSelectionBar: true,
selectionBarGradient: {from: 'white', to: '#FC0'}
}};"></div>
<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(OG_WZ1_WTT_HZF1_set_temp, slider.value)"></rzslider>
This looks awesome! THX
Could you also Post your .items file?
Question regarding Hue light. I already include the standard way proposed by @pmpkk (thanks Patrick) to manage RGB. Is someone already tried to include a colorpicker similar to this one?
Here is the code provided by @kubawolanin
<div ng-init='picker = {
"name": config.name,
"item": config.color,
"style": "aCKolor"
};slider = {
"name": "",
"item": config.brightness,
"floor": 0,
"ceil": 100,
"step": 1,
"unit": "",
"vertical": false
};switch = {
"name": "",
"item": config.brightness,
"hidelabel": true,
"hideicon": false,
"hideonoff": true
}'>
<style>
.cl-switch .switch {
position: absolute;
top: 0;
width: 100%;
}
</style>
<widget-colorpicker ng-model="picker"></widget-colorpicker>
<widget-slider ng-model="slider"></widget-slider>
</div>
I did some test, but it’s currently slow and not fully fonctionnal compared to the basic widget outside the Matrix theme.