Matrix Theme for HABPanel

Hi all,

just wanted to try this but I’m already having problems with the combiner script. I can’t access the static html folder? I’m on the 2.4.0_Snapshot…

Thx and regards

Can you give me a quick run through of the design process you use for your theme? Specifically, do you use a software such as Dreamweaver to create the widgets and CSS file? I attempted this but its past my amateur skill set.

Which Binding is good for checking persons - in home or outside?
I search good solution for HABPanel

HI!
Which thermostat will be good for OpenHab2 - HABPanel - Settings temperature, mode etc?
Netatmo Valve working or Tado. Maybe others?
Who can recommend me something?

Alexandre,

Did you ever find a fix to this issue? The slider being all the way to the left even though the light is on…
I am having the same issue:-)
Cheers,
Peter

Was some kind of config problem after Snapshot installation. I ran all openhab config topics and it works now. Now I’m tinkering with this nice panel. Thx for sharing this. Can someone also share some rules and items?

thx and regards,
Konstantin

Hi all have anyone create a free to use squidink.svg file?

Hi guys,

What a great theme:-)
I have got everything up and running, but are having small issues with the SVG icons. I purchased the complete pack and the icons already in the squidink.svg file works fine, but the one I try to add from the “original SVGs” directory don’t show up for some reason. I have tried the script - it runs, but does not include all the icons I add in the top. I have also tried removing “stroke” and “stroke width” without luck. My process described below - maybe someone can see what i am doing wrong? Thank you very much.

Here is the file I open from the original svg folder - I copy out the shown lines.

<g id="microphone-4">
	
		<circle fill="none" stroke="#1F1F1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="25" cy="12" r="10"/>
	
		<line fill="none" stroke="#1F1F1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="13" y1="12" x2="37" y2="12"/>
	<path fill="none" stroke="#1F1F1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M30,21l-1.750864,18.0103645C28.1083164,40.7002029,26.6956978,42,25.0000038,42h-0.0000076
		c-1.695694,0-3.1083126-1.2997971-3.2491322-2.9896355L20,21"/>
	
		<line fill="none" stroke="#1F1F1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="25" y1="42" x2="25" y2="46"/>
	
		<line fill="none" stroke="#1F1F1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="25" y1="33" x2="25" y2="35"/>
</g>

Remove the “stroke” and “stroke width” and insert in squidink.svg:

<g id="microphone-4">
	
		<circle fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="25" cy="12" r="10"/>
	
		<line fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="13" y1="12" x2="37" y2="12"/>
	<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M30,21l-1.750864,18.0103645C28.1083164,40.7002029,26.6956978,42,25.0000038,42h-0.0000076
		c-1.695694,0-3.1083126-1.2997971-3.2491322-2.9896355L20,21"/>
	
		<line fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="25" y1="42" x2="25" y2="46"/>
	
		<line fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="25" y1="33" x2="25" y2="35"/>
</g>
</svg>

Sadly when I use the “microphone-4” icon, it does not show. It is the same with other icons I have tried to import.
Any ideas are greatly welcome:-)
Thanks, Peter

SOLVED.
It was a “rights” problem. Need to assign read rights to that folder. Now it works!

Wow!, this looks great!.
I have run through the install… however I seem to be missing something… I cannot see where to link the items ??

-Ignore found the issue … The code block in the Widgets are not showing for me (blank)

Hey @unparagoned thanks for setting this up. I am excited to get this up and running. I was able to get my Harmony hub linked to through the widget it now shows the current state and activity for the Harmony. My question is how do get it to how all of the remotes and buttons?

