Create area.markdown (#20743)

Co-authored-by: Franck Nijhof <frenck@frenck.nl>
This commit is contained in:
Beta-Computer 2021-12-23 09:04:39 +13:00 committed by GitHub
parent 411e2e7c3b
commit 063e177fac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -0,0 +1,65 @@
---
type: card
title: "Area Card"
sidebar_label: Area
description: "The Area card gives control of your entities in a specified area."
---
The Area card lets you control and monitor an individual area.
<p class='img'>
<img src='/images/blog/2021-12/area-card.png' alt='Screenshot of the Area card'>
Screenshot of the Area card.
</p>
To add the Area card to your user interface, click the Lovelace 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 **Area** from the card picker. All options for this card can be configured via the user interface.
Buttons will appear on the card for the entities in the area including fan, light and switch. A motion sensor icon will appear in the top left if a motion sensor is in the area and motion is detected by the motion sensor.
If a camera is added to the area you can show the camera feed instead of the area pictue.
{% configuration %}
type:
required: true
description: "`area`"
type: string
area:
required: true
description: ID of the `area`.
type: string
show_camera:
required: false
description: Changes the area picture to a live feed of the camera set for the area.
type: boolean
default: false
navigation_path:
required: false
description: link to Lovelace view. For more information about views, see the [view documentation](/lovelace/views/)
type: string
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
{% endconfiguration %}
## Example
Alternatively, the card can be configured using YAML:
Basic example:
```yaml
- type: area
area: bedroom
```
Complex example
```yaml
- type: area
area: bedroom
navigation_path: my_bedroom
show_camera:true
theme: green
```