Matrix Theme for HABPanel

Tags: #<Tag:0x00007fc8f5498bd8> #<Tag:0x00007fc8f5498ac0> #<Tag:0x00007fc8f54989d0>

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 :slight_smile:

    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:

  • 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 …

image
image
image

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.

image

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)>

image

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>

image

Neato Botvac: < Neato BotVac Vacuum Cleaner Widget for HABPanel>
image

image

image

image

image

Solvis Heating: < [SOLVED] SOLVIS Heating>

image

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 …

10 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

this is my kodi widget.

I just haven’t managed to enlarge the cover yet.

not working, only errors… IndentationError: unexpected indent

  • LE it works , i had to remove all indentations