Matrix Theme for HABPanel

skin
theme
stylesheet
Tags: #<Tag:0x00007f0e9b5cb4e8> #<Tag:0x00007f0e9b5cb3a8> #<Tag:0x00007f0e9b5cb268>

(Jonas) #364

Hi! Did anything change in OH 2.2?
Your rule does not fire when i change the color of the group members …

i just edited the name of the group in both, the rule and the items-files. that’s it. When i change the color via habpanel the hue does it but the rule is not executed (no log entry, no color change in the habpanel, no change of the item_rgb item in the rest api …

Items:

Color 	SchlaZi_Licht_Decke_Farbe           "Schlafzimmerlicht"                 (GrSchlazi, GrLicht, GrFarblicht)   ["Lighting"]    {channel="hue:0210:1:SchlaZi_Licht_Decke:color"}

String  SchlaZi_Licht_Decke_Farbe_rgb

Rules-file: (changed the var hsb to global because VSC was being annoying):

var HSBType hsb 

rule "HSB to RGB"
when 
	Item GrFarblicht received update
then

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

HTML:

<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/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('GrLicht').concat(itemsInGroup('gGroundFloorHue')) | filter:query as filtered">
    
    <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/matrixicons.svg#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, '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></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/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></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">{{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>


(Unparagoned) #365

Make sure you give the group a type. So your items should be like

Group:Color GrFarblicht "Group Color" 
Color 	SchlaZi_Licht_Decke_Farbe           "Schlafzimmerlicht"                 (GrSchlazi, GrLicht, GrFarblicht)   ["Lighting"]    {channel="hue:0210:1:SchlaZi_Licht_Decke:color"}

String  SchlaZi_Licht_Decke_Farbe_rgb

I also change the rule to fire on more occations

rule "HSB to RGB"
when 
	Item GrFarblicht received command
    or
    Item GrFarblicht received update
then
...

(Jonas) #366

Hi!

Unfortunately it did not work …
I changed both things you mentioned.
The Rule is still not executed.
And REST-Api says GrFarblicht is NULL.


(Jonas) #367

It is working now, even if i don’t know why.
I thought: I won’t come further with this issue alone so i’ll do something else.
In my openHab log my hue bridge always got recognized (every 10 seconds) so i wanted to solve this.
I changed the bridge name to the SN (that was recognized via paperui) and hoped i will get rid of the discovery every ten seconds.
It worked. i got rid of it and now everything works fine.

I think something was stuck although everything seemed to work …
Glad it’s running now at least :wink: Thanks for your support, unparagoned!

Now it’s time to dig deeper into HTML since some divisions do look nice on my laptop but not on my phone.


(Ra) #368

Can someone help with this part of the code? -

ON: {{ ( filtered | filter: { state: ‘100’ } ).length }} of {{filtered.length}}
I need to filter state to any number more than 0. F.e state: >=0. Any ideas how to properly format this ?

(Jonas) #369

Hi! I have a problem with the tagging of the svg-sections:
I need to use a string-value to be able to include svg’s-dynamically.

<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#{{itemValue('CommonId')}}"></use></svg></div>

does not work for me.
when i include it with <img src it works with the variable.

Can i get it working whit the hashtags?


(Unparagoned) #370

I tried the following which worked. From a quick google search it seems like xlink:href is old and on it’s way out, so using href should be fine but there may be some backwards compatibility issues.

<div class="icon on"><svg viewBox="0 0 48 48"><use href="/static/matrix-theme/squidink.svg#{{itemValue('testRegexString')}}"></use></svg></div>

(Jonas) #371

Hi! I also read that it’s outdated but i decided to stick with it in the first place because i also was afraid of potential backwards compatibility issues.
Unfortunately just using href instead of xlink:href doesn’t work for me either. If i don’t use the xlink no icon is displayed at all. When i use xlink i get the following:

I think it’s a problem with the tagging (#) so that the itemValue (which is a string) is not integrated correctly … Unfortunately i’m not skilled in programming html at all so i was hoping to get some feedback here :slight_smile:
But anyways, thanks a lot unparagoned!

Edit:
Just read that Safari is the problem … Still present in the latest version - oh boy …
when i use href (instead of xlink:href) and try it with firefox it works - even with the itemValue.
I tried to define href AND xlink:href but it’s causing the image i posted - even in firefox.
Is there a workaround?


(Mr. Yoinkz) #372

@Michael_Stjerna,

This is absolutely really really cool!
Is one of the linked json files also for the Astro Widget?

Sorry I’m not skilled at all, but do I also need to download the css file and then place it where?


(Michael Stjerna) #373

Long time ago… All should be there


(Rene Vogel) #374

Hi,

I have a problem with my downloaded svg sprote file.
If i put a icon from the svg into the widget it have not the color green like the icons from matrixicons.svg it haves a terrible yellow. Have anybody an idea what the problem is?
Here a screenshot of the yellow icon and the green appl icon.

Unbenannt

and here the yellow icon data from the svg-file.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="drop" viewBox="0 0 248.151 248.151"><title>drop</title><path d="M134.475,8.551c-6.8-11.6-14-11.2-20.8,0c-31.2,46.4-78.4,116-78.4,150.8c0,24.4,10,46.8,26,62.8s38.4,26,62.8,26 c24.4,0,46.8-10,62.8-26s26-38.4,26-62.8C212.875,124.151,165.675,54.951,134.475,8.551z M188.075,198.951 c-6.4,10.4-15.6,19.6-26.8,26c-5.2,2.8-11.6,1.2-14.4-4c-3.2-5.6-1.2-12,4-14.8c8-4.4,14.4-10.8,19.2-18.4 c4.8-7.6,7.6-16.4,8-25.6c0.4-6,5.2-10.4,11.2-10c6,0.4,10.4,5.2,10,11.2C198.475,176.151,194.475,188.151,188.075,198.951z"/></symbol><symbol id="temperature-1" viewBox="0 0 340 340"><title>temperature-1</title><path d="M192.4,226.4c-2-4-4.8-7.2-7.6-10.4c-3.2-3.2-6.4-6-10-8.4l-3.6-2.4v-4V60c0-13.2-10.4-24.4-24.4-24.4 c-3.2,0-6.4,0.8-9.2,2c-9.2,4-15.2,12.4-15.2,22.4v141.2v4l-3.6,2.4c-3.6,2.4-7.2,5.2-10,8.4c-3.2,3.2-5.6,6.8-7.6,10.4 c-2,3.6-3.6,8-4.8,12s-1.6,8.4-1.6,12.8c0,6.8,1.6,13.6,4,20c2.8,6.4,6.4,12,11.2,16.8s10.4,8.8,16.8,11.2c6,2.4,12.8,4,20,4 c7.2,0,13.6-1.6,20-4c6.4-2.8,12-6.4,16.8-11.2c4.8-4.8,8.8-10.4,11.2-16.8c2.4-6,4-12.8,4-20c0-4.4-0.4-8.8-1.6-12.8 C196,234.4,194.4,230.4,192.4,226.4z"/><path d="M223.6,209.2c-2.8-4.8-5.6-9.2-9.2-13.6c-2.4-2.8-5.2-5.6-7.6-8.4V60c0-8-1.6-16-4.4-22.8C192.8,14.4,171.6,0,146.8,0 c-24.8,0-46,14.4-55.6,37.2C88.4,44.4,86.8,52,86.8,60v127.6c-2.8,2.4-5.2,5.2-7.6,8.4c-3.6,4.4-6.4,8.8-9.2,13.6 c-3.6,6.4-6.4,13.2-8,20.4c-2,7.2-2.8,14.4-2.8,22c0,12,2.4,23.2,6.8,33.6c4.4,10.8,11.2,20.4,19.2,28.4s17.6,14.4,28.4,19.2 c10.4,4.4,21.6,6.8,33.6,6.8s23.2-2.4,33.6-6.8c10.8-4.4,20.4-11.2,28.4-19.2s14.4-17.6,19.2-28.4c4.4-10.4,6.8-21.6,6.8-33.6 c0-7.6-0.8-14.8-2.8-22C230,222.4,227.2,215.6,223.6,209.2z M208.8,277.2c-3.2,8-8.4,15.6-14.8,22c-6.4,6.4-13.6,11.2-22,14.8 c-8,3.2-16.4,5.2-25.6,5.2s-18-2-25.6-5.2c-8-3.2-15.6-8.4-22-14.8c-6.4-6.4-11.2-13.6-14.8-22c-3.2-8-5.2-16.4-5.2-25.6 c0-6,0.8-11.6,2-16.8c1.2-5.6,3.6-10.8,6.4-15.6c2-3.6,4.4-7.2,6.8-10.4c2.8-3.2,5.6-6,8.8-8.8l3.6-3.2V192V60 c0-5.2,1.2-10.4,2.8-15.2c2-4.4,4.4-8.4,7.6-12l0.8-0.8c3.6-3.6,8-6.8,12.8-8.8s9.6-2.8,15.2-2.8c5.2,0,10.4,1.2,15.2,2.8 c4.8,2,9.2,4.8,12.8,8.8l0.8,0.8c3.2,3.6,6,7.6,7.6,12c2,4.8,2.8,9.6,2.8,15.2v132.4v4.8l3.6,3.2c3.2,2.8,6,5.6,8.8,8.8 c2.4,3.2,4.8,6.8,6.8,10.4c2.8,4.8,4.8,10.4,6.4,15.6c1.2,5.2,2,10.8,2,16.8C214,260.8,212,269.6,208.8,277.2z"/><path d="M270.4,153.6H224c-5.6,0-10.4,4.4-10.4,10.4c0,5.6,4.4,10.4,10.4,10.4h46.4c5.6,0,10.4-4.4,10.4-10.4 S276,153.6,270.4,153.6z"/><path d="M224,68h30.4c5.6,0,10.4-4.4,10.4-10.4c0-5.6-4.4-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4S218.4,68,224,68z"/><path d="M224,103.6h46.4c5.6,0,10.4-4.4,10.4-10.4c-0.4-6-4.8-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4 C213.6,98.8,218,103.6,224,103.6z"/><path d="M224,138.8h30.4c5.6,0,10.4-4.4,10.4-10.4c0-5.6-4.4-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4 C213.6,134,218.4,138.8,224,138.8z"/></symbol>

(Mr. Yoinkz) #375

@Michael_Stjerna

Oh okay - just cant seem to figure out which one it is and where to place the matrix.css file :(.


(Unparagoned) #376

matrix-theme.css goes anywhere in the config/html folder. I have it in html/matrix-theme/matrix-theme.css. Then open up habpanel setting /habpanel/index.html#/settings. Then under additional stylesheets put in the location of your matrix-theme.css file replacing html with static.
So for me the setting it /static/matrix-theme/matrix-theme-mod.css, for the file that is stored at config/html/matrix-theme/matrix-theme-mod.css.


(Lorenzo Giordano) #377

The svg file is correct. It is a style issue.
Please post the HTML offline both Yellow and Green and we Will help you
Regards
Lorenzo


(Unparagoned) #378

I made a couple tweaks to make this work but it looked fine. Nice and green like everything else on chrome.

<div class="icon on">
    <svg viewBox="0 0 248.151 248.151">
        <title>drop</title>
        <path d="M134.475,8.551c-6.8-11.6-14-11.2-20.8,0c-31.2,46.4-78.4,116-78.4,150.8c0,24.4,10,46.8,26,62.8s38.4,26,62.8,26 c24.4,0,46.8-10,62.8-26s26-38.4,26-62.8C212.875,124.151,165.675,54.951,134.475,8.551z M188.075,198.951 c-6.4,10.4-15.6,19.6-26.8,26c-5.2,2.8-11.6,1.2-14.4-4c-3.2-5.6-1.2-12,4-14.8c8-4.4,14.4-10.8,19.2-18.4 c4.8-7.6,7.6-16.4,8-25.6c0.4-6,5.2-10.4,11.2-10c6,0.4,10.4,5.2,10,11.2C198.475,176.151,194.475,188.151,188.075,198.951z"
        />
    </svg>
    <svg id="temperature-1" viewBox="0 0 340 340">
        <title>temperature-1</title>
        <path d="M192.4,226.4c-2-4-4.8-7.2-7.6-10.4c-3.2-3.2-6.4-6-10-8.4l-3.6-2.4v-4V60c0-13.2-10.4-24.4-24.4-24.4 c-3.2,0-6.4,0.8-9.2,2c-9.2,4-15.2,12.4-15.2,22.4v141.2v4l-3.6,2.4c-3.6,2.4-7.2,5.2-10,8.4c-3.2,3.2-5.6,6.8-7.6,10.4 c-2,3.6-3.6,8-4.8,12s-1.6,8.4-1.6,12.8c0,6.8,1.6,13.6,4,20c2.8,6.4,6.4,12,11.2,16.8s10.4,8.8,16.8,11.2c6,2.4,12.8,4,20,4 c7.2,0,13.6-1.6,20-4c6.4-2.8,12-6.4,16.8-11.2c4.8-4.8,8.8-10.4,11.2-16.8c2.4-6,4-12.8,4-20c0-4.4-0.4-8.8-1.6-12.8 C196,234.4,194.4,230.4,192.4,226.4z"
        />
        <path d="M223.6,209.2c-2.8-4.8-5.6-9.2-9.2-13.6c-2.4-2.8-5.2-5.6-7.6-8.4V60c0-8-1.6-16-4.4-22.8C192.8,14.4,171.6,0,146.8,0 c-24.8,0-46,14.4-55.6,37.2C88.4,44.4,86.8,52,86.8,60v127.6c-2.8,2.4-5.2,5.2-7.6,8.4c-3.6,4.4-6.4,8.8-9.2,13.6 c-3.6,6.4-6.4,13.2-8,20.4c-2,7.2-2.8,14.4-2.8,22c0,12,2.4,23.2,6.8,33.6c4.4,10.8,11.2,20.4,19.2,28.4s17.6,14.4,28.4,19.2 c10.4,4.4,21.6,6.8,33.6,6.8s23.2-2.4,33.6-6.8c10.8-4.4,20.4-11.2,28.4-19.2s14.4-17.6,19.2-28.4c4.4-10.4,6.8-21.6,6.8-33.6 c0-7.6-0.8-14.8-2.8-22C230,222.4,227.2,215.6,223.6,209.2z M208.8,277.2c-3.2,8-8.4,15.6-14.8,22c-6.4,6.4-13.6,11.2-22,14.8 c-8,3.2-16.4,5.2-25.6,5.2s-18-2-25.6-5.2c-8-3.2-15.6-8.4-22-14.8c-6.4-6.4-11.2-13.6-14.8-22c-3.2-8-5.2-16.4-5.2-25.6 c0-6,0.8-11.6,2-16.8c1.2-5.6,3.6-10.8,6.4-15.6c2-3.6,4.4-7.2,6.8-10.4c2.8-3.2,5.6-6,8.8-8.8l3.6-3.2V192V60 c0-5.2,1.2-10.4,2.8-15.2c2-4.4,4.4-8.4,7.6-12l0.8-0.8c3.6-3.6,8-6.8,12.8-8.8s9.6-2.8,15.2-2.8c5.2,0,10.4,1.2,15.2,2.8 c4.8,2,9.2,4.8,12.8,8.8l0.8,0.8c3.2,3.6,6,7.6,7.6,12c2,4.8,2.8,9.6,2.8,15.2v132.4v4.8l3.6,3.2c3.2,2.8,6,5.6,8.8,8.8 c2.4,3.2,4.8,6.8,6.8,10.4c2.8,4.8,4.8,10.4,6.4,15.6c1.2,5.2,2,10.8,2,16.8C214,260.8,212,269.6,208.8,277.2z"
        />
        <path d="M270.4,153.6H224c-5.6,0-10.4,4.4-10.4,10.4c0,5.6,4.4,10.4,10.4,10.4h46.4c5.6,0,10.4-4.4,10.4-10.4 S276,153.6,270.4,153.6z"
        />
        <path d="M224,68h30.4c5.6,0,10.4-4.4,10.4-10.4c0-5.6-4.4-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4S218.4,68,224,68z" />
        <path d="M224,103.6h46.4c5.6,0,10.4-4.4,10.4-10.4c-0.4-6-4.8-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4 C213.6,98.8,218,103.6,224,103.6z"
        />
        <path d="M224,138.8h30.4c5.6,0,10.4-4.4,10.4-10.4c0-5.6-4.4-10.4-10.4-10.4H224c-5.6,0-10.4,4.4-10.4,10.4 C213.6,134,218.4,138.8,224,138.8z"
        />
    </svg>
</div>

(Rene Vogel) #379

Hi,
Here is my code, i only changed the filename of the svg file and the icon-name. All other is like descipted for the matrix-them on github.

<div oc-lazy-load="['/static/matrix-theme/jquery-3.2.1.min.js','/static/matrix-theme/matrix.js']"></div>

<div class="section">

	<div class="bigDash">
		<div class="description">Outdoor</div>
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/icons0.svg#temperature-1"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('Temp_Current') | number:1}}</div>
				<div class="sub">&#176C</div>
			</div>
		</div>
		<div class="bottom">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoApple"></use></svg></div>
			<div class="value">feels like {{itemValue('Humidity_current') | number:0}} &#176C</div>
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#drop"></use></svg></div>
			<div class="value">{{itemValue('Humidity_current') | number:0}} %</div>
		</div>
    <div class="graph">
			<img width="250" height="100" src="http://openhabianpi.local:3000/render/dashboard-solo/db/mini-graphs?orgId=1&panelId=2&from=now-24h&to=now&width=500&height=250&tz=UTC%2B02%3A00" />
			<div class="legend">Last 24 hours</div>
    </div>
	</div>


(Christian) #380

I’m having problems with generating the squidink.svg. Running the svg_combiner.py returns this:

..........
Processing file: Celebration & Holidays_star.svg
200
Processing file: Buildings-07.svg
200
 --> added window
Processing file: Squid_Ink_License.pdf
200
Traceback (most recent call last):
  File "svg_combiner.py", line 74, in <module>
    xml = ET.fromstring(r.text)
  File "/usr/lib/python2.7/xml/etree/ElementTree.py", line 1300, in XML
    parser.feed(text)
  File "/usr/lib/python2.7/xml/etree/ElementTree.py", line 1640, in feed
    self._parser.Parse(data, 0)
UnicodeEncodeError: 'ascii' codec can't encode characters in position 10-13: ordinal not in range(128)

Any idea how to fix this?


(Unparagoned) #381

Remove Squid_Ink_License.pdf from the folder.


(Jonas) #382

Hi!

I am still having issues …
i managed to get it working with safari. I want to add a variable to the path of the svg.
it’s not possible to use it with tagging (#) since safari does not support just href but only xlink:href.
so i created single svg’s for it. now i struggle formatting them.
i have to implement them using img not svg to make it work. like:

<div class="bigDash">
		<div class="description">Wetter</div>    
		<div class="top">
      <div class="weather">
      <div class="icon on"><img src="/static/matrix-theme/original-svgs/{{itemValue('CommonId')}}.svg"></div>
        </div>
			<div class="value">
				<div class="main">{{itemValue('Indoor_Temperature') | number:1}}</div>
				<div class="sub">&#176C</div>
			</div>
		</div>

but i don’t know if a img can be formatted - at least i don’t know how.
my icon is black and if i change the stroke inside the svg it colors it.
my question is now: how can i color it using the matrix.css - file.
I’m not that experienced with creating that style attributes.

It’d be nice if you could post an example or explain a little bit.


(Rene Vogel) #383

I have a problem with a slider inside the matrix-theme. I created an vertical rzslider. I cannot change the bar color and i also try to use the “selectionBarGradiant”, but if i put it inside nothing happen.
I put it inside the slider option. Here my code:


           <div ng-init="slider = { value: 12,  options: {
    						vertical: true,                      
    						floor: 0,
    						ceil: 30,
    						step: 1,
                                                showSelectionBar: true,
                                                selectionBarGradient: {from: 'white', to: '#FC0'}
        					}};"></div>
        
        <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(OG_WZ1_WTT_HZF1_set_temp, slider.value)"></rzslider>