Habpanel: Icon state compare string

Apps & Services HABPanel
,
1

Is it possible to set an icon according to a string?
Means, can I “switch on” the icon if a string contains a specific term right in the widget?
Like:
<widget-icon iconset="'smarthome-set'" icon="'man'" size="32" state="itemValue('CarTripDriver').contains 'Jim' ? 'ON' : 'OFF'" />

2

This does work, but only on an exact match:
<div style="background-color: {{itemValue('CalName8')=='Jim' ? 'red' : 'green'}}">

These do not work:

<div style="background-color: {{itemValue('CalName8').includes("Jim") ? 'white' : 'black'}}">
<div style="background-color: {{itemValue('CalName8').indexOf('Jim') !== -1 ? 'white' : 'black'}}">
<div style="background-color: {{itemValue('CalName8') | pattern="Jim:*" ? 'yellow' : 'blue'}}">
<div style="background-color: {{itemValue('CalName8').includes('Jim') ? 'white' : 'black'}}">

Anyone a suggestion?

3

I have solved this by using a proxy item:

<div style="background-color: {{itemValue('CalUser13')=='Jim' ? 'pink' : '#a9a9a9'}}"</div>

However, if I use multiple, just the last one will be taken into account:
<div style=“background-color: {{itemValue(‘CalUser13’)==‘Jim’ ? ‘pink’ : ‘#a9a9a9’}}”
<div style=“background-color: {{itemValue(‘CalUser13’)==‘Jack’ ? ‘red’ : ‘#a9a9a9’}}”
<div style=“background-color: {{itemValue(‘CalUser13’)==‘Bill’ ? ‘yellow’ : ‘#a9a9a9’}}”

4

Anyone, who has got an idea how to use multiple comparsons for style?

5

You should use ng-style instead of style with {{ }}.
What I would do is add CSS classes (inline or in a separate stylesheet file containing the name), you can do for instance do something like

.icon-driver {
  background-color: #a9a9a9;
}
.bg-Jim {
  background-color: blue !important;
}
.bg-Jack {
  background-color: red !important;
}
etc.

then <div ng-class="'icon-driver bg-' + itemState('CalUser13')">

1 Like
6

Thank you very much, Yannick.
I will try and play around with your suggestion!

7

Thanks a lot again.
That’s working perfectly! :smiley:

1 Like