Like this:
{{- states(“binary_sensor.cupra_born_car_is_online”) -}}
@Spartacus Not sure if this what you were looking for as an example?
type: markdown
content: |-
{% if is_state('light.pc_lights', 'on') %} <font
color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font> online {% else %}<font
color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font> offline {% endif %}{% if is_state('light.pc_lights', 'on') %} <font
color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font> online {% else %}<font
color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font> offline {% endif %}
Thanks everybody for your help, but the text should be under the Symbole, because I need 5 symbols in one line.
I tried this code, but then the issue is, that the second icon will be in the same line as the engine… I gues I have to define variables for each entity-state and I have to configure zwo lines, first obe with the icons, second one with the text.
{%- if states ("binary_sensor.cupra_born_car_is_online")=="on" -%}
|||
|:---:|:---:|
|<font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font>
|<font color="#4CAF5">online </font>
{%- else -%}
|<font color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font>
{%- endif -%}
{%- if states ("binary_sensor.cupra_born_engine_status")=="on" -%}
|<font color="#4CAF50"><ha-icon icon="mdi:engine-outline"></ha-icon></font>
{%- else -%}
|<font color="#7E7E7E"><ha-icon icon="mdi:engine-off-outline"></ha-icon></font>
{%- endif -%}
{{'\n'}}
many thanks for the link, but I think, that this will not run for me, but maybe this aproach can work, but I am too new with this stuff, but but perhaps this is an approach that leads to the goal…but why are these two blocks not in one line? Wjat is wrong?
{%- set wifi -%}
{%- if states ("binary_sensor.cupra_born_car_is_online")=="on" -%}
<font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font>
<font color="#4CAF5">online </font>
{%- else -%}
<font color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font>
<font color="#DC143C">offline </font>
{%- endif -%}
{%- endset -%}
{%- set engine -%}
{%- if states ("binary_sensor.cupra_born_engine_status")=="on" -%}
<font color="#4CAF50"><ha-icon icon="mdi:engine-outline"></ha-icon></font>
<font color="#4CAF5">ein </font>
{%- else -%}
<font color="#7E7E7E"><ha-icon icon="mdi:engine-off-outline"></ha-icon></font>
<font color="#7E7E7E">aus </font>
{%- endif -%}
{%- endset -%}
{{wifi}} {{engine}}
I suggest you use an HTML line-break tag <br/> to put the text under the icon.
Then use a table to put the two sets of icons and text next to each other. Include a blank column to provide some spacing between the two.
You can also reduce the template to this:
{%- set wifi -%}
{%- set (c, i, d) = iif(is_state("binary_sensor.cupra_born_car_is_online", "on"), ('#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(is_state("binary_sensor.cupra_born_engine_status", "on"), ('#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 -%}
||||
|:---:|---|:---:|
|{{ wifi }}||{{ engine }}|
Of course. My err. 
whow! You are a genius! it will probably take me 3 weeks to understand the code!
Thank you! Thank you! Thank you!
I will be in touch!
Spartacus
Hello,
I think I understood what you did in the code. Coll idea. Programming is not really my thing. I’m a complete beginner. Do you also have a cool and simplified code idea for this use case?
Actually I did it with if and else. I tried to do it the same way, but it doesn’t seem to be effective.
if states("sensor.cupra_born_charging_state")=="charging"
icon: mdi:battery-charging-high
color: amber
if states("sensor.cupra_born_state_of_charge")<
<10, mdi:battery-10, red
<20, mdi:battery-20,amber
<30, mdi:battery-30,amber
<40, mdi:battery-40,amber
<50, mdi:battery-50,amber
<60, mdi:battery-60,amber
<70, mdi:battery-70,amber
<80, mdi:battery-80,green
<90, mdi:battery-90,green
<100, mdi:battery-100,green
You’re welcome!
Please consider marking my post above with the Solution tag. It will automatically place a check-mark next to the topic’s title which signals to other users that this topic has been resolved. This helps users find answers to similar questions.
For more information about the Solution tag, refer to guideline 21 in the FAQ.
@123 Nice!! I was going to go with the table option as well, but I couldn’t decipher exactly what the actual end design was. I appreciate streamlining the code as well!!
@Spartacus As suggessted, please mark this as a solution. It will definitely help folks down the road. Markdown cards are not as easy to code compared to other cards.
1 Like
I wasn’t sure if this post still refered to a Markdown.I am assuming it is this can aleast help you think about the logic.
{% set k = states('sensor.bathroom_plug_sensor_illuminance_lux')| int (0) %}
{% set d = states('switch.server_fan') %}
{% if (k >= 80 and d == 'on') %}
<font color="green"><ha-icon icon="mdi:battery"></ha-icon></font> charged
{% elif (k >= 10 and d == 'on') %}
<font color="amber"><ha-icon icon="mdi:battery"></ha-icon></font> alert
{% elif (k <= 9 and d == 'on') %}
<font color="red"><ha-icon icon="mdi:battery"></ha-icon></font> critical
{% else %}
<font color="green"><ha-icon icon="mdi:battery-charging-high"></ha-icon></font> charging
{% endif %}
Thanks to everyone for the suggestions.
I have tried to implement this now, but I still fail at the battery symbol, which should also show the corresponding symbol depending on the state of charge, so
mdi:battery-0, mdi:battery-10 … mdi:battery-100
{%- set battery -%}
{%- set e = states('sensor.cupra_born_state_of_charge')|int -%}
{%- set i = iif(is_state("binary_sensor.cupra_born_car_is_online", "charging"), ('battery-charging-high'), ('battery'))-%}
{%- if (e <= 10 ) -%}
{%- set c = ('#DC143C') -%}
{%- elif ( e > 10 and e < 70) -%}
{%- set c= ('#f1c232') -%}
{%- elif (e >= 70 ) -%}
{%- set c= ('#4CAF50') -%}
{%- endif -%}
<font color="{{c}}"><ha-icon icon="mdi:{{i}}"></ha-icon><br/><font color="{{c}}">{{e}}% </font>
{%- endset -%}
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.