Matrix Theme for HABPanel

skin
theme
stylesheet
Tags: #<Tag:0x00007f015719b478> #<Tag:0x00007f015719b248> #<Tag:0x00007f015719b0b8>

(Daniel N.) #494

Hej Gracjan,

Second Post here:


(Daniel N.) #495

Send me a pm with your email address :slight_smile:i can send yout my Widgets.


(Konstantin K.) #496

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


(Ethan Martin) #497

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.


(Gracjan) #498

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


(Gracjan) #499

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?


(Peter) #500

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


(Konstantin K.) #501

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


(axlerose) #502

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


(Peter) #503

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


(Peter) #504

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


(Nathan Crocker) #505

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)


(George) #506

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?


(Unparagoned) #507

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>


(Alexander G) #508

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.


(George) #509

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.


(Chriss Rhabek) #511

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


(Chriss Rhabek) #512

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>