Matrix Theme for HABPanel

skin
theme
stylesheet
Tags: #<Tag:0x00007f014b664880> #<Tag:0x00007f014b664650> #<Tag:0x00007f014b6644e8>

(Normen) #449

Hey :slight_smile:
OK with that Im getting closer to my goal:

<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="widget" ng-if="item.type=='Dimmer' && (itemValue(item.name)==' ON ' || itemValue(item.name)>'0') && itemValue(item.name + '_color')=='N/A'" 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: item.name, 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> 
  </div>
</div>

First click: turn the lamp on (last dimmer value)
Second click opens the slider window to set the intensitiy and to turn the lamp off

What Im looking for:
First click turn the lamp on (last value)
second click turns the lamp off
click and hold: opens the window with the slider

So is anyone here who can help me with that?

Oh an the number of the lamps who are turned on isnt working. Its every time on 0.


(Leo Siepel) #450

You have to create an item with the name ‘Netatmo_Outdoor_Temperature’ and link it to a channel zwave:device:2504c90d:node2:sensor_temperature

How you achieve this depends if you use paperUI opr text based configuration for openHAB items.

zwave thing -> temperature channel -> openHab item -> UI widget


(Vítor ângelo) #451

Done. Thanks.


(Leo Siepel) #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>

(Normen) #453

Does the on/off display works for you?


(Leo Siepel) #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.


(Normen) #455

It doesnt change the states if Im using your code.


(Patrick) #456

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


(Leo Siepel) #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.


(Leo Siepel) #458

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


(Normen) #459

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

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


(Leo Siepel) #460

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


(Normen) #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.


(Edwin de Boer) #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


(Unparagoned) #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.


(Unparagoned) #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>

(Vítor ângelo) #465

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


(Bastian) #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?


(Vítor ângelo) #467

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


(Daniel N.) #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-27-37|690x431](upload://uZODCPpmiN4oCFyfzapmXzVAvSz.png