A different take on designing a Lovelace UI

Mattias_Persson · March 4, 2021, 1:38pm

Yup, I have fixed it, I’ll push today/tomorrow.

chanders · March 4, 2021, 1:50pm

Nice setup. What did you use to develop the room plan view?

martheijnen · March 4, 2021, 1:50pm

Sweet home 3d and a html image placing tool.

spudje · March 4, 2021, 2:08pm

Thanks! I have posted a version of it already somewhere in this thread A different take on designing a Lovelace UI

spudje · March 4, 2021, 2:17pm

Given all the changes and me not yet having upgraded browser_mod, I fear it makes more sense to start over than continue fixing my solution and deviating more and more from where @Mattias_Persson is going with this

martheijnen · March 4, 2021, 9:08pm

It’s not that complex if you just search for deviceid this and start from there. Just did it this afternoon. Only the more info screen is left for me but still working now. @spudje

slofii · March 5, 2021, 6:09am

Not all Heroes wear capes.
Thanks, It was so simple.

elyisum · March 5, 2021, 4:23pm

Hey @Mattias_Persson
I have two problems after the last update :
The titles are small in the main screen
In the sidebar, the background image is in the middle of the area and the icons are small too

Maybe I miss something but I don’t know why. Thanks for your help !

CSS seems not to be applied

slofii · March 5, 2021, 4:32pm

Wow, this is great, thanks!

Is it possible to color the flame only when my climate is on?
Nad can I show the temperature from an other sensor?

Jason_hill · March 6, 2021, 6:41am

Hi Mat. How can i get the popup card to open at a specific location so i doesnt allways open center on the screen.

Thanks for your create contribution.

Mattias_Persson · March 6, 2021, 2:28pm

action: fire-dom-event
browser_mod:
  command: popup
  style:
    $: |
      .mdc-dialog__surface {
        left: -80%;
      }

Mattias_Persson · March 6, 2021, 2:32pm

also seeing this from time to time, I’ve reverted the changes

Edit:

ditch anchors

Jason_hill · March 7, 2021, 12:20pm

Thanks for it. Where did you find that CSS code? I normally use this webpage but could not find it here.https://www.w3schools.com/css/default.asp

Jason_hill · March 7, 2021, 12:59pm

Thanks. and how to do up and down since those names doesnt work?

Mattias_Persson · March 7, 2021, 1:02pm

https://developer.mozilla.org/en-US/docs/Web/CSS/position

andrew47 · March 7, 2021, 1:54pm

What is the problem with this?
Can’t figured out?

          - type: state-label
            entity: sensor.placeholder
            attribute: Lampen
            style:
              top: 9.15%
              left: 25.4%


<hui-warning-element label = "Lamps not available in: sensor.placeholder"> </hui-warning-element>

Knipsel

Mattias_Persson · March 7, 2021, 2:00pm

github.com

matt8707/hass-config/blob/c9dd19e04bd4fde2322e610a42f4e246b58ee19a/include/sensor.yaml#L390


        <ha-icon icon="mdi:grave-stone"></ha-icon> <b>{{ total[2] }}</b> avlidna{{ break -}}
        <ha-icon icon="mdi:map-marker-radius"></ha-icon> <b>{{ data | regex_findall_index('Skåne[^,]*?(\d+)') }}</b> fall i Skåne
        </font>
      {% endif %}

public_ip:
  value_template: !secret public_ip

placeholder:
  value_template: ' '
  attribute_templates:
    vardagsrum: Vardagsrum
    studio: Studio
    sovrum: Sovrum
    media: Media
    ovrigt: Övrigt
    hemma: Hemma

dockermon_mem:
  friendly_name: Minne
  icon_template: mdi:memory

andrew47 · March 7, 2021, 4:40pm

Thanks, that is what I missed.

henrikrox · March 8, 2021, 12:14pm

Whats the best procedure of going about replacing my lovelace ui with this marvelous stuff?

I know coding, but i dont how to tackle it.

elyisum · March 8, 2021, 1:42pm

Hi @henrikrox
I started with ui-lovelace.yaml by adding my elements one after the others
First the sidebar : meteo, information messages, icons / popup
Then the main content

I picked the necessary code as I needed it