Skip to content
This repository has been archived by the owner on Jul 22, 2024. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
Yevgenium committed Aug 23, 2021
2 parents 79778e7 + df2cbc1 commit 638c094
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 16 deletions.
58 changes: 43 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,59 @@
![openweathermap-eng](https://user-images.githubusercontent.com/33804747/50649716-d987f880-0fa8-11e9-9608-93aa8b2857f4.png)
![image](https://user-images.githubusercontent.com/33804747/130364938-5bab831e-3056-46b0-8a7d-055d89026614.png)

## Configuration

Copy `weather-card-chart.js` from this repository into your `config/www` directory first.
Download and copy `weather-chart-card.js` from the [latest release](https://github.com/Yevgenium/weather-chart-card/releases/latest) into your `config/www` directory.

Add a reference to the copied file:
Add a reference to the copied file inside your `configuration.yaml` or in the Home Assistant UI:

[![Open your Home Assistant instance and show your Lovelace resources.](https://my.home-assistant.io/badges/lovelace_resources.svg)](https://my.home-assistant.io/redirect/lovelace_resources/)
```yaml
# Example Lovelace UI config entry
resources:
- type: module
url: /local/weather-card-chart.js
url: /local/weather-chart-card.js
```
Then you can add the card to the view:
```yaml
# Example Lovelace UI config entry
- type: 'custom:weather-card-chart'
title: Weather
weather: weather.openweathermap
type: custom:weather-chart-card
weather: weather.home
```
#### Configuration variables:
| Name | Optional | Description |
| ------- | -------- | -------------------------------------------------------------------------------------------------- |
| type | **No** | Should be `'custom:weather-card-chart'` |
| title | **No** | Card title |
| weather | **No** | An entity_id with the `weather` domain |
| wind | Yes | Entity_id of the wind sensor. Show wind value from sensor instead |
| temp | Yes | Entity_id of the temperature sensor. Show temperature value from sensor instead |
| mode | Yes | Default value: `daily`. Set mode to `hourly` to display hours instead weekdays on the chart |
| Name | Type | Default | Description |
| --------------- | ------- | -------------------------|--------------------------------------------------------------------------------------------------- |
| type | string | **Required** | Should be `custom:weather-chart-card` |
| weather | string | **Required** | An entity_id with the `weather` domain |
| title | string | none | Card title |
| temp | string | none | Entity_id of the temperature sensor. Show temperature value from sensor instead |
| show_main | boolean | true | Show or hide a section with current weather condition amd temperature |
| show_attributes | boolean | true | Show or hide a section with attributes such as pressure, humidity, wind direction and speed, etc |
| icons | string | none | Path to the location of custom icons in svg format, for example `/local/weather-icons/` |
| icons_size | number | 25 | The size of custom icons in pixels |
| temp1_color | string | rgba(230, 100, 100, 1.0) | Temperature first line chart color |
| temp2_color | string | rgba(68, 115, 158, 1.0) | Temperature second line chart color |
| precip_color | string | rgba(132, 209, 253, 1.0) | Precipitation bar chart color |

###### What custom icons can I use?
Icons should be in svg format. Icons should have names as shown [here](https://github.com/Yevgenium/weather-chart-card/blob/a9f795f2fd02028bdad9b771d383fa38c5f3148c/src/const.js#L24). Example:
![image](https://user-images.githubusercontent.com/33804747/130360372-76d70c42-986c-46e3-b9b5-810f0317f94f.png)


#### Example usage:
###### Basic
![image](https://user-images.githubusercontent.com/33804747/130359790-e2a7bceb-29d5-494e-9f6e-d679a3e41222.png)
```yaml
type: custom:weather-chart-card
weather: weather.home_hourly
```
###### Chart only
![image](https://user-images.githubusercontent.com/33804747/130359944-2f68a668-07ab-4a0a-bd9e-43ea9bf738a3.png)
```yaml
type: custom:weather-chart-card
weather: weather.openweathermap
show_main: false
show_attributes: false
icons: /local/weather-icons/
```
2 changes: 1 addition & 1 deletion hacs.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "Weather Chart Card",
"render_readme": true,
"filename": "weather-card-chart.js"
"filename": "weather-chart-card.js"
}

0 comments on commit 638c094

Please sign in to comment.