Matrix Theme for HABPanel

skin
theme
stylesheet
Tags: #<Tag:0x00007f014d2d49c0> #<Tag:0x00007f014d2d4808> #<Tag:0x00007f014d2d4560>

(Pablo Fiscella) #264

Hi. I’m a little closer.
Now it shows the slicer but at the same time disappears.
As if another condition caused this to happen.

      <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'" 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">
          <div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_color') + ')'}"></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>
	        <div class="name">{{item.label}}</div>
        </div>
      </div>

      <div class="widget" ng-if="((item.type=='Dimmer' && itemValue(item.name)>'0') || (item.type=='Group' && itemValue(item.name)=='ON')) && itemValue(item.name + '_color')=='N/A'" 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">
          <div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_color') + ')'}"></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>
	        <div class="name">{{item.label}}</div>
        </div>
      </div>    

(Benjamin) #265

Double check your ng-if Statements, especially the brackets.

For example you forgot || itemValue(item.name)==‘ON’ at the code below.

Steps:
First you remove the above code Fragment and check, if the sliders are shown for your Dimmer Lamps which are on.
If some are not shown for Lamps which are on -> fix the ng-if Statement

Second step is to reinsert the above code of yours and play around again.


(Pablo Fiscella) #266

Hello, thank you very much for the help.
That I could solve.

Now I have another problem. I’m still not testing it with the lamp since I do not know how to control it.
But visually it does not work.
When I choose a color it performs several updates and ends up changing the color as it adds one or the end of rgb.
I can not find a way to correct it.

If anyone has an idea please help.
Thank you

L1 is a name of lamp
gRGB is a group

Updating L1 state from 0,0,0 to 26,100,100 (color orange)
Updating gRGB state from 0 to 100
Updating L1 state from 26,100,100 to OFF
Updating L1 state from OFF to 26,100,0 (other color)
Updating gRGB state from 100 to 0

