Need help with hass-config?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

matt8707
2.5K Stars 382 Forks 779 Commits 2 Opened issues

Description

A different take on designing a Lovelace UI

Services available

!
?

Need anything else?

Contributors list

# 35,894
JavaScr...
Python
Shell
homeass...
646 commits
# 418,771
JavaScr...
CSS
grid-la...
Node.js
1 commit

Home Assistant Configuration

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 :star2: my repo!

screenshot

Installation

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 :tada:

Features

animations

Sidebar

  • 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

Sidebar footer

  • 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

Popups

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

light

Media

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

media

Theme

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/

media

Screenshots

| imac_light
iMac and Light | information
Information | vacuum
Vacuum | |:---:|:---:|:---:| | misc
Misc | person_updates
Person and Updates | custom_icons
www/custom_icons.js |

Hardware

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
Google 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.