Matrix Theme for HABPanel

moto · June 3, 2020, 7:24pm

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

slartibartfass · July 8, 2020, 9:06am

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!

neohusky · August 4, 2020, 9:18am

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>

Kerbje · August 5, 2020, 2:49pm

In the original file is says: “/static/matrix-theme/matrixicons.svg#light_bulb”

Mando · September 8, 2020, 6:21pm

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

HarryD · September 24, 2020, 8:49pm

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 …

LaurentiuB · September 25, 2020, 4:41pm

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!

dheneghan · October 15, 2020, 7:38pm

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

LaurentiuB · October 15, 2020, 8:43pm

I used a rule to get the name from json

DUSAG0211 · October 23, 2020, 10:18am

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?

marc1310 · October 29, 2020, 3:25pm

hello,

i buyed the icons, where can i find the “squidink.svg” i have it nowhere?

Kerbje · October 31, 2020, 11:15am

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

LaurentiuB · October 31, 2020, 8:13pm

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!

mpuff · October 31, 2020, 11:15pm

Can you share your code for this?

marc1310 · November 1, 2020, 7:09am

solved it

marc1310 · November 3, 2020, 3:19pm

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>