Dashboards are the GUI for Home Assistant and are very flexible. There are many standard display cards, and even more custom cards that can be downloaded for use.
Install Custom Cards
- ISSUES
- Could not get custom cards to appear in dashboard. Had to edit resources for them to appear:
- In dashboard, click three-dots at top RHS, select Edit Dashboard
- Click next three-dots at top RHS, select Manage Resources
- Add URL to custom card’s JavaScript file, e.g.:
hacsfiles/power-distribution-card/power-distribution-card.js - Note:
/hacsfiles/is a shortcut for/config/www/community/… - Note:
/local/points to/config/www/…folder - Set resource type to JavaScript module
- Could not get custom cards to appear in dashboard. Had to edit resources for them to appear:
- Card Mod
- Add Card-Mod-3 to change CSS for the majority of cards
- Go to HACS -> Frontend, click +Explore & Download Repositories
- Search for mod, select, click Download
- In Edit Dashboard -> three-dots -> Manage Resources, add JS module:
/hacsfiles/lovelace-card-mod/card-mod.js - Note:
hacsfilesis a shortcut for/config/www/community/…
- Custom Button Card
- Very flexible button card (YouTube example)
- Go to HACS -> Frontend, click +Explore & Download Repositories
- Search for button, select, click Download
- Power Distribution Card (GitHub)
- Go to HACS -> Frontend, click +Explore & Download Repositories
- Search for power distribution, select, click Download
- Apex Charts Card (GitHub)
- Go to HACS -> Frontend, click +Explore & Download Repositories
- Search for apex, select, click Download
New Home Page
- Go to Settings -> Dashboards, click +Add Dashboard
- Title = Home, Icon = mdi:home
- Click Create
- At RHS select Open
- To edit, click on three dots at top RHS, click Edit Dashboard
- As the dashboard is currently under Home Assistant control it will offer the opportunity to Take Control. In addition, if want to start with a clean dashboard, tick Start with an empty dashboard
Restore Previously Edited Dashboards (backup)
- Go to Overview -> three-dots at top RHS, select Manage Dashboards
- Add Home and Mobile
- Go to relevant dashboard, three-dots, select Raw configuration editor
- Paste YAML from backup files
Set Theme for Dashboard
- Go to Profile tab, change Theme to ios-dark-mode-light-blue [might need to refresh browser to see change]
Amend Weather Card
- Change weather card to use Met Office data [link]
- Go to three-dots top-right and Edit dashboard
- Click Edit on weather card
- Change Entity (required) to Met Office Horndean Daily
- Can then delete default “Met.no” weather integration
Notes / Resources
- TBD