Skip to content

Commit be0d149

Browse files
dnguyen800dnguyen800
committed
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
1 parent 4499886 commit be0d149

15 files changed

+216
-144
lines changed

‎README.md‎

Lines changed: 25 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,32 @@
11
# Air Visual Card
22

3-
![example](https://github.com/dnguyen800/air-visual-card/blob/master/images/example.PNG)
3+
![example](images/example.PNG)
44

5-
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.
5+
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.
66

77
## Features
88
- Card colors and icons change depending on AQI level
99

1010

1111
## Options
1212

13-
| Name | Type | Default | Description
14-
| ---- | ---- | ------- | -----------
15-
| 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.
16-
| 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.
17-
| 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.
18-
| temp | string | Optional| Name of the temperature sensor or weather entity, such as 'weather.yweather' or 'sensor.yweather_temperature'
19-
| country | string | Optional | Name of the country that Airvisual is collecting AQI data from.
20-
| city | string | Optional | Name of the city that AirVisual is collecting AQI data from.
21-
| 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.
22-
| 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.
23-
| hide_face | boolean | Optional | Set to `true` if you want to hide the face icon.
24-
| 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.
13+
### Main Options
14+
15+
| Name | Type | Default | Supported options | Description |
16+
| --------------------- | ------- | ---------------------------- | -------------------------------- | ------------------------------------------------------------ |
17+
| `type` | string | **Required** | `custom:air-visual-card` | Type of the card |
18+
| `air_pollution_level` | string | **Required** | `sensor.u_s_air_pollution_level` | Name of the Air Pollution Level sensor. |
19+
| `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. |
20+
| `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. |
21+
| `weather` | string | optional | `weather.dark_sky` | Name of the weather entity if you wish to display temperature, humidity and wind information on the card. |
22+
| `country` | string | `US` | `mdi:air-conditioner` | Name of the country that Airvisual is collecting AQI data from. |
23+
| `city` | string | optional | `San Francisco` | Name of the city that AirVisual is collecting AQI data from. |
24+
| `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. |
25+
| `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. |
26+
| `hide_face` | boolean | `false` | `true` | `false` | Set to `true` if you want to hide the face icon. |
27+
| `hide_weather` | boolean | `true` | `true` | `false` | Set to `false` if you want to show the weather information from the weather entity. |
28+
29+
2530

2631
## HACS Installation
2732
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://
3540

3641
```yaml
3742
resources:
38-
- url: /local/air-visual-card.js
43+
- url: /local/air-visual-card/air-visual-card.js
3944
type: js
4045
```
4146
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).
4247
43-
5. Save the icons in a directory in Home Assistant, such as ''/local/icons/aqi_icons"
48+
5. Save the icons in a directory in Home Assistant, such as `/local/air-visual-card`
4449

4550
6. Update the card configuration in `ui-lovelace.yaml` to include the following (use directory name in step #7):
4651

4752
```yaml
48-
icons: "/local/icons/aqi_icons"
53+
icons: "/local/air-visual-card"
4954
```
5055

5156
## Instructions
5257
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.
5358

5459
![sensors](images/airvisual_sensors.JPG)
5560

56-
2. Write configuration for the card and list your AirVisual sensors. MAKE SUREAn examples is provided below:
57-
58-
Direct editing within the YAML files (`ui-lovelace.yaml`)
59-
```yaml
60-
- type: 'custom:air-visual-card'
61-
air_pollution_level: sensor.use_the_actual_name_of_your_sensor_not_this_example
62-
air_quality_index: sensor.use_the_actual_name_of_your_sensor_not_this_example
63-
main_pollutant: sensor.use_the_actual_name_of_your_sensor_not_this_example
64-
temp: weather.use_the_actual_name_of_your_weather_entity_not_this_example
65-
city: 'San Francisco'
66-
```
61+
2. Add a card in the Lovelace UI.
62+
3. Search for `air-visual-card` and click the search result. ![add-card](images/add-card.png)
63+
4. Fill out the card editor. ![card-editor](images/card-editor.png)
6764

68-
Adding via the Lovelace UI Card Configuration
69-
```
70-
type: 'custom:air-visual-card'
71-
air_pollution_level: sensor.use_the_actual_name_of_your_sensor_not_this_example
72-
air_quality_index: sensor.use_the_actual_name_of_your_sensor_not_this_example
73-
city: Moscow
74-
main_pollutant: sensor.use_the_actual_name_of_your_sensor_not_this_example
75-
temp: weather.use_the_actual_name_of_your_weather_entity_not_this_example
76-
```
7765

78-
3. Refresh Lovelace to load the card.
7966

8067

8168
## FAQ

‎dist/air-visual-card-editor.js‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,6 @@ export class AirVisualCardEditor extends LitElement {
4848
return this._config.main_pollutant || "sensor.u_s_main_pollutant";
4949
}
5050

51-
get _temp() {
52-
return this._config.temp || "";
53-
}
54-
5551
get _country() {
5652
return this._config.country || "";
5753
}
@@ -65,17 +61,22 @@ export class AirVisualCardEditor extends LitElement {
6561
}
6662

6763
get _weather() {
68-
return this._config.weather || "";
64+
return this._config.weather || "weather.home";
6965
}
7066

67+
get _speed_unit() {
68+
return this._config.speed_unit || "mp/h";
69+
}
7170
get _hide_title() {
7271
return this._config.hide_title !== false;
7372
}
7473

7574
get _hide_face() {
7675
return this._config.hide_face !== true;
7776
}
78-
77+
get _hide_weather() {
78+
return this._config.hide_weather !== false;
79+
}
7980

8081
// WHAT DOES THIS DO?
8182
firstUpdated() {
@@ -133,15 +134,6 @@ export class AirVisualCardEditor extends LitElement {
133134
allow-custom-entity
134135
></ha-entity-picker>
135136
136-
<ha-entity-picker
137-
label="Temperature Sensor (Optional)"
138-
.hass="${this.hass}"
139-
.value="${this._temp}"
140-
.configValue=${"temp"}
141-
@change="${this._valueChanged}"
142-
allow-custom-entity
143-
></ha-entity-picker>
144-
145137
<ha-entity-picker
146138
label="Weather Entity (Optional)"
147139
.hass="${this.hass}"
@@ -165,6 +157,12 @@ export class AirVisualCardEditor extends LitElement {
165157
@value-changed="${this._valueChanged}"
166158
></paper-input>
167159
160+
<paper-input
161+
label="Speed Unit (Optional)"
162+
.value="${this._speed_unit}"
163+
.configValue="${"speed_unit"}"
164+
@value-changed="${this._valueChanged}"
165+
></paper-input>
168166
<paper-input
169167
label="Icons location (Optional)"
170168
.value="${this._icons}"
@@ -181,6 +179,14 @@ export class AirVisualCardEditor extends LitElement {
181179
></ha-switch
182180
><span>Hide Title</span>
183181
</div>
182+
<div class="switch">
183+
<ha-switch
184+
.checked=${this._hide_weather}
185+
.configValue="${"hide_weather"}"
186+
@change="${this._valueChanged}"
187+
></ha-switch
188+
><span>Hide Weather</span>
189+
</div>
184190
<div class="switch">
185191
<ha-switch
186192
.checked=${this._hide_face}

0 commit comments

Comments
 (0)