<div class="section" ng-init="hueColors = [ { hsb: '0,0,0', hex: '#fff' }, { hsb: '254,204,47', hex: '#fecc2f' }, { hsb: '46,46,100', hex: '#f9a228' }, { hsb: '26,100,100', hex: '#f6621f' }, { hsb: '0,100,100', hex: '#db3838' }, { hsb: '273,100,100', hex: '#a363d9' }, { hsb: '201,100,100', hex: '#40a4d8' }, { hsb: '177,100,100', hex: '#33beb8' }, { hsb: '140,100,100', hex: '#b2c225' } ]">
	<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">Lights</div><div class="summary">ON: {{ ( filtered | filter: { state: 'ON' } ).length }} of {{filtered.length}}</div></div>
  <div class="controls">
 
  	<div ng-repeat="item in itemsInGroup('gRGB') | filter:query as filtered">
   		<div class="widget" ng-if="item.type=='Color' && (itemValue(item.name)=='OFF' || itemValue(item.name)=='0') && itemValue(item.name + '_color')!='N/A'" ng-click="showHueSelect = !showHueSelect">
      	<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">
          <div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name) + ')'}"></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, color.hsb)" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></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.nam, slider.value)"></rzslider>         
          	</div>
     			</div>
          {{item.label}} {{itemValue(item.name)}} 
       	</div>
    	</div>
      <div class="widget" ng-if="item.type=='Color' && (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" ng-style="{'background': 'rgb(' + itemValue(item.name) + ')'}"></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: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#cross-line"></use></svg>
            	</a>
            	<a href="" ng-click="sendCmd(item.name, color.hsb)" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></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.nam, slider.value)"></rzslider>         
        		</div>
        	</div>
          {{item.label}} ; {{itemValue(item.name)}} 
        </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">{{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">{{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">{{item.label}}</div>
      </div> 
  	</div> 
  </div>
 </div>

(Benjamin) #267

Hey,

since I saw some errors in your config, please fix them first and check the results again:

  1. Did you create String Items for your Color Lamps? E.g. L1_color and so on.

  2. Did you create the following rule? (I adjusted it for your settings, but double check it)

rule "Setting RGB Values"
when 
	Item gRGB received update
then

	gRGB.members.forEach [ item | 
		var HSBType hsb = item.state as HSBType
		var red = Math::round(hsb.red.intValue * 2.55)
		var green = Math::round(hsb.green.intValue * 2.55)
		var blue = Math::round(hsb.blue.intValue * 2.55)
		postUpdate(item.name + "_color",red.toString + "," + green.toString + "," + blue.toString)  
		logInfo("RGB","Updating (" + item.name + "_color)")
	]

end

When I choose a color it performs several updates and ends up changing the color as it adds one or the end of rgb.

Sry but I dont understand what you mean with “as it adds one or the end of rgb” :slight_smile:

Following typo is also in your code:

<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.nam**e**, slider.value)"></rzslider>

Note that you forgot the e at the end of “item.name”. You forgot it at every line with the rzslider.


(Bas) #268

@pmpkk Hello Patrick, thanks for your great contribution with your responsive Matrix theme. I’m struggling with getting displaying my grafana graphs exactly like you did in your System display.

In all your screenshots it seems that the graph image you show has a transparent background. When I import the graph I get either the dark or the light background (depending on which Grafana theme was active at the time) To better show what I mean I’ve attached a screenshot.

Can you explain to me how you got the background in your graphs to match the background in the Matrix theme?

Thanks in advance!

Edit: Oops… my bad… I just saw (by searching this post) that someone else asked this and you answered them on the 9th of july… So thanks for that! :wink:


(Pablo Fiscella) #269

Group gLuces
Group gRGB
Color L1 "Luz Comedor" (gRGB, gLuces) {mqtt=">[broker:cmnd/luz/POWER:command:*:default],<[broker:stat/luz/POWER:state:default"}
String L1_rgb



rule "Set RGB Values"
when
        Item gRGB received update
then

        var HSBType hsb

        gRGB.members.forEach [ item |
                hsb = item.state as HSBType
                var red = Math::round(hsb.red.intValue * 2.55)
                var green = Math::round(hsb.green.intValue * 2.55)
                var blue = Math::round(hsb.blue.intValue * 2.55)
                postUpdate(item.name + "_rgb",red.toString + "," + green.toString + "," + blue.toString)
                logInfo("Hue","Updating Hue Colors (" + item.name + "_rgb)")
        ]
end

      <div class="widget" ng-if="item.type=='Color' && (itemValue(item.name+'_rgb')!='0,0,0' || itemValue(item.name+'_rgb')!='0' || itemValue(item.name+'_rgb')!='OFF')" 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" ng-style="{'background': 'rgb(' + itemValue(item.name + '_rgb') + ')'}"></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: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#cross-line"></use></svg>
            	</a>
            	<a href="" ng-click="sendCmd(item.name, color.hsb)" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></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)}} ; {{itemValue(item.name + '_rgb')}} 
        </div>

Now the item changes color but only for an instant. A second later it goes out and they turn black.

Example Debug Chrome
Command sent: L1=0,100,100
Updating L1 state from 46,46,0 to 0,100,100
Updating gRGB state from OFF to ON
Updating L1_rgb state from 0,0,0 to 255,0,0
Updating L1_rgb state from 255,0,0 to 0,0,0
Updating L1_rgb state from 0,0,0 to 255,0,0
Updating L1 state from 0,100,100 to OFF
Updating L1 state from OFF to 0,100,0
Updating gRGB state from ON to OFF
Updating L1_rgb state from 255,0,0 to 0,0,0

Thanks


(Benjamin) #270

Wrap your slider inside <div class="hueSelectOptions"><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>

double check that the div tags match


(Pablo Fiscella) #271

I deleted that fragment.
It stays the same but it does something strange.
The template has several colors, white, yellow, orange etc.
All send an HSB value and receive an RGB from the .rules file.
All return the same number minus yellow as if the RGB resolves.


(shane kevin) #272

hey guys, how to get the grafana sheets auto refesh in habpanel? I’ve successfully using “direct rendered image” inside the theme, however all grafana seems dosn’t refresh the image unless I hit the browser refresh button(F5) to completely refresh the habpanel, does it looks like a bug or am I done something wrong with the grafana side?

also I am wondering the data is growing biger and biger, how to auto delete the recording data(in this case it’s just the system binding data such as cpu_load1, memory used etc…) by a period of time say every week it can be auto deleted?

thanks guys! please help


(shane kevin) #273

