Markdown card with template won't format correctly

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'}}

mig77angel · November 11, 2019, 3:27pm

That is not, I tried and the same thing comes out, the literal text, it seems as if I was not able to interpret the template

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

mig77angel · November 11, 2019, 3:29pm

Neither does it work

Mariusthvdb · November 11, 2019, 3:33pm

your second part is using the [[ ]] brackets, while it should be using the {{ }} jinja template brackets

see:

      <font color = {{state_attr('sensor.family_home','icon_color')}} > - {{state_attr('sensor.home_badge','desc')}} </font>

in your case, replace the

```[[ sensor.rclone_comando_limpio_lovelace ]]```

with

{{states('sensor.rclone_comando_limpio_lovelace')}}

mig77angel · November 11, 2019, 4:31pm

That doesn’t work either

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

Not even that

<font color={%'white' if is_state('binary_sensor.rclone_comando_longitud','on') else 'red'%}>

```[[ sensor.rclone_comando_limpio_lovelace ]]```</font>

Mariusthvdb · November 11, 2019, 4:37pm

please be more precise about what this means. error in the log?

btw, you didn’t use my previous template, but kept your old. don’t use the square brackets, and don’t use the back ticks.

<font color = {{'white' if is_state('binary_sensor.rclone_comando_longitud','on') else 'red'}} >{{states('sensor.rclone_comando_limpio_lovelace')}} </font>

mig77angel · November 11, 2019, 4:47pm

There is no error in the registry, I am trying to change the text color of a markdown card according to the status of a binary sensor, but I always get the literal text if I try.

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

    <font color={{'white' if is_state('binary_sensor.rclone_comando_longitud','on') else 'red'}}>{{states('sensor.rclone_comando_limpio_lovelace')}}</font>

rclone2

Mariusthvdb · November 11, 2019, 4:55pm

try this one first to see if the markdown is working as it should:

  - type: markdown
    title: 'Sun'
    content: |

      <font color= {{'white' if is_state('binary_sensor.sun_up','on') else 'red'}}> Sun is {{states('sun.sun')}}</font>

shows:

second, test what

{{states('sensor.rclone_comando_limpio_lovelace')}}

does in the template editor, to see if the template itself is correct

mig77angel · November 11, 2019, 5:01pm

The first test of the sun goes wrong, it shows the literal text.

The second goes well, gives the full command ok

mig77angel · November 11, 2019, 5:03pm

This shows the text correctly in red

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

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

Mariusthvdb · November 11, 2019, 5:15pm

how odd the full Sun markdown card I gave you doesn’t work as it should. It does here

to proof to you it should, Ive changed it to:


  - type: markdown
    title: 'Sun'
    content: |

      <font color= {{'green' if is_state('binary_sensor.sun_up','off') else 'red'}}> Sun is {{states('sun.sun')}}</font>

showing:

maybe try another exact copy-paste?

and show us what it does. (even if the binary_sensor.sun_up doesn’t not exist. this should work)

mig77angel · November 11, 2019, 7:57pm

same

rclone3

I’m going to try a clean homeassistant installation

Edit:

In a clean and empty homeassistant installation it shows well, I am in version 0.100.0b3

I will update to see if it is fixed.