lukevink / hass-config-lajv

Home Assistant Configuration

Home Assistant Configuration

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).

Video of Full UI

Features

• 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

Approach & Picture-Elements Styling

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.

Beginners warning

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.

The sidebar

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.

Hardware in my Home

• 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

Individual hue & brightness lights

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 }'

Cleanup

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.

Weather

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

hass-config-lajv's Issues

Hello, could you help me settings your config?

I don't know why, i have blank white screen on first two lovelace tab. Maybe we could talk via telegram/discord/whatsapp/email. Up to you.

Problem with state_icon. state_label

Hi very strange problem, if I want to use a state icon and/or state label then nothing happens, in my previous floorplan, entity card you can see the updates but not on the version I build from your example, so probable something related to this?

Any idea what I do wrong here?

Using everywhere the same code

          - entity: binary_sensor.window_door_sensor
            style:
              left: 19%
              top: 35%
              '--iron-icon-height': 50px
              '--iron-icon-width': 50px
              '--paper-item-icon-active-color': red
            tap_action:
              action: none
            type: state-icon

A short video that makes thing more clear I hope?

https://dmertens.stackstorage.com/s/YT9cPfv5axFm1sa

Thanks!

Get in Touch

Hello there,

Would it be possible to get in touch with you for some questions about this project on Discord?

My username is dotcom87

Kind regards and thanks in advance!

please help me

sorry, new in home assistant please let me know ho i can install it? i have Hass installed so i can add scripts from git hub please help me, may be its video how to do it or what i need to do first to get same result?

Height not responsive adding a scrollbar

Hi There,

i implemented the dashboard with succes. however the height is not responsive. it gives me on every device a scrollbarr so the height is not limited to the screen. could you tell me what i have to do to get this working? the width is working correctly.

Can be this Lovelace responsive?

Can be this Lovelace responsive in order to use it also n a little phone display?
Thanks

Date incorrect format

Hi all,

I have this setup in my sensor.yaml:

day:
  value_template: >
    {% set days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] %}
    {{ strptime(states('sensor.date'), '%Y-%m-%d').day }}
    {{ days[now().weekday()] }}
month:
  value_template: >
    {% set months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] %}
    {{ strptime(states('sensor.date'), '%Y-%m-%d').day }}
    {{ months[now().month-1] }}
date_string:
  friendly_name: "Full Date"
  value_template: "{{ states('sensor.day') }}, {{ states('sensor.month') }} {{ now().year }}"

And in my ui-lovelace.yaml I have this:

        - entity: sensor.time
          hold_action:
            action: none
          style:
            color: 'rgba(255, 255, 255, 0.7)'
            font-size: 5.41vw
            font-weight: 200
            left: 2.7%
            letter-spacing: '-0.05vw'
            max-width: 1px
            top: 10%
          tap_action:
            action: none
          type: state-label
        - entity: sensor.date_string
          hold_action:
            action: none
          style:
            color: 'rgba(255, 255, 255, 0.3)'
            font-size: 1.3vw
            font-weight: 300
            left: 18.1%
            letter-spacing: '-0.05vw'
            text-align: left
            top: 17%
            width: 30%
          tap_action:
            action: none
          type: state-label

But when opening my dashboard I see the day numer on front of the actual day:

How can I get rid of that?

mini-graph-card causing errors

Hey Luke,

I'm trying to implement this on my own Hassio... obviously have changed a number of the entities to match my own, but am having this problem on the main sidebar:

Cannot assign to read only property '0' of object '[object Array]'
color_thresholds:
  - color: '#4dd2ff'
    value: 10
  - color: '#ffa31a'
    value: 15
  - color: '#ff1a1a'
    value: 20
entities:
  - sensor.dark_sky_temperature
icon: 'mdi:home-thermometer-outline'
show:
  icon: true
  legend: false
  name: false
