dnguyen800 / air-visual-card Goto Github PK

Hi.

A change in how lovelace cards are set up in Home Assistant 0.105 increases performance, but enables cards to accidentally modify their own configuration in the loaded lovelace configuration.

I'm going through the cards in the HACS default repository, and noticed that your card may be susceptible to this. Looking through your code it seems you may modify parts of the config object passed to your card in setConfig.

The result could be that your card does not work well with the GUI editors or that parts of the configuration start showing up multiple times.

At some point in the future, it is likely that the configuration will be frozen before being passed to setConfig. At this point, your card will fail entirely when it tries to modify the configuration object.

There are several ways to fix/protect agains this problem.

The best is to restructure setConfig such that the configuration is never modified.
Other alternatives are to make a copy of the configuration and work on that instead.

setConfig(config) {
  config = { ...config }; // This works for simple configurations not containing arrays or objects
...

import { deepClone } from "deep-clone-simple";
// https://github.com/balloob/deep-clone-simple

setConfig(config) {
  config = deepClone(config); // This is a safe and fast method
...

or

setConfig(config) {
  config = JSON.parse(JSON.stringify(config)); // This uses built-in functions, but may be slower than deepClone
  ...

Please note that I have not tested your card agains Home Assistant 0.105 or later, but just quickly looked through the code. If I'm mistaken in my assessment, I appologize for taking your time.

See thomasloven/hass-config#6 for more info.

Here are two cards next to each other:

The difference between them is that the left one uses the US scale, while the right one uses the Chinese scale. Despite that, they both have "US AQI" displayed below the value.

The top left corner is not aware of the radius set by the theme..

      - type: custom:air-visual-card
        hide_title: true
        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

I have the following template sensor that I use to translate the pollution level to my language:

- platform: template
  sensors:
    pollution_level_translated:
      friendly_name: "Kvalitet Vazduha"
      value_template: >
        {% if states("sensor.u_s_air_quality_index")|int <= 50 %}
          Dobar
        {% elif  states("sensor.u_s_air_quality_index")|int <= 100 %}
          Malo zagađen
        {% elif  states("sensor.u_s_air_quality_index")|int <= 150 %}
          Nezdrav za hronične bolesnike
        {% elif  states("sensor.u_s_air_quality_index")|int <= 200 %}
          Nezdrav
        {% elif  states("sensor.u_s_air_quality_index")|int <= 300 %}
          Veoma nezdrav
        {% else %}
          Opasno zagađen
        {% endif % }

However setting air_pollution_level still shows the text in English:

I am using the default Home Assistant theme and am noticing that this is one of my only cards that doesn't respect the theme's card styling for rounded corners.

I've fixed it in my HA instance using card-mod (example below), but it would be better for it to get fixed in the main project rather than requiring card-mod to fix it.

Simply applying the overflow: hidden style to the ha-card makes the corners properly rounded again, since the inner div containing the background color can no longer break outside of the ha-card container.

I'm not sure if there are any potential downsides to this approach, but in my testing so far it's working great.

If for some reason this can't be fixed in the repo, this is how other people can fix it in their card instance using card-mod:

card_mod:
  style: |
    ha-card {
      overflow: hidden;
    }

when checking the website for the station I use, a value is displayed before the unit µg/m³.

which seems the sole purpose for this unit.

on the card no such value is displayed:

I don't think it is configured in the card at all?

Tried to find it in the sensors, I must admit I cant find the value for this unit anywhere..... Would this be a bug in the sensors/integration?

Ill post this on the community also. thanks!

Love this. Just had to hack a little the main pollutant sensor for PM2.5:

sensor:
  - platform: template
    sensors:
      main_pollutant:
        unit_of_measurement: 'µg/m3'
        value_template: "{{ states('sensor.pm_2_5um') | round(1) }}"
        attribute_templates:
          pollutant_symbol: p2
          pollutant_unit: µg/m3
          lati: -10.5647
          long: 135.98975

This allows to get around the free plan limitation. A better value template could be created to change the value based on the sensor.us_main_pollutant...
Anyways, it would be great to use this same card to display more sensons. PM<10 and PM<1 are no brainers, but others may want SO2 or CO as well. Additional sensors could be displayed below the main pollutant...

HI,

no matter what I try, the more-info for the #mainPollutantSensor is always what is configured for the #aplSensor directly above it.

I changed it a bit, to have the #mainPollutantSensor show for more-info in the Face, and have it like this now:

      // hard-coded version of click event
      card.querySelector('#face').addEventListener('click', event => {
        fireEvent(this, "hass-more-info", { entityId: aplSensor.config });
      }); 
      card.querySelector('#aqiSensor').addEventListener('click', event => {
        fireEvent(this, "hass-more-info", { entityId: aqiSensor.config });
      });
      card.querySelector('#aplSensor').addEventListener('click', event => {
       fireEvent(this, "hass-more-info", { entityId: aplSensor.config });
      });
      card.querySelector('#mainPollutantSensor').addEventListener('click', event => {
        fireEvent(this, "hass-more-info", { entityId: mainPollutantSensor.config });
      });

I can only see the #mainPollutantSensor more-info, if I also use it on the #aplsensor above.
But, then both sensors show that same more-info...

Something isnt working as it should, and I can't find it in the code, which seems correct....

Please have a look?

btw added a bit of formatting, to have it look almost the same as the 'official' view on https://www.airvisual.com/

now showing as:

as said, clicking the PM2.5 field, now more-info's on Good....

btw, as you can see ive added the unit for the mainPollutantSensor, but Ive hardcoded it.
Id like it to use the attributes.pollutant_unit of the sensor, but dont know (yet ) how to do that. Maybe have a go at that also, would really be neat.

      card_content += `
          </div>
          <div class="aqiSensor" id="aqiSensor" style="background-color: ${AQIbgColor[getAQI()]}; color: ${AQIfontColor[getAQI()]}">
            <div style="font-size:3em;">${aqiSensor.value}</div>
              AQI
          </div>
          <div class="aplSensor" id="aplSensor" style="background-color: ${AQIbgColor[getAQI()]}; color: ${AQIfontColor[getAQI()]}">
              ${aplSensor.value}
            <br>
            <br>
            <div class="mainPollutantSensor" id="mainPollutantSensor">
              ${mainPollutantSensor.value} | µg/m3
            </div>
          </div>
        </div>
      `

How are the units change? I want to change mp / h to km / h since in my country we use the metric system.

Do you know if you can round the corners in any way ?, I am trying to apply the CSS but it does not work, I have almost all the cards with the rounded corner

Thanks you!!

After I added this card, this and all other cards disappear.

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

I have installed the custom card via HACS and I'm configuring it via Configure UI --> Raw config editor.

I have added the following to my config:

Resources:
  - url: /community_plugin/air-visual-card/air-visual-card.js
    type: js

However, the AirVisual sensor seems to be providing different entities than the installation instructions assume:

sensor.u_s_air_pollution_level_2
sensor.u_s_air_quality_index_2
sensor.u_s_main_pollutant_2

After adapting the card code to the above sensors (that seem to be working correctly):

      - type: custom:air-visual-card
        air_pollution_level: sensor.u_s_air_pollution_level_2
        air_quality_index: sensor.u_s_air_quality_index_2
        main_pollutant: sensor.u_s_main_pollutant_2
        temp: weather.dark_sky
        city: 'Espoo'

and restarting my Home Assistant, the card displays the following error:

However, my Chrome console nor Home Assistant logs show any errors. Here is my lovelace configuration. Any ideas what might be wrong?

I have installed via HACS, and tried to add the configuration to a card in a similar was to other custom cards but it is failing with a note about card type.

Is it possible to improve the sample and guide to be clearer?

HA Core recently updated the AirVisual component state descriptions to use keys to facilitate translation. This means that the output of the state is now (for example) unhealthy_sensitive instead of Unhealthy for Sensitive Groups.

Ref: home-assistant/core/pull/53133

As a workaround, this AirVisual Card configuration can be changed in Lovelace so the air_pollution_level parameter is mapped to the sensor.u_s_air_quality_index sensor since you already have an array called APLDescription with these values (ref).

I'm unsure if you want to fix this in code to translate the state keys, or just update the docs and/or remove the air_pollution_level parameter altogether and just use air_quality_index instead.

I noticed hat bug in HA v108.9, I believe it existed before but didn't stop the rendering of the whole HA dashboard.

My Lovelace configuration for card:

      - type: custom:air-visual-card
        air_quality_index: sensor.purifier_pro_aqi
        main_pollutant: sensor.purifier_pro_aqi
        hide_title: true
        icons: /local/air-visual-card/

As you can see there is no air_pollution_level sensor provided (it's optional in docs), but looking at the code if any of sensors is not provided, will make JS fail in the same place.

(fix in the way, I'll reference this issue)

When installing the card with HACS, the following value for the icons option makes use of the already downloaded icons in the config\www\community\air-visual-card folder.

icons: "/community_plugin/air-visual-card"

Crazy situation,

it's impossible to find it in HACS and at the same time, when i try to add it manually in HACS it says "Repository 'dnguyen800/air-visual-card' exists in the store."

Also, it's impossible to add it manually.

I tried each and every method, it simply doesn't work.

Lovelace doesn't recognize it as custom card.

I’m getting the following on .106.5:

can’t define property “icons”: Object is not extensible

HI, this is the exact card I was looking for, so thanks for creating it.
I have however this issue:

because of:

checking line 301 :

        console.log(`let sensor in sensorList: ${sensor}`);

you even comment it isn't working in the resource ;-)

any thought why this is still there?

taking out the whole commented bit, results in another error: unknown EOF:

thanks for having a look!

Is it possible to add the air quality forecast for the day to the card?

Appears that AirVisual has changed their API and no longer has main pollutant in their free plan. This is being discussed in this thread.

https://community.home-assistant.io/t/air-visual-main-pollutant-v-0-95-4/124080

It appears an update is required to remove this or perhaps switch to another provider. I have noticed a few others that appear to still support this

https://breezometer.com/products/air-quality-api
https://docs.airnowapi.org/login?index=

I am sure there are others as well

Should the wind direction icon points to the correct wind direction?

I don't know if it depends on the weather sensor language, but mine (that it's not in English) always points to south :(

Hello,

for some reason this card can't get data after I updated to 0.107.1. When I reverted back to 0.106.6 all is ok and works normally. Seems like 0.107.1 is quite buggy, because some other integrations also stopped working properly, like denonavr, asuswrt, Mibox, and maybe some others.

If AQI is over 100 and the text is "Unhealthy for sensitive group", the text is too long to display. Could you add an option to change the size of text

Bác xem hình đính kèm sẽ thấy chữ bị nhảy xuống dòng và chèn lên dòng đơn vị đo. Bác xem có thể cho anh em cách chỉnh cỡ chữ không :D cảm ơn bác Duy.

With my setup: latest 0.104.0 HA
The sensors name were different like this
sensor.us_air_pollution_level -> sensor.u_s_air_pollution_level

Proper config.

• 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: weather.dark_sky
  city: 'Budapest'

The Home Assistant Tomorrow.io integration provides air quality sensors along with weather sensors. In particular it includes these three which map nicely to the ones this card needs:
US EPA Health Concern = Air Pollution Level
US EPA Air Quality Index = Air Quality Index
US EPA Primary Pollutant = Main Pollutant

This nearly works perfectly by just substituting in the entities, however the Main Pollutant is not working correctly, at least in my current values. It currently has a value of "pm25" but the card is displaying "main pollutant | pollutant unit" as the value. I'm not the best with programming, though believe that the card may be looking for attributes in the sensor which Tomorrow.io does not provide. That particular sensor has no attributes and only lists the main pollutant itself.

It would be ideal if this card could show even a truncated version of information that just included the pollutant type but without a unit value.

Thanks for consideration!

On the AirVisual site, 50 is displayed as "Good":

The card in Hass shows "Moderate", although I sometimes see "Good" with a yellow background:

please consider adding the option to navigate to an external web-address, suggest the air_visual address of the station.
I've added this to the card:

      card.querySelector('#city').addEventListener('click', event => {
        fireEvent(this, "navigate", { entityId: webAddress.config });
      });

and

      const webAddress = {name: 'webAddress', config: config.web_address || '';

not sure what the action name for 'navigate' should be though.

in the card config, I've added:

web_address: https://www.airvisual.com/netherlands/north-brabant/huijbergen/huijbergen-vennekenstraat

obviously this doesn't work, since the action is incorrect. Also the click on city doesn't yet work for any more-info, apparently this code is not yet as it should be....sorry, hope you get the idea.

please have a look? thanks!

I don't want to see the city and weather. Please remove the header line when no city is selected.

I got error on 0.106.5

attemped to assign to readonly property

Thanks.

Mon Jan 20 2020 19:26:02 GMT-0800 (Pacific Standard Time)
http://10.0.0.126:8123/local/air-visual-card.js:164:63 Uncaught TypeError: Cannot read property 'attributes' of undefined

as of HA 113, the more-info popups no longer open clicking on the entities in

      card.querySelector('#temp').addEventListener('click', event => {
        fireEvent(this, "hass-more-info", { entityId: aplSensor.config });
      });

throwing these errors:

(this is for another, manually added, querySelector, but the doesn’t matter, even the ‘official’ cards coded selectors don’t work (do nothing but throw an error) where they before opened the more-info with the specified sensor.)

Would be nice to not see the face (or any icon) optionally.

Suggested parameter: show_icon
Type: boolean
Default value: true

Then in the configuration, one could have:

  - type: 'custom:air-visual-card'
    air_pollution_level: sensor.use_the_actual_name_of_your_sensor_not_this_example
    air_quality_index: sensor.use_the_actual_name_of_your_sensor_not_this_example
    main_pollutant: sensor.use_the_actual_name_of_your_sensor_not_this_example
    temp: weather.use_the_actual_name_of_your_weather_entity_not_this_example
    city: 'San Francisco'
    show_icon: false

There's a broken image referencing /hacsfiles/air-visual-card/ic-w-undefined.svg after updating to 2.0. I suppose this is because I haven't defined the weather property, but maybe it should add a display:none or similar to the icon when undefined?

Lower right:

Hi,

I'm using the Met Éireann integration for my weather.home but it's not showing any values for it in this card.
As a result I've also got the same problem as an already open issue, a broken image for undefined weather.
Any chance to get Met Éireann working ?

Thanks

Hi,

I've noticed that if any of sensors configured in air-visual-card is unavailable (does not exist in HA registry) whole view crashes - becomes blank.

this is my sample config:

- air_pollution_level: sensor.u_s_air_pollution_level
   air_quality_index: sensor.u_s_air_quality_index
   city: Warszawa
   hide_title: true
   main_pollutant: sensor.u_s_main_pollutant
   temp: weather.dark_sky
   type: 'custom:air-visual-card'

when the problem occours there is an exception in browser console

Uncaught TypeError: Cannot read property 'attributes' of undefined
    at HTMLElement.set hass [as hass] (air-visual-card.js:235)
    at HTMLElement._createCardElement (hui-stack-card.ts:79)
    at HTMLElement._rebuildCard (hui-stack-card.ts:96)
    at HTMLElement.t.addEventListener.once (hui-stack-card.ts:85)
    at r (fire_event.ts:76)
    at create-card-element.ts:111

Given the recent issues with the AirVisual API (#42776), I'd be nice to have a backup when stuff like this happen.
WAQI looks like the only alternative for home assistant right now.

Is this feasible?