A different take on designing a Lovelace UI

[Mattias_Persson]

@henk86

1. the upper value is the outside temperature. how can I add the HA icon mdi:thermometer before this value?

This is the easiest way Template literals (Template strings) - JavaScript | MDN

[[[ return `<ha-icon icon="mdi:thermometer" style="width:20%;"></ha-icon> ${states['sensor.netatmo_mein_haus_innen_temperature'].state}`; ]]]

@henk86

2. how can I add the decimal place, so that I have -1.0?

toLocaleString seems to be working

[[[ return `${parseFloat(states['sensor.netatmo_mein_haus_innen_humidity'].state).toLocaleString("en",{useGrouping: false,minimumFractionDigits: 1})}`; ]]]

@henk86

3. how can I add °C after the value?

With template literals just add the string

[[[ return `${states['sensor.netatmo_mein_haus_innen_temperature'].state} °C`; ]]]

@henk86

4. is it possible to replace the bulb with the HA icon mdi:thermometer?

Yes, add icon style too if you want to fine tune size/position

icon: >
  <ha-icon icon="mdi:thermometer" style="width:100%;"></ha-icon>

template:
  - base

[Mattias_Persson]

@mkhattab

(highlighted in yellow) … (highlighted in red)

Did you forget to upload a screenshot? I don’t see anything

[mkhattab (Pharaohnough)]

Oops

[Mattias_Persson]

You can try to set every grid card to square: false

https://www.home-assistant.io/lovelace/grid/#square

[mkhattab (Pharaohnough)]

That finally did it!
Thanks again

[lingpin]

Yes, the loader works. However in my case, I first tap the ‘locked’ lock and the loader animation starts. When the status of the lock changed to ‘unlocking’ from ‘locked’ the animation stops, and the status of the lock will be changed to ‘unlocked’ in some time (without animation).

Is it possible to extend / reactivate the loader animation during ‘unlocking’ (changed from ‘locked’) and stops when it finally changed to ‘unlocked’? Thanks!

[chezpaul2 (Paul B.)]

While playing spotify, how do I change it to say the name of artist above the title of song instead of name of Spotify instance?

Also, isn’t there supposed to be a play pause button somewhere in there?

[chezpaul2 (Paul B.)]

Release 2021.12.6 - December 27

Does this mean our customize.yaml won’t work anymore with this update?

[msymms (Mark Symms)]

Thank you.

[MrTOffice]

Sorry for late response, I change card type from under “SIDEBAR” from

• type: vertial-stack
  to

• type: custom:grid-layout
  and set up “grid-template-areas” inside “Sidebar”

  #################################################
  #                                               #
  #                    SIDEBAR                    #
  #                                               #
  #################################################
  
  - type: vertical-stack
    view_layout:
      grid-area: sidebar

[Mattias_Persson]

@chezpaul2

Does this mean our customize.yaml won’t work anymore with this update?

Nope, second sentence “The YAML configuration remains available”

[Mattias_Persson]

@chezpaul2

While playing spotify, how do I change it to say the name of artist above the title of song instead of name of Spotify instance?

How about this?

add media_artist to conditional_media if available

@chezpaul2

Also, isn’t there supposed to be a play pause button somewhere in there?

Yes, if you click on the artwork

[Mattias_Persson]

@lingpin

Is it possible to extend / reactivate the loader animation during ‘unlocking’ (changed from ‘locked’) and stops when it finally changed to ‘unlocked’?

You can tie the loader visibility to an input_boolean and automate the input input_boolean state based on your conditions because how it works right now is “on click activate loader until state change”

[msymms (Mark Symms)]

Matte,
Thank you for staying active on this thread.

[Ranur (Runar)]

@Mattias_Persson Once again, great work! I am looking to include other enities, such as alarm system into my setup and wonder about the Icons. I guss I’d start off with copying the existing button templates and the corresponding icon, change name to eg. alarm, but then what. How do I get the icons in place? Are the svg’s kept locally or how does it work?

[Mattias_Persson]

icons are in button_card_templates.yaml
https://github.com/matt8707/hass-config/blob/cde480d1613e7b1363f5ec66d39a064b4e6b31a7/button_card_templates.yaml#L1020-L1024

more info
https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/264

[msymms (Mark Symms)]

How can I perform a calculation on an entity? I want to display sensor.memory_use as a percentage of the total memory. This is part of my mods to the sidebar_information popup. Something like sensor.memory_use / 16000.

 - entity: sensor.memory_use
     name: Memory Free - 16Gb
     tap_action:
     action: call-service
     service: homeassistant.update_entity
     service_data:
     entity_id: sensor.memory_use 

[Mattias_Persson]

Unfortunately you have to create a new template sensor
https://www.home-assistant.io/integrations/template/

Here’s an example

matt8707/hass-config/blob/cde480d1613e7b1363f5ec66d39a064b4e6b31a7/include/template.yaml#L491-L497

[Crow]

There is another way System Monitor

sensor:

• platform: systemmonitor
  resources:
  • type: memory_use_percent

[msymms (Mark Symms)]

Thanks. I should have looked further. An example is what I was looking for.