Home Assistant Container on a Synology DiskStation DS918+ NAS. Use cases are a Galaxy Tab A 10.1 (wall mounted) tablet with Fully Kiosk Browser and homeassistant-desktop on macOS. My configuration is exposed to HomeKit with Apple TV acting as a hub for remote connection. I also support Nabu Casa.
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?
This post explains how to get started 🎉
- Lovelace UI using custom button-card and layout-card
- Portrait, landscape and mobile view - responsive_demo.mp4
- 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
- Geofenced bus departures
- Important calendar information
- Other conditional alerts
- Vacuum - card to control robot vacuum, with a live map
- Information - monitor Home Assistant, tablet and NAS
- Updates - lists Home Assistant release notes and HACS updates
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 light-popup-card and light-entity-card
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/
 iMac and Light |
 Information |
 Vacuum |
|---|---|---|
 Misc |
 Person and Updates |
 www/custom_icons.js |
click to expand
| 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 |
| Raspberry | Pi 3 Model B+ | shell_command | Bluetooth communication - matt8707/docker-compose-rpi |
| 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 |
| SwitchBot | SwitchBot Bot | custom | Bluetooth device that mechanically turns on my 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 #ps5 thread |
| 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent