Markdown + Card mod, very slow/buggy

vingerha commented 2 years ago

My Home Assistant version: 2022.6 (also noted with 2022.4.3)

My lovelace configuration method (GUI or yaml): yaml

What I am doing: combining sensor data via markdown and layout via cardmod

What I expected to happen: opening the dashboard view should format along css in <1 sec

What happened instead: format > 10 sec or sometimes never Observations,

when clicking 'edit' for the view, it responds immediately
cardmod v 3.1.4/5 slow, 3.1.1 is OK

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error

# End of code

Error messages from the browser console:

By putting an X in the boxes ([]) below, I indicate that I:

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

ildar170975 commented 2 years ago

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error

# End of code

Unknown how to reproduce.

vingerha commented 2 years ago

the card code

type: markdown
content: >
  <div>Lessons florian</div>
    <table>
    {% set dates = state_attr('sensor.pronote_parent_fanny_lesson','date')%}
    {% for i in range(0, dates | count, 1) %}
    <tr>
  {% if dates[i] > dates[i-1] %}  <tr><td colspan="5"><b>{{
  strptime(dates[i],"%Y/%m/%d").strftime("%A %d") }}</td></tr> {% endif %}
    {%- if state_attr('sensor.pronote_parent_fanny_lesson','canceled')[i] == '0' -%}
    <td>  
    <mark>
    {{ dates[i].split('/',1)[1] }}</mark></td>
    {% else %}
    <td>  
    <span>
    <del>{{ dates[i].split('/',1)[1] }}</span></td>
    {%- endif -%}
    <td>{{ state_attr('sensor.pronote_parent_fanny_lesson','start')[i] }}</td>
    <td>{{ state_attr('sensor.pronote_parent_fanny_lesson','end')[i] }}</td>
    <td>{{ state_attr('sensor.pronote_parent_fanny_lesson','subject')[i] }}
    {% if state_attr('sensor.pronote_parent_fanny_lesson','status')[i] != 'nc' %}
    <span>{{ state_attr('sensor.pronote_parent_fanny_lesson','status')[i] }}</td>
    {% endif %}
  <td>{{ state_attr('sensor.pronote_parent_fanny_lesson','room')[i]
  }}</td>

  {% endfor %}
card_mod:
  style:
    .: |
      ha-card ha-markdown {
        padding:0px
      }
      ha-card ha-markdown.no-header {
        padding:0px
      }
    ha-markdown:
      $:
        ha-markdown-element: |
          h1 {
              font-weight: normal;
              font-size: 24px;
          }
          div {
              background-color:rgb(100, 100, 100);
              padding: 12px 12px;
              color:white;
              font-weight:normal;
              font-size:1.2em;
                border-top-left-radius: 5px; 
                border-top-right-radius: 5px; 
          }
          table{
            border-collapse: collapse;
            font-size: 0.9em;
            font-family: Roboto;
            width: auto;
            outline: 0px solid #393c3d;
            margin-top: 10px;
          } caption {
              text-align: center;
              font-weight: bold;
              font-size: 1.2em;
          } td {
              padding: 5px 5px 5px 5px;
              text-align: left;
              border-bottom: 0px solid #1c2020;
          }
          tr {
              border-bottom: 0px solid #1c2020;
          }
          tr:last-of-type {
              border-bottom: transparent;
          }
          tr:nth-of-type(even) {
              background-color: rgb(54, 54, 54, 0.3);
          }
          mark {
              background: lightgreen;
              border-color: green;
              border-radius: 20px;
              padding: 5px;
          }
          span {
              background: orange;
              color: #222627;
              border-radius: 5px;
              padding: 5px;
          }
          span {
              padding: 5px;
          }
          tr:nth-child(n+2) > td:nth-child(2) {
            text-align: left;
          }

vingerha commented 2 years ago

the content of the sensor, i.e. attributes are used for this card

date:
  - 2022/05/09
  - 2022/05/09
  - 2022/05/09
  - 2022/05/09
  - 2022/05/09
  - 2022/05/09
  - 2022/05/10
  - 2022/05/10
  - 2022/05/10
  - 2022/05/10
  - 2022/05/10
  - 2022/05/11
  - 2022/05/11
  - 2022/05/11
  - 2022/05/12
  - 2022/05/12
  - 2022/05/12
  - 2022/05/12
  - 2022/05/13
  - 2022/05/13
  - 2022/05/13
  - 2022/05/13
start:
  - '09:00'
  - '10:00'
  - '11:00'
  - '13:30'
  - '14:30'
  - '15:30'
  - '10:00'
  - '11:00'
  - '13:30'
  - '14:30'
  - '15:30'
  - '09:00'
  - '10:00'
  - '11:00'
  - '08:00'
  - '10:00'
  - '11:00'
  - '13:30'
  - '08:00'
  - '09:00'
  - '10:00'
  - '13:30'
