#nice indeed. Id want the icon to change
graceful roost
I only have the version of code for a vertically stacked Mushroom card. @mental idol made some changes to the layout and styling in the example he posted earlier.
graceful roost
@mental idol Saw your message in #templates-archived. You need to use something like this. (Note: It looks like you were trying to combine JavaScript with Jinja.)yaml icon: | [[[ var vol = parseFloat(states["number.volume"].state); if (vol == 0) return 'mdi:volume-mute'; else if (vol < 33) return 'mdi:volume-low'; else if (vol < 66) return 'mdi:volume-medium'; else return 'mdi:volume-high'; ]]]
mental idol
Thanks for that. Using variables like that is all new to me so definitely need to study that some more 🙂
here is the yaml
just create a number helper named dummy_number to test it as it is
graceful roost
since you defined the entity for the custom:button card, instead of using states["input_number.dummy_number"].state, you can just use entity.state. The custom:button-card sets the variable entity for this purpose. I defined the entity for the icon in my example because I wasn't using the defined entity in the card.
mental idol
like this, right?
var vol = parseFloat(entity.state);
so what exactly does the parseFloat do? I trying googling ofc but could not really put in into this context...
graceful roost
Because HA stores its state values as a string, you cannot compare a string to a number (integer). Well, you kind of can, but the only thing that it would be useful for is an exact match; you wouldn't be able to compare greater-than/less-than. The parseFloat "converts" the string to a float value (a number with decimal points) which can subsequently be compared. You can also use parseInt to return an integer value (a whole number).
This is how JavaScript handles these values. With Jinja, you would "pipe" the state into float or int. Something like state('sensor.entity_name') | float.
parsing/piping to Int is useful if you just want to see the whole number of a value (useful with temperature sensors.) yaml secondary: >- {{ states('sensor.bedroom_temperature')|int }}°F {{ states('sensor.bedroom_temperature') }}%
mental idol
I think I follow. But I was still able to use:
icon: |
[[[
if (entity.state == "0"){
return 'mdi:volume-low';
} else if (entity.state <= "50"){
return 'mdi:volume-medium';
} else {
return 'mdi:volume-high';
}
]]]
It' jsut that == 0 and <50 is the same thing. kind of. Which I think confused the template a bit. To show volume-low or volume-medium
"...useful for is an exact match; you wouldn't be able to compare greater-than/less-than. The parseFloat "converts..."
graceful roost
That code doesn't work for me. Stays at -high since that is the else.
mental idol
oh? It did for me. Kind of
graceful roost
Also, Javascript doesn't use the { }. That's a Jinja thing.
mental idol
To me, your solution, regardless of which solutions works best, to me they kind of say the same thing. I mean **less than 33 **would is also included in less than 66
[[[
var vol = parseFloat(states["input_number.dummy_number"].state);
if (vol == 0) return 'grey';
else if (vol < 33) return '#b1e4fe';
else if (vol < 66) return '#6cccfe';
else return '#009ef0';
]]]
IIRC, JavaScript "executes" the first that it determines to be true. If it isn't true, it goes to the next one until it gets to an else.
Now, if we hadn't included the else ifs and just did individual ifs (one for each check), then yes, that would be true because the less than 66 would see a value of 25 being less and the volume icon would be medium.
mental idol
makes sense, thanks for explaining
graceful roost
Take a look at my Github https://github.com/dsellers1/home-assistant. Look at the examples: Mushroom template card with custom icon color and icon and custom:button-card with custom icon color. You can see differences between JavaScript and Jinja but accomplish the same thing.
mental idol
cool, will take some time to read through properly
pulsar marsh
You can simply use the JS template I posted directly, there are quite a few syntax errors in the code above . Watch out for the () and elses
pulsar marsh
btw can you paste the yaml from this card please:#frontend-archived message
mental idol
here is the yaml
its here 🙂
graceful roost
Little bit further up the screen in the message.txt block. #1178372400216293417 message
pulsar marsh
a yes, found it. Before installing yet anotehr custom card I tried it with mushroom slider, which is promising. I cant make several styling s happen yet, maybe you can find the correct elements? for box-shadow: none on the embedded card, and the color for the track/slider? see
if I set that box-shadow on the embedded mushroom-card in inspector it does work....
card_mod to the rescue: ```
custom_fields:
slider:
card:
type: custom:mushroom-number-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
1 problem down, now how to color the slider
pulsar marsh
turns out I had forgotten to delimit my templates in my first effort using card_mod on the core input_number entity...... - entity: input_number.alarm_volume card_mod: style: | :host { --card-mod-icon: {% set vol = states(config.entity)|float(0) %} {% if vol == 0.0 %} mdi:volume-off {% elif vol <= 0.3 %} mdi:volume-low {% elif vol <= 0.6 %} mdi:volume-medium {% else %} mdi:volume-high {% endif %}; --paper-item-icon-color: {% set vol = states(config.entity)|float(0) %} {% if vol == 0.0 %} gray {% elif vol <= 0.3 %} dodgerblue {% elif vol <= 0.6 %} green {% elif vol <= 0.8 %} orange {% else %} red {% endif %}; } works exactly as I want it