Matrix Theme for HABPanel

pablo_Fiscella · October 20, 2017, 10:47pm

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>

bennYx0x · October 21, 2017, 8:00am

Hey,

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

Did you create String Items for your Color Lamps? E.g. L1_color and so on.
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”

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.

QNimbus · October 21, 2017, 8:57pm

@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!

pablo_Fiscella · October 21, 2017, 8:59pm


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

bennYx0x · October 22, 2017, 8:23am

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 · October 22, 2017, 10:07pm

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.

kevinshane · October 30, 2017, 4:31pm

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

kevinshane · October 30, 2017, 5:18pm

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!

bennYx0x · October 30, 2017, 6:32pm

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.

kevinshane · October 30, 2017, 6:43pm

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

kevinshane · October 31, 2017, 5:30pm

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 · November 1, 2017, 11:53am

@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

kevinshane · November 1, 2017, 1:40pm

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_M · November 3, 2017, 7:03pm

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

pmpkk · November 3, 2017, 7:11pm

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

tinkernut · November 4, 2017, 5:24pm

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_M · November 12, 2017, 9:36am

Hi,

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

Thanks
Jens

Python · November 13, 2017, 2:48am

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

unparagoned · November 22, 2017, 8:34pm

I had a PM asking about my harmony integration. I thought I’ll put the response here for others who want to integrate harmony. I’ve got it working so it automatically gets the keys for all the remotes, etc. There need to be some formatting but it’s useful to be able to control everything from one place.

Check out the ground floor widget

salphonso · November 22, 2017, 9:52pm

Thanks for this. In the widget, what value should be use for the itemValue? I see you use harmonyActivity. Is that what everyone should use or is that where the item id would go? I am still getting familiar with the code and schema of everything. Only been on OpenHab for a little less than a week now.