Matrix Theme for HABPanel

Rado1 · January 27, 2019, 10:06am

Hello

If anyone is interested I have made this for the great new comfoair binding extended https://github.com/gieemek/ComfoAir_Binding_modified bij @gieemek .

Many thanks to @pmpkk for making this great theme possible.

You have to ad this to the comfoair.rules

rule "habpanel switch CCease/Openhab message"
when
    Item comfoairControl changed
then
    if( comfoairControl.state == 0 ) {
		comfoairControl_Message.postUpdate( "CCease" )}
    else

	if   ( comfoairControl.state == 1 ) {
		comfoairControl_Message.postUpdate( "Openhab" )	}
		
end

rule "habpanel switch Auto/Manueel message"
when
    Item comfoairMode changed
then
    if( comfoairMode.state == 0 ) {
		comfoairMode_Message.postUpdate( "Manueel" )}
    else

	if   ( comfoairMode.state == 1 ) {
		comfoairMode_Message.postUpdate( "Auto" )	}
		
end

rule "habpanel switch Afvoer/Aanvoer message"
when
    Item comfoairFanMode_Message changed
then
    if( comfoairFanMode_Message.state == 0 ) {
		comfoairFanMode_Message1.postUpdate( "Aanvoer+Afvoer" )}
    else

	if   ( comfoairFanMode_Message.state == 1 ) {
		comfoairFanMode_Message1.postUpdate( "Aanvoer" )	}
	else

	if   ( comfoairFanMode_Message.state == 2 ) {
		comfoairFanMode_Message1.postUpdate( "Afvoer" )	}	
		
end

rule "habpanel level 1,2,3 message"
when
    Item comfoairFanLevel_Message changed
then
    if( comfoairFanLevel_Message.state == 2 ) {
		comfoairFanLevel_Message1.postUpdate( "Level 1" )}
    else

	if   ( comfoairFanLevel_Message.state == 3 ) {
		comfoairFanLevel_Message1.postUpdate( "Level 2" )	}
	else

	if   ( comfoairFanLevel_Message.state == 4 ) {
		comfoairFanLevel_Message1.postUpdate( "Level 3" )	}	
		
end

And this to the comfoair.items

String  comfoairControl_Message
String  comfoairMode_Message
String  comfoairFanMode_Message1
String  comfoairFanLevel_Message1

And this is the widget

<div class="section">

 <div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#wind"></use></svg></div></div>
	<div class="title">Ventilatie</div>
	<div class="controls">
 
  <div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#control-4"></use></svg></div>
			<div class="sceneGroup">
				<div class="scene" ng-click="sendCmd('comfoairMode','0' )">Manueel</div>
				<div class="scene" ng-click="sendCmd('comfoairMode','1' )">Auto</div> 
        <div class="valueGroup"><div class="value">{{itemValue('comfoairMode_Message')}} </div></div>
      </div>
		</div>
   
<div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#control-4"></use></svg></div>
			<div class="sceneGroup">
				<div class="scene" ng-click="sendCmd('comfoairControl','0' )">CCease</div>
				<div class="scene" ng-click="sendCmd('comfoairControl','1' )">Openhab</div> 
        <div class="valueGroup"><div class="value">{{itemValue('comfoairControl_Message')}} </div></div>
      </div>
		</div>    
  
  <div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#control-4"></use></svg></div>
			<div class="sceneGroup">
				<div class="scene" ng-click="sendCmd('comfoairFanMode_Message','0' )">Aanvoer+Afvoer</div>
				<div class="scene" ng-click="sendCmd('comfoairFanMode_Message','1' )">Aanvoer</div>    
        <div class="scene" ng-click="sendCmd('comfoairFanMode_Message','2' )">Afvoer</div> 
         <div class="valueGroup"><div class="value">{{itemValue('comfoairFanMode_Message1')}} </div></div>
         <div class="graph">
        </div>
		  </div>
   </div>
    
 <div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#control-4"></use></svg></div>
     <div class="name">Status</div>
			<div class="sceneGroup">
				<div class="scene" ng-click="sendCmd('comfoairErrorReset','1' )">Reset</div>
        <div class="valueGroup"><div class="value">{{itemValue('comfoairError_Message')}} </div></div>
      </div>
		</div>
   
<div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#clock"></use></svg></div>
      <div class="name">Filter looptijd</div>
			<div class="sceneGroup">
				<div class="scene" ng-click="sendCmd('comfoairFilterReset','0' )">Filter reset</div>
          <div class="graph">
        </div>
 
        <div class="valueGroup"><div class="value">{{itemValue('comfoairFilterRuntime_Message')}} </div></div>  
      </div>
		 </div>
    
