Matrix Theme for HABPanel

NCO · October 11, 2017, 1:09pm

The music part looks good and I would like to use it with your spotify webconnect api (it’s running already).
However, I am not able to manage how to extract the music part from the Groundfloor widget.
Can you please post the music.widget only, please?

bennYx0x · October 11, 2017, 3:20pm

I know your post is quite some months old, but just thought I add my hint regarding anonymous access:

Make sure you remove the semicolon in front of the entries from the gafana.ini, they are used instead of # for marking the line as a comment…

bennYx0x · October 12, 2017, 8:43am

Thanks for sharing!

BUT: You should ASAP remove your personal spotify Client ID and Secret from your items file in github!

Cheers

unparagoned · October 12, 2017, 9:32pm

Oops. Thanks

pablo_Fiscella · October 13, 2017, 8:23pm

Hi.
I can not see the script with the colors and the slicer.
Necesito algun archivo js?

thanks

furax54 · October 13, 2017, 8:50pm

you forgot github history … look here to delete https://help.github.com/articles/removing-sensitive-data-from-a-repository/

unparagoned · October 13, 2017, 10:57pm

FML. I almost gave up before I started. Then I had to install the git on bash. Then I messed everything up, then I just kept on trying to undo the mess I was making. I’m fairly confident there is a decent chance I still haven’t properly fixed it.

aletor · October 14, 2017, 1:03am

Hi Christian, sorry for the delay. I didn’t worked on Openhab since almost one month. I add this to my todo when I’ll have time to work on it. Sure I’ll let you know when I’ll able to fix it.

aletor · October 14, 2017, 1:06am

Hi Pablo, I made few customisation for my own setup. You need to pick this part :

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

pablo_Fiscella · October 14, 2017, 1:43am

Hi,

<div ng-repeat="item in itemsInGroup('Group_Lights_color_All').concat(itemsInGroup('GrupoLuces')) | filter:query as filtered">
    
    <div class="widget" ng-if="item.type=='Dimmer' && (itemValue(item.name)=='OFF' || itemValue(item.name)=='0') && 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" ng-style="{'background': 'rgb(' + itemValue(item.name + '_color') + ')'}"></div>
        <div class="hueSelect" ng-init="showHueSelect = true" 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', color.hsb)" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></a>
            <!-- 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>

The code is the same.
But I do not know how it is activated. I can not get the slicer to appear.
If I put that code down, there it appears.
That’s why I think it’s some other problem.
How does it work? I have to click somewhere specific?
My item has to be dimmer and with a special name?

Thank you

bennYx0x · October 14, 2017, 8:15am

Hey, first of all: thanks for sharing!

Just a quick question: Does the slider work for you on tablets/mobile phones? I’m wondering that the slider is working on my Notebook but not on the other mentioned devices…

furax54 · October 14, 2017, 9:15am

@aletor, @pablo_Fiscella : I’m using this code successfully. But slider take some seconds to appears (see here for issue (closed …) : https://github.com/openhab/org.openhab.ui.habpanel/issues/232

<div class="section" ng-init="hueColors = [ { hsb: '0,0,100', hex: '#fff' }, { hsb: '74,78,100', hex: '#fecc2f' }, { hsb: '46,100,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/symbol-defs.svg#icon-lampe"></use></svg></div></div>
  <div class="title"><div class="name">Lampes</div></div>
  <div class="controls">

  <div ng-repeat="item in itemsInGroup('gLights')">
    
    <div class="widget" ng-if="item.type=='Color' && itemValue(item.name + '_rgb')=='0,0,0'" ng-click="showHueSelect = !showHueSelect">
      <div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/symbol-defs.svg#icon-switch-off"></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, '0')">
            <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='model={"item": item.name, "floor": 0, "ceil": 100, "step":1}'>
              <widget-slider ng-model="model" />
            </div>
          </div>
        </div>{{item.label}}</div>
    </div>

    <div class="widget" ng-if="item.type=='Color' && itemValue(item.name + '_rgb')!='0,0,0'" ng-click="showHueSelect = !showHueSelect">
      <div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/symbol-defs.svg#icon-switch-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, '0')">
              <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='model={"item": item.name, "floor": 0, "ceil": 100, "step":1}'>
              <widget-slider ng-model="model" />
            </div>
          </div>
        </div>{{item.label}} {{itemValue(item.name).split(',')[2]}}</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>

aletor · October 14, 2017, 9:36am

Hi,

For the code you linked, you have to match these conditions :

item.type=='Dimmer' 
&& (itemValue(item.name)=='OFF' || itemValue(item.name)=='0') 
&& itemValue(item.name + '_color')!='N/A'

So the item should be a Dimmer in position “OFF” or “0” and have a value different than N/A (in my case, if it’s N/A then the bulb is a white one). So if you are using only that condition, colorpicker & slider should only be printed when matching these conditions.

I can’t access my code right now but in my case I use this code 4 times :

Color bulb
- On : item.type==‘Dimmer’ && (itemValue(item.name)==‘ON’ || itemValue(item.name>>‘0’) && itemValue(item.name + ‘_color’)!=‘N/A’
- Off : item.type==‘Dimmer’ && (itemValue(item.name)==‘OFF’ || itemValue(item.name)==‘0’) && itemValue(item.name + ‘_color’)!=‘N/A’
White bulb
- On : item.type==‘Dimmer’ && (itemValue(item.name)==‘ON’ || itemValue(item.name)>‘0’) && itemValue(item.name + ‘_color’)==‘N/A’
- Off : item.type==‘Dimmer’ && (itemValue(item.name)==‘OFF’ || itemValue(item.name)==‘0’) && itemValue(item.name + ‘_color’)==‘N/A’

Hoping it helped you.

aletor · October 14, 2017, 9:44am

Hi, no problem

You mean that you slider isn’t displayed or working (then affecting brightness of the bulb) ?

If it’s the 2nd option, I maybe made a mistake in my code linked here because I figured that it wasn’t dimming brightness’s bulb when sliding. I made a modification past month but I’m not using / working on this since I have too many things to do (rules :p)

I’ll try to update that post in the afternoon to test and validate that my actual code is working, and then I’ll past it here.

bennYx0x · October 14, 2017, 9:49am

The second option but as mentioned only on my tablet & mobile device. On my Notebook its working as aspected!

Hehe understandable, optimizing the own smart home is like a never ending task

Thanks in advance!

Cheers

aletor · October 14, 2017, 9:51am

Thank you for the digging, I’ve to work on that when possible. Funny thing is that in your case, the position inside the slider is the good when on 1st ng-show. In my case, the value inside the slider was the good one but the position was wrong (set to “0”).

I need to work on it too, too many things to do

aletor · October 14, 2017, 9:58am

It’s weird that it’s working on a certain type of device as the code is exactly the same. Even more if the slider is correctly displayed. I need to double check it so because I’ve maybe the exact same issue you have.

Thank you for the hint

pablo_Fiscella · October 14, 2017, 7:09pm

Hi. Now you can recognize the item.
When it complies with these conditions I repeat the item but the slicer does not appear.
And it takes a few seconds to appear.
Do I have to install any version of angular or habpanel more recent?
Thank you very much

pablo_Fiscella · October 18, 2017, 12:57am

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>

bennYx0x · October 18, 2017, 11:27am

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.