As of 2024, this repository is no longer maintained. While I will not be updating this project, pull requests addressing future breaking changes are welcome. I want to thank everyone for their contributions and support on this project. Seeing it rise as the community's top topic of all time has been truly overwhelming.
I am now shifting my focus to a new project called ha-fusion. It aims to be a modern, easy-to-use, and performant custom dashboard built from scratch. I hope you'll check it out!
https://github.com/matt8707/ha-fusion
Home Assistant Container on a Synology DiskStation DS918+ NAS. Wall mounted tablet (Galaxy Tab A 10.1) using Fully Kiosk Browser. My configuration is exposed to HomeKit with Apple TV acting as a hub for remote connection.
If you like anything here, be sure to 🌟 my repo!
How do I install this theme?
There's no install button. I'm sharing my full configuration
Can you please add this to HACS?
No, because this is not a custom card or integration
Where do I even start?
INSTALL.md explains how to get started 🎉
- Dashboard (Lovelace) using custom button-card and layout-card
- Portrait, landscape and mobile view - responsive_demo.mp4 [mirror]
- Less cluttered interface by displaying more information in a popup
- Loading animation for slow responding entities
- Adding tap audio feedback to the UI for wall-mounted tablet
- Icon CSS animations based on entity state
- Time and date with greeting based on time of day
- Entities that are on, using natural language
- Mailbox counter to show received mail
- Temperature with emoji based on weather conditions
- Important calendar information
- Other conditional alerts
Popups that supports notifications.
Long press a button to show settings and information pertaining to the entity, using browser_mod. Light popups are automatically created using the light button-card template with 🍄 Mushroom
Conditionally display media players based on the last active device. If nothing is active for 15 minutes, a poster of the last downloaded movie/episode is shown (Plex, Radarr, Sonarr). Swipe to reveal non-active media players
card-mod is used for the styles in include/themes.yaml and each popup also contain styles depending on content.
I've made a tool to help with css element selectors - https://matt8707.github.io/card-mod-helper/
| nas | vacuum |
|---|---|
 |
 |
| misc |
|---|
 |
| Vendor | Product | Integration | Description |
|---|---|---|---|
| Ubiquiti | UniFi Dream Machine | unifi | Router, controller, switch and access point |
| Synology | DiskStation DS918+ | synology_dsm | 4x4TB NAS - matt8707/docker-compose-dsm |
| Samsung | Galaxy Tab A SM-T510 | custom | Wall mounted tablet in hallway by the front door |
| Philips | Hue | hue | Bridge, 15 bulbs, 3 motion sensors, 2 dimmer switches |
| Apple | iMac | shell_command | All-in-one desktop computer |
| Xiaomi | Mi Roborock S50 | xiaomi_miio | Robot vacuum with lidar - xiaomi-cloud-map-extractor |
| Broadlink | RM4 Pro, HTS2 cable | broadlink | Infrared transmitter for AC unit with temp/humidity sensor |
| Gosund | SP112 | esphome | 3x tuya wifi plugs with power monitoring, flashed with ESPHome |
| Belkin | WeMo | wemo | 2x wifi plugs and 1x motion sensor |
| Nest Mini | cast | Not really used, Google sent me one | |
| Deltaco | SH-P01 | tuya | Cheap wifi plug for balcony LED lights |
| Phoscon | ConBee II | custom | Zigbee USB gateway using zigbee2mqtt |
| Xiaomi | Aqara MCCGQ11LM | mqtt | 3x zigbee door/window contact sensors |
| Apple | TV 4K | apple_tv | 2x set-top-boxes that streams content from Plex |
| Sony | Bravia KDL-55W905A | braviatv | 2013 mid-range 55" 1080p 3D TV |
| Samsung | UE50RU6025KXXC | custom | 2019 low-range 50" 4K HDR TV |
| Sony | PlayStation 5 | custom | Game console - State, sleep and wake |
| Apple | iPhone X | ios | Home Assistant Companion App for iOS |
Note: I do not recommend "Belkin WeMo" or "Deltaco SH-P01"
GitHub Repository https://github.com/matt8707/hass-config
Home Assistant Community Topic https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594