<div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#control-4"></use></svg></div>
			<div class="sceneGroup">
				<div class="scene" ng-click="sendCmd('comfoairFanLevel_Message','4' )">Level 3</div>
				<div class="scene" ng-click="sendCmd('comfoairFanLevel_Message','3' )">Level 2</div>    
        <div class="scene" ng-click="sendCmd('comfoairFanLevel_Message','2' )">Level 1</div> 
         <div class="valueGroup"><div class="value">{{itemValue('comfoairFanLevel_Message1')}} </div></div>
         <div class="graph">
	  </div>
		</div>  
    </div>
 
		<div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
			<div class="name">Inkomende buitenlucht</div>
			<div class="valueGroup"><div class="value">{{itemValue('comfoairOutdoorIncomingTemperature') | number:1}} &deg;C</div></div>				
		</div>
    
		<div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
			<div class="name">Inkomende binnenlucht</div>
			<div class="valueGroup"><div class="value">{{itemValue('comfoairIndoorIncomingTemperature') | number:1}} &deg;C</div></div>				
		</div>    

		<div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#wind"></use></svg></div>
			<div class="name">Inkomende ventilator</div>
			<div class="valueGroup"><div class="value">{{itemValue('comfoairIncomingFan') | number:1}}%</div></div>					
		</div>

		<div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
			<div class="name">Uitgaande buitenlucht</div>
			<div class="valueGroup"><div class="value">{{itemValue('comfoairOutdoorOutgoingTemperature') | number:1}} &deg;C</div></div>			
		</div>

    <div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
			<div class="name">Uitgaande binnenlucht</div>
			<div class="valueGroup"><div class="value">{{itemValue('comfoairIndoorOutgoingTemperature') | number:1}} &deg;C</div></div>			
		</div>

 		<div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#wind"></use></svg></div>
			<div class="name">Uitgaande ventilator</div>
			<div class="valueGroup"><div class="value">{{itemValue('comfoairOutgoingFan') | number:1}}%</div></div>		
		</div>
		

 		<div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#control-4"></use></svg></div>
			<div class="name">Efficientie</div>
			<div class="valueGroup"><div class="value">{{itemValue('comfoairEfficiency') | number:1}}%</div></div>			
		</div>


		<div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#control-4"></use></svg></div>
			<div class="name">Bypass</div>
			<div class="valueGroup"><div class="value">{{itemValue('comfoairBypassMode')}} </div></div>		
		</div>
    		
    
    <div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
			<div class="name">Vorst</div>
			<div class="valueGroup"><div class="value">{{itemValue('comfoairFrozenError')}} </div></div>	
      </div>
		</div>
    
   	<div class="widget">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
			<div class="name">Comfort temperatuur<div class="value">{{itemValue('comfoairTargetTemperature_Message')}}</div></div>
			<div class="controlGroup">
				<div class="control"ng-click="sendCmd('comfoairTargetTemperature_Message','16' )">16</div>
				<div class="control"ng-click="sendCmd('comfoairTargetTemperature_Message','17' )">17</div>
				<div class="control"ng-click="sendCmd('comfoairTargetTemperature_Message','20' )">20</div>
				<div class="control"ng-click="sendCmd('comfoairTargetTemperature_Message','21' )">21</div>
        <div class="control"ng-click="sendCmd('comfoairTargetTemperature_Message','22' )">22</div>
        <div class="control"ng-click="sendCmd('comfoairTargetTemperature_Message','23' )">23</div>
        <div class="graph">
          
        </div>  
	  </div> 
	 </div> 
  </div>

acid97 · January 29, 2019, 2:21pm

hey @Nognog - thats truely amazing work. looks really nice.
would you mind to share how you pimped the spotify widget? im interested in the “Geräte Auswahl” and “Playlist Auswahl” solution.

thanks in advance

Nognog · January 29, 2019, 4:56pm

Hey Marc,
thanks for the compliment.

I have to confess that I no longer use the Spotify binding. So unfortunately I did not develop it further. But I can send you the old widget, but these two functions are not yet 100% operational

greetz
Daniel

Mark_Webster · January 29, 2019, 11:48pm

I’m trying to get a Plex Logo SVG file working in the same manner as the Netflix, Amazon, Apple TV ones in the AppIcons.svg file, but I just can’t seem to get the SVG to display within HAPPanel (It works fine if you open the file in a browser).

Here’s the SVG code

