Dynamic background color in Habpanel?

[david]

Is it possible to have the color of a widget change when the item changes? For example, I would like a door widget to change red when the door is open. I have it working when the door is open and the page is refreshed, but when the page is already open only the item status changes in the panel, not the color.

This is my current ng-style setting in my custom door widget.

     ng-style="{
      'background-color': itemValue(config.ITEM_ID)=='OPEN' ? '{{(config.OPEN_COLOR)}}' : '{{(config.CLOSED_COLOR)}}'
     }

[ysc (Yannick Schaus)]

I think you can lose a few quotes and curly braces, your ng-style should be:

     ng-style="{
      'background-color': itemValue(config.ITEM_ID)=='OPEN' ? config.OPEN_COLOR : config.CLOSED_COLOR
     }

[david]

@ysc

I think you can lose a few quotes and curly braces

Thanks! That did it. I guess I need to learn more than just cut and paste.

[Knallfrosch (Andreas L)]

A questions on top of that. I want to have a box in habpanel showing status of all windows. It would be nice to show box in green if all windows are closed and in red if one or more windows/dores are open. Has anyone done something similar and can help me with this?
Thanks.

[david]

Yes, this is the exact scenario I was working on. I created 2 custom widgets, 1 for single doors/windows, and 1 for groups of items. If door/window in the group is open, the color changes to red.

Attached are the widgets. Within the widget settings you can pick the open and closed colors, and icon. It assumes the standard icons, so if you type “window” for the icon setting, it will use the icons window-open and window-closed depending on the state. I also have an icon size setting as I use the same widgets on a table and a phone, and for the phone I needed smaller image sizes.

door-window.widget.json (1.4 KB)
door-window-group.widget.json (1.4 KB)

Here are some screen shots. The first screen are the group

[Knallfrosch (Andreas L)]

@ David. Great. I thought of displaying al list of the items. But this is even better. THANKS! I now have to figure out, how to integrate. Hoepfully tonight I have some time when kids are in bed. I am just a beginner mirgrating from the Fibaro HC2.
Thanks to everyone in this forum for joining your experience. This realy helps much to move forward.

[Knallfrosch (Andreas L)]

@ David: An additional question: can you also share your code for the two weather widges? The would cover my needs. For the beginning I started with a workaround. I integrated a small html file I have saved in a folder on my website. This contains the code that was provided form a weather website as html code for integrating in your website. Works, but does not look that nice… I started with getting an api-code from weahterunderground. For the beginning my plan was to work only with 2.0 bindings. But I think I will start with playing around with the “old” ones as well.

[david]

Sure here they are. They may not look great on a larger screen. I was specifically trying to shrink these down to fit on a phone, with the assumption that the phone is only 3 columns of widgets. With that in mind, you need to size the widgets to be 2 columns wide.

forecast.widget.json (4.7 KB)
new-weather.widget.json (2.2 KB)

edit: should also note they also use the climacons

Iconset: Animated Climacons

