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-24 09:46:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Onboarding: update dashboard section (#31868)

Browse Source 
* Onboarding: update dashboard section

* Update tutorial to create new dashboard instead of editing the default

* Tweaks
This commit is contained in:
c0ffeeca7 2024-03-18 09:35:53 +01:00 committed by GitHub
parent a5e3595c55
commit 46752798cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 109 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
source/getting-started/onboarding_dashboard.markdown
View File

@ -3,58 +3,134 @@ title: "Edit the dashboard"
description: "Instructions on editing the dashboard for the first time"
---
Dashboards are customizable pages to display information about your smart home devices.
## Dashboards, cards, and views
The screenshot shows an **Overview** dashboard with many [cards](/dashboards/cards/) to represent sensor values. For example, the status of some lights, a media player, and some temperature values. It also shows control elements. For example, you can change the ventilation, the color of the lights, or turn on a smart TV and start YouTube.
### Views
The icons in the blue menu bar on top each represent a different tab. Each tab contains a [view](/dashboards/views/).
<p class='img'>
<img src='/images/getting-started/lovelace.png' alt='Screenshot of a populated Overview dashboard'>
Screenshot of a populated Overview dashboard with many devices.
</p>
### Multiple dashboards
In the sidebar on the left, you see the names of different dashboards. Home Assistant comes with [multiple dashboards](/dashboards/dashboards/) out of the box.
- Overview
- Energy
- Map
- Logbook
- History
## First contact with the Overview dashboard
The **Overview** [dashboard](/dashboards/) is the first page you see after the [onboarding process](/getting-started/onboarding). Dashboards are customizable pages to display information in Home Assistant.
The **Overview** [dashboard](/dashboards/) is the first page you see after the [onboarding process](/getting-started/onboarding).
By default, there are two dashboards: **Overview** and **Energy**. The image below shows a customized example of the **Overview** dashboard. If you just onboarded, your dashboard will be nearly empty.
If you just onboarded, your dashboard will be nearly empty. It shows cards for devices that were detected automatically. Your dashboard may look quite different, depending on the devices that you have at home.
![Dashboard](/images/getting-started/lovelace.png)
<p class='img'>
<img src='/images/getting-started/onboarding_dashboard_raspi_bluetooth.png' alt='Screenshot of the Overview dashboard with Bluetooth devices'>
Screenshot of a new Overview dashboard with Bluetooth devices.
</p>
The procedure below is optional. The idea is to learn some basics on changing the dashboard.
Let's take a look at the devices that were detected and which cards are used to represent them on the dashboard.
### To change a card on the Overview dashboard
- 1 Sonos speaker: [media control](/dashboards/media-control/) card
- 1 Person (away): [entities](/dashboards/entities/) card
- 1 Weather forecast: [weather forecast](/dashboards/weather-forecast/) card
- 2 temperature sensors: [entities](/dashboards/entities/) card
1. To view your dashboard, go to **Overview**.
- Your dashboard might not have much on it yet.
### Sonos speaker
If you have a smart speaker connected to Wi-Fi, for example, this can be detected.
### Person
After onboarding, the first person shown here is the Home Assistant owner. Next to the name, it claims the person is **away**. You can track whether a person is present or not and create automations based on that. For example, turn down the heating when everyone has left the home. For more information on presence based automations, start with [presence detection](/getting-started/presence-detection/).
### Weather forecast
The weather forecast card is shown automatically if you provided a location during onboarding.
### Temperature sensors
The temperature sensors are shown because the Home Assistant device used here (Raspberry Pi) has a built-in Bluetooth module. In Giulia's home, there were 2 Bluetooth temperature sensors present. If your Home Assistant does not have a Bluetooth module (yet), Bluetooth devices in your home won't be shown automatically.
If your Home Assistant has other controllers, such as a [Zigbee](/integrations/zha/) or a [Z-Wave](/integrations/zwave_js/) controller, and you have Zigbee or Z-Wave devices, these could be detected and shown here. However, these devices usually need to be paired first.
## Creating a new dashboard and edit cards
The default **Overview** dashboard updates automatically when you add new devices. However, once you start editing the default dashboard, it no longer updates automatically. For this reason, we start here by adding a new dashboard. This lets us keep the default **Overview** dashboard.
In the following steps, we will create a new dashboard and edit some card settings.
1. Go to {% my lovelace_dashboards title="**Settings** > **Dashboards**" %} and select **Add dashboard**.
![Screenshot of the dashboard list](/images/dashboards/dashboard-manage-02.png)
2. In the dialog, choose **Default dashboard**.
3. In the **Add new dashboard** dialog, enter a name and select an icon.
- Leave the **Admin only** and **Show in sidebar** options as they are.
- Select **Create**.
- **Result**: The dashboard is added.
4. Open your new dashboard and in the top right of the screen, select the <img height="28px" src="/images/blog/2024-03-dashboard-chapter-1/mdi-edit.png" alt="Edit icon"/> button.
5. By editing the dashboard, you are taking over control of this dashboard.
- This means that it is no longer automatically updated when new dashboard elements become available.
- To continue, in the dialog, select the three dots menu, then select **Take control**.
- Read and accept this before continuing.
6. Your dashboard might not have much on it yet.
- If you have smart home devices in your home, some may have been connected automatically.
- In this example, some Bluetooth temperature sensors and an AV receiver connected automatically.
- Some cards are there by default, such as the weather, a card for the person who set up the system, and the text-to-speech service.
![Dashboard after onboarding a new device](/images/getting-started/onboarding_dashboard_01.png)
2. To view the weather forecast for the next few days, select the weather card.
7. Next, we want to edit the weather card.
- Select the weather card.
- Then, select the cogwheel.
![Weather details](/images/getting-started/weather_card_details_01.png)
3. To change the units used on the card, select the cogwheel.
- Change the units if you like.
- Do not change any of the other settings for now.
- Once you are done, select **Update**.
8. Change any of the units, if you like.
- Do not change the **Entity ID**.
- Once you are done, select **Update**.
![Weather details](/images/getting-started/onboarding_card_settings_01.png)
4. To change the type of dashboard card, in the top right corner, select the pencil icon, then, in the **Edit dashboard** dialog, select the three dots and select **Take control**.
![Take control of the dashboard](/images/getting-started/dashboard-take-control.png)
- Read and accept this before continuing.
- On the dashboard, select the weather card, select the three dots, then **Device info**.
9. Next, we want to add a new card for this weather {% term service %}.
- Select the weather card again, select the three dots, then **Device info**.
- Under **Sensors**, select **Add to dashboard**, then **Pick different card**.
![Dashboard - change the card type](/images/getting-started/onboarding_pick_different_card_01.png)
5. From the list, select **Weather forecast**.
6. Select the details to be shown on the card.
![Dashboard - change the card details](/images/getting-started/onboarding_card_settings_02.png)
- **Save** your changes
- You now see the forecast card on the dashboard.
10. From the list, select **Show current weather and forecast**.
11. Select the details to be shown on the card.
![Dashboard - change the card details](/images/getting-started/onboarding_card_settings_02.png)
- **Save** your changes
- You now see the forecast card on the dashboard.
7. Now let's delete the other weather card.
- In the top right corner, select the pencil.
![Dashboard - edit the dashboard](/images/getting-started/onboarding_edit_dashboard_01.png)
- On the card, select the three-dot menu and select **Delete**.
![Dashboard - delete card](/images/getting-started/onboarding_dashboard_delete_card.png)
8. Finally, we want to move the weather card to the top left corner.
- On the bottom of the card, select the number or use the minus button to enter `1`.
- Repeat this on other cards, if you want to move them around.
- When you are done, in the top right corner, select **Done**.
9. Congratulations! You have completed your first dashboard customization.
12. Now let's delete the other weather card.
- In the top right corner, select the pencil.
![Dashboard - edit the dashboard](/images/getting-started/onboarding_edit_dashboard_01.png)
- On the card, select the three-dot menu and select **Delete**.
![Dashboard - delete card](/images/getting-started/onboarding_dashboard_delete_card.png)
13. Finally, we want to move the weather card to the top left corner.
- On the bottom of the card, select the number or use the minus button to enter `1`.
- Repeat this on other cards, if you want to move them around.
- When you are done, in the top right corner, select **Done**.
14. If you want to change any of the other cards, select the **Edit** button on the card.
15. Congratulations! You have completed your first dashboard customization.
## Learning more about dashboards
If you want to learn more about dashboards, views, and cards, take a look at these topics:
1. Take a look at the [introduction to dashboards](/dashboards/) and learn about [multiple dashboards](/dashboards/dashboards).
2. Learn about the different [view types](/dashboards/views/).
3. Learn how to [add cards](/dashboards/cards/#adding-cards-to-your-dashboard) to a view.
## Next step: integrations
To continue with this tutorial, select the button below to learn about {% term integrations %}.
@ -63,4 +139,5 @@ To continue with this tutorial, select the button below to learn about {% term i
## Related topics
- [Dashboards](/dashboards/)
- [Views](/dashboards/views/)
- [Views](/dashboards/views/)
- [Add cards to views](/dashboards/cards/#adding-cards-to-your-dashboard)

BIN
source/images/dashboards/dashboard-manage-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
source/images/getting-started/onboarding_dashboard_raspi_bluetooth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB