PhantasWeng / hass-config

A different take on designing a Lovelace UI

Home Page:https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Home Assistant Configuration

Home Assistant Core in docker on a Synology DiskStation DS918+. My use case is a wall mounted tablet [Samsung 10.1"] displaying Home Assistant in Fully Kiosk Browser and on desktop using applicationize (chrome). 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!

screenshot

Features

animations

The sidebar

Markdown Card inside a Picture Elements Card to create dynamic templates.

  • Time and date with greeting based on time of day
  • Lights and switches that are on, using natural language
  • Temperature with emoji based on weather conditions
  • Important calendar information
  • Other conditional alerts

Sidebar footer

The three icons at the bottom in order

info

Media

Conditionally displaying media player controls based on last active device such as Apple TV, Playstation 4, Google Nest Mini. If nothing is active for 15 minutes then a poster of last downloaded movie/episode is shown (Radarr/Sonarr). Swipe to reveal other than last active media players.

media

Lights and sensors

All Philips Hue lights with sensors in hallway, bathroom and walk-in closet.

  • Injecting current lamp color to only parts of an icon
  • Vertical dimmer for touch
  • Brightness in a dynamic circle

light


Switches

info_light


Custom icons

I made some custom icons located in www/custom_icons.js. If you want to make your own I recommend reading the material design principles.

custom_icons

Misc

vacuum

misc

tracker


Home Assistant Community Topic
https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594

About

A different take on designing a Lovelace UI

https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594


Languages

Language:JavaScript 79.0%Language:Python 20.7%Language:CSS 0.3%