Version: 2021.5
Operating System: 5.13
Hass.io installed on a Raspberry Pi 3 Model B+ and running on a wall mounted tablet (lenovo M10) displaying Home Assistant Fully Kiosk Browser (chrome).
- Dynamic 3D Floorplan: Hue and Brightness mapped individual lights with custom popup controller.
- Dynamic floorplan view, adjusts brightness based on calculated brightness of the sun
- Less cluttered interface displaying more information on a long press, inspired by Mattias Persson.
- Custom rain card to display predicted rain in the next 2 hours - seperate repo here
- Custom Xiaomi View for rapid room based zone cleanup
This approach is heavily based on the Picture Elements Card for each view, and does not work in a traditional "Card" based way. Most cards include a heavy amount of styling and positioning. Some of this styling overrides the custom cards to use View Width so that their fonts, widths and heights scale according to the width of the display, so that I can use my interface on any resolution.
I first designed my whole UI in Pixelmator so that I could export the button images and Xiaomi floorplan overlay images.
The image transparent.png is used on state_image picture-elements to hide elements if not needed, though this was used before I realised I could conditionally display elements :) - will update this soon to clean it up.
This config is not the simplest config to copy and paste. If you try to run my exact config you will have issues until you replace all mentions of my light instances (and other entities) with your own. The floorplan views for example, relies on custom-config-template.js which will throw errors if you try to access light entities that aren't in your system. I recommend at least replacing all light entities with some of your own to start with, then customizing the view for each of your own.
Knowing a bit of CSS will help here too. Because the config is picture-elements based, each card is styled heavily with CSS. If something doesnt appear right, its probably to do with CSS. Note: Only the floorplan view is designed to scale with resolution, other views may look funky on different sized screens.
Note, the sidebar is repeated across every view in the lovelace.yaml file and includes buttons for the views.
- Control Rooms: Tap a room to turn on or off all lights, hold tap to show custom controls.
- Control Lights: Tap a light icon to turn on or off individual lights, hold tap to show custom controls.
- Cleanup: Direct control of Xiaomi Mi robot and preset zones for room based cleanup
- All Devices: Show all devices in a familiar homekit UI, why not?
- Media: Button shows currently playing media, if playing, view shows relevant views for Plex or Spotify.
- Weather: Shows weather forecast and predicted rain from Buienradar.
- Xgimi H1 PROJECTOR
- Sound system (controlled by an IR Blaster)
- Philips Hue Bulbs
- Osram Garden Poles (used for roof, outdoors)
- Xiaomi Mi Robot
- Philips motion sensors
Config Template Card:
This approach relies on config-template-card. The picture elements card is wrapped inside a config-template-card. All entites used are listed on the config card so that they can be passed to the templates used in CSS. To understand why, check: https://github.com/iantrich/config-template-card
Individual Lights:
To have multiple lights overlayed on top of each other, the solution is actually pretty simple. You render an image for each individual light and use the CSS property filter mix-blend-mode: lighten. This will make sure only the “light” part of the image is shown, and will blend together any amount of images on top.
Hue and Opacity:
To map one of your light images to the actual live RGB color of the bulb, you can use the following CSS template style which will adjust the hue rotation to the hue of the bulb (in this case, light.table):
style:
filter: '${ "hue-rotate(" + (states[''light.table''].attributes.hs_color ? states[''light.table''].attributes.hs_color[0] : 0) + "deg)"}'OR, include saturation (I found it buggy):
style:
filter: '${ "hue-rotate(" + (states[''light.table''].attributes.hs_color ? states[''light.table''].attributes.hs_color[0] : 0) + "deg) saturate(" + (states[''light.table''].attributes.hs_color ? states[''light.table''].attributes.hs_color[1] : 100)+ "%)"}'To map opacity to the entity’s brightness, use this css template:
style:
opacity: '${ states[''light.table''].attributes.brightness / 255 }'This is a custom screen made up of picture-elements that interact with the xiaomi robot vacuum component. An input text is used to determine the vacuums current state (cleaning, returning home etc) and that is used to conditionally change the picture-elements.
I built a custom card to display projected rain in the next 2 hours, using Buien Radar (Netherlands service). For more on this card, check out this repo
