Change Icon color according to Hue-Binding light status

Apps & Services HABPanel
1

I’m using the hue-binding and would like to put an SVG icon or picture in a HabPanel by using the Template widget. I can get the item value of a hue lamp color or color-temperature. But how can I change the color of the icon by using the CSS definition. The color item returns a element e.g (100,10,10). A conversion by a rule file is also posible to change it to an RGB value. But as I said I would like to change the color of the SVG element with this read-out.

2

I moved this post to the HABPanel section where hopefully someone more knowledgeable than me will be able to help.

1 Like
3

Hi @thommy.kitten did you solve this?

4

Hi All

I got this working with this angular code

<div class="section">
<div class="sectionIconContainer">
<div class="sectionIcon">
<div class="icon on" ng-if="itemValue('gAllLights')=='ON'"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg></div></div>
<div class="sectionIcon">
<div class="icon off" ng-if="itemValue('gAllLights')=='OFF'"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg></div></div>
<div class="title">Outside</div>
<div class="controls">

And CSS

    --icon-color-filter: invert(34%) sepia(100%) hue-rotate(116deg) saturate(1000%);
    --icon-color-off-filter: invert(60%) sepia(80%) hue-rotate(180deg);
5

I realized it with rules, that change the css property. I will do the documentation tonight. The problem is still the difference beween the color-temperature channel and the RGB channel that I need to implement. So far only the RGB values are read out. If the light source is working in CCT mode a colored SVG is shown in the floorplan even if it’s only a variatian of the color temperatur on the withe channel.

1 Like
6

OK, here is the setup:

I create a rule for each light, can be adjusted but so far I don’t use it for every light in the house.

rule "Wohnzimmer_Deckenlicht"
	when
	System started or
    Item Wohnzimmer_Deckenlicht_Color changed or
	Item Wohnzimmer_Deckenlicht_ColorTemp changed
	then
		var hex = "ffe600"
		val url = "http://xxx.xxx.xxx.xxx/api/yoursupersecretapikey/lights/19"
		val response = sendHttpGetRequest(url)
		val ColorMode = transform("JSONPATH","$.state.colormode", response)			
		if (ColorMode != "ct") {
			val hsbValue = Wohnzimmer_Deckenlicht_Color.state as HSBType
			val brightness = hsbValue.brightness.intValue
			val redValue   = ((((hsbValue.red.intValue * 255) / 100) * brightness) / 100)
			val greenValue = ((((hsbValue.green.intValue * 255) / 100) * brightness) / 100)
			val blueValue  = ((((hsbValue.blue.intValue * 255) / 100) * brightness) / 100)
			var red = Integer::toHexString( redValue )
			var green = Integer::toHexString( greenValue )
			var blue = Integer::toHexString( blueValue )	
			val rr = red
			val gg = green
			val bb = blue
			if (red.length() < 2) {
				red = rr + rr
				}
			if (green.length() < 2) {
                green = gg + gg
				}
			if (blue.length() < 2) {
                blue = bb + bb
				}
			hex = red + green + blue				
			} else {
			hex = "ffe600"
			}
		if (hex == "000000") {hex="ffe600"}	
		logInfo("ColorString: #",hex)
		logInfo("ColorMode: ",ColorMode)
		Wohnzimmer_Deckenlicht_ColorString.sendCommand("#"+hex)
	end

The I have a floorplan embedded in a SVG to be shown on my habpanel-screen-mirror that looks like this.

<div oc-lazy-load="'/static/floorplan.css'">
  <div ng-include="'/static/floorplan.svg'"></div>
</div>

The svg I’m changing with the item state from “Wohnzimmer_Deckenlicht_ColorString”.

<path
   inkscape:connector-curvature="0"
   d="m 450,160 -7.17,2.654 c -0.409,0.153 -0.854,0.153 -1.264,0 L 434.396,160 c -0.266,-0.099 -0.263,-0.509 0.004,-0.603 l 7.195,-2.516 c 0.392,-0.139 0.814,-0.139 1.207,0 l 7.194,2.516 c 0.268,0.094 0.271,0.504 0.004,0.603 m 3.669,-4.971 -10.84,-4.141 c -0.409,-0.157 -0.852,-0.157 -1.262,0 l -10.839,4.141 c -0.316,0.12 -0.53,0.475 -0.53,0.876 v 3.713 c 0,0.402 0.214,0.756 0.53,0.876 l 10.839,4.159 c 0.41,0.157 0.853,0.157 1.262,0 l 10.84,-4.159 c 0.315,-0.12 0.529,-0.474 0.529,-0.876 v -3.713 c 0,-0.401 -0.214,-0.756 -0.529,-0.876"
   id="Wohnzimmer_Deckenlicht"
   ng-click="{sendCmd('Wohnzimmer_Deckenlicht_Toggle', (itemState('Wohnzimmer_Deckenlicht_Toggle') == 'ON') ? 'OFF' : 'ON')}"
   ng-style="{fill:itemState('Wohnzimmer_Deckenlicht_Toggle') == 'ON' ? itemValue('Wohnzimmer_Deckenlicht_ColorString'):'#333333'}"
   style="font-size:12px;overflow:visible;color-interpolation-filters:sRGB;fill:#ffe600;fill-rule:evenodd;stroke-linecap:square;stroke-miterlimit:3" />

As mentioned before I’m working on a way to read if the lamp is in ctt or rgb state, thats also the reason why I’m using a direct url POST to the API. I don’t like this mode thing in zigbee anyway, but have to life with it. The light switches on the wall also sometimes don’t save a ctt value and always put the light to the rgb state.

Regards, Thomas