A different take on designing a Lovelace UI

Share your Projects!
556

Hey @Mattias_Persson, can u post the config of the sensor.placeholder here? i`m stucked on this.

557

UPDATE
Tried again, was just unable to see it.
2020-09-20_09h55_58

Wuhuu, I hope? Didn’t manage to integrate it into the circle?

Hi again

No error messages. Just doesn’t appear?

I unsure what to do with that? Remove all custom field config and replace with, doesn’t help in either 3 cases:

Blockquote
name: >
[[[ return states[‘sensor.cover_position_gang’].state; ]]]

Sorry but here I’m really not that experienced :slight_smile:

558

For all who are interested, here’s my lovelace config:
https://mega.nz/file/zSB2jKjZ#XULaa_Mg3j76uQBnPcj-t7iL8CHKIDyoJM_wE9uH_dc

@martheijnen @Beershaker @florisi

3 Likes
559

no one really asked?

560 
        - service: browser_mod.popup
          service_data:
          entities: 
            - light.bed_light
            - light.kitchen_lights
            - light.ceiling_lights
          deviceID:
            - d6416720-bbb8badf

doesnt work? do i need a picture element to call this or something?

how do i get a light botton to popup for the lights i want to turn on?


        - type: 'custom:button-card'
          name: 'Tänd lampan'
          tap_action:
561

no one really asked?

Actually some did.

doesnt work?

your example leaves out things in my example

There’s also the 🔹 Browser_mod - turn your browser into a controllable device, and a media_player thread.

1 Like
562 
    - type: 'custom:button-card'
      name: 'Lights'
      tap_action:
        service: browser_mod.popup
        service_data:
        entities: 
          - light.bed_light
          - light.kitchen_lights
          - light.ceiling_lights
        deviceID:
          - d6416720-bbb8badf
563 
sensor:

...

  - platform: template
    sensors:

    ...

      placeholder:
        value_template: ' '

You can search repos
https://github.com/matt8707/hass-config/search?l=YAML&q=placeholder

564

If I add the name template to my config it looks like this.

temp
You’ve changed something, and you don’t know, I certainly don’t :stuck_out_tongue:

565

Wow, Thanks. Sorry about that, i have searched before and somehow didn’t show anything. Anyway thaks man.

566

@Mattias_Persson, another question. Did you use a temporary token on your plex recently added or a developer token? its seens the temporary token can be valid for some hour or years depend on the case.

567

I followed the three steps

I’ve never had to update it

568

@Mattias_Persson First of all, thank you very much for sharing your config, it has been very very inspring.

I’m changing my mobile UI and, with your permission, I’ve borrowed some of your ideas, specifically the SVG generation for the states.

I’ve got a question about that: how can I reuse SVG generation to include multiple states in a button-card?

Example: a button-card for presence detection that includes charging level and state for multiple devices. Something like that:

IMG_8220

Thank you very much.

1 Like
569

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]
1 Like
570

Thank you very much!!

571

thank you very much.

:heart_eyes:

572

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.

image
Disarmed

image
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!

1 Like
573

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?

574

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

575

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:

tv

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>`; } ]]]