style: |
  :host {
    left: 11.6%;
    top:  92.9%;
    width: 23.5%;
    overflow: hidden;
    height: 15%;
    background: none  !important;
    box-shadow: none !important;
  }
  .header {
    font-size: 1vw;
    position: absolute !important;
    width: 5% !important;

All Devices View missing and old Hass Version

Hey lukevink,
thank you for your amazing work. I managed to setup a lot of your config and adapted it.
In your pictures/videos there is an "all devices" view which i cannot see in the config. Would you be able to share it.

Further the configuration is quite a little bit old. Do you still use it and can update your config for the newest homeassistant version?

Core version 0.108.9

hello, have you tried with the Hass Core version 0.109, does it work?

help floorplan

Hi, I'm looking at your big project, very nice. I would like to ask you for some information if you do not disturb.tu to create the page with the floorplan and the menu on the left, as you can see in the video, did you only create a picture element and put everything inside it?
I did something similar using a picture element but, when I go to see it on a smartphone, I see the floorplan in the right size and the giant icons. same problem on the pc, if I go to the floorplan page and I zoom the icons become igganti and overhang the floorplan. what do you need to use as code to keep the size of icons and floorplans proportionate in the same way? another user created a custom card by making a vertical stack card with two picture elements. one with the floorplan and another picture element with the menu. in this way the icons do not go on the floorplan even if looking at it on another device such as smartphone the icons become giants.
if you can help me you do me a big favor. in case you want to watch my yaml i send it to you.

I am not very experienced don't laugh looking at the code I sent you :-)
floorplan.zip

Hi there, not a noob but still new. Not sure how to approach this.

Hi there, I recently started home assistant as a hobby about a month ago and am doing fine. I however don't know how to go about doing a project like this as I don't know where to start as in what to copy and how to implement this. Thank you for your patience

Hi, How did you do day/night

PSDs

Hey Mate,
Love what you have done.
Any chance you can supple the PSD's for the sidebar buttons and person circles?
Trying to keep the same look and feel. :-)

"Flicker" on card since HA Core update to 2022.11.1

So I, as I'm sure many of you have updated to HA Core 2022.11.1. As soon as I did so, I noticed a "flicker" on my floor-plan card. I was told by someone after I reported it as a bug, that is has to do with the Config-Template-Card refreshing as entity states are changed - only I hadn't changed and entity states. It was a flicker that just went every couple of seconds no matter what was going on. It only manifested after the core update. Please see attached video capture to see the effect.

Has anyone else noticed this? if so, what is the remedy?

My temporary fix was to downgrade the Core to 2022.10.5, so it is at least usable and doesn't manifest the undesired effect. I admit though, this is a temporary fix.

Any input is appreciated.

Screen.Recording.2022-11-05.at.7.51.02.PM.mov

Attempting an opacity tweak

Hello and thank you for posting this config!

I'm having an issue where if the light is dimmed below about 5% it isn't visible on my elements card.

looking at:

opacity: >-
  ${states['light.picture_window'].state === 'on' ?
  (states['light.picture_window'].attributes.brightness / 255) : '0'

How can I add an if/else statement to say, "if the state === on, and (states.[].attributes.brightness / 255) is less than 10%, make opacity 10%, else use (states.[].attributes.brightness / 255) : '0'?"

cheers

error load first pafe first time

hello, congratulations for the wonderful project, I'm trying to implement it, almost everything works for me, the only thing I don't understand is the first time when I load the page on the hassio browser, it gives me this error:

then if I go to the second page and return to the first everything works

Refresh issues?

Hi,

I got your config more or less working, but got some strange issues, maybe you can give me an idea what I'm doing wrong here?

• I have the same error as reported here: #5 Fixed with the help of @brux88

• When I click on a light bulb the light goes on, but when I click again nothing happens?

• When I click on the light then this is not visible in the plan, when I refresh it works

I'm not at developer so probably my stupid mistake but any help is very appreciated to get it working, thanks!

Short video to make the above a little more clear I hope ;-)

https://dmertens.stackstorage.com/s/ujdeR00KjDgArMt

Supervisor: Version | 220
HassOS: Version: | HassOS 3.13
HA: Version | 0.109.3

Thanks!

Kind regards,

Danny

Hue/Color not working

Hey,

