Matrix Theme for HABPanel

skin
theme
stylesheet
Tags: #<Tag:0x00007f015200e1a0> #<Tag:0x00007f015200dfc0> #<Tag:0x00007f015200dc78>

(Realroywalker) #344

Thank for the tips - so that’s basically what I’ve been trying last night, but couldn’t get the icons to show.

Here is the SVG I came up with - by grabbing the section from the temperature icon I linked in the previous post.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<symbol id="drop">
	<g>
		<path d="M4,20 C4,13.7372206 9.31149107,10.9606699 15.0029824,1.68773079 C15.5,1 16.5,1 17.0240493,1.73848329 C22.7239959,11.0422428 28,13.7458429 28,20 C28,26.627417 22.627417,32 16,32 C9.372583,32 4,26.627417 4,20 Z M14.9662304,5.01303063 C12.6849824,7.94803148 7.55258291,15.1489689 7.43611882,15.3380026 C6.44520133,16.9463678 6,18.343598 6,20 C6,25.5228475 10.4771525,30 16,30 C21.5228475,30 26,25.5228475 26,20 C26,18.34381 25.5574243,16.9556938 24.5697394,15.3573542 C24.4844847,15.2193893 19.3264043,7.97081698 17.0502563,5.01835622 C16.4935872,4.29628389 15.5249676,4.2941722 14.9662304,5.01303063 Z M16,27.5447247 C16,28.0447247 15.2619671,28.0225103 14.9257293,27.9794225 C11.3214673,27.5175477 8.46745417,24.6572016 8.01523409,21.0499283 C7.98381871,20.7993338 7.95268975,20 8.45268973,20 C8.95268972,20 9.03600925,21.1280442 9.03600925,21.1280442 C9.50185782,24.1265527 11.8708617,26.4955566 14.8693702,26.9614051 C14.8693702,26.9614051 16,27.0447247 16,27.5447247z">
		</path>
	</g>
</symbol>
<symbol id="thermometer-3">
	<g>
		<path d="M236.896,38.375v12.854h-49.808V38.375H236.896z M216.009,66.389h-28.921v12.854h28.921V66.389z M187.088,107.257h49.808
		V94.404h-49.808V107.257z M216.009,122.425h-28.921v12.854h28.921V122.425z M187.088,163.293h49.808v-12.854h-49.808V163.293z
		 M194.852,236.533c0,35.881-29.191,65.072-65.072,65.072s-65.072-29.191-65.072-65.072c0-23.252,12.211-44.384,32.134-56.074
		V32.938C96.843,14.775,111.618,0,129.78,0s32.938,14.775,32.938,32.938v147.522C182.641,192.137,194.852,213.275,194.852,236.533z
		 M181.998,236.533c0-19.73-10.964-37.565-28.619-46.53l-3.515-1.787V32.944c0-11.08-9.01-20.084-20.084-20.084
		c-11.073,0-20.084,9.004-20.084,20.084v155.272l-3.515,1.787c-17.655,8.972-28.619,26.806-28.619,46.53
		c0,28.792,23.426,52.218,52.218,52.218S181.998,265.325,181.998,236.533z M171.291,236.533c0,22.886-18.619,41.505-41.511,41.505
		c-22.886,0-41.505-18.619-41.505-41.505c0-18.76,12.674-35.232,30.823-40.058l2.384-0.636v-79.275h16.601v79.269l2.384,0.643
		C158.624,201.301,171.291,217.78,171.291,236.533z M131.837,208.866c-0.99-4.396-5.411-7.288-9.917-6.26
		c-15.733,3.56-26.723,17.32-26.723,33.465c0,4.569,3.721,8.291,8.291,8.291s8.291-3.721,8.291-8.291
		c0-8.207,5.797-15.482,13.798-17.288C130.024,217.76,132.839,213.313,131.837,208.866z">
		</path>
	</g>
</symbol>
</svg>

I named the SVG as ‘squidink.svg’ to keep things simple - but when I reference #thermometer-3 from HabPanel there is no icon, yet #drop works fine.

Any tips on what i’m doing wrong?


(Marcel) #345

Hallo,

I just started a few weeks ago with HTML and CSS. this theme is a very nice example to play with multiple settings and to see in real what it does. but I can’t figure out where I can confiure how many rows it should display in one line. as a example whenever we have a lot of switches the will be displayed in three rows. for some reason I would like to have four rows or two. could someon give me a idea where I can find this in the CSS settings?

Thanks in advance.

Marcel


(Lorenzo Giordano) #346

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


(Realroywalker) #347

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:


(Derf Namttog) #348

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!


(Lorenzo Giordano) #349

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


(Realroywalker) #350

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.


(Derf Namttog) #351

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


(Jonas) #352

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.


(Unparagoned) #353

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

(sceppi) #354

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?


(sceppi) #355

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


(Jonas) #356

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

thanks!


(Jonas) #357

deleted


(Patrick) #358

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.


(Jonas) #359

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!


(Unparagoned) #360

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>

(Jonas) #361

deleted.


(Jonas) #362

deleted…


(Jonas) #363

delted.