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:
- the shown color I set is wrong (next to the name)
- is there a way to add dimmer-arrows to the color lights (like the dimmer 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 …
11 Likes
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!
Hi. Did you every find out an answer? I have the same issue with the Spotify binding when tying to display devices.Yes I can hardware a dropdown list, but shouldn’t have to and i’m convinced there is a was round this but just have not worked it out!!
I used a rule to get the name from json
Hi Michal,
awesome addition/mod to the code. Unfortunately on my setup, the whole row gets split into two lines as time/ state counts are pushed under the icons. Is there anything I need to change in the overall setup?
hello,
i buyed the icons, where can i find the “squidink.svg” i have it nowhere?
Look at https://github.com/pmpkk/openhab-habpanel-theme-matrix - use the “svg_combiner.py” script to combine only the icons you need into the squidink.svg
1 Like
Does anybody knows how can I make the widget to fill the entire screen on a mobile phone?
It looks like this on a Galaxy S7.
I wanna get rid of the space highlighted in red.
Thanks!
Can you share your code for this?
solved it
Hello,
i try to change my arrangement, but somehow i can’t.
I would like that as you can see in the picture that everything comes down to the right of the cover.
and next to the list of channels I would like to have the same again.
can someone help?
<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#sound2"></use></svg></div></div>
<div class="title">Kodi</div>
<div class="controls">
<div class="widget">
<div class="valueGroup">
<div class="value">{{itemValue('Alexaechodot2_Title')}}</div>
<div class="value">{{itemValue('Alexaechodot2_musikanbieter')}}</div>
</div>
<div class="movie">
<div class="cover" ng-style="{'background-image': 'url(' + itemValue('mykodi_thumb_office') + ')'}"></div>
<div class="playback">
<div class="playbackTime">{{ itemValue('Alexaechodot2_progresstime')}}</div>
<div class="playbackBar"><div class="playbackBarDone" ng-style="{'width': itemValue('spotify_current_progress_percent') + '%'}"></div></div>
<div class="playbackTime">{{itemValue('Alexaechodot2_duration')}}</div>
</div>
<div class="controlGroup">
<div class="control" ng-click="sendCmd('Alexaechodot2_player', 'NEXT')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-arrow-3"></use></svg></div>
<div class="control" ng-click="sendCmd('Alexaechodot2_player', 'PLAY')" ><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-play"></use></svg></div>
<div class="control" ng-click="sendCmd('Alexaechodot2_player', 'PREVIOUS')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#left-arrow-3"></use></svg></div>
</div>
</div>
</div>
<div class="widget">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div>
<div class="name">TV Kanäle</div>
<div class="sceneGroup">
<div class="scene" ng-click="sendCmd('daserste', 'ON')">Prosieben</div>
<div class="scene" ng-click="sendCmd('zdf', 'ON')">ZDF</div>
<div class="scene" ng-click="sendCmd('rtl', 'ON')">RTL</div>
<div class="scene" ng-click="sendCmd('sat1', 'ON')">SAT 1</div>
<div class="scene" ng-click="sendCmd('prosieben', 'ON')">ProSieben</div>
<div class="scene" ng-click="sendCmd('kabel1', 'ON')">Kabel 1</div>
<div class="scene" ng-click="sendCmd('rtl2', 'ON')">RTL 2</div>
<div class="scene" ng-click="sendCmd('superrtl', 'ON')">SUPER RTL</div>
<div class="scene" ng-click="sendCmd('sport1', 'ON')">SPORT 1</div>
<div class="scene" ng-click="sendCmd('dmax', 'ON')">DMAX</div>
<div class="scene" ng-click="sendCmd('sixx', 'ON')">SIXX</div>
<div class="scene" ng-click="sendCmd('tele5', 'ON')">TELE 5</div>
</div>
</div>
Would love if you could share your battery widget! Looks fantastic
Here’s the whole package …
For the battery widget (System Widget) I had to modify the css (also included).
best regards
Harald
Neato Widget.widget.json (5.61 KB)
Door Widget.widget.json (9.3 KB)
Internet Widget.widget.json (5.67 KB)
Home Widget.widget.json (11.3 KB)
Calendar_Widget.widget.json (9.18 KB)
Security Widget.widget.json (13.4 KB)
Statusbar Widget.widget.json (2.76 KB)
SettingsandRules_Widget.widget.json (7.37 KB)
System Widget.widget.json (23.9 KB)
Temperature Control Widget.widget.json (6.87 KB)
Weather Widget.widget.json (26.2 KB)
Weekly_Statistics_Wdget.widget.json (3.95 KB)
matrix-theme.css (23.1 KB)
8 Likes
not working, only errors… IndentationError: unexpected indent
- LE it works , i had to remove all indentations
Hi all!
I am totally new to the concept of habpanel, I decided after 2 years of using openhab to use it now, I started playing with this amazing template, learn more about the concept of bootstrap and css. I managed to modify some objects, to incorporate the icons thanks to the combiner.py however despite having renamed the icons and placing them in the list of the file, not all are added, do you have any advice to give?
I would also like if possible a list of software allowing me to handle this theme more easily like in wysiwyg bootstrap.
thanks in advance
Hello,
is it possible to have a sticky Navbar in Habpanel/MatrixTheme?
I tried with https://getbootstrap.com/docs/4.0/components/navbar/ but to no success. Could anyone help?
Thanks
Hi All,
First of all thanks for sharing the amazing themes and configs around here.
I really like it!
I have planned to use openhab at my new home and I am considering or if I am going to use Openhab 3 or Openhab 2.1.
it’s depending on if this theme is useable on Openhab 3.
I am running on a raspberry pi 4 8GB ram
Can anyone tell me if the theme is also compatible with openhab 3?
Thanks in advance!