is there a possinbility to split an output for a single line into multiple code-lines?
e.g. If I wanted to have the wifi-symbols of the below code in one line, I have to put the code below into one line. This makes it very difficult to read the code. |{% if states ("binary_sensor.cupra_born_car_is_online")=="on"%}<font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font>{%else%} <font color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font>{%endif %} |{% if states ("binary_sensor.cupra_born_car_is_online")=="on"%}<font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font>{%else%} <font color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font>{%endif %}
output:
If I split the “code” into two lines the icons will be shown in two lines.
When using {{ or {% there is a chance of adding unwanted line feeds into the output, which is due to the syntax of the YAML.
To avoid those unwanted line feeds YAML provide another set of brackets in the form of {{- and {%- and also their counterparts -}} and -%}
The first two will remove a line feed coming before the brackets, if such one exist.
The latter two will remove one coming after the brackets.
Hi all,
let me describe my use case, maybe some has an idea how this can be work. I wanted to move the chips-buttons from above in line with the “Home button” The colour of the icon, the icon and the text below the icons should change depending on the state of the device. This is no problem by using the chips, but I wanted to integrate into the section above the cupra-logo. If there is a way to combine the markdown and the chips in a way that it looks like one card, it is also ok for me, but I haven’t found a way to get rid of the frames of chips and the black background between the chips. Maybe someone can help here to achieve the goal.
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?
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
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.
@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.
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 -%}
