Markdown card with template won't format correctly

Mariusthvdb · September 17, 2019, 12:31pm

HI,

using the # for the header in Markdown card normally works just fine. I now have a template for the color though which doesnt work nicely with the # and I ask the community for assistance please. What should I change t get it working as it should

      - type: markdown
        content: >
          # <font color= {% set vandaag = states('sensor.afval_vandaag') %}
                         {% if vandaag == 'Papier' %} '#00b2ef'
                         {% elif vandaag == 'Gft' %} green
                         {% elif vandaag == 'Plastic' %} orange
                         {% elif vandaag == 'Restafval' %} black
                         {% else %} grey
                         {% endif %} >Afvalwijzer</font>

without the # works alright, And the template is alright.

the word Afvalwijzer is formatted green, as it should be.
using the #connected to the template results in:

adding a space between the # and the template:

please have a look?

this is what Id like to see:

which does work with a template like this:

      - type: markdown
        content: >
          # <font color = {{'green' if states('sensor.trash_firstdate') == 'vandaag' else 'grey'}}>Afvalwijzer</font>

creating an extra template sensor and use that for the font color:

      - type: markdown
        content: >
          # <font color = {{states('sensor.trash_color')}}>Afvalwijzer</font>

works alright.
So what did I do wrong, and why won’t it work with the template…

thanks

petro · September 17, 2019, 2:48pm

Mariusthvdb:

      - type: markdown
        content: >
          # <font color= {% set vandaag = states('sensor.afval_vandaag') %}
                         {% if vandaag == 'Papier' %} '#00b2ef'
                         {% elif vandaag == 'Gft' %} green
                         {% elif vandaag == 'Plastic' %} orange
                         {% elif vandaag == 'Restafval' %} black
                         {% else %} grey
                         {% endif %} >Afvalwijzer</font>

try

      - type: markdown
        content: >
          # <font color = "{% set vandaag = states('sensor.afval_vandaag') %}
                          {%- set mapper = {'Papier':'#00b2ef','Gft':'green','Plastic':'orange','Restafval':'black'} %}
                          {{- mapper[vandaag] if vandaag  in mapper else 'grey' }}">Afvalwijzer</font>