thanks for the great input and inspiration. Built also an 3D Floor Plan, but it seems that the hue reflection within the Plan is not working anymore. All lights are white. :-(

Any idea?

- type: image entity: light.hue_lightstrip_plus_1 tap_action: none hold_action: none state_image: 'on': https://i.imgur.com/5qy7fGd.png 'off': https://i.imgur.com/UC5LV2J.png unavailable: /local/first_floor_kitchen_lights_off.png style: filter: >- ${ "hue-rotate(" + (states['light.led_leiste_2'].attributes.hs_color ? states['light.led_leiste_2'].attributes.hs_color[0] : 0) + "deg)"} top: 50% left: 50% width: 100% mix-blend-mode: lighten background-color: rgba(255, 255, 255, 0.3)

All Devices : Cannot add property useTemperature, object is not extensible

Hey Luke, I really love your dashboards... and I'm trying to duplicate using your code.

Obviously, I wanted to start by slotting in my devices, and then customising once I have everything working well.

On the All Devices pages (lovelace/1) I get a big red error screen

Cannot add property useTemperature, object is not extensible
enableColumns: true
popup:
  brightnessHeight: 350px
  brightnessWidth: 130px
  scenesInARow: 2
  switchHeight: 300px
  switchWidth: 110px
  type: 'custom:light-popup-card'
rows:
  - columns:
      - column: 1
        entities:
          - entities:
              - entity: light.olivia_light
                icon: 'mdi:ceiling-light'
              - entity: light.dollhouse
              - entity: light.olivia_lamp
                icon: 'mdi:lamp'
            title: Olivia
        tileOnRow: 2
      - column: 3
        entities:
          - entities:
              - entity: light.bedroom_light_1
                icon: 'mdi:desk-lamp'
              - entity: light.bedroom_light_1
                icon: 'mdi:ceiling-light'
            title: Bedroom
        tileOnRow: 1
      - column: 3
        entities:
          - entities:
              - entity: light.office_light_1
                icon: 'mdi:ceiling-light'
              - entity: light.office_lamp
                icon: 'mdi:coach-lamp'
            title: Office
        tileOnRow: 1
      - column: 4
        entities:
          - entities:
              - entity: light.downstairs_hallway_light
                icon: 'mdi:track-light'
            title: Downstairs Hallway
        tileOnRow: 1
    row: 1
  - columns:
      - column: 1
        entities:
          - entities:
              - entity: light.kitchen_phoenix_1
              - entity: light.kitchen_phoenix_2
              - entity: light.kitchen_phoenix_3
              - entity: light.kitchen_phoenix_4
            title: Kitchen
        tileOnRow: 2
      - column: 2
        entities:
          - entities:
              - entity: light.back_door
                icon: 'mdi:lava-lamp'
              - entity: light.french_doors_1
                icon: 'mdi:lava-lamp'
            title: Roof
        tileOnRow: 1
      - column: 3
        entities:
          - entities:
              - entity: binary_sensor.downstairs_hallway_sensor_motion
                icon: 'mdi:walk'
            title: Motion
        tileOnRow: 1
      - column: 4
        entities:
          - entities:
              - entity: group.all_lights
                icon: 'mdi:home'
            title: All Lights
        tileOnRow: 1
    row: 2
statePositionTop: true
style:
  height: 87%
  left: 62%
  top: 50%
  width: 68%
type: 'custom:homekit-card'

Upcoming media card CSS config

Hey Luke! Thanks for sharing your config. I'm up and running with 1 exception - my upcoming media card has titles overlapping and falling off the screen, kinda like this:

Since there isn't much configured in the card, it feels like there is some CSS that's not being applied, possibly some of these entries:
https://github.com/lukevink/hass-config-lajv/blob/master/ui-lovelace.yaml#L4686
Any advice? Thanks!

Weather Card

Hey @lukevink ,
What weather card is being used on the weather tab? I know you are using your custom rain forecast card, but I mean for the weather forecast. Your config references that it is in HACS, but I can't seem to find it.

Can you please point me in the right direction?

Thanks.

Xiaomi fan setup

HI! For christmas I tried to replicate your xiaomi setup in my home assistant setup but i've notice that in the fan section are missed the first "/":

state_image: 38: local/ui/cleanUp/btns/fan_1.png 60: local/ui/cleanUp/btns/fan_1.png 75: local/ui/cleanUp/btns/fan_1_selected.png 100: local/ui/cleanUp/btns/fan_1.png
instead:
state_image: 38: /local/ui/cleanUp/btns/fan_1.png 60: /local/ui/cleanUp/btns/fan_1.png 75: /local/ui/cleanUp/btns/fan_1_selected.png 100: /local/ui/cleanUp/btns/fan_1.png
More over the fan setup is changed by xiaomy in 101,102,103,104.

I make this changes and the fan setup is working but i don't see any icon only four broken images!!

Why? Can you explain me please?
Thanks a lot!

Button-card template 'color_light' is missing!

Hi lukevink, amazing work! I've tried to recreate some parts from your config, however it seems that the color_light template in button_card_templates.yaml is missing, could you please update it, or point where this template is located.

Thank you very much

left, top and width

Tell me please
how did you calculate these values ​​so accurately?

left, top and width

        - action: none
          entity: binary_sensor.bathroom
          image: /local/ui/floorplan/lights/bathroom.png
          state_filter:
            'off': opacity(0%)
            'on': opacity(100%)
            unknown: opacity(0%)
          style:
            left: 76.85%
            top: 78.2%
            width: 46.1328125%
            mix-blend-mode: lighten
          tap_action:
            action: none
          type: image

Font type on sidebar images

Hi Luke, what font did you used on the sidebare buttons?

psd file

I really like your work.

Is it possible to get the psd of your picture and your wife's? I want to prepare in the same structure.

Does the card "cleaningStatusLive.png" have a function?

Hi Luke,
First of all I think your design and implementation is excellent.
It's fun to dive into your thinking and adopt parts of it.
In this context, I wanted to ask you if the map "cleaningStatusLive.png" has a function.
In your lovelace file I don't find any hint that data or information is displayed in this map.
Did I miss something?

Missing some Items

Hey, hope you dont mind ive stolen some of your dashboard, but i'm struggeling to get this out of the corner, Any ideas?