when i put the css location into the browser it opens it.
second screenshot i tried to put the full browser path.
3rd screenshot i tried the full path.
checking the rights openhab is the owner of the maps.
4rd screenshot is the result i get everytime, when i then scroll down i see the values of my items in blue.
Hallo
Wow, That overview over all Lights Looks very Nice.
Its possible that you Share the html code?
Thanks a lot Marcel
Actually it’s not pulling up the css file. It’s pulling up another page. That’s your problem. The browser can’t access the css file and therefore can’t render the theme properly.
Make sure your rights, folders, etc. are set up correctly and you can actually get the css file via URL. One that works, the rest should work!
Alternatively, the content of the css file may be wrong. Looks like it has references to GitHub. Maybe redownload it and overwrite the one you have there.
You did quite a bit of work in the past so please can you post some pictures to make it easier for us to identify any issues. Note I’ll try and give you links but you make need to change the ip/port to your setup.
**Settings **
http://openhabian:8080/habpanel/index.html#/settings or change your ip and port to whatever you have it set to. http:/192.168.45.15:/habpanel/index.html#/settings. The stylesheet should be set to /static/matrix-theme/matrix-theme.css
In your setting you just need to refer to the relative path.
NOW make sure the stylesheet is at the right path. Make sure you replace static with html. The matrix-theme folder should be extracted to html folder
openhab2-conf\html\matrix-theme\matrix-theme.css
If you are in linux
/etc/openhab2/html/matrix-theme/matrix-theme.css
Edit: Oh I alway recommend that everyone uses openhabian on a dedicated machine, vm or raspberry pi. I think in this case there is nothing wrong with the theme but probably something with your setup and environment. If you have decided to use an obscure and complicated setup(i.e. everything apart from openhabian) then that up to you to fix and you probably should take this to a seperate thread.
Thank you for the information but as i read comments here nothing tells me this is specific for a raspberry.
i’m running the install on a synology dsm 6.1
As Far as i am aware openhab should work on any platform the same way.
Reading previous comment i believe something is wrong with the rights / css file.
i will try some more
just downloaded the zipfile instead of downloading each file separate and now indeed its downloading the css file.
screen 1 result in internet explorer 
in google chrome still no luck, any idea ?
You need to go through the setting on each browser. So go to settings and set the css file and/or select any saved version.
If it is still not working try. Shift + F5, shift + refresh.
Openhab works fine on all different platforms if properly set up. Now setting up the envirnment isn’t so simple. The best way I found is to use openhabian which works on any system that can run debian, so any computer or even a raspberry pi.
It’s really easy to set up openhab and your envirnment properly using openhabian and I strongly recommend it.
https://docs.openhab.org/installation/openhabian.html#manual-setup
bingo
cleared cache and all history from chrome.
closed browser and retried.
succes!
Thnx Everyone , now i can start to
I haven’t changed the code from Patrick’s work.
Here it is:
<div class="title">
<div class="name">Ground Floor Lights</div>
<div class="summary">ON: {{ ( gGF_filtered | filter: { state: 'ON' } ).length }} of {{gGF_filtered.length}}</div>
</div>
Any of your lights dimmers?
No. All Items in that group (gGF_Lights) are defined as Switches.
<div ng-repeat="item in itemsInGroup('gGF_Lights') | filter:query as gGF_filtered"></div>
Rats - I cant for the life of me find a way to filter dimmers and switches at the same time - was hoping you had - do you think if I made proxy items of my dimmers AS switches this might achieve the same thing - if the dimmer is 10% - the proxy switch is ON?
Here is mine for Color lights, the aproach should work for dimmers as well. I think you can use nf-if.type=“Dimmer” to identify the type of light if you can’t find a generic control for both.
<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 }} of {{filtered.length}}</div></div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gLightColor') | filter:query as filtered ">
<div class="widget" ng-if="item.type=='Color' && itemValue(item.name).split(',')[2]== 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 + '_rgb') + ')'}"></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, itemValue('SceneOffColor'))"><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><a href="" ng-click="sendCmd(item.name, itemValue('SceneColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></a>
<div ng-init="slider = { value: itemValue(item.name).split(',')[2], options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
<div ng-init='cpicker = {
"name": item.name,
"item": itemValue(item.name + '_rgb'),
"style": "aCKolor"
};slider = {
"name": "",
"item": itemValue(item.name),
"value": itemValue(item.name).split(',')[2],
"floor": 0,
"ceil": 100,
"step": 1,
"unit": "",
"vertical": false
};switch = {
"name": "",
"item": itemValue(item.name),
"hidelabel": true,
"hideicon": false,
"hideonoff": true
}'>
<style>
.cl-switch .switch {
position: absolute;
top: 0;
width: 100%;
}
</style>
<widget-colorpicker ng-model="cpicker"></widget-colorpicker>
<widget-slider ng-model="cslider" ng-click="sendCmd(item.name, cslider.value)"></widget-slider>
</div>
</div>
</div>{{item.label}} </div>
</div>
<div class="widget" ng-if="item.type=='Color' && itemValue(item.name).split(',')[2]!=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 + '_rgb') + ')'}"></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, itemValue('SceneOffColor'))"><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><a href="" ng-click="sendCmd(item.name, itemValue('SceneColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></a>
<div ng-init="slider = { value: itemValue(item.name).split(',')[2], options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
<div ng-init='cpicker = {
"name": item.name,
"item": itemValue(item.name + '_rgb'),
"style": "aCKolor"
};slider = {
"name": "item.name",
"item": itemValue(item.name),
"value": itemValue(item.name).split(',')[2],
"floor": 0,
"ceil": 100,
"step": 1,
"unit": "",
"vertical": false
};switch = {
"name": "item.name",
"item": itemValue(item.name),
"hidelabel": true,
"hideicon": false,
"hideonoff": true
}'>
<style>
.cl-switch .switch {
position: absolute;
top: 0;
width: 100%;
}
</style>
<widget-colorpicker ng-model="cpicker"></widget-colorpicker>
<widget-slider ng-model="cslider.value" ng-click="sendCmd(item.name, cslider.value)"></widget-slider>
</div>
</div>
</div> {{item.label }}</div>
</div>
</div>
</div>
</div>
Answered my own question - yes you can proxy switches for each dimmer allows you to have the one ng filter
Has anyone incorporated custom icons into the matrixicons pack?
My receiver has a Tidal input, wouldnt mind gettnig this icon in.
https://worldvectorlogo.com/logo/tidal
I tried editing it like the other icons pasting the content into the matrixicons.svg but I couldnt get it to load. Any thoughts?
Hi!
for a few days now i have a problem with the lights.
The Colorpicker that should only appear when touching a color-light is active when opening the page for the first time but does not respond to any button pressed.
Only after changing the page to something else and going back to the original one the colorpicker is deactivated and works as expected (when pressing the color-light).
Do you have any idea what could go wrong here?
Hallo and thank you for this great theme 
I have a few problems and I really dont get it. Im using 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/symbol-defs.svg#icon-lampe"></use></svg></div></div>
<div class="title"><div class="name">Lamps</div></div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('Group_Lights_color_All').concat(itemsInGroup('gLicht')) | filter:query as filtered">
<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'))) && itemValue(item.name + '_color')=='N/A'" 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" ng-click="showHueSelect = !showHueSelect">
<div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_color') + ')'}"></div>
<div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div>
<div class="hueSelectOptions">
<!-- Brightness slider bar -->
<div ng-init="slider = { value: 0, options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
</div>
</div>
<div class="name">{{item.label}}</div>
</div>
</div>
<div class="widget" ng-if="((item.type=='Dimmer' && itemValue(item.name)>'0') || (item.type=='Group' && itemValue(item.name)=='ON')) && itemValue(item.name + '_color')=='N/A'" 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" ng-click="showHueSelect = !showHueSelect">
<div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_color') + ')'}"></div>
<div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div>
<div class="hueSelectOptions">
<!-- Brightness slider bar -->
<div ng-init="slider = { value: 0, options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
</div>
</div>
<div class="name">{{item.label}}</div>
</div>
</div>
</div>
</div>
First, I dont get any slider to appear. Its just a normal button who switch the lamps on or off
Second, I dont get any name to display. There are only 3 dots (I have 3 lights in this group).
Can anyone help me with this?
Greetings
Hi im noob i have a simple question:
In widget home we got
Hey
OK with that Im getting closer to my goal:
<div class="section">
<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">Licht</div><div class="summary">An: {{ ( filtered | filter: { state: 'ON' } ).length }} von {{filtered.length}}</div></div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gLicht').concat(itemsInGroup('')) | filter:query as filtered">
<div class="widget" ng-if="item.type=='Dimmer' && (itemValue(item.name)==' ON ' || itemValue(item.name)>'0') && itemValue(item.name + '_color')=='N/A'" 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"></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, 'OFF')">
<svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 4px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#cross-line"></use></svg>
</a>
<div ng-init="slider = { value: item.name, options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
</div>
</div>
{{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'))) && itemValue(item.name + '_color')=='N/A'">
<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="name" ng-click="showHueSelect = !showHueSelect">
<div class="hue"></div>
<div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div>
<div class="hueSelectOptions">
<!-- Brightness slider bar -->
<div ng-init="slider = { value: 0, options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
</div>
</div>
{{item.label}}
</div>
</div>
</div>
</div>
</div>
First click: turn the lamp on (last dimmer value)
Second click opens the slider window to set the intensitiy and to turn the lamp off
What Im looking for:
First click turn the lamp on (last value)
second click turns the lamp off
click and hold: opens the window with the slider
So is anyone here who can help me with that?
Oh an the number of the lamps who are turned on isnt working. Its every time on 0.
You have to create an item with the name ‘Netatmo_Outdoor_Temperature’ and link it to a channel zwave:device:2504c90d:node2:sensor_temperature
How you achieve this depends if you use paperUI opr text based configuration for openHAB items.
zwave thing -> temperature channel -> openHab item -> UI widget