I’m guessing your problem is carriage returns. You gotta remove them with the whitespace removal identifier. (e.x. adding - to your template lines {%- %}.

Mariusthvdb · September 17, 2019, 2:59pm

thanks, this works!
not sure about the carriage returns issue though because I have another template rather like this, that works just fine. Only difference there is there is no header # preceding it.

As you can see in your own post, the editors are confused because of the #

petro · September 17, 2019, 3:17pm

Yeah, I’m guessing the issue lies in the markdown card. The markdown card is probably looking for a single line result to convert # into a title. So when the html response spans multiple lines, the # gets ignored. I’m making an educated guess here. It could be something else, I haven’t looked at the code.

Mariusthvdb · September 17, 2019, 9:44pm

just as a followup and a fyi, Ive retried my original sensor:

        content: >
          # <font color= {%- set vandaag = states('sensor.afval_vandaag') %}
                       {%- if vandaag == 'Papier' %} '#00b2ef'
                       {%- elif vandaag == 'Gft' %} green
                       {%- elif vandaag == 'Plastic' %} orange
                       {%- elif vandaag == 'Restafval' %} black
                       {%- else %} grey
                       {%- endif %}> Afvalwijzer </font>

with the whitespace removers, and it does work in this form also. How odd, that with the header # this is necessary, while without it the template simply returns the correct ouput.
Anyways, you were right, thought id let you know

Mariusthvdb · September 18, 2019, 1:02pm

have another issue using this sensor:

      dark_sky_temp_color:
        value_template: >
          {% set temp = states('sensor.dark_sky_temperature')|float %}
          {% if temp < -5 %} rgb(30, 255, 255)
          {% elif temp < 0 %} rgb(30, 144, 255)
          {% elif temp < 10 %} rgb(255, 255, 0)
          {% elif temp < 15 %} rgb(255, 211, 30)
          {% elif temp < 20 %} rgb(0, 128, 0)
          {% elif temp < 25 %} rgb(255, 165, 0)
          {% elif temp < 30 %} rgb(255, 105, 0)
          {% else %} rgb(255, 80, 0)
          {% endif %}

I can’t use it to set the color of the text replacing this:

    content: >
      **Weersverwachting:**

      <img src = {{state_attr('sensor.weather_animated_icon','entity_picture')}} >
      <font color= {% if states('sensor.dark_sky_temperature')|float >= 20 %} #f00
      {% else %} #008000 {% endif %} >

      {{ states('sensor.dark_sky_daily_summary')}} </font>

which works alright, to:

    content: >
      **Weersverwachting:**

      <img src = {{state_attr('sensor.weather_animated_icon','entity_picture')}} >
      <font color= {{states('sensor.dark_sky_temp_color')}} >

      {{ states('sensor.dark_sky_daily_summary')}} </font>

Ive tried all spaces, and even taking all out won’t show the collored text. Is there a special setting necessary for rgb colors maybe?

using it in the styles for the background color works alright:

  - type: markdown
    style: |
      ha-card {
      background: {{states('sensor.dark_sky_temp_color')}};
      border-radius: 6px;
      }

the sensor is used elsewhere (in my dark sky custom card to color the temp, working as designed…

since this template works in other places I didn’t think it to be useful, but the only thing left I could think of is deleting the spaces in the sensor itself maybe?

      dark_sky_temp_color:
        value_template: >
          {% set temp = states('sensor.dark_sky_temperature')|float %}
          {%- if temp < -5 %} rgb(30, 255, 255)
          {%- elif temp < 0 %} rgb(30, 144, 255)
          {%- elif temp < 10 %} rgb(255, 255, 0)
          {%- elif temp < 15 %} rgb(255, 211, 30)
          {%- elif temp < 20 %} rgb(0, 128, 0)
          {%- elif temp < 25 %} rgb(255, 165, 0)
          {%- elif temp < 30 %} rgb(255, 105, 0)
          {%- else %} rgb(255, 80, 0)
          {% endif %}

could that be it?

update

nope:

while the temp here is colored nicely using the same sensor:

now what…

petro · September 18, 2019, 1:17pm

hmm, try

    content: >
      **Weersverwachting:**

      <img src = {{state_attr('sensor.weather_animated_icon','entity_picture')}} >
      <font color= "{{states('sensor.dark_sky_temp_color')}}" >{{ states('sensor.dark_sky_daily_summary')}} </font>

Mariusthvdb · September 18, 2019, 1:21pm

yes!

why would that be? I realize the sensor outputs an rgb() color without quotes but didn’t think that would necessary?

petro · September 18, 2019, 1:28pm

I think the quotes are necessary, also possibly the carriage return. Again, just shooting in the dark here.

EDIT: I’m leaning more towards the quotes being the requirement over removing the carriage return.

Mariusthvdb · September 18, 2019, 1:33pm

ok, let me try to figure out then why this does work:

        content: >
          # <font color = {{states('sensor.trash_color')}}>Afvalwijzer</font>

          **<font color= {{states('sensor.trash_color')}}> {{states('sensor.vandaag')}}</font>**

          **<font color=var(--secondary-text-color)>{{states('sensor.trash_firstdate')}}</font>** : **{{states('sensor.trash_firstwastetype')}}**

          Volgende afval-ophaal over **<font color=var(--secondary-text-color)>{{states('sensor.trash_next')}}</font>** dagen

this template doesn’t output rgb() but hex or even color names. As in the first post.

must be a combination of factors…

got it working both now, so no complaining thanks!

Mariusthvdb · September 19, 2019, 7:24am

update

seems I cheered too soon Markdown card with template won't format correctly, about the color being correct now…

it still is showing green,

while in fact the sensor tells it otherwise, reflected in this:

and state:

so, the card now still doesn’t give me an error, but it doesn’t use the rgb value at all. Thought it hadn’t been updated somehow, and still displayed an older state.

But, after testing this:

    content: >
      **Weersverwachting:**

      <img src = {{state_attr('sensor.weather_animated_icon','entity_picture')}} >

      {{states('sensor.weather_animated_icon')}}, {{states('sensor.dark_sky_temperature')}}°

      <font color= {% set temp = states('sensor.dark_sky_temperature')|float %}
          {% if temp < -5 %} rgb(30, 255, 255)
          {% elif temp < 0 %} rgb(30, 144, 255)
          {% elif temp < 10 %} rgb(255, 255, 0)
          {% elif temp < 15 %} purple
          {% elif temp < 20 %} rgb(0, 128, 0)
          {% elif temp < 25 %} rgb(255, 165, 0)
          {% elif temp < 30 %} rgb(255, 105, 0)
          {% else %} rgb(255, 80, 0)
          {% endif -%} >

      {{ states('sensor.dark_sky_daily_summary')}} </font>

succesfully (note the empty spaces in the template still there), I must conclude the markdown templates have issues with rgb() values. Hope @thomasloven please can shed some light here, pardon the tag, if this is to be expected?

forced creativity

  - type: markdown
    style: |
      ha-card {
      background: url("/local/lovelace/images/weather-background-{{states('sun.sun')}}.png");
      background-size: 100% 400px;
      border-radius: 6px;
      }
    content: >
      **Weersverwachting:**

      <img src = {{state_attr('sensor.weather_animated_icon','entity_picture')}} >

      {{states('sensor.vandaag')}}: {{states('sensor.weather_animated_icon')}}, {{states('sensor.dark_sky_temperature')}}°

      <font color= {% set temp = states('sensor.dark_sky_temperature')|float %}
          {% if temp < -20 %} black
          {% elif temp < -15 %} navy
          {% elif temp < -10 %} darkblue
          {% elif temp < -5 %} mediumblue
          {% elif temp < 0 %} blue
          {% elif temp < 5 %} dodgerblue
          {% elif temp < 10 %} lightblue
          {% elif temp < 15 %} turquoise
          {% elif temp < 20 %} green
          {% elif temp < 25 %} darkgreen
          {% elif temp < 30 %} orange
          {% elif temp < 35 %} crimson
          {% else %} firebrick
          {% endif %} >

      {{ states('sensor.dark_sky_daily_summary')}} </font>

leading to:

inspired by:

thomasloven · September 19, 2019, 8:33am

Here’s how it works.

The markdown card first processes any jinja2 templates, and pastes the values. I.e.

# <font color="{{ states('sensor.color") }}">Text<font>

Turns into

# <font color="rgb(255,255,0)">Text</font>

The result is processed as markdown and becomes

<h1><font color="rgb(255,255,0)">Text</font></h1>

Trying out the conversion manually in your head, on paper, in a text editor or in the template editor in the dev tools is a good idea.

Further:

Markdown headers #, ## etc. turn a single line into a header.
HTML attributes shall be on the form attribute="value" with no spaces and with quotes. Other ways often work due to historical reasons, but only until they don’t. This always works.

If a markdown card doesn’t update when an entity changes, try setting the entity_id list manually.

Mariusthvdb · September 19, 2019, 8:38am

great Thomas, thanks for taking the time!

Still I am having a hard time why, reading what you say, my template sensor:

      dark_sky_temp_color:
        value_template: >
          {% set temp = states('sensor.dark_sky_temperature')|float %}
          {%- if temp < -5 %} rgb(30, 255, 255)
          {%- elif temp < 0 %} rgb(30, 144, 255)
          {%- elif temp < 10 %} rgb(255, 255, 0)
          {%- elif temp < 15 %} rgb(255, 211, 30)
          {%- elif temp < 20 %} rgb(0, 128, 0)
          {%- elif temp < 25 %} rgb(255, 165, 0)
          {%- elif temp < 30 %} rgb(255, 105, 0)
          {%- else %} rgb(255, 80, 0)
          {%- endif %}

which outputs an rgb value, isnt accepted when I use it in the markdown card, either as template, or a when the full template is used.
Replacing rgb values in the exact same template with color names or hex numbers does show correctly. What am I missing now?

btw it wasn’t the updating, so we can forget about that in this issue

petro · September 26, 2019, 1:27pm

remove the leading space you have in front of all the rgb’s

<h1><font color="rgb(255,255,0)">Text</font></h1>

isn’t the same as

<h1><font color=" rgb(255,255,0)">Text</font></h1>

Mariusthvdb · September 26, 2019, 2:28pm

Hi Petro,
thanks. I understand the difference, which seems rather logical.

why this doesnt matter using names, makes it confusing:

      temperature_color_name:
        value_template: >
          {% set temp = states('sensor.dark_sky_temperature')|float %}
          {% if temp < -20 %} black
          {% elif temp < -15 %} navy
          {% elif temp < -10 %} darkblue
          {% elif temp < -5 %} mediumblue
          {% elif temp < 0 %} blue
          {% elif temp < 5 %} dodgerblue
          {% elif temp < 10 %} lightblue
          {% elif temp < 15 %} turquoise
          {% elif temp < 20 %} green
          {% elif temp < 25 %} darkgreen
          {% elif temp < 30 %} orange
          {% elif temp < 35 %} crimson
          {% else %} firebrick
          {% endif %}

is now used like this:

  - type: markdown
    style: |
      ha-card {
      background: url("/local/lovelace/images/weather-background-{{states('sun.sun')}}.png");
      background-size: 100% 400px;
      border-radius: 6px;
      }
    content: >
      **Weersverwachting:**

      <img src = {{state_attr('sensor.weather_animated_icon','entity_picture')}} >

      {{states('sensor.vandaag')}}: {{states('sensor.weather_animated_icon')}}, {{states('sensor.dark_sky_temperature')}}°

      <font color= {{states('sensor.temperature_color_name')}} >

      {{ states('sensor.dark_sky_daily_summary')}} </font>

and colors the text correctly.

petro · September 26, 2019, 2:31pm

because it’s not a string, its a color. Notice how the rgb is inside quotes? Notice color is not? I don’t know if it will actually work, i’m guessing that the space is screwing it up.

Mariusthvdb · September 26, 2019, 2:36pm

yea, you’re probably right. Will make an extra sensor without the space and let you know.

Though I can already confirm the existing dark_sky_temp_color as posted above works just fine in the custom dark-sky-weather-card.js for coloring the main temp color.

I changed the card using:

      .temp {
        font-weight: ${tempFontWeight};
        font-size: ${tempFontSize};
        color: ${temp_color};
        position: absolute;
        right: ${tempRightPos};
        margin-top: ${tempTopMargin};
      }

and

  var temp_color = this.config.temp_color ? this._hass.states[this.config.temp_color].state : 'rgb(255, 165, 0)';

and since that too is used in html css, I would have expected same results.

Ultimately this must be it… no spaces, and quotes.

mig77angel · November 11, 2019, 12:32pm

The color change of text with jinja doesn’t work for me, the template editor does it well:

- type: markdown
  title: 'Comando Rclone'
  content: |

    <font color={% set long =states('binary_sensor.rclone_comando_longitud')%}{% if long == on %}"white"{% else %}"red"{% endif %}>```[[ sensor.rclone_comando_limpio_lovelace ]]```</font>

    <font color="red">```[[ sensor.rclone_comando_limpio_lovelace ]]```</font>

In the template editor the two results are the same, but in lovelace it presents the literal text.

rclone

petro · November 11, 2019, 2:06pm

on is not defined. Put it in quotes.

Mariusthvdb · November 11, 2019, 2:50pm

yes, as Petro says, and, trying to keep things short and simple, why don’t you write it like this:

{{'white' if is_state('binary_sensor.rclone_comando_longitud','on') else 'red'}}