hey guys me again, please help with a group switch item in html5(completely noob here)
I’ve create a light switch widget inside a group “gMbedroom”:

   <div ng-repeat="item in itemsInGroup('gMbedroom').concat(itemsInGroup('')) | filter:query as filtered">

      <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">{{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#light_bulb"></use></svg></div>
        <div class="name">{{item.label}}</div>
      </div>

which is working like a charm, it lists all my switches inside gMbedroom and I can turn them on/off one by one.
However I would like to make another dummy switch for the gMbedroom group, so that I can “one click” to turn on/off all lights inside the gMbedroom group, I don’t know how to code it using html5, please help!

here are the items in openhab2(I have a 3gang switch controlling 3 lights in my bedroom)

Group:Switch:OR(ON,OFF) gMbedroom "gMbedroom"
Switch 3gangNo1_01 "3gangNo1_01" <light> (gMbedroom,gLight) ["Switchable"]
    { mqtt=">[broker:cmnd/3gang/POWER1:command:*:default],
            <[broker:stat/3gang/POWER1:state:default]" }
Switch 3gangNo1_02 "3gangNo1_02" <light> (gMbedroom,gLight) ["Switchable"]
    { mqtt=">[broker:cmnd/3gang/POWER2:command:*:default],
            <[broker:stat/3gang/POWER2:state:default]" }
Switch 3gangNo1_03 "3gangNo1_03" <light> (gMbedroom,gLight) ["Switchable"]
    { mqtt=">[broker:cmnd/3gang/POWER3:command:*:default],
            <[broker:stat/3gang/POWER3:state:default]" }

Please help!


(Benjamin) #274

Regarding your mBedroom button, this should work:

<div class="widget" ng-if="( filtered | filter: { state: 'ON' } ).length == 0" ng-click="sendCmd('gMbedroom', '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">mBedroom Lamps</div>
</div>
    
<div class="widget" ng-if="( filtered | filter: { state: 'ON' } ).length > 0" ng-click="sendCmd('gMbedroom', 'OFF')">
        <div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
        <div class="name">mBedroom Lamps</div>
</div>

havent tested it.

Regarding influxdb, search for retention policy. They define when data is being deleted in influxdb.


(shane kevin) #275

Thanks man, the code working very nice ^^… thanks a lot man, you are my life saver


(shane kevin) #276

Hi @Michael_Stjerna, the mapdb persistence seems like not working at all? Did u have a sonoff device that can working with this mapdb things? My pi lose the power and all sonoff touch go to a state NULL, they just can’t store the last state when I relogin to habpanel, do u have a solution?


(Michael Stjerna) #277

@kevinshane
Hi. Did you set up the configuration of the MAP correctly?
Here is what I have done, with this ALL values and states are stored/restord on reboot.

You need to “persist” the OpenHAB values and restore them when restarting the system.
If you don’t have a solution in place you can simply add the “MapDB Persistence” from the PaperUI -> AddOns --> PERSISTENCE.
You need to create a file that stores all the vaiables into the MapDB. You will only store values that are updated and ONLY the latest value.
Create the file:
/etc/openhab2/persistence/mapdb.persist
Strategies {
    default = everyUpdate
}

Items {
    // persist all Items on every change and restore them from the MapDB at startup
    * : strategy = everyChange, restoreOnStartup
}

Br
Michael Stjerna


(shane kevin) #278

Hi Michael, thank you for your detain info, I’ve found what the problem causing the mapdb won’t working at all, it’s because I installed 3 different persist type in my openhab2(influxdb,mapdb,rrd4j), so I need to define which one is the default one, so I setup the mapdb one as the default and everything works now~ many thanks again~


(Jens Meyer) #279

Hi all,

I do have some trouble with this on my ipad. The layout wraps after two big dash divs and the third one is displayed below.
The same happens, if I resize my desktop’s chrome browser to the size of an ipad. I did not change the css. Had anyone the same problem and was able to fix it?

Thanks
Jens


(Patrick) #280

Can you private message me your Json/markup and I’ll have a look?


(George) #281

Hi Patrick! First of all thank you for the great work! I was wondering if you could share how you set up the rules.items file so that you can control the rules vis Habpanel? Thank you.


(Jens Meyer) #282

Hi,

have you had a chance to look at the json I sent you via pm?
I did not yet find a solution myself :frowning:

Thanks
Jens


(Chris) #283

I’m experiencing the same problem on my iPad as well. Stock Install from github