<?xml version='1.0' encoding='utf8'?>
<svg height="60" viewBox="-525.656 -459.391 119.99999 60" width="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <radialGradient id="a" cx="1244.322" cy="919.87097" gradientTransform="matrix(610 0 0 -1000.5 -756323.63 921038.75)" gradientUnits="userSpaceOnUse" r=".925">
        <stop offset="0" stop-color="#f9be03"/>
        <stop offset="1" stop-color="#cc7c19"/>
    </radialGradient>
<g id="plexlogo">
    <g transform="matrix(.02778117 0 0 .02778117 -508.04825 -449.12605)">
        <path d="m3068.929 210.125h-290.001l-289.999 500 289.999 500h289.748l-289.748-499.75z"/>
        <path d="m2168.94 210.125h290l320 500.25-320 500.25h-290l319.999-500.25z"/>
        <path d="m2068.886 1210.125h-577.073v-1000h577.073v173.737h-364.607v219.562h339.255v173.731h-339.255v257.864h364.607zm-1294.671 0v-1000h212.04v824.895h405.609v175.105zm-201.329-441.176c-67.268 57.007-162.91 85.501-286.938 85.501h-90.968v355.675h-212.04v-529.662l290 .359c177.562-2.069 186.842-110.818 186.842-148.497 0-34.979 0-146.755-157.842-148.5l-319 .003v-173.703h319.424c121.293 0 213.515 26.107 276.677 78.321 63.152 52.213 94.733 130.071 94.733 233.581 0 107.624-33.633 189.928-100.888 246.922z"/>
        <path d="m-17.06 320.125h212.2v429h-212.2z"/>
    </g>
</g>
</svg>

Any help to get this working within the matrix theme would be greatly appreciated.

unparagoned · January 31, 2019, 6:23am

It seems to work fine pretty much as is. Try using firefox or another browser. I pretty much just pasted your code in and it worked, you probably just want to make it a little higher so it doesn’t overlap with the buttons.

<div class="appLogo" ng-if="itemValue('LG_TV0_Application')=='Youtube'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#youtube"></use></svg></div>        
<div class="appLogo" ng-if="itemValue('LG_TV0_Application')=='com.webos.app.hdmi1'">
<svg height="60" viewBox="-525.656 -459.391 129.99999 60" width="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <radialGradient id="a" cx="1244.322" cy="919.87097" gradientTransform="matrix(610 0 0 -1000.5 -756323.63 921038.75)" gradientUnits="userSpaceOnUse" r=".925">
        <stop offset="0" stop-color="#f9be03"/>
        <stop offset="1" stop-color="#cc7c19"/>
    </radialGradient>
<g id="plexlogo">
    <g transform="matrix(.02578117 0 -.005 .02578117 -508.04825 -449.12605)">
        <path d="m3068.929 210.125h-290.001l-289.999 500 289.999 500h289.748l-289.748-499.75z"/>
        <path d="m2168.94 210.125h290l320 500.25-320 500.25h-290l319.999-500.25z"/>
        <path d="m2068.886 1210.125h-577.073v-1000h577.073v173.737h-364.607v219.562h339.255v173.731h-339.255v257.864h364.607zm-1294.671 0v-1000h212.04v824.895h405.609v175.105zm-201.329-441.176c-67.268 57.007-162.91 85.501-286.938 85.501h-90.968v355.675h-212.04v-529.662l290 .359c177.562-2.069 186.842-110.818 186.842-148.497 0-34.979 0-146.755-157.842-148.5l-319 .003v-173.703h319.424c121.293 0 213.515 26.107 276.677 78.321 63.152 52.213 94.733 130.071 94.733 233.581 0 107.624-33.633 189.928-100.888 246.922z"/>
        <path d="m-17.06 320.125h212.2v429h-212.2z"/>
    </g>
</g>
</svg></div>

Mark_Webster · January 31, 2019, 9:44pm

Hmmm… That’s odd indeed, it doesn’t work for me in either Chrome or Safari… If I use a different svg file in the same place the image displays correctly.

How would I make it a little higher as well?

unparagoned · January 31, 2019, 10:13pm

I know how to make it higher but that will then just cut off the top of your logo. As you can see I did try and make some minor changes, I made it s bit smaller and higher to stop the overlap and added a slight slant by mistake but you’ll probably have to figure out the black magic behind how svg work. I’m pretty sure other people has a similar problem/weird problems in relation to svg, have a search.

Edit: Try up here and you can get as proper PLEX icon Matrix Theme for HABPanel

chiefe · February 4, 2019, 8:00am

I want to implement a “Direct Link Rendered Image” into my Habpanel.

Problem is, that the background is black from the dark theme or white from the light theme.

The solution to implement the css file into the inde.html does not work.
I do not know why.
I saw that there are some other guys with the same problem.
Did someone solved this problem and can share a more detailed instruction?

Many thanks

