NCO
(E. Gerland)
February 10, 2017, 7:19pm
1
All,
To begin with: please apologize the (possibly) stupid question.
I am using the template of Habpanel with the following code:
<div class="row">
<div class="col-xs-12"><span><widget-icon iconset="'smarthome-set'" icon="'thermostat'" /></span></div>
</div>
<div class="row">
<div class="col-xs-12"><span style="color: #ADA96E; font-size: 10pt; text-align:center">{{itemValue('Ind_Noise')| number:0}}<small style="font-size:8pt">dB</small></span></div>
</div>
How to change the background color of the entire tile?
Thanks in advance!
ysc
(Yannick Schaus)
February 10, 2017, 7:43pm
2
Look here (top:0;bottom:0;left:0;right:0;position:absolute
on your top-level element):
ysc:
ng-style + the ternary operator to the rescue: <div ng-style="{ ‘background-color’: itemValue(‘EG_Buero_Fenster_beide’)==‘OPEN’ ? ‘#26FF33 ’ : ‘#FF7373 ’ }" class=“template-container” style=“top:0;bottom:0;left:0;right:0;position:absolute”> <div class=“template-contents”> <widget-icon iconset="‘eclipse-smarthome-classic’" icon="‘window’" state=“itemValue(‘EG_Buero_Fenster_beide’)” size=“100” center=“true” /> </div> </div> Also the widget-icon can pass th…
NCO
(E. Gerland)
February 11, 2017, 6:31am
3
Great!
Thanks a lot!
And dynamic widget coloring as well…
Awesome
NCO
(E. Gerland)
February 11, 2017, 7:10am
4
It’ me again
I struggle with my personal template:
It looks like this:
But the icon and number should be centered.
I played around a lot but did not find the right clue:
<div
ng-style="{
'background-color': itemValue('Ind_Temp')=='OPEN' ? '#223344' : '#223344'
}"
class="template-container"
style="top:0;bottom:0;left:0;right:0;position:absolute">
<div class="row">
<div class="template-contents" style="text-align:center"><span><widget-icon iconset="'smarthome-set'" icon="'drop'" /></span>
</div>
<div class="row">
<div class="template-contents" style="text-align:center"><span style="color: #98AFC7; font-size: 10pt">{{itemValue('Ind_Humidity')| number:0}}%</span></div>
</div>
Any hint?
NCO
(E. Gerland)
February 11, 2017, 7:40am
5
Got it!
I don’t know if this is really “good coding” but it works so far…
<div
ng-style="{
'background-color': itemValue('Ind_CO2')=='OFF' ? '#223344' : '#223344'
}"
class="template-container"
style="top:0;bottom:0;left:0;right:0;position:absolute">
<div class="template-contents">
<div class="row">
<div class="col-xs-12"><span><widget-icon iconset="'smarthome-set'" icon="'houseplant'" /></span></div>
</div>
<div class="row">
<div class="col-xs-12"><span style="color: #4CC417; font-size: 10pt; text-align:center">{{itemValue('Ind_CO2')| number:0}}<small style="font-size:8pt"></small></span></div>
</div>
</div>
</div>
NCO
(E. Gerland)
March 24, 2017, 2:24pm
6
Does anyone have a hint for me how to increase the size of the icon in my example above?
I am struggling with something like
<div class="row">
<div class="col-xs-12"><span><widget-icon iconset="'smarthome-set'" icon="'houseplant'" style=font-size:50px" /></span></div>
</div>
This only shifts the icon further down…
ysc
(Yannick Schaus)
March 28, 2017, 6:08pm
7
<widget-icon>
accepts a size
attribute for the size in pixels.
NCO
(E. Gerland)
March 30, 2017, 7:48am
8
Thanks, @ysc .
That works for me so far.
Unfortunately the image is centered and will move the text outside the widget:
Do you have a hint for me how to set it up like the one next to it (the eye)?
<div
ng-style="{
'background-color': itemValue('Weather_Sunset_Time')=='OFF' ? '#313135' : '#313135'
}"
class="template-container"
style="top:0;bottom:0;left:0;right:0;position:absolute">
<div class="template-contents">
<div class="row">
<div class="col-xs-12"><span><widget-icon iconset="'knx-user-forum'" icon="'weather_sunset'" size="50"/></span></div>
</div>
<div class="row">
<div class="col-xs-12"><span style="color: #4CC417; font-size: 10pt; text-align:center">{{itemValue('Weather_Sunset_Time')| date:"H:mm"}}<small style="font-size:8pt"></small></span></div>
</div>
</div>
</div>
ysc
(Yannick Schaus)
April 2, 2017, 12:19pm
9
That’s weird! I would inspect the element with the browser’s dev tools, there might be an unwanted margin in the SVG. You could try applying a margin-top: -__px
style to the icon or its <div>
container?
NCO
(E. Gerland)
May 2, 2017, 2:00pm
10
I gave it up and went on with other icons I have found. Now I ad just the few icons I miss in the standard collections.
However, I have another question.
I would like to use the template above an would like to change the icon color based on the state.
I tried the following in various places, but it didn’t work.
ng-style="{ color: itemValue(item.value)=='OFF'?'red':'green' }"
Where should I place it?
Thanks in advance.