usernein / tailwindcss-template-card Goto Github PK

Hi,

As other user has noticed in the community page thread, this card seems to be continously resfreshing.

I think the problem can be here, as this comparison will always evaluate to false if attributes is an object (which I think it is):

this._oldHass.states[entity_id].attributes !== this._hass.states[entity_id].attributes

I'm also not sure about this other comparison, as I think the hass object always contains all entities whenever one of them changes:

this._oldHass.states[entity_id] !== this._hass.states[entity_id]

I've trying this card and is awesome, but this continous refresh is causing performance issues in my wall panels which are always showing the dashboard. Would be nice to have it fixed :)

Maybe it would be simpler watching only entities in the entity and entities fields, not looking into the content to find them.

Thanks for your great work!

PS: if you add some steps about how to compiling and testing this card I can give it a try :)

Hi

I am starting to use this card for a simple HTML card, and having really wired behavior.

Let me first explain why I am using this card and not Markdown

• I need to show two basic sensors for temperature.
• Default entity card show this info too small, as I want to show on a wall panel and able to read for some meters of distance.
• I tried some html on markdown, but it ignores size:
  • Markdown card Code

type: markdown
content: "<table align=\"center\" border=\"0\" cellpadding=\"20\" cellspacing=\"1\" style=\"width:500px\">\n\t<tbody>\n\t\t<tr>\n\t\t\t<td><strong><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"color:#02c39a\">Temp. INT</span></span></strong></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"font-size:90px\">{{ states('sensor.netatmo_INT_temperature') }} </span><span style=\"font-size:26px\">C&ordm;</span></span></td>\n\t\t</tr>\n\t</tbody>\n</table>"

• I check and looks tailwindcss can propertlly show HTML font size and color:
  • Tailwindcss code:

entity: ''
content: "<table align=\"center\" border=\"0\" cellpadding=\"20\" cellspacing=\"1\" style=\"width:500px\">\n\t<tbody>\n\t\t<tr>\n\t\t\t<td><strong><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"color:#02c39a\">Temp. INT</span></span></strong></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"font-size:90px\">{{ states('sensor.netatmo_INT_temperature') }} </span><span style=\"font-size:26px\">C&ordm;</span></span></td>\n\t\t</tr>\n\t</tbody>\n</table>"
type: custom:tailwindcss-template-card

The problem come on edition of Tailwindcss, as card is being “reset” during the edition with no reason, let me go step by step on what I am doing:

1. I create a Tailwindcss card with a sensor info (previous code)
2. I create a grid or horizontal card to add a copy of these previous card
3. I add the card two times
4. I tried to edit the second card to change some basic info (sensor name and description)
5. Tailwindcss card remove my html code and default code appear, but preview still show initial config:

I click on save, but code is updated for both Tailwindcss card, but showing initial card HTML info

Code:

type: horizontal-stack
cards:
  - entity: ''
    content: "<table align=\"center\" border=\"0\" cellpadding=\"20\" cellspacing=\"1\" style=\"width:500px\">\n\t<tbody>\n\t\t<tr>\n\t\t\t<td><strong><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"color:#02c39a\">Temp. INT</span></span></strong></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"font-size:90px\">{{ states('sensor.netatmo_INT_temperature') }} </span><span style=\"font-size:26px\">C&ordm;</span></span></td>\n\t\t</tr>\n\t</tbody>\n</table>"
    type: custom:tailwindcss-template-card
  - entity: ''
    content: "<table align=\"center\" border=\"0\" cellpadding=\"20\" cellspacing=\"1\" style=\"width:500px\">\n\t<tbody>\n\t\t<tr>\n\t\t\t<td><strong><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"color:#02c39a\">Temp. INT</span></span></strong></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"font-size:90px\">{{ states('sensor.netatmo_INT_temperature') }} </span><span style=\"font-size:26px\">C&ordm;</span></span></td>\n\t\t</tr>\n\t</tbody>\n</table>"
    type: custom:tailwindcss-template-
card

I tried restarting the browser editing on different ways, trying to past new HTML code from a file...

At this moment I was able to create the card separately but never include on horizontal stack or grid cards.

In fact the issue also happens trying to edit another tailwind card on the same dashboard...

any idea? thank in advance

Usually, cards that support jinja templates have access to four special variables: user, browser, config and hash. (The important one to me is user, to customise the card based on who is viewing it.) These are all undefined if used in the tailwindcss-template-card. Is there an easy fix for this?