mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-09 18:36:51 +00:00
Add UI setup instructions to Lovelace card pages (#15155)
Co-authored-by: Franck Nijhof <git@frenck.dev>
This commit is contained in:
parent
92af5f437c
commit
dad4a22e4f
@ -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
|
||||
|
@ -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
|
||||
|
@ -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 %}
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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,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'
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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: >
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
```
|
||||
|
@ -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,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:
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user