jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-09 18:36:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add UI setup instructions to Lovelace card pages (#15155)

Browse Source 
Co-authored-by: Franck Nijhof <git@frenck.dev>
This commit is contained in:
Sean Mooney 2020-10-10 07:55:56 -04:00 committed by GitHub
parent 92af5f437c
commit dad4a22e4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 95 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
source/_lovelace/alarm-panel.markdown
View File

@ -4,13 +4,17 @@ sidebar_label: Alarm Panel
description: "The Alarm Panel card allows you to Arm and Disarm your alarm control panel integrations."
---
The Alarm Panel card allows you to Arm and Disarm your alarm control panel integrations.
The Alarm Panel card allows you to Arm and Disarm your [alarm control panel](/integrations/#alarm) integrations.
<p class='img'>
<img src='/images/lovelace/lovelace_alarm_panel_card.gif' alt='Screenshot of the alarm panel card'>
Screenshot of the Alarm Panel card.
</p>
To add the Alarm Panel card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Alarm Panel** from the card picker. All options for this card can be configured via the user interface.
Alternatively, the card can be configured using YAML:
```yaml
type: alarm-panel
entity: alarm_control_panel.alarm

4
source/_lovelace/button.markdown
View File

@ -11,6 +11,10 @@ The Button card allows you to add buttons to perform tasks.
Screenshot of the Button card.
</p>
To add the Button card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Button** from the card picker. All options for this card can be configured via the user interface.
Alternatively, the card can be configured using YAML:
```yaml
type: button
entity: light.living_room

6
source/_lovelace/calendar.markdown
View File

@ -4,13 +4,15 @@ sidebar_label: Calendar
description: "The calendar card displays your calendar entities in a month, day and list view"
---
The Calendar card displays your calendar entities in a month, day and list view.
The Calendar card displays your [calendar](/integrations/#calendar) entities in a month, day and list view.
<p class='img'>
<img src='/images/lovelace/lovelace_calendar_card.png' alt='Screenshot of the calendar card'>
Screenshot of the calendar card.
Screenshot of the Calendar card.
</p>
To add the Calendar card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Calendar** from the card picker. All options for this card can be configured via the user interface.
### Card Settings
{% configuration_basic %}

2
source/_lovelace/conditional.markdown
View File

@ -6,6 +6,8 @@ description: The Conditional card displays another card based on entity states.
The Conditional card displays another card based on entity states.
To add the Conditional card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Conditional** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true

2
source/_lovelace/entities.markdown
View File

@ -6,6 +6,8 @@ description: "The Entities card is the most common type of card. It groups items
The Entities card is the most common type of card. It groups items together into lists.
To add the Entities card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Entities** from the card picker.
{% configuration %}
type:
required: true

6
source/_lovelace/entity.markdown
View File

@ -8,9 +8,11 @@ The Entity card gives you a quick overview of your entity's state.
<p class='img'>
<img src='/images/lovelace/lovelace_entity_card.png' alt='Screenshot of the entity card'>
Screenshot of the entity card.
Screenshot of the Entity card.
</p>
To add the Entity card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Entity** from the card picker.
{% configuration %}
type:
required: true
@ -50,6 +52,8 @@ footer:
## Example
Alternatively, the card can be configured using YAML:
```yaml
- type: entity
entity: cover.kitchen_window

6
source/_lovelace/gauge.markdown
View File

@ -8,9 +8,13 @@ The Gauge card is a basic card that allows visually seeing sensor data.
<p class='img'>
<img src='/images/lovelace/lovelace_gauge_card.gif' alt='Screenshot of the gauge card'>
Screenshot of the gauge card.
Screenshot of the Gauge card.
</p>
To add the Gauge card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Gauge** from the card picker. All options for this card can be configured via the user interface.
Alternatively, the card can be configured using YAML:
```yaml
type: gauge
entity: sensor.cpu_usage

4
source/_lovelace/glance.markdown
View File

@ -8,9 +8,11 @@ The Glance card is useful to group multiple sensors in a compact overview. Keep
<p class='img'>
<img src='/images/lovelace/lovelace_glance_card.png' alt='Screenshot of the glance card'>
Screenshot of the glance card.
Screenshot of the Glance card.
</p>
To add the Glance card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Glance** from the card picker.
{% configuration %}
type:
required: true

8
source/_lovelace/history-graph.markdown
View File

@ -8,14 +8,16 @@ The History Graph card allows you to display a graph for each of the entities li
<p class='img'>
<img src='/images/lovelace/lovelace_history_graph.png' alt='Screenshot of the history graph card for entities without a unit_of_measurement'>
Screenshot of the history graph card, when the sensor has no `unit_of_measurement` defined.
Screenshot of the History Graph card, when the sensor has no `unit_of_measurement` defined.
</p>
<p class='img'>
<img src='/images/lovelace/lovelace_history_graph_lines.png' alt='Screenshot of the history graph card for entities with a unit_of_measurement'>
Screenshot of the history graph card, when the sensor has a `unit_of_measurement` defined.
Screenshot of the History Graph card, when the sensor has a `unit_of_measurement` defined.
</p>
To add the History Graph card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **History Graph** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
@ -58,6 +60,8 @@ name:
## Example
Alternatively, the card can be configured using YAML:
```yaml
type: history-graph
title: 'My Graph'

4
source/_lovelace/horizontal-stack.markdown
View File

@ -6,6 +6,8 @@ description: "The Horizontal Stack card allows you to stack together multiple ca
The Horizontal Stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column.
To add the Horizontal Stack card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Horizontal Stack** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
@ -37,5 +39,5 @@ cards:
<p class='img'>
<img src='/images/lovelace/lovelace_horizontal_stack.PNG' alt='Two picture cards in a horizontal stack card'>
Two picture cards in a horizontal stack card.
Two Picture cards in a Horizontal Stack card.
</p>

4
source/_lovelace/humidifier.markdown
View File

@ -11,6 +11,8 @@ The Humidifier card lets you control and monitor humidifiers, dehumidifiers, and
Screenshot of the humidifier card.
</p>
To add the Humidifier card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Humidifier** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
@ -33,6 +35,8 @@ theme:
## Example
Alternatively, the card can be configured using YAML:
```yaml
- type: humidifier
entity: humidifier.bedroom

4
source/_lovelace/iframe.markdown
View File

@ -15,6 +15,8 @@ You can't embed sites using HTTP if you are using HTTPS for your Home Assistant.
Windy weather radar as Webpage.
</p>
To add the Webpage card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Webpage** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
@ -37,6 +39,8 @@ title:
### Examples
The card can also be configured using YAML, some examples below:
```yaml
type: iframe
url: https://grafana.localhost/d/000000027/worldping-endpoint-summary?var-probe=All&panelId=2&fullscreen&orgId=3&theme=light

4
source/_lovelace/light.markdown
View File

@ -11,6 +11,10 @@ The Light card allows you to change the brightness of the light.
Screenshot of the Light card.
</p>
To add the Light card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Light** from the card picker. All options for this card can be configured via the user interface.
Alternatively, the card can be configured using YAML:
```yaml
type: light
entity: light.bedroom

4
source/_lovelace/map.markdown
View File

@ -11,6 +11,8 @@ The Map card that allows you to display entities on a map
Screenshot of the map card.
</p>
To add the Map card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Map** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
@ -63,6 +65,8 @@ hours_to_show:
## Examples
The card can also be configured using YAML, some examples below:
```yaml
type: map
aspect_ratio: 16:9

6
source/_lovelace/markdown.markdown
View File

@ -10,9 +10,11 @@ The renderer uses [Marked.js](https://marked.js.org), which supports [several sp
<p class='img'>
<img src='/images/lovelace/lovelace_markdown.png' alt='Screenshot of the markdown card'>
Screenshot of the markdown card.
Screenshot of the Markdown card.
</p>
To add the Markdown card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Markdown** from the card picker.
{% configuration %}
type:
required: true
@ -45,6 +47,8 @@ theme:
## Example
The card can also be configured using YAML, some examples below:
```yaml
type: markdown
content: >

6
source/_lovelace/media-control.markdown
View File

@ -8,9 +8,11 @@ The Media Control card is used to display [Media Player](/integrations/#media-pl
<p class='img'>
<img src='/images/lovelace/lovelace_mediaplayer.png' alt='Screenshot of the media player control card'>
Screenshot of the media player control card.
Screenshot of the Media Control card.
</p>
To add the Media Control card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Media Control** from the card picker.
{% configuration %}
type:
required: true
@ -29,6 +31,8 @@ name:
## Example
Alternatively, the card can be configured using YAML:
```yaml
type: media-control
entity: media_player.lounge_room

4
source/_lovelace/plant-status.markdown
View File

@ -11,6 +11,8 @@ The Plant Status card is for all the lovely botanists out there.
Screenshot of the plant status card.
</p>
To add the Plant Status card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Plant Status** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
@ -33,6 +35,8 @@ theme:
## Example
Alternatively, the card can be configured using YAML:
```yaml
type: plant-status
entity: plant.bonsai

4
source/_lovelace/sensor.markdown
View File

@ -11,6 +11,8 @@ The Sensor card gives you a quick overview of your sensors state with an optiona
Screenshot of the sensor card.
</p>
To add the Sensor card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Sensor** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
@ -54,6 +56,8 @@ theme:
## Example
Alternatively, the card can be configured using YAML:
```yaml
type: sensor
entity: sensor.illumination

7
source/_lovelace/shopping-list.markdown
View File

@ -6,13 +6,18 @@ description: "The Shopping List card allows you to add, edit, check-off, and cle
The Shopping List card allows you to add, edit, check-off, and clear items from your shopping list.
Setup of the [Shopping List Intent](/integrations/shopping_list/) is required
Setup of the [Shopping List integration](/integrations/shopping_list/) is required.
<p class='img'>
<img src='/images/lovelace/lovelace_shopping_list_card.gif' alt='Screenshot of the shopping list card'>
Screenshot of the Shopping List card.
</p>
To add the Shopping List card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Shopping List** from the card picker. All options for this card can be configured via the user interface.
Alternatively, the card can be configured using YAML:
```yaml
type: shopping-list
```

10
source/_lovelace/thermostat.markdown
View File

@ -1,16 +1,18 @@
---
title: "Thermostat Card"
sidebar_label: Thermostat
description: "The Thermostat card gives control of your climate entity. Allowing you to change the temperature and mode of the entity."
description: "The Thermostat card gives control of your climate entity, allowing you to change the temperature and mode of the entity."
---
The Thermostat card gives control of your climate entity. Allowing you to change the temperature and mode of the entity.
The Thermostat card gives control of your [climate](/integrations/#climate) entity, allowing you to change the temperature and mode of the entity.
<p class='img'>
<img src='/images/lovelace/lovelace_thermostat_card.gif' alt='Screenshot of the thermostat card'>
Screenshot of the thermostat card.
Screenshot of the Thermostat card.
</p>
To add the Thermostat card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Thermostat** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
@ -33,6 +35,8 @@ theme:
## Example
Alternatively, the card can be configured using YAML:
```yaml
type: thermostat
entity: climate.nest

6
source/_lovelace/vertical-stack.markdown
View File

@ -6,6 +6,8 @@ description: "The Vertical Stack card allows you to group multiple cards so they
The Vertical Stack card allows you to group multiple cards so they always sit in the same column.
To add the Vertical Stack card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Vertical Stack** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
@ -23,6 +25,8 @@ cards:
### Examples
Alternatively, the card can be configured using YAML:
Basic example:
```yaml
@ -39,7 +43,7 @@ cards:
<p class="img">
<img src="/images/lovelace/lovelace_vertical-stack.png" alt="Picture- and entities-card in a stack">
Picture- and entities-card in a stack.
Picture and entities-card in a stack.
</p>
Combination of vertical and horizontal stack card:

7
source/_lovelace/weather-forecast.markdown
View File

@ -8,9 +8,10 @@ The Weather Forecast card displays the weather. Very useful to include on interf
<p class='img'>
<img src='/images/lovelace/lovelace_weather.png' alt='Screenshot of the weather card'>
Screenshot of the weather card.
Screenshot of the Weather card.
</p>
To add the Weather card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Weather** from the card picker.
### Card Settings
@ -83,7 +84,7 @@ entity: weather.openweathermap
##### Themeable Icons
The default weather icons are themable via a [Theme](https://www.home-assistant.io/integrations/frontend/#themes). Theme variables include:
The default weather icons are themable via a [theme](/integrations/frontend/#themes). Theme variables include:
```yaml
--weather-icon-cloud-front-color
@ -106,7 +107,7 @@ Example theme configuration:
##### Personal Icons
Weather icons can be overwritten with your own personal images via a [Theme](https://www.home-assistant.io/integrations/frontend/#themes). Theme variables include:
Weather icons can be overwritten with your own personal images via a [theme](/integrations/frontend/#themes). Theme variables include:
```yaml
--weather-icon-clear-night