end:
  - '10:00'
  - '11:00'
  - '12:00'
  - '14:30'
  - '15:30'
  - '16:30'
  - '11:00'
  - '12:00'
  - '14:30'
  - '15:30'
  - '17:30'
  - '10:00'
  - '11:00'
  - '12:00'
  - '10:00'
  - '11:00'
  - '12:00'
  - '14:30'
  - '09:00'
  - '10:00'
  - '12:00'
  - '15:30'
subject:
  - FRANCAIS
  - HISTOIRE-GÉOGRAPHIE
  - MATHÉMATIQUES
  - SCIENCES DE LA VIE ET DE LA TERRE
  - ANGLAIS LV1
  - ÉDUCATION PHYSIQUE ET SPORTIVE
  - MATHÉMATIQUES
  - FRANCAIS
  - LATIN
  - ANGLAIS LV1
  - HISTOIRE-GÉOGRAPHIE
  - ARTS PLASTIQUES
  - FRANCAIS
  - EPI (big data)
  - MATHÉMATIQUES
  - FRANCAIS
  - MUSIQUE
  - TECHNOLOGIE
  - LATIN
  - ANGLAIS LV1
  - ÉDUCATION PHYSIQUE ET SPORTIVE
  - EPI (danse)
canceled:
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
  - '0'
status:
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
  - nc
room:
  - '105'
  - '206'
  - '207'
  - Labo 2
  - '103'
  - Piscine municipale
  - '207'
  - '105'
  - '101'
  - '103'
  - '206'
  - '205'
  - '105'
  - nc
  - '207'
  - nc
  - Salle de musique
  - '105'
  - '101'
  - '102'
  - Piscine municipale
  - Piscine municipale
friendly_name: pronote PARENT_Fanny lesson

ildar170975 commented 2 years ago

OMG. For testing people usually providing MWE - a small code snippet.

vingerha commented 2 years ago

I understand but that would mean a lot more work...this is just copy paste. The data shows immediately with ootb colouring (white+yellow), then 'my' css applies and that takes ages since 3.1.1

To replicate:

use an existing sensor, update the attributes (or create a new sensor)
in the card-yaml, remplace sensor with your sensor, copy paste into lovelace
... < 3 mins work

vingerha commented 2 years ago

reduced the sensor / data

date:
  - 2022/05/09
  - 2022/05/09
start:
  - '09:00'
  - '10:00'
end:
  - '10:00'
  - '11:00'
subject:
  - FRANCAIS
  - HISTOIRE-GÉOGRAPHIE
canceled:
  - '0'
  - '0'
status:
  - nc
  - nc
room:
  - '105'
  - '206'
friendly_name: pronote PARENT_Fanny lesson

xvlw commented 2 years ago

Another small code example for testing;

type: markdown
content: |
  # {{ now().strftime(" %I:%M")}}
card_mod:
  style:
    ha-markdown:
      $: |
        h1 {
          text-align: center;
          font: Roboto;
          font-size: 6em;
          font-weight: 400;
        }

Style doesn't update until you go back in to edit the Markdown at which point the style updates immediately in the preview and also in the Dashboard after hitting "cancel".

If I clear cookies/cache the style goes away again.

vs

ildar170975 commented 2 years ago

@xvlw Do not confirm, the style is applied immediately after opening a page. No flickering, no loosing the style. Checked with your "#" example + my "h1" example.

type: vertical-stack
cards:
  - type: markdown
    content: '# {{ now().strftime(" %I:%M")}}'
    card_mod:
      style:
        ha-markdown $: &ref_style |
          h1 {
            color: red;
            text-align: center;
            font: Roboto;
            font-size: 2em;
            font-weight: 400;
          }
  - type: markdown
    content: <h1>{{ now().strftime(" %I:%M")}}</h1>
    card_mod:
      style:
        ha-markdown $: *ref_style

xvlw commented 2 years ago

@ildar170975

Put your code into a Manual card and it updates correctly. Mine must have been a formatting issue.

Do you want me to delete my comments/posts to clean this up?

ildar170975 commented 2 years ago

Put your code into a Manual card and it updates correctly

Sorry, I do not understand. What is a Manual card? My example updates correctly.

xvlw commented 2 years ago

*I inserted your code into a card and it worked. My issue was likely formatting.

vingerha commented 2 years ago

for me still no cigar, other than with 3.1.1 I tried with edge and chrome on two laptops, refreshed cache, used incognito ... all the same Setup: 2022.6.1. A separate dashboard, 3 views, views only contain markdown cards, the third view only the above clock example card With 3.1.1

All updates immediately

With 3.1.2

slight delays but still OK

With 3.1.3. and 3.1.4