Ariel_Pena · February 4, 2019, 8:02am

man congratulation …i have a problem i dont know how add menu_page and the icon size??

Craigers · February 4, 2019, 11:49pm

Just got Grafana and Influx running on my openHAB setup. After fighting with figuring out how to get graphs to show, I learned an frame can also be used to display graphs. I had to set the height to 200, as opposed to 100 which is what pmpkk’s original code has or else the graph is too “squished”. Left graph is using the original code style, the center is using an iframe. You can also hover over the graph and get pop up info just like when viewing in Grafana. It doesn’t match perfectly the Matrix Theme style, but this is just a starting point…
Code:

<iframe src="http://192.168.1.72:3000/d-solo/RLknL9_mz/dashboard_thermostat?refresh=1m&panelId=2&orgId=1&from=now-24h&to=now&tab=display" width="250" height="200" frameborder="0"></iframe>

Craig

unparagoned · February 5, 2019, 12:34am

Nice. I have it set up so it just displays an image, but then if you mouseover it switches to an iframe. Then some other code to revert if you click outside the graph.

Stick the following somewhere in the containing section and group.
ng-init="livingroomImage=true"
ng-click="livingroomImage=!livingroomImage"
Then most of it works here.
<div class="graph" ng-mouseover="livingroomImage=false">
        <a href="http://debra:3000/d/g6HYQROmk/flat-temperatures?orgId=1&from=now-36h&to=now&panelId=7&fullscreen" target="_blank">
          <img ng-if="livingroomImage" width="480" height="240" src="http://ip:3000/render/d-solo/ncr_U6viz/temp?orgId=1&from=now-36h&to=now&var-HueKitchenTemp=0&panelId=6&width=480&height=240&tz=Europe%2FLondon"></img>
          <iframe ng-if="!livingroomImage" style="background-image: url('http://ip3000/render/d-solo/ncr_U6viz/temp?orgId=1&from=now-36h&to=now&var-HueKitchenTemp=0&panelId=6&width=480&height=240&tz=Europe%2FLondon');" width="480" height="240" frameborder="0" ng-src="http://ip:3000/d/sdasdasak/flat-temperatures?orgId=1&from=456456&to=5466456&panelId=7&fullscreen" ></iframe>
        </a>
        <div class="legend">Last 24 hours</div>
      </div>

pmpkk · February 5, 2019, 12:41pm

Hey! A new version of the matrix theme can be found here:

miro1 · February 5, 2019, 3:38pm

Hi

How Can I add the MENU_page?
Thanks

Ariel_Pena · February 5, 2019, 9:49pm

man can you please to exleinme how make or add menu page

chiefe · February 6, 2019, 8:23am

have you found a solution for the problem?

I have the problem, that I cannot see the 3 rows on my ipad in one column.
I can only see the first two rows and the third below both.
I tried to to change the css, but without success.

BartV · February 7, 2019, 7:40am

Hi, do you need the spotify premium to have the actions working? Update and details are showing but next, pause, … are not working.

Thanks

ziltoy · February 22, 2019, 4:16pm

Would be great to have those widgets as well. They’re great but can’t sen you a message.

Daniel_Hampson · February 22, 2019, 7:43pm

Hi,

You have probably answered a simular question, or got it somewhere in your dokumentation, i hsve overread it, but on your first picture you have got charts, in widgets with other information, atleast that what it look like. My question is how did you get the charts and icons in one widget?

Nognog · February 23, 2019, 1:47pm

Hello everybody,

I am currently trying to create a dynamic icon for the seasons. Unfortunately, my code does not work, does anyone have an idea, what is my mistake?

<div ng-if="itemValue('SeasonName') == 'WINTER'" class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#WINTER"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'SUMMER'" class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#SUMMER"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'AUTUMN'" class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#AUTUMN"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'SPRING'" class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#SPRING"></use></svg></div>
<div class="name">Aktuelle Jahreszeit:</div>
<div class="valueGroup"><div class="value">{{itemValue('SeasonName')}}</div></div>

SeasonName = WINTER

regards Daniel
/
Edit:
The topic has been clarified, the strings that have been converted by the MAP file must be deposited


<div ng-if="itemValue('SeasonName') == 'Winter' class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#WINTER"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'Sommer' class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#SUMMER"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'Herbst' class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#AUTUMN"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'Frühling' class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#SPRING"></use></svg></div>
<div class="name">Aktuelle Jahreszeit:</div>
<div class="valueGroup"><div class="value">{{itemValue('SeasonName')}}</div></div>

grax · March 6, 2019, 5:17pm

Wunderground Widget not found. Now is new API on Aundergound. Have u working widget with weather icon for new API?