Texttile like Markdown in Lovelace

[seb123212]

Hi there,

I'm currently trying to set up my first tileboard. Until now i've just used the "normal" lovelace interface in home assistant. There is a markdown card, where I can use markdown to show formated text. Now my question: Is there any possibility to create such a tile in tileboard? I use the following code to show the current Weatherwarnings from the German "Wetterdienst":

{% set current_count = state_attr("sensor.warnwetter_current_warning_level", "warning_count") %} {% set advance_count = state_attr("sensor.warnwetter_advance_warning_level", "warning_count") %} {% if ((current_count == 0 or current_count == None) and (advance_count == 0 or advance_count == None)) %}
  **<font color=#c5e566>Keine Warnungen</font>**
{% else %}
  {% for i in range(current_count) %}
    {% set headline = state_attr("sensor.warnwetter_current_warning_level", "warning_" ~ loop.index ~ "_headline") %}
    {% set description = state_attr("sensor.warnwetter_current_warning_level", "warning_" ~ loop.index ~ "_description") %}
    {% set level = state_attr("sensor.warnwetter_current_warning_level", "warning_" ~ loop.index ~ "_level") %}
    {% set time_start = state_attr("sensor.warnwetter_current_warning_level", "warning_" ~ loop.index ~ "_start") | as_timestamp %}
    {% set time_end = state_attr("sensor.warnwetter_current_warning_level", "warning_" ~ loop.index ~ "_end") | as_timestamp %}
    {% set color = state_attr("sensor.warnwetter_current_warning_level", "warning_" ~ loop.index ~ "_color") %}
  **<font color={{ color }}>{{ headline }}</font>**
  {{ time_start | timestamp_custom("%a %H:%M") ~ " - " ~ time_end | timestamp_custom("%a %H:%M") }}
  *{{ description|trim }}*
  {% if not loop.last %}***{% endif %}
  {% endfor %}
  {% if ((current_count != 0) and (advance_count != 0)) %}***{% endif %}
  {% for i in range(advance_count) %}
    {% set headline = state_attr("sensor.warnwetter_advance_warning_level", "warning_" ~ loop.index ~ "_headline") %}
    {% set description = state_attr("sensor.warnwetter_advance_warning_level", "warning_" ~ loop.index ~ "_description") %}
    {% set level = state_attr("sensor.warnwetter_advance_warning_level", "warning_" ~ loop.index ~ "_level") %}
    {% set time_start = state_attr("sensor.warnwetter_advance_warning_level", "warning_" ~ loop.index ~ "_start") | as_timestamp %}
    {% set time_end = state_attr("sensor.warnwetter_advance_warning_level", "warning_" ~ loop.index ~ "_end") | as_timestamp %}
    {% set color = state_attr("sensor.warnwetter_advance_warning_level", "warning_" ~ loop.index ~ "_color") %}
  **<font color={{ color }}>{{ headline }}</font>**
  {{ time_start | timestamp_custom("%a %H:%M") ~ " - " ~ time_end | timestamp_custom("%a %H:%M") }}
  *{{ description|trim }}*
  {% if not loop.last %}***{% endif %}
  {% endfor %}
{% endif %}

I've tried to implement it like this, but be aware it's both awfull and incomplete:

                     position: [0, 2],
                     width: 2, height: 1,
                     id: 'sensor.warnwetter_current_warning_level',
                     title: 'Wetterwarnung',
                     subtitle: '@attributes.warning_1_headline',
                     fields: {
                         AnzahlderWarnungen: '@attributes.warning_count',
                         list: [
         // custom line
         '@attributes.warning_1_headline',
         '@attributes.warning_1_description',
         '@attributes.warning_1_start',
         '@attributes.warning_1_end'
                     ]},
                     type: TYPES.WEATHER,
                     state: false,
}, 

I would be very happy about any kind of help. Even if I am an absolute noob in terms of tileboard and javascript.

[alphasixtyfive]

Can you please format your code properly? It is not readable at all.

[seb123212]

I‘m Sorry. Now the format should be readable.

[alphasixtyfive]

Can you please post a screenshot of how it looks like in Lovelace?

[seb123212]

Unfortunately now there is no warning active. But if there is a warning, the text “Keine Warnungen” will disappear and there will be the headline, description, … of the sensor.warnwetter_current_warning_level in the actual colour of the warning level

[alphasixtyfive]

Having no warnings is a good thing :) You could use a CUSTOM tile for that I suppose.

[seb123212]

Okay, so I use CUSTOM istead of WEATHER (I don't even know why I've choosen this type). Thank you for your patience in advance, but I don't understand first how to show formated Text smoothly in a tile at all. My scond problem is transcripting my markdown code into needed javascript.

[alphasixtyfive]

With CUSTOM tile you can set the whole contents within the tile using customHtml which can be a function as shown in bellow example:

customHtml: function() {
    /* Your code logic here*/
    return '<b>Warning</b>';
}

You would probably also need to use this.parseFieldValue('&sensor.your_sensor'); within the function to get values from sensors you need.

[seb123212]

Thanks a lot! This is my code for now:

{
                     position: [0, 2],
                     width: 2, height: 1,
                     id: 'sensor.warnwetter_current_warning_level',
                     title: '',
                     customHtml: function xy() {
    var current_count = this.parseFieldValue('&sensor.warnwetter_current_warning_level.attributes.warning_count');
    var warning;
    var description;
    var color;
    var start;
    var end;
    if (current_count == 0) {
    warning = "<b><font color=#c5e566>Keine Warnungen</font></b>" }
    else {
    warning = this.parseFieldValue('&sensor.warnwetter_current_warning_level.attributes.warning_1_headline');
    description = this.parseFieldValue('&sensor.warnwetter_current_warning_level.attributes.warning_1_description');
    color = this.parseFieldValue('&sensor.warnwetter_current_warning_level.attributes.warning_1_color');
    start = this.parseFieldValue('&sensor.warnwetter_current_warning_level.attributes.warning_1_start');
    end = this.parseFieldValue('&sensor.warnwetter_current_warning_level.attributes.warning_1_end');
}
    
    return warning + "<br>" + description + "<br>" + start + "<br>" + end;
    },
                     type: TYPES.CUSTOM,
                     state: false,
                     },

Unfortunally the text goes ot of the tile. Do you have an idea how to avoid this behavior?

[alphasixtyfive]

Wrap description inside a DIV with fixed size and word-wrap.