it formats but slow to really slow 2 to 7 sec (or so)
when retuning to view or dashboards still slow but faster then the initial entry

With 3.1.5

when entering the dashboard, no update, waited more than a minute
switching between views and returning, it updates and stays
going to edit mode, it updates and stays also when clicking done
when a view shows formatted and switching between dashboard, back to no-formatting

EDIT: I also see the same behavior when just switching versions without refreshing cache... from 3.1.5 to 3.1.1...fine again, back to 3.1.5...not

Duke-Box commented 2 years ago

I can confirm this behaviour with 3.1.5

The style is not applied until you switch to another view and then return to the original view. Changing between dashboards is the same, you have to switch views and then revert back, to get the style to apply and stick

This bug manifests itself across browsers (Edge, IE, Chrome) and even the Companion App

Markdown card yaml

type: markdown
content: |
  # {{ states('sensor.local_time')}} 
card_mod:
  style:
    ha-markdown:
      $: |
        h1 {
          text-align: center;
          font-size: 19px;
        }

ildar170975 commented 2 years ago

@Duke-Box Check my example: https://github.com/thomasloven/lovelace-card-mod/issues/204#issuecomment-1149183795 To solve the issue - use

ha-markdown $: |

instead of

    ha-markdown:
      $: |

as here:

type: markdown
content: |
  # {{ states('sun.sun')}}
card_mod:
  style:
    ha-markdown $: |
      h1 {
        text-align: center;
        font-size: 10px;
      }

vingerha commented 2 years ago

Not working for me but mine is a bit more complex ..

I have this now (incomplete)

card_mod:
style:
.: |
  ha-card ha-markdown {
    padding:0px
  }
  ha-card ha-markdown.no-header {
    padding:0px
  }
ha-markdown $:
  ha-markdown-element: |

which was before :


card_mod:
style:
.: |
  ha-card ha-markdown {
    padding:0px
  }
  ha-card ha-markdown.no-header {
    padding:0px
  }
ha-markdown:
    $:
  ha-markdown-element: |

Duke-Box commented 2 years ago

@ildar170975

Thanks - that worked for me, on all my markdowns. Some are more complex than the example I posted.

@vingerha Here is an example of one of mine with padding etc.

type: markdown
content: |
  # {{ states('sensor.local_time')}} 
  ### {{ states('sensor.local_date')}}
card_mod:
  style:
    .: |
      ha-card {
        padding: 45px;
        height: 95px;
      }
    ha-markdown $: |
      h1 {
        text-align: center;
        font-size: 70px;
      }
      h3 {
        text-align: center;
        font-size: 20px;
        color: var(--state-icon-color);
      }

ildar170975 commented 2 years ago

@vingerha Both your examples need to be corrected. 1st code MAY work - but it is better to replace accordingly to: https://github.com/home-assistant/frontend/issues/12920#issuecomment-1150924503

    card_mod:
      style:
        ha-markdown $: |
          h1 {
            .....
          }
        .: |
          ha-card {
            .....
          }

-- just to avoid any issues & make a code more clear, more adjustable.

2nd example - just wrong.

@Duke-Box same is for you

Duke-Box commented 2 years ago

@ildar170975

Thanks for the answer. Are you saying the order is important? My code works even though the sections are reversed! Or is there something else I'm missing?

Thanks again

type: markdown
content: |
  # {{ states('sensor.local_time')}} 
  ### {{ states('sensor.local_date')}}
card_mod:
  style:
    .: |
      ha-card {
        padding: 45px;
        height: 95px;
      }
    ha-markdown $: |
      h1 {
        text-align: center;
        font-size: 70px;
      }
      h3 {
        text-align: center;
        font-size: 20px;
        color: var(--state-icon-color);
      }

your example:

    card_mod:
      style:
        ha-markdown $: |
          h1 {
            .....
          }
        .: |
          ha-card {
            .....
          }

ildar170975 commented 2 years ago

Are you saying the order is important?

Repeat - to avoid any issues. Check this - https://github.com/thomasloven/lovelace-card-mod#dom-navigation

Not to mention that proposed way is more traditional.

Duke-Box commented 2 years ago

@ildar170975

Ok - got it. Thanks again for your help.

vingerha commented 2 years ago

With the suggested fixes above, I am totally fine now...thanks a lot. In my case: clearly not knowing all the ins/outs of this setup did not help identifying the issues....or even contributed creating them. All in all I think it is great to offer all this flexibility but for low-level knowledge people like me it becomes a fog and no clue where to look. So, I am grateful to you all having spent time on this and will try to be more inward looking a next time. THANKS!!!

ildar170975 commented 2 years ago

My best wishes to all of you guys

thomasloven / lovelace-card-mod

Markdown + Card mod, very slow/buggy #204