Matrix Theme for HABPanel

It seems you did not download the “svg sprite” type bit just the SVG type
Regards
Lorenzo

Thanks - I see no option for ‘svg sprite’ as a download, so didn’t realise there was a different type of SVG!

I’ll look into if it’s possible to convert the SVG to sprite. :slight_smile:

Hello all. I’m running through the instructions to setup this template and am running into an issue with the svg_combiner.py script. I’m receiving the following error:
SyntaxError: Missing parentheses in call to ‘print’

Please keep in mind that I have little to no experience with Python but I believe I’ve managed to figure out that the issue is with python3 being installed but the script is formatted for an older version of python. Any chance someone has modified this script to run correctly in Python3, or perhaps have a simpler solution? I’m comfortable enough to add a few parentheses but I’m worried I’ll be opening a can of worms of other errors once I start poking around in the code. Thanks in advance for the help!

Your link is an old one, I Attach a correct link for thermometer download
…ad you can see “svg sprite” is an option

Regards
Lorenzo

Thank you - I had a further play around last night and found a great site - icomoon.io/app

This site allows you to browse current icons, and also upload your own - then re-download in sprite format.
It seems to work well for some icons I tried.

It would be great to get a free icon pack put together using the same names etc… as the squidink icons, so that people can use that if they can’t afford to splash money on the squid ink pack.

2 Likes

Answered my own question. Ended up being only a few minor changes to the script. Working well on Fedora 29 now. Now to brush up on coding these widgets

Hello!
Now that i am a bit deeper in customizing the habpanel i have a question regarding the css style sheet.
I used the great matrix theme example and i want to add a group or edit an existing one.
but no matter which parameter i change in the .css-file in the html folder: nothing happens when i refresh the habpanel.
Do i have to reload something so that the new .css-file is taken?
I edited the path of the habpanel to the file i am editing.

I found some things didn’t work as they seemed like they should e.g. I tried to change the dropdown options, but had to resort to changing everything of that class since I couldn’t specify only applying it to the menu which is a an element of …

But in theory if you properly edit the .css file, all you need to do is refresh the openhab page to see the changes. So for example, find the section title bit and change the color by adding color:red to the bottom. Then you just need to refresh the habpanel to see the section title in red.

.section .title {
    font-size: 30px;
    font-weight: 100;
    text-transform: uppercase;
    padding-bottom: 20px;
    color: red;
}

Hey Patrick,

Excellent work you did here! I managed to get everything up and running as it should.
Just 1 small thing that bothers me: I cannot get the Y-axis numbers bigger in Grafana, they’re hardly readable.

See for example the screenshot below: the Y-axis is there, but the numbers are very small. (note that the graph is still populating as I only just activated the persistence).
The axis numbers seem to be bigger in your screenshots. Anything you did to make these bigger?

Hi Jonas,

I faced this issue as well. Your css file is likely cached in your browser history.
Go to the history settings of your browser and delete cookies, site data, cached images and files.
Then refresh the page and you should be fine

Hi! I activated the developer section in safari and now that i cleared the cache i see the changes immediately.

thanks!

deleted

Hey, unfortunately I had the same issue with the labels on the axis. Most of my graphs don’t have labels as they are just visual indicators of the history. I didn’t spent much time trying to get it to render bigger. Grafana doesn’t seem to have the option to customize the font size.

Hey!

I am a bit stuck configuring the Hue items to work with the panel-design.
You created a loop that searches for itemname (switch) and itemname_color (color) to create the widgets.

i configured my color hues like that:

Switch 	WoZi_Licht_Esstisch		            "Esstischlicht"			            (GrWoZi, GrLicht)	{channel="hue:0210:1:WoZi_Licht_Esstisch:color"}
Dimmer	WoZi_Licht_Esstisch_Dimmer			"Esstischlicht Dimmer"			 						{channel="hue:0210:1:WoZi_Licht_Esstisch:color"}
Color	WoZi_Licht_Esstisch_Farbe			"Esstischlicht"				  		["Lighting"]		{channel="hue:0210:1:WoZi_Licht_Esstisch:color"}
Dimmer	WoZi_Licht_Esstisch_Farbtemperatur	"Esstischlicht Farbtemperatur"							{channel="hue:0210:1:WoZi_Licht_Esstisch:color_temperature"}
String	WoZi_Licht_Esstisch_Alarm			"Esstischlicht Alarm"								 	{channel="hue:0210:1:WoZi_Licht_Esstisch:alert"}
Switch 	WoZi_Licht_Esstisch_Effekt			"Esstischlicht Effekt"								 	{channel="hue:0210:1:WoZi_Licht_Esstisch:effect"}

the issue with this configuration and your code is that i don’t see the color picker.
when i configure the first item to Color instead of Switch i do see the colorpicker and it works but i cannot switch the light.

Can you please post an example of your items configuration for color hues and white hues?

Thanks a lot!

I’ve got milights and Hue, they work fine is set up correctly. (edit: the colors are wrong as you noted. This is because it want rgb not hsb)

Milights - I use a proxy for smooth transitions. 

Dimmer  HueHallway     "Hallway Lights"  (gLightBrightness, gHallway) [ "Lighting" ]
Color	HueHallwayColor	"Hallway Color" (gColor, gHallway)
Color	ProxyHallwayColor "Hallway color"  (gLightColor, gHallway)

Hue - I directly control the color

Color HueBedroom "Bedroom Light" (gLightColor, gBedroom) [ "Lighting" ]

They are both in the same group, gLightColor, which the panel uses to identify and control the colors. I think my habpenel config is fairly standard, maybe I changed the group to match but should be it. All in all the lights worked pretty well out of the “box”.

  <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"></div></div>
    <div class="controls">

      <div ng-repeat="item in itemsInGroup('gLightColor') ">
        <div class="widget" ng-if="item.type=='Color' && itemValue(item.name).split(',')[2]== 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) + ')'}"></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, itemValue('SceneOffColor'))"><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><a href="" ng-click="sendCmd(item.name, itemValue('SceneColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></a>
            <div ng-init="slider = { value: itemValue(item.name).split(',')[2], 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>

        <div class="widget" ng-if="item.type=='Color' && itemValue(item.name).split(',')[2]!=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) + ')'}"></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, itemValue('SceneOffColor'))"><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><a href="" ng-click="sendCmd(item.name, itemValue('SceneColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></a>
            <div ng-init="slider = { value: itemValue(item.name).split(',')[2], 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>
      </div>
    </div>
  </div>

deleted.

deleted…

delted.

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>

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