I never got round to do a proper remote but I did make an automated remote that dynamically creates every button. I have two versions. One has basic button based remote with lots of buttons but takes up too much space, so you need to click on the arrows to expand and open the remote. The other is a more compact drop down menu.

      <div class="remotes" ng-init="remotep=false; remotel=false">
        <div class="widget">
          <div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div>
          <div class="name">Channel</div>
          <div class="name"  ng-click="remotep=!remotep">Enable Remotes<div class="sicon on" ng-if="remotep==false"><svg  viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div><div class="sicon on" ng-if="remotep!=false"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#top-arrow-2"></use></svg></div></div>
        </div>
        <div class="widget-wide" ng-show="remotep !=false"> 
          <div ng-repeat="item in itemsInGroup('gharmony')">
            <div class="title">&#13; Remote: {{item.label}}&#13;</div>       
            <div class="col-md-12">
              <div ng-if="remotel" ng-repeat="i in item.stateDescription.options">   
                <div class="option button" ng-click='sendCmd(item.name, i.value)'>{{i.label}}</div>
              </div>
            </div><div class="title" ng-show="remotep == true" ng-click="remotel=!remotel"><div class="value">Toggle Remote <div class="toggleIcon" style="display: inline-block;"><div class="sicon on"><svg  viewBox="0 0 48 36"><use  ng-if="remotel !=true" xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use><use ng-if="remotel==true" xlink:href="/static/matrix-theme/squidink.svg#top-arrow-2"></use></svg></div></div> </div>       
            </div></div>
          <div class="title" ng-show="remotep == true" ng-click="remotel=false; remotep=false"><div class="value">Close ALL Remotes <div class="toggleIcon"><div class="sicon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#top-arrow-2"></use></svg></div></div></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#volume"></use></svg></div>
        <div class="name" ng-init="remote=false" ng-click="remote=!remote">Enable Remotes<div class="sicon on" ng-if="remote==false"><svg  viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div><div class="sicon on" ng-if="remote==true"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#top-arrow-2"></use></svg></div></div>

        <div ng-if="remote==true" ng-repeat="item in itemsInGroup('gharmony')">
          <div class="widget">
            <div class="name">{{item.label}}</div>
            <div class="btn-group"  dropdown-append-to-body="true"uib-dropdown>
              <button id="single-button" type="button" class="btn btn-primary"  uib-dropdown-toggle>
                {{item.state}} <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" uib-dropdown-menu role="menu" style="overflow: auto; max-height:300px; overflow-x:hidden" aria-labelledby="single-button">
                <dev ng-repeat="i in item.stateDescription.options">
                  <li role="menuitem"><a ng-click='sendCmd(item.name, i.value)'>{{i.label}}</a></li>
                </dev>
              </ul>
            </div>
          </div>
        </div>
      </div>

How do I edit the code properly? On github it is just a 4-liner which is totally unusable in an editor.
In the Habpanel Widget editor, the whole page/code block just turns white as soon as I copy in the lines.
If I import the widget it is already whitened out as soon as I open it.

Using Google Chrome.

The widgets itself are working, although obviously missing data since the items are not matching my own names.

Seems I am overseeing something really simple.

Hey @pmpkk ! Thanks again for making such an amazing theme. I would like to integrate my security camera’s into the theme now that I have them up and running and wondering if you could help me with the CSS code. I have the source link for the feeds and they are working with ip camera widget currently in habpanel but I would like to get them to be seamless into the Matrix theme with the same boarders/containers Colored Names ect. Can you help me out? Thank you.

Try another Browser, had the same issue with Google Chrome but wors with Firefox.

I did it this way…

	<div class="bigDash">
		<div class="description">Thermostat</div>    
		<div class="top">
			<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="value">
				<div class="main">{{itemValue('Wohnzimmer_Soll_Temperatur') | number:1}}</div>
				<div class="sub">&#176C</div>
			</div>

		</div>
		<div class="bottom">
			<div class="controlGroup">
        <div class="control" ng-click="sendCmd('Wohnzimmer_Soll_Temperatur', '18')">18</div>
        <div class="control" ng-click="sendCmd('Wohnzimmer_Soll_Temperatur', '20')">20</div>
        <div class="control" ng-click="sendCmd('Wohnzimmer_Soll_Temperatur', '22')">22</div>
        <div class="control" ng-click="sendCmd('Wohnzimmer_Soll_Temperatur', '24')">24</div>
        <div class="control" ng-click="sendCmd('Wohnzimmer_Soll_Temperatur', '26')">26</div>
			</div>
		</div>
    <div class="graph">
			<img width="250" height="100" src="http://home:3000/render/d-solo/-GysmbgRk/weather?panelId=21&orgId=1&from=now-24h&to=now&width=500&height=250&tz=UTC%2B02%3A00" />
			<div class="legend">Last 24 hours</div>
    </div>
	</div> 

I have the same issue, and it has something to do with the browser and/or the theme itself.
Using another theme it works well for me also in Chrome.
Using the matrix theme i have to use another browser.

thanks. it is actually working with firefox.
still wondering why it is a 4 liner in the first place (see github) which notepad++ and others cannot change into a readable version.

Anyhow no issue anymore as i just copy it from the firefox codebox now

Hello
can i have your widget-config please?

Hello Boogieman,

The sonos code looks great and I have implemented this now.
The only problem I have is with the volume Slider, it doesn’t stretch to the full with.
Currently the only way to do this is, to add a name property with al long name.

How did you solved this?

Regards,
Edwin