Matrix Theme for HABPanel

Tutorials & Examples HABPanel Examples
, ,
451

Done. Thanks.

452

I used this code for dimmers and switches. Maybe you can combine them with some modal (look up angular or habpanel documentation) or javascript mousedown event. I never attempted to make that sliderpopup.

                <div class="section">
	<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">Licht</div><div class="summary">An: {{ ( filtered | filter: { state: 'ON' } ).length }} von {{filtered.length}}</div></div>
  <div class="controls">
 
    <div ng-repeat="item in itemsInGroup('gLicht').concat(itemsInGroup('')) | filter:query as filtered">
                    <div class="controlItem" ng-if="item.type=='Switch' && (itemState(item.name)=='NULL' || itemState(item.name)=='OFF')" ng-click="sendCmd(item.name, 'ON')">
                    <div class="name">{{item.label}}</div>
                    <div class="controlGroup">
                        <div class="control">
                            <div class="icon off">
                                <svg viewBox="0 0 48 48">
                                    <use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="controlItem" ng-if="item.type=='Switch' && itemState(item.name)=='ON'" ng-click="sendCmd(item.name, 'OFF')">
                    <div class="name">{{item.label}}</div>
                    <div class="controlGroup">
                        <div class="control">
                            <div class="icon on">
                                <svg viewBox="0 0 48 48">
                                    <use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
<div class="controlItem" ng-if="item.type=='Dimmer'">
                    <div class="name">{{item.label}}</div>
                    <div class="controlGroup">
                        <div class="control" ng-init='model={"item": item.name, hidelabel : true, hidelimits: true, hidepointer: true, "floor": 0, "ceil": 100, "step":1, "unit": "%"}'>
                            <widget-slider class="value" ng-model="model" />
                        </div>
                    </div>
                </div>

 </div>
</div>
1 Like
453

Does the on/off display works for you?

454

Not sure what you mean. The widget reflects the state of the switch and if you tick it, it changes state.

Currently working on the squid svg stuff. I bought it, but can’t seem to find the right icons. there are so many. and it looks liek all of them support all id’s i really don;t know how to pick the right .svg files.

455

It doesnt change the states if Im using your code.

456

Hey! Have you tried using the SVG combiner script I provided?

457

Yes and it worked as expected.

I was searching all icons for the symbol id’s you provided in json. Every id was found in 100 different files. I’m still puzzled how the script determines the file it needs. Because if i want to add some icons, i want to be sure they match the style of the other icons.

458

It was a straight copy paste from my production widget. Any errors in Chrome developer console (F12) ?

459

There are several “[sprintf] expecting number but found string”

This problem is only with “Dimmer”. Switches are no problem.

460

The sprintf is not related. If you post your widget i can look into it.

461 
<div class="section">
	<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg></div></div>
  <div class="title"><div class="summary" style="font-size: 12px">An: {{ ( filtered | filter: { state: 'ON' } ).length }} von {{filtered.length}}</div></div>
  <div class="controls">
 
    <div ng-repeat="item in itemsInGroup('gLicht').concat(itemsInGroup('gSchalter')) | filter:query as filtered">
    
      <div class="widget" ng-if="item.type=='Dimmer' && (itemValue(item.name)==' ON ' || itemValue(item.name)>'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"></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, 'OFF')">
            		<svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 4px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#cross-line"></use></svg>
            	</a>            	
          		<div ng-init='slider = { value: 0, options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };'></div>
          		<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>         
        		</div>
        	</div>
           {{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'))) && itemValue(item.name + '_color')=='N/A'">
  <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="name" ng-click="showHueSelect = !showHueSelect">
    <div class="hue"></div>
    <div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div>
      <div class="hueSelectOptions">
        <!-- Brightness slider bar -->
        <div ng-init='slider = { value: 0, options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };'></div>
        <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
      </div>
    </div>
    {{item.label}}
  </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" ng-click="showHueSelect = !showHueSelect"> {{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" ng-click="showHueSelect = !showHueSelect">  {{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" ng-click="showHueSelect = !showHueSelect">  {{item.label}}</div>
    </div>
      
  	</div> 
  </div>
</div>

There is an other strange failure. The slider for the intensitiy is working well on each PC (mouse) but when I want to use it on my touch screen it doesnt work. I can move the slider but it doesnt send the value to the lamp nor the slider-window disappear when I set a value.

462

Hello Boogieman,

I’m also working on making a SONOS addition to the panel.
I’ts almost complete but for some reason I can’t find a working SONOS svg logo or create one myself.
All the results are the same, the logo isn’t showing.

What dit you use for your logo and are you willing to share this one?

The slider looks nice, I migth use you’re solution also.

Thanks.
Edwin

463

Yeh I noticed an issue with touch not working. I managed to fix it on some other sliders but didn’t fix the light sliders, I’ll try and sort it out over the weekend. One of the methods required using eazyloads for js but I think there is an easier method.

1 Like
464

Edit: There are issues on init with this code. It seems to turn all the lights off and all lights that are off look like they are on.

Here is a slider that works with touch. I’m sure there should be a more elegant solution but this works without messing with js.


          <div class="bottom" ng-init="switchState=itemValue(item.name).split(',')[2];">
            <div class="name">Set Target Temp: {{itemValue('KitchenThermostatTargetTemp')}}</div>
            <div ng-init="slider = { value: 20, options: { floor: 15, ceil: 100, step: 1, showSelectionBar: true } }; slider.value=itemValue(item.name).split(',')[2]"></div>
            <div ng-switch on="slider.value">
              <div ng-switch-default><div ng-init="sendCmd(item.name, slider.value)"></div></div>
            </div>
            <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ></rzslider>
          </div>
465

Can anyone helpme to give the location of index.html of grafana?

466

You can find it here: usr/share/grafana/public/views/index.html
all file paths: https://www.archlinux.org/packages/community/x86_64/grafana/files/

But for me, it doesn’t work with the transparency background. Additional i am still searching for a solution to update the chart every xy minutes.

anyone has an idea?

1 Like
467

Thanks. I try and dind’t work too…for update i think you can simple put in time now-24h

469

Thanks a lot to Patrick for the idea / template. I am (for now) finished with my surface:grin:

Here some inspirations

Screenshot_2018-08-18-12-25-04
Screenshot_2018-08-18-12-25-04.png1920×1200 229 KB

Screenshot_2018-08-18-13-25-39
Screenshot_2018-08-18-13-25-39.png1920×1200 223 KB

Screenshot_2018-08-18-12-25-43
Screenshot_2018-08-18-12-25-43.png1920×1200 149 KB

Screenshot_2018-08-18-12-25-57
Screenshot_2018-08-18-12-25-57.png1920×1200 185 KB

![Screenshot_2018-08-18-12-27-37|690x431](upload://uZODCPpmiN4oCFyfzapmXzVAvSz.png
Screenshot_2018-08-18-13-19-24
Screenshot_2018-08-18-13-19-24.png1920×1200 218 KB

Screenshot_2018-08-18-12-27-05
Screenshot_2018-08-18-12-27-05.png1920×1200 215 KB

Screenshot_2018-08-18-12-25-12
Screenshot_2018-08-18-12-25-12.png1920×1200 152 KB

17 Likes
470

Wow, this is great! Love it! :slight_smile:

1 Like
471

Very nice! Would you mind sharing your config? What kind of tablet do you use?

Regards,
Herbert

1 Like