148 lines
4.6 KiB
Markdown
148 lines
4.6 KiB
Markdown
---
|
|
type: card
|
|
title: "Weather Forecast Card"
|
|
sidebar_label: Weather Forecast
|
|
description: "The Weather Forecast card displays the weather. Very useful to include on interfaces that people display on the wall."
|
|
---
|
|
|
|
The Weather Forecast card displays the weather. Very useful to include on interfaces that people display on the wall.
|
|
|
|
<p class='img'>
|
|
<img src='/images/dashboards/weather.png' alt='Screenshot of the weather card'>
|
|
Screenshot of the Weather card.
|
|
</p>
|
|
|
|
To add the Weather card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Weather** from the card picker.
|
|
|
|
## Card Settings
|
|
|
|
{% configuration_basic %}
|
|
Entity:
|
|
description: "The entity of the `weather` platform to use."
|
|
Name:
|
|
description: The name of the location where the weather platform is located. If not set, the name will be the name set on the weather entity
|
|
Show Forecast:
|
|
description: Check this if you would like to show the upcoming forecast under the current weather.
|
|
Secondary Info Attribute:
|
|
description: Here you can specify a secondary attribute to show under the current temperature. Ex. Extrema, Precipitation, Humidity. If not set, it will default to Extrema (High/Low) if available, if not available then Precipitation and if precipitation isn't available then Humidity.
|
|
Theme:
|
|
description: Name of any loaded theme to be used for this card. For more information about themes, see the [frontend documentation](/integrations/frontend/).
|
|
{% endconfiguration_basic %}
|
|
|
|
<div class="note">
|
|
|
|
This card works only with platforms that define a `weather` entity.
|
|
|
|
E.g., it works with [OpenWeatherMap](https://www.home-assistant.io/integrations/openweathermap/#weather) but not [OpenWeatherMap Sensor](https://www.home-assistant.io/integrations/openweathermap/#sensor)
|
|
|
|
</div>
|
|
|
|
### YAML
|
|
|
|
This is for if you use YAML mode or just prefer to use YAML in the Code Editor in the UI.
|
|
|
|
{% configuration %}
|
|
type:
|
|
required: true
|
|
description: "`weather-forecast`"
|
|
type: string
|
|
entity:
|
|
required: true
|
|
description: Entity ID of `weather` domain.
|
|
type: string
|
|
name:
|
|
required: false
|
|
description: Overwrites the friendly name.
|
|
type: string
|
|
default: Entity name
|
|
show_forecast:
|
|
required: false
|
|
description: Show next hours/days forecast.
|
|
type: boolean
|
|
default: true
|
|
secondary_info_attribute:
|
|
required: false
|
|
description: Which attribute to display under the temperature.
|
|
type: string
|
|
default: Defaults to `extrema` if available, if not available then `precipitation` and if precipitation isn't available then `humidity`.
|
|
theme:
|
|
required: false
|
|
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
|
|
type: string
|
|
tap_action:
|
|
required: false
|
|
description: The action taken on card tap. For more information, see the [action documentation](/dashboards/actions/#tap-action).
|
|
type: map
|
|
hold_action:
|
|
required: false
|
|
description: The action taken on card tap and hold. For more information, see the [action documentation](/dashboards/actions/#hold-action).
|
|
type: map
|
|
double_tap_action:
|
|
required: false
|
|
description: The action taken on card double-tap. For more information, see the [action documentation](/dashboards/actions/#double-tap-action).
|
|
type: map
|
|
{% endconfiguration %}
|
|
|
|
Example
|
|
|
|
```yaml
|
|
type: weather-forecast
|
|
entity: weather.openweathermap
|
|
```
|
|
|
|
### Advanced
|
|
|
|
#### Themeable Icons
|
|
|
|
The default weather icons are themable via a [theme](/integrations/frontend/#themes). Theme variables include:
|
|
|
|
```yaml
|
|
--weather-icon-cloud-front-color
|
|
--weather-icon-cloud-back-color
|
|
--weather-icon-sun-color
|
|
--weather-icon-rain-color
|
|
--weather-icon-moon-color
|
|
```
|
|
|
|
Example theme configuration:
|
|
|
|
```yaml
|
|
--weather-icon-cloud-front-color: white
|
|
--weather-icon-cloud-back-color: blue
|
|
--weather-icon-sun-color: orange
|
|
--weather-icon-rain-color: purple
|
|
```
|
|
|
|
|
|
|
|
#### Personal Icons
|
|
|
|
Weather icons can be overwritten with your own personal images via a [theme](/integrations/frontend/#themes). Theme variables include:
|
|
|
|
```yaml
|
|
--weather-icon-clear-night
|
|
--weather-icon-cloudy
|
|
--weather-icon-fog
|
|
--weather-icon-lightning
|
|
--weather-icon-lightning-rainy
|
|
--weather-icon-partlycloudy
|
|
--weather-icon-pouring
|
|
--weather-icon-rainy
|
|
--weather-icon-hail
|
|
--weather-icon-snowy
|
|
--weather-icon-snowy-rainy
|
|
--weather-icon-sunny
|
|
--weather-icon-windy
|
|
--weather-icon-windy-variant
|
|
--weather-icon-exceptional
|
|
|
|
// If your state is not above, use this format
|
|
--weather-icon-<state>
|
|
```
|
|
|
|
Example theme configuration:
|
|
|
|
```yaml
|
|
--weather-icon-sunny: url("/local/sunny.png")
|
|
```
|