2.0 release

- rewrote CSS grids and styles to fix current style on iqair.com - added humidity and wind data - added speed_unit to config - removed temperature entity option - fixed some border-radius and theme compatibility
dnguyen800 · Sep 30, 2021 · be0d149 · be0d149
1 parent 4499886
commit be0d149
Show file tree

Hide file tree

Showing 15 changed files with 216 additions and 144 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,32 @@
 # Air Visual Card
 
-![example](https://github.com/dnguyen800/air-visual-card/blob/master/images/example.PNG)
+![example](images/example.PNG)
 
-This is a Home Assistant Lovelace card that uses the [AirVisual Sensor](https://www.home-assistant.io/components/sensor.airvisual/) to provide air quality index (AQI) data and creates a card like the ones found on [AirVisual website](https://www.airvisual.com). Requires the [AirVisual Sensor](https://www.home-assistant.io/components/sensor.airvisual/) to be setup. Tested with Yahoo and Darksky Weather component.
+This is a Home Assistant Lovelace card that uses the [AirVisual component](https://www.home-assistant.io/integrations/airvisual/) or [World Air Quality Index (WAQI) component](https://www.home-assistant.io/integrations/waqi/) to provide air quality index (AQI) data and creates a card like the ones found on [AirVisual website](https://www.airvisual.com). Requires the [AirVisual component](https://www.home-assistant.io/integrations/airvisual/) or [World Air Quality Index (WAQI) component](https://www.home-assistant.io/integrations/waqi/). Tested with Yahoo and Darksky Weather component.
 
 ## Features
   - Card colors and icons change depending on AQI level
 
 
 ## Options
 
-| Name | Type | Default | Description
-| ---- | ---- | ------- | -----------
-| air_pollution_level | string | Optional | Name of the Air Pollution Level sensor created by Airvisual component. If sensor does not exist, do not add this config value.
-| air_quality_index | string | Optional | Name of the Air Quality Index sensor created by Airvisual component. If sensor does not exist, do not add this config value.
-| main_pollutant | string | Optional | Name of the Main Pollutant sensor created by Airvisual component. If sensor does not exist, do not add this config value.
-| temp | string | Optional| Name of the temperature sensor or weather entity, such as 'weather.yweather' or 'sensor.yweather_temperature'
-| country | string | Optional | Name of the country that Airvisual is collecting AQI data from.
-| city | string | Optional | Name of the city that AirVisual is collecting AQI data from.
-| icons | string | Optional | 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. 
-| hide_title | boolean | Optional | Set to `true` if you want to hide the title that includes the city name and weather. Useful for minimalists or those using dark themes.
-| hide_face | boolean | Optional | Set to `true` if you want to hide the face icon.
-| weather | string | Optional | If temp field does not use a weather entity (such as 'sensor.yweather_temperature'), this attribute allows you to specify a weather state for displaying the appropiate icon on the card.
+### Main Options
+
+| Name                  | Type    | Default                      | Supported options                | Description                                                  |
+| --------------------- | ------- | ---------------------------- | -------------------------------- | ------------------------------------------------------------ |
+| `type`                | string  | **Required**                 | `custom:air-visual-card`         | Type of the card                                             |
+| `air_pollution_level` | string  | **Required**                 | `sensor.u_s_air_pollution_level` | Name of the Air Pollution Level sensor.                      |
+| `air_quality_index`   | string  | optional                     | `sensor.u_s_air_quality_index`   | Name of the Air Quality Index sensor. If sensor does not exist, do not add this config value. |
+| `main_pollutant`      | string  | optional                     | `sensor.u_s_main_pollutant`      | Name of the Main Pollutant sensor. If sensor does not exist, do not add this config value. |
+| `weather`             | string  | optional                     | `weather.dark_sky`               | Name of the weather entity if you wish to display temperature, humidity and wind information on the card. |
+| `country`             | string  | `US`                         | `mdi:air-conditioner`            | Name of the country that Airvisual is collecting AQI data from. |
+| `city`                | string  | optional                     | `San Francisco`                  | Name of the city that AirVisual is collecting AQI data from. |
+| `icons`               | string  | `/hacsfiles/air-visual-card` | `/hacsfiles/air-visual-card`     | 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 default location. |
+| `hide_title`          | boolean | `true`                       | `true` | `false`                 | Set to `true` if you want to hide the title that includes the city name. Useful for minimalists or those using dark themes. |
+| `hide_face`           | boolean | `false`                      | `true` | `false`                 | Set to `true` if you want to hide the face icon.             |
+| `hide_weather`        | boolean | `true`                       | `true` | `false`                 | Set to `false` if you want to show the weather information from the weather entity. |
+
+
 
 ## HACS Installation
 1. Open the HACS on your Home Assistant instance.
@@ -35,47 +40,29 @@ This is a Home Assistant Lovelace card that uses the [AirVisual Sensor](https://
 
 ```yaml
 resources:
-  - url: /local/air-visual-card.js
+  - url: /local/air-visual-card/air-visual-card.js
     type: js
 ```
 4. **Optional:** If you wish to store the Airvisual icons locally, then download the icons [here](https://github.com/dnguyen800/air-visual-card/tree/master/dist).
 
-5. Save the icons in a directory in Home Assistant, such as ''/local/icons/aqi_icons"
+5. Save the icons in a directory in Home Assistant, such as `/local/air-visual-card`
 
 6. Update the card configuration in `ui-lovelace.yaml`  to include the following (use directory name in step #7):
 
    ```yaml
-    icons: "/local/icons/aqi_icons"
+    icons: "/local/air-visual-card"
    ```
 
 ## Instructions
 1. Install the [AirVisual sensor](https://www.home-assistant.io/components/sensor.airvisual/) and confirm AQI, APL, and Main Pollutant sensors are created, like below.
 
 ![sensors](images/airvisual_sensors.JPG)
 
-2. Write configuration for the card and list your AirVisual sensors. MAKE SUREAn examples is provided below:
-
-Direct editing within the YAML files (`ui-lovelace.yaml`)
-```yaml
-  - 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'
-```
+2. Add a card in the Lovelace UI.
+3. Search for `air-visual-card` and click the search result. ![add-card](images/add-card.png)
+4. Fill out the card editor. ![card-editor](images/card-editor.png)
 
-Adding via the Lovelace UI Card Configuration
-```
-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
-city: Moscow
-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
-```
 
-3. Refresh Lovelace to load the card.
 
 
 ## FAQ

diff --git a/dist/air-visual-card-editor.js b/dist/air-visual-card-editor.js
@@ -48,10 +48,6 @@ export class AirVisualCardEditor extends LitElement {
     return this._config.main_pollutant || "sensor.u_s_main_pollutant";
   }
 
-  get _temp() {
-    return this._config.temp || "";
-  }
-
   get _country() {
     return this._config.country || "";
   }
@@ -65,17 +61,22 @@ export class AirVisualCardEditor extends LitElement {
   }
 
   get _weather() {
-    return this._config.weather || "";
+    return this._config.weather || "weather.home";
   }
 
+  get _speed_unit() {
+    return this._config.speed_unit || "mp/h";
+  }
   get _hide_title() {
     return this._config.hide_title !== false;
   }
 
   get _hide_face() {
     return this._config.hide_face !== true;
   }
-
+  get _hide_weather() {
+    return this._config.hide_weather !== false;
+  }
 
   // WHAT DOES THIS DO?
   firstUpdated() {
@@ -133,15 +134,6 @@ export class AirVisualCardEditor extends LitElement {
                   allow-custom-entity
                 ></ha-entity-picker>
 
-                <ha-entity-picker
-                  label="Temperature Sensor (Optional)"
-                  .hass="${this.hass}"
-                  .value="${this._temp}"
-                  .configValue=${"temp"}
-                  @change="${this._valueChanged}"
-                  allow-custom-entity
-                ></ha-entity-picker>
-
                 <ha-entity-picker
                   label="Weather Entity (Optional)"
                   .hass="${this.hass}"
@@ -165,6 +157,12 @@ export class AirVisualCardEditor extends LitElement {
             @value-changed="${this._valueChanged}"
           ></paper-input>
 
+          <paper-input
+            label="Speed Unit (Optional)"
+            .value="${this._speed_unit}"
+            .configValue="${"speed_unit"}"
+            @value-changed="${this._valueChanged}"
+          ></paper-input>
           <paper-input
             label="Icons location (Optional)"
             .value="${this._icons}"
@@ -181,6 +179,14 @@ export class AirVisualCardEditor extends LitElement {
               ></ha-switch
               ><span>Hide Title</span>
             </div>
+            <div class="switch">
+            <ha-switch
+              .checked=${this._hide_weather}
+              .configValue="${"hide_weather"}"
+              @change="${this._valueChanged}"
+            ></ha-switch
+            ><span>Hide Weather</span>
+          </div>
             <div class="switch">
               <ha-switch
                 .checked=${this._hide_face}