Custom Theme in HabPanel 2.1 Example

skin
theme
stylesheet
Tags: #<Tag:0x00007f6ce9717d18> #<Tag:0x00007f6ce9717bd8> #<Tag:0x00007f6ce9717a98>

(shane kevin) #244

hi @pmpkk, thanks for your sharing! really amazing job!
could u please explain how to change the grafana sheet to a regular rrd4j one? looks like the rrd4j is very similar to the grafana one, well maybe mainly because the grafana may constantly “writing/reading” data to sdcard so it may reduce the sdcard life??


(Randall) #245

@pmpkk Patrik, thanks for your matrix-theme example. I’m slowly tweaking it for my own needs and was wondering if, somewhere in there, you have a basic horizontal/vertical slider control element? I have a bunch of basic dimmer switches and volume controls to implement in my layout.


(E. Gerland) #246

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?


(Benjamin) #247

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…


(Benjamin) #248

Thanks for sharing!

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

Cheers


(Unparagoned) #249

Oops. Thanks


(Pablo Fiscella) #250

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

thanks


(furax54) #251

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


(Unparagoned) #252

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.


(Alexandre) #253

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.


(Alexandre) #254

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) #255

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


(Benjamin) #256

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) #257

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


(Alexandre) #258

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.


(Alexandre) #259

Hi, no problem :wink:

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.


(Benjamin) #260

The second option :wink: 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 :wink:

Thanks in advance!

Cheers


(Alexandre) #261

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


(Alexandre) #262

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


(Pablo Fiscella) #263

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