That wasn’t clear in your post ,but is is doable. I’ll work on it.
The following example uses a dictionary to specify the font color based on the battery level. It contains three levels but it can be expanded to contain ten levels if you want.
{%- set wifi -%}
{%- set (c, i, d) = iif(true, ('#4CAF50', '', 'online'), ('#DC143C', '-off', 'offline')) -%}
<font color="{{c}}"><ha-icon icon="mdi:wifi{{i}}"></ha-icon></font><br/><font color="{{c}}">{{d}} </font>
{%- endset -%}
{%- set engine -%}
{%- set (c, i, d) = iif(true, ('#4CAF50', '', 'ein'), ('#7E7E7E', '-off', 'aus')) -%}
<font color="{{c}}"><ha-icon icon="mdi:engine{{i}}-outline"></ha-icon></font><br/><font color="{{c}}">{{d}} </font>
{%- endset -%}
{%- set battery -%}
{%- set b = states('sensor.cupra_born_state_of_charge') | int(0) -%}
{%- set i = iif(is_state('binary_sensor.cupra_born_car_is_online', 'charging'), '-charging-high', '') -%}
{%- set c = {b <= 10: '#DC143C', b > 10 and b < 70: '#f1c232', b >= 70: '#4CAF50'}.get(true, '#FFFFFF') -%}
<font color="{{c}}"><ha-icon icon="mdi:battery{{i}}"></ha-icon><br/><font color="{{c}}">{{b}}% </font>
{%- endset -%}
||||||
|:---:|---|:---:|---|:---:|
|{{ wifi }}||{{ engine }}||{{battery}}|
This is the dictionary portion:
{%- set c = {b <= 10: '#DC143C',
b > 10 and b < 70: '#f1c232',
b >= 70: '#4CAF50'}.get(true, '#FFFFFF') -%}
The same technique can be used to select the icon based on the battery level. Or my preference would be to use the round(-1) function to get the closest icon value (10, 20, 30, etc) based on the battery level.
Example
{%- set i = "mdi:battery-" ~ b | round(-1) | int(0) -%}
Let me know if you need help to use this technique in the example I posted above. It amounts to nothing more than replacing this:
{%- set i = iif(is_state('binary_sensor.cupra_born_car_is_online', 'charging'), '-charging-high', '') -%}
with this:
{%- set i = "mdi:battery-" ~ b | round(-1) | int(0) if is_state('binary_sensor.cupra_born_car_is_online', 'charging') else "mdi:battery" -%}
BTW, is there anything else you want to add to this? Because I thought your original question was solved in this post.
1 Like
Cool! I saw that you did some magic. Unfortunately, I’m not at home, so I can’t test until tomorrow. But if I understand correctly, then it will work!
I envy people who can program so well, unfortunately I wasn’t born with that! I can only say thank you and will get back to you tomorrow when I’ve tested it.
Thank you very much for the support.
I’m going to close the post tomorrow as well. Now all questions have been answered.
@123 He asked a question right after you posted the solution. I selfishly kept it going while working with your code based off his question.
It became more interesting when adding integers into the equation. I feel like your second solution is more encompassing for folks looking to reference this solution. You definitely help me understand a new take on coding.
@Spartacus You can color the background, change icon size and border-radius etc… with card-mod
child(2) and child(4) below are the spaces between so it makes it easy to control the gap without markdown edits. You can add animation as well, like the engine rumbling or the battery blinking when its low.
card_mod:
style:
ha-markdown $: |
tr td:nth-child(1) {
padding: 10px;
background-color: #FFFFFF !important;
border-radius: 10px;
width: 40px;
--mdc-icon-size: 20px;
}
tr td:nth-child(2) {
padding: 2px;
background-color: none !important;
}
tr td:nth-child(3) {
padding: 10px;
background-color: #FFFFFF !important;
border-radius: 10px;
width: 40px;
--mdc-icon-size: 20px;
}
tr td:nth-child(4) {
padding: 2px;
background-color:none !important;
}
tr td:nth-child(5) {
border-radius: 10px;
background-color: #FFFFFF !important;
padding: 10px;
width: 40px;
--mdc-icon-size: 20px;
}
Hi taras,
I haven’t really got it right yet and I’m still tinkering with the implementation. Thanks again for providing the techniques. I’ll mark the thread as resolved. If I get stuck, I’ll get back to you.
1 Like
Hi @LiQuid_cOO
thanks for the hints! But @123’s resolution is very interesting and I got it to work with it. Personally, I find that CardMod is very complicated and you never know exactly how it works with the current card.
@Spartacus I didn’t present that as an alternative to @123 ,s code, rather an addon. His code is spectacular and I have actually switched to his method on my markdown cards.
Hi,
I think, it looks very cool now!
By the way does anyone know, how I can use the heater-symbol as a toggle-switch?
{%- set heater -%}
{%- set (ci, i, cd, d) = iif(is_state("switch.cupra_climate_switch", "on"), ('#4CAF50', '', '', 'Heizung ein'), ('#7E7E7E', '-off', '#7E7E7E', 'Heizung aus')) -%}
<font color="{{ci}}"><ha-icon icon="mdi:radiator{{i}}"></ha-icon></font><br/><font color="{{cd}}">{{d}} </font>
{%- endset -%}
Hi all,
I did some testing, but I have no idea how to toggle a switch within markdown! Is it possible?
[<font color="#f1c232"><ha-icon
icon=mdi:arrow-left-bold-outline></ha-icon>](/lovelace/0)</font
no
Why are you doing all this work in markdown cards when a glance card does exactly what you’re trying to achieve?
if you can tell my a way how I can combine the cards together that it looks like one card, then I will check it out!
vertical-in-stack card
Stack-in card or as @petro mentioned vertical stack-in-card, combined with layout card is extremely versatile. Markdown card may be the hardest way to accomplish what you are designing.
Hm!
e.g.:
type: custom:layout-card
layout_type: custom:grid-layout
layout: {}
cards:
- type: glance
entities:
- entity: sensor.luftfeuchte_hobby
- entity: sensor.temperatur_hobby
- type: markdown
content: Matkdown Test
looks like:
as you can see, it looks not like one card. You alsways see the black line between the two cards.
Any ideas? Sorry I am not very familiar with the glance and the layout card.
Because you didn’t use a card either of suggested, instead you used grid.
Stack in card or vertical in stack card. Both are custom.
ok, then let me share this:
type: vertical-stack
cards:
- type: glance
entities:
- sensor.batterie_hobby
- sensor.luftfeuchte_vorrat
- sensor.temperatur_vorrat
- type: markdown
content: >-
<hr>
<br/>
<img src = '/local/Cupra-Logo.png'
align='middle'
width='100'
height='59'></img> <font color="#B3773F"><font
size="5">{{'  '}}Fahrzeugübersicht</font></font><br/>
<font color="#B3773F"><font size="4">XX - XX 999</font></font>
<hr>
<br/>
This looks exacley like the example above:
Maybe I am too stupid! I do not really understand what you mean!
That’s not vertical in stack card, that’s a vertical stack. I’m not mincing my words here. Please note the differences in the words I’m using. They actually hold meaning.
ok, I have it! It was unclear that you first have to implement it from HACS.
ok, issue 1 has solved!
But is there also a way to modify the glance card? The ui of the glance card does not support it. Icon and color depend on different states and for the charging you also need different icons. Is this possible here too?
type: glance
entities:
- entity: binary_sensor.cupra_born_car_is_online
- entity: binary_sensor.cupra_born_overall_status
- entity: number.cupra_born_target_state_of_charge
state_color: true
I tried with card_mod, but it is not working.
The icon color is not changing, it is still amber:
type: glance
entities:
- entity: binary_sensor.cupra_born_car_is_online
card_mod:
style: |
state-badge {
{% if is_state(config.entity,'on') %}
color: red;
{% else %}
color: blue;
{% endif %}
}
- entity: binary_sensor.cupra_born_overall_status
- entity: number.cupra_born_target_state_of_charge
and I also found nothing to change the icon depending on the charge status