Flickering Face image

[Mariusthvdb]

as posted here, I seek some assistance...

thanks if you can have a look, I don't have any error logs I am afraid, so not much to go on really, other than my HA Hassio being on 109.6

[Mariusthvdb]

HI, meanwhile we're o HA 0.111.3 and the face keeps flickering.

Could this be caused by settings in the face class? does the face img {} do anything at all, since it isn't referenced in the card?

maybe width and height should both be set for the img?

ice tried many settings, px, %, and both 4.5em for the fas img, and it keeps flickering...

using:

type: custom:air-visual-card
style: |
  ha-card {
    box-shadow: none;
    margin: -16px -16px 0px -16px;
  }
air_pollution_level: sensor.u_s_air_pollution_level
air_quality_index: sensor.u_s_air_quality_index
main_pollutant: sensor.u_s_main_pollutant
temp: weather.woensdrecht
country: NL
city: Woensdrecht
icons: /local/weather/aqi_icons/
icon_sensor: sensor.weather_icon
hide_title: false
web_address: https://www.airvisual.com/netherlands/north-brabant/huijbergen/huijbergen-vennekenstraat

for my card config, since it is used in an entities card and I want it to use the full width of that entities card.

Ive tested it without that style, as standalone, and still the face flickers.

I am out of ideas, don't see errors in the log, so would hope you could have a look as author of this nice little card. please.

[Swampen]

I can try to take a look at this if you still have the issue?

[Mariusthvdb]

yes please! its not always there, but have a look now:

(and maybe you would know how to add an external link to the city name too ;-) see.#8 )

[Swampen]

Is the configuration still the same?
If so, have you tried to remove the icon option?

Regarding the issue external link, it should be easy enough to add. You want it to open a new tab with the external link?

[Mariusthvdb]

Is the configuration still the same?
this is what I am using now (the navigation_path isn't used by the card, but I left it as a promise to myself to keep trying...)

type: custom:air-visual-card
air_pollution_level: sensor.u_s_air_pollution_level
air_quality_index: sensor.u_s_air_quality_index
main_pollutant: sensor.u_s_main_pollutant
temp: sensor.plugwise_outdoor_temperature
country: NL
city: Woensdrecht
icons: /local/weather/aqi_icons/
icon_sensor: sensor.weather_icon
hide_title: false
hide_face: false
navigation_path: https://www.airvisual.com/netherlands/north-brabant/huijbergen/huijbergen-vennekenstraat

If so, have you tried to remove the icon option?

which is that?

Regarding the issue external link, it should be easy enough to add. You want it to open a new tab with the external link?

YES!!! please. sorry for shouting but this seems so logical (and easy) and I have never been able to, so getting somewhat excited here....

[Swampen]

Try to remove the icons: /local/weather/aqi_icons/ option from the configuration and see if it gets any better

[Mariusthvdb]

Yes! it seems to have stopped immediately (knocking on wood now, because I have thought that before)

How can this be? Isn't this necessary any more?

[Swampen]

Correct. This option is optional as described in the documentation: "The local directory where the .svg files are located. For example, 'icons: "/hacsfiles/air-visual-card"' is appropriate if this plugin is installed using HACS. If left blank, icons will be loaded from Jsdeliver CDN."

[Mariusthvdb]

Ah, yes, but I downloaded them so not to have the instance need external access. Trying to be as independent as possible from the outside world... cant we make this more robust when reading the icons locally?

[Swampen]

It might be some issues with the card refreshing quite often.
I will look into what's causing it

[Swampen]

The cause of the issue is Home Assistant itself trying to refresh the card frequently. This means that it has to load the picture every time it refreshes. This is the natural behavior.

@dnguyen800 If you have any plans of moving the card from pure JS to use a package manager like node, you can use the custom-card-helpers module with the hasConfigOrEntityChanged helper method.

In the meantime I have created a helper method to check if there is any changes in any of the states before it refreshes the card (PR incoming)

[dnguyen800]

Thank you @Swampen for looking into this. I'm not familiar with package managers so I wouldn't know how to start using Node. I would love to continue practicing coding but I don't have the time anymore.

If you're interested in continuing development of this card, you can fork it and I can ask to replace my repo with yours on HACS. Or you can write your own card from scratch, which I'm sure would be much cleaner version than mine. Either way, I'm happy to continue testing and approving your PRs.

I'll study your PR to see if I can apply the same helper method to my Quote of the Day card :)