ahhhhh, I assumed the built in animation are inherited. That explains it! Thanks!
how did you do that fantastic tile title? I love it !
1 Like
Do you refer to the images? Those are just simple images I drew for myself with random photos, used by simple HA image cards.
Temperature and humidity values would be nice on them, but what HA offer for it is not perfect…
no I was talking about the background of the room name.
Great card! I like (mis-)using the slider without action as an alternative to the bar-card. Made this visualization for PV forecast.
Any chance to mend the actual value that is used to render the slider, maybe via css? Something like “:host {value: {{ calculation }} }”?
Ah, and while I am just seeing this, any way to center the individual lines of the multi-line label relative instead of having it left aligned?
Yeah, exactly those are which I mentioned… Those are simple custom raster images. I drew them 1 by 1 from random photos. I imagined an aspect ratio, drew the shape of the header, selected a font, and ‘dropped them together’, and at the end linked by an image card to HA, only to bring some life into my raw and dry dashboards…
Example:
(The photo is not mine, I’m just using it for my very own ‘internal’ goals…)
I’m not sure what you mean by mending the slider value. You can change the slider label value based on it’s actual value using templates like {{ value * 100 }}%. You can also adjust it’s range using the built in range options, and change these ranges using templates.
While both lines in the label are part of the same HTML inner text, you can change it’s overall alignment using css.
.label {
text-align: center;
}
Thank you, the centering works 
What I mean regarding the value is to not only adapt the label, but the value itself which is used to determine the slider position. I meanwhile worked around this with a helper entity I used for the “slider” which has my calculated value.
Now, though, another problem is revealed. In this screenshot the value for the left slider (the other ones are buttons in fact) is 0%. The thumb is set to “flat”, but it is still there and consumes space 
Would it be possible to completely get rid of the thumb, eg by setting its width to 0?
Another idea … it’s christmas soon 
maybe you could gift us another feature type “bar” which looks similar to a slider but only displays the value as a bar gauge?
What I mean regarding the value is to not only adapt the label, but the value itself which is used to determine the slider position. I meanwhile worked around this with a helper entity I used for the “slider” which has my calculated value.
Does changing the range not work?
Now, though, another problem is revealed. In this screenshot the value for the left slider (the other ones are buttons in fact) is 0%. The thumb is set to “flat”, but it is still there and consumes space
You can do two things, both using CSS styles: reduce the slider thumb width and hide the slider thumb when it’s at the range minimum value.
:host {
--thumb-width: 4px;
}
{% if value == config.range[0] %}
::-webkit-slider-thumb {
visibility: hidden;
}
::-moz-range-thumb {
visibility: hidden;
}
.icon {
visibility: hidden;
}
{% endif %}
maybe you could gift us another feature type “bar”
Nope.
hey again, love this hacs add on, re building alot of dashboards where im focusing on the devices with its entities.
Im trying to update my climate controller when when the climate state is cool , that the option selected is blue, and the icon turns white
entity_id: climate.izone_ac_controller_dining_room
option: Cool
tap_action:
action: perform-action
perform_action: climate.set_hvac_mode
target:
entity_id:
- climate.izone_ac_controller_dining_room
data:
hvac_mode: cool
value_attribute: hvac_modes
icon: mdi:snowflake
styles: |-
:host {
--color: var(--blue-color);
{% if is_state('climate.izone_ac_controller_dining_room', 'heat') %}
--icon-color: var(--white-color);
{% else %}
--icon-color: var(--blue-color);
{% endif %};
}
.icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg)
}
}
It looks like you just have to change 'heat' to 'cool'? Right now it’s changing the icon color to white when the state is heat.
yeah sorry that helps but when ever i refresh the page the button is not blue.
but my other custom tile lick locks etc they stay red or green depending on the state of the lock
I want the cool button to remain blue when the state is blue?? does that make sense?
Thanks, today I was finally able to update the Webview app and that fixed the problem
For those with an Huawei tablet you cannot use “Android Webview”, you must download the latest version of “Huawei Webview” apk and sideload it (version 15.x worked fine on my Harmony OS 2.0 tablet).
1 Like
Try making option: Cool lowercase so it’s option: cool to match the actual state of the climate entity.
wow! thank you never would have thought to try that!
hey @Nerwyn im trying the same for fan modes, literlaly the same code just with attribute fan_modes
option: high
tap_action:
action: perform-action
perform_action: climate.set_fan_mode
target:
entity_id:
- climate.izone_ac_controller_dining_room
data:
fan_mode: high
value_attribute: fan_modes
icon: mdi:speedometer
styles: >-
:host {
--color: var(--blue-color);
{% if is_state_attr('climate.izone_ac_controller_dining_room', 'fan_modes',
'high') %}
--icon-color: var(--white-color);
{% else %}
--icon-color: var(--black-color);
{% endif %};
}
There’s a capital H in the option in your screenshot, and the value_attribute has an s in the YAML.
@Nerwyn yeah i fixed that after posting.
entity_id: climate.izone_ac_controller_dining_room
option: high
tap_action:
action: perform-action
perform_action: climate.set_fan_mode
target:
entity_id:
- climate.izone_ac_controller_dining_room
data:
fan_mode: high
value_attribute: fan_modes
icon: mdi:speedometer
styles: >-
:host {
--color: var(--blue-color);
{% if is_state_attr('climate.izone_ac_controller_dining_room', 'fan_modes',
'high') %}
--icon-color: var(--white-color);
{% else %}
--icon-color: var(--black-color);
{% endif %};
}
@Nerwyn FYI the im using the new beta 2024.10.0b1 and the Add Custom feature button does not work. you can still use YAML
1 Like
Can you make a bug on the repo so I don’t forget? I probably won’t be able to fix this until 2024.10 is actually released since I’m not on the HA frontend beta.
1 Like