A different take on designing a Lovelace UI

Mattias_Persson · September 23, 2020, 1:24pm

Yup

#updates entities
triggers_update:
  ['person.hello', 'sensor.phone', 'sensor.watch']

#add as many as you want
custom_fields:
  circle: >
    [[[ phone...
  circle2: >
    [[[ watch...

#and add style for each
styles:
  custom_fields:
    circle:
      [top: 8.5%, left: 56.2%, width: 3.5vw, position: absolute]
    circle2:
      [top: 50%, left: 56.2%, width: 3.5vw, position: absolute]

jdmartinez · September 23, 2020, 1:58pm

Thank you very much!!

Beershaker · September 23, 2020, 6:57pm

thank you very much.

VPC · September 24, 2020, 11:59am

I would like to have a button showing the state of the Home Assistant Alarm. Ideally it shows a large icon for the state then text underneath for the state in words.

Disarmed

Armed Home

etc…

Pushing the button should bring up a view with the alarm panel on it so the user can change it.

Has anyone accomplished this before?

Thanks!

marothe · September 25, 2020, 9:46am

Being only so what proficient in HA - what would be the best starting point to try to achieve this HA look? Any ideas or tips?

Nath · September 25, 2020, 12:37pm

Not sure about button (i use the badge) but for the popup, use browser-mod (which is used in this UI as well, if i’m not mistaken).

Like this

tomerbs · September 26, 2020, 5:18pm

Hi Mattias,

First thanks for sharing your wonderful configuration, it’s really beautiful.
I’m trying to understand how to change the black tv border color in this icon and I will appreciate your help:
This is the icon:

and this is the SVG code:

 icon_tv: >
    [[[ const state = entity.state === 'on' ? 'animate' : null;
    const style = '<style>@keyframes animate_on{from{transform: scaleY(0);}to{transform: scaleY(1);}}.animate_on{animation: animate_on 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}@keyframes animate_off{from{transform: scaleY(1);}to{transform: scaleY(0);}}.animate_off{animation: animate_off 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}</style>';
    const path = '<path d="M46 9.2v27.5H4.1V9.2H46m2.4-2.4H1.6v32.3h46.7c.1 0 .1-32.3.1-32.3zM11.9 43.2h26.3c.6 0 1.1-.4 1.1-1v-.3c0-.6-.4-1.1-1-1.1H11.9c-.6 0-1.1.4-1.1 1v.3a1.11 1.11 0 0 0 1.1 1.1z"/>';
    const gradient = '<linearGradient id="A" gradientUnits="userSpaceOnUse" x1="5.401" y1="34.714" x2="43.817" y2="11.74"><stop offset="0" stop-color="var(--paper-listbox-color)"/><stop offset="1" stop-color="var(--paper-listbox-color)"/></linearGradient>';
    if (entity.state === 'off') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path class="animate_off" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
    if (entity.state === 'on') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="#20262890"/><path class="animate_on" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
    if (entity.state === 'on') { return `<svg viewBox="0 0 50 50"> ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
    else if (entity.state==='off') { return `<svg viewBox="0 0 50 50"> ${path} </svg>`; } ]]]

PMoura71 · September 27, 2020, 10:39am

Great Job, lovely look!
for a newbie ist dificult to start like this but i hope very soon make this my default UI.
Thanks for sharing
PM

Mattias_Persson · September 28, 2020, 12:26am

const path = '<path fill="red"...

Jason_hill · September 28, 2020, 1:21pm

Hi Matt. When i work on my picture element in full screen on my pc the layout is not identical to the one showing on my display screen powered by rpi4! How do i align these two? my issue is with the height. The components needs to be placed lower when i look on the display screen. I have same resolution set at 1920x1080p. The screen sizes are 21" for the display and my pc i am working on 23". Hope you understand my issue and can assist me.

Mattias_Persson · September 28, 2020, 2:50pm

Are both screens in kiosk mode?

Jason_hill · September 28, 2020, 4:27pm

yes. Just to be clear on the definition. HA is shown in a full window without the browser showing (F11). Both is using chrome /Chromium.

Mattias_Persson · September 28, 2020, 4:43pm

I mean kiosk mode in custom header. If you have the HA sidebar/header enabled on one screen and not the other that might affect the position

Jason_hill · September 28, 2020, 5:15pm

They are on both screens. both header and sidebar.

soylant · September 28, 2020, 5:34pm

hi could you please share

Jason_hill · September 28, 2020, 5:51pm

Right now i am only using compact_mode in custom header

tomerbs · September 29, 2020, 3:12am

Thanks a lot!

olegosipenko87 · September 29, 2020, 5:38am

Hi.
I am using “custom: layout-card”, namely -break. Here’s what happens:

How to fix it ?
HA 0.115.3

Martin_Pejstrup · September 29, 2020, 12:32pm

No, of course not
When you say name template, you mean? Help me here.

I’ll try to see if I can find what I’ve changed.

xADDRx · September 29, 2020, 9:18pm

Hi Mattias,

i use your wonderful design on Apple Ipad and I wanted to ask if you can help me with the ui sound.

I would like it to be like yours, so that when I turn on the light there is a click sound.

Can you help me please?