Hi, There are a few initiatives for weather widgets and their associated icons lately, so I thought I would share my view of how these icons should be handled in those cases (where you don’t need to have them in HABPanel’s icon picker): the proper way using the standard ESH iconset infrastructure. @kubawolanin made an attempt to use the awesome animated Climacons (https://github.com/noahblon/animated-climacons) and he was kind enough to map several of the icons’ names to the former 1.x binding…

[Knallfrosch (Andreas L)]

Great. Thanks for sharing. In my current old set up I have a fibaro wall-plug. its color is green when windows are closed and it turns red, when a window is open. The wall plug is next to the android tab close to the entrance door. Unfortunately it looks like there is no item for the wall plug to change its color. In the Fibaro-world there is a virtual device that can be imported. And than you can “press” via a line in lua-code different buttons to change the color. So I do not have to switch the tab on. I directly see red/green before I leave the house. Others are using a hue that covers this functionality.

[david]

I’m not sure I fully understand, and know nothing about fibaro, but if there is a way to send a command to the switch to change the color, then you could likely have a rule created to send the command whenever there is a status change for the group of items.

[Knallfrosch (Andreas L)]

I have successfully included my first Z-Wave device last weekend - a Fibaro Wall Plug. And it is working.
One of the available things is “Color when On” and another “Color when Off” there are values from 0 to 8 possible.
Adding this in HabPanal as a slider is working excelent.
So I can integrate the functionality I am aiming for

[anon27730737]

@ David How do you create the item group in the item file?

Thanks

/Claus

[tlrider (Dirk)]

Hi David, the door-window.widget works fine for me, Thx, but in case for the group it doesn’t work. Do you use the normal group item ?
regards

[david]

@tlrider, @anon27730737

sorry for the delay. here is my group item for the window.

Group:Contact:OR(OPEN,CLOSED) DSCWindows "Windows [(%d)]" <contact> (DSCAlarm,All)

[lysol]

Thanks for sharing. One thing I did change is the following line:

<widget-icon iconset="(config.ICONSET)" icon="(config.ICON)"

I changed the manually typed in iconset to a setting variable and created the following setting:

After placing the widget onto a dashboard and editing it there, this is what it looks like changing the icon set:

This is what I have in the bottom right of my main HABpanel dashboard:

Seems to work great. The garage one is the only one I have currently configured and working correctly. I have it tied to my MyQ binding, but would like to use this with the DSC Alarm binding instead. Still have more work to do.

[varneyb (Bruce Varney)]

I’m trying to do this same thing with icons instead of background color, but I can’t seem to get it to work. This works for background color:

  <td style="border: 2px solid #76899e; border-radius: 10px; padding: 5px;">
    <div ng-style="{'background-color': itemValue(config.B2item) == 'OFF' ?  '#001428'  : itemValue(config.B2item) == 0 ?  '#001428''#76899e'}">
 		  <widget-switch ng-model="button2" />
    </div>
          </td>

but if I try something similar for the icon definition it does not. I’ve tried putting that in the same place as the background color, inside the widget-switch braces, and in the button2 definition to no avail.

How can I make this work with icons?

Thanks,

Bruce

[dastrix80 (Kris K)]

@ysc

ng-style="{ ‘background-color’: itemValue(config.ITEM_ID)==‘OPEN’ ? config.OPEN_COLOR : config.CLOSED_COLOR }

Hi @ysc

is there a method to change an SVG icon to be on/coloured , if an item state = ON within HabPanel?

I have a picture of a light globe, it would be great to illuminate this if any of my lights are on as an easy way to see if something is on quickly.

See attached

Thanks!

[sihui]

@dastrix80

is there a method to change an SVG icon to be on/coloured

How to change habpanel icon's color?

Hello friends, I create a switch from a template widget by myseft but to be honest I am not fancy with the original pale blue color icons at all. Here is the code: <div ng-style="{ 'background-color': itemValue('Light_GF_Living_Ceiling')=='ON' ? '#26FF33' : '#FE2E64' }" class="template-container" style="top:0;bottom:0;left:0;right:0;position:absolute;border-radius: 10px;width:220px; height: 220px"> <div class="template-contents"> <div style=" margin-…

How to change colors of default icons?

Is there a way to chane colors of default icons? I Just want green instead of blue. Is there some simple solution to do this or I need to prepare my own set of svg icons?

Change Icon color according to Hue-Binding light status

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.

Widget Icon Colors

I’m working on a custom control using the Template Widget. In this, I’d like to be able to change the color of icons and the text shown. I haven’t found a way to change the color of the icons. For many items, especially the ones that I’m using the “switch” template, etc. for I want to keep the default color behavior of off / blue. As a result, I really have two needs: Be able to force it to one state or the other (off / blue) using ng-if, etc. Be able to set custom colors - let’s say I wan…

Examples of HABPanel Solutions

thank you for that, it worked…how do i change the icon color in nibi79s widget

[ElBombo (Eloy)]

Hi David,

First of all, thanks for creating this widget. The post is a bit older, but I only came across it recently and I have a question.
I installed the widgets in the HabPanel as well as created the group item. So far so good.
Values arrive when there is a change in the item(s) (for me ON and OFF) and are also correctly displayed in the group item (value change for me → ON: OFF).

But what somehow doesn’t work is changing the color of the widget. However, the value does not change color. Likewise, the icon does not change from window closed to window open.
Is there still a rule missing or am I doing something wrong in principle?
In the widget code itself there is OPEN / CLOSE in relation to the “background-color” → Item.value == OPEN, does it have something to do with the fact that the states do not change? Is an OPEN / CLOSE expected and an ON / OFF received?