A different take on designing a Lovelace UI

[timoerti (Timo Erdmann)]

Can you show your config for the four room`s in one row? I´m struggling with that.

[Mattias_Persson]

@sam632

Is there a way to use your custom button with the standard Lovelace hold action.

Yeah

- type: custom:button-card
  hold_action:
    action: more-info

@sam632

(as light-entity-card doesn’t seem to have a white channel option)?

It does, or am I missing something?

[Mattias_Persson]

@msymms

How can we programmatically set an icon? I am modifying the battery section in the sidebar to always show battery levels/state. If it is charging, I want to add a ‘lightning’ icon to the front of the line. Ideas?
Or, how do we reference a custom svg. I suppose I could use the mdi icons, but still do not know how to set them in Jinja2/python/holy_grail code.

You can return html with jinja because that goes into button-card (sidebar)

{% if conditions %}
  <svg>...</svg>
{% else %}
  <ha-icon icon="mdi:battery"></ha-icon>
{% endif %}

[Mattias_Persson]

@sde91

Another way to cope with truncated Song text on the Conditional Media Cover could be to make the Text (Artists + Title) scrolling from right to left.

It’s a good idea, but to me that is not critical info

Here’s a half assed test

[Mattias_Persson]

@chezpaul2

By the way @Mattias_Persson the recently added card only shows the last movie added. Did you think of implementing it so that it shows a random of the last 5 each time it’s called, as the plex integration captures the 5 last movies added?

It doesn’t break my plex_recently_added config of max: 1, so why not?

random recently_downloaded poster if more than 1

[Mattias_Persson]

@chezpaul2

I love the footer idea but I don’t want to see more Covid info.

Same, changed it to james webb space telescope

but also added relative time and responsive spacing

change footer covid → jwst

---

https://gist.github.com/matt8707/fbd53ab19bdd8b42385f60c4d388461d

[chezpaul2 (Paul B.)]

Wow, so cool. Might have to do that too.
Thanks for the plex fix.
I just found a new background from this guy
It’s in his www/ui/musica folder.
How cool is this??!!

[chezpaul2 (Paul B.)]

Ah man, you are cheating though. I’m not a programmer like you are.
Where should this jwst.py reside?
Can it be on my pi with home assistant and HA can still call it up with the ssh?
I see that it’s in .ssh folder but that’s a hidden folder right?

[keesvanbemmel]

Well first of all, thanks so much @Mattias_Persson for sharing your entire setup! Helps me a great deal!!

Is your docker-compose.yml file available somewhere? I can’t seem to find it

[MrTOffice]

I have a question how to use “card-mod-helper” tools.
I am new to css but after re-engineering your code. I can change some css in custom:button-card.
however I cannot change the css of theme and popup card.
Can you show me the simple one? Such as I want to change the color of “Studio” grid-area.

(BTW: I did see #1285 but still don’t understand.)

I inspect and get from card-mod-helper
“#view>hui-view>grid-layout$#root>hui-grid-card:nth-child(4)$h1”

now I goto lovelace code:

type: grid
title: Studio
style:
  "#view>hui-view>grid-layout$#root>hui-grid-card:nth-child(4)$h1": |
    h1 {
      color: red;
    }

even try to delete try

style:
  "#root>hui-grid-card:nth-child(4)$h1": |
    h1 {
      color: red;
    }

or try something else but the color still be the same.

Could you please guide me out?

Thank you in advance.

[lingpin]

Thanks! I used the input_boolean loader code from older commits, and have it work like I wanted now.

However, I find the interface doesn’t load the animation once the boolean changes but only after refreshing the page or the entity state changes. I made adjustment so it works ok for me now but is this working correctly, or am I missing something?

One more question, I find the ‘locking’ and ‘unlocking’ states display with small letters instead of capital like ‘Locking’. I can’t find any lists for this in the codes, would you know how to fix this?

Thanks a lot for all the effort!! It comes together really nicely with a lot of flexibility.

[sam632]

I don’t get that option for some reason.

[msymms (Mark Symms)]

Thanks. I was looking in the docs yesterday, but just couldn’t find it.

[galahad (Bjorn Willemen)]

I’m completely in love with the template!

I do however run into two issues:

When trying to add a media player with the base template the action:toggle doesn’t play/pause the media player. I can’t seem to fix this without breaking it for other entities. Is there a way to make the base template play/pause as well?

          - type: custom:button-card
            entity: media_player.sonos_woonkamer
            name: Monitorer
            triggers_update: sensor.volume_sonos_woonkamer
            hold_action:
              !include popup/sonos_woonkamer.yaml
            template:
              - base
              - icon_monitors
              - circle
              - loader
            variables:
              circle_input: >
                [[[
                  var entity_id = 'sensor.volume_sonos_woonkamer';
                  return states[entity_id] === undefined ? null : states[entity_id].state;
                ]]]

I’ve also tried filling in the circle_input with my own Sonos volume template sensor, however that doesn’t show in the card either.

sensor:
  - platform: template
    sensors: 
      volume_sonos_woonkamer:
        value_template: '{{ states.media_player.sonos_woonkamer.attributes.volume_level |float * 100 | round(0) }}'  
        friendly_name: 'Volume' 
        unit_of_measurement: '%'

Any tips on how to make this work?

[Mattias_Persson]

@galahad

When trying to add a media player with the base template the action:toggle doesn’t play/pause the media player.

Add a tap action for that button

tap_action:
  action: call-service
  service: media_player.media_play_pause
  service_data:
    entity_id: >
      [[[ return entity.entity_id; ]]]

@galahad

I’ve also tried filling in the circle_input with my own Sonos volume template sensor, however that doesn’t show in the card either.

circle on → consider_on

[Mattias_Persson]

@sam632

I don’t get that option for some reason.

light template add white_value

[Mattias_Persson]

@lingpin

I made adjustment so it works ok for me now but is this working correctly, or am I missing something?

I don’t remember having any issues, I changed to how it works now because it’s easier not having to deal with input booleans

@lingpin

I find the ‘locking’ and ‘unlocking’ states display with small letters instead of capital like ‘Locking’. I can’t find any lists for this in the codes, would you know how to fix this?

This works

state_display: >
  [[[
    if (entity) {
      return entity.state.charAt(0).toUpperCase() + entity.state.slice(1);
    }
  ]]]

But just now realized that css can handle that

state capitalize first letter

[Mattias_Persson]

@MrTOffice

Can you show me the simple one? Such as I want to change the color of “Studio” grid-area.

https://github.com/thomasloven/lovelace-card-mod#styling-cards

NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g. […] grid

---

So you’ll have to wrap it in mod-card or what I do, style from themes.yaml

#################################################
#                                               #
#              GRID CARD HEADINGS               #
#                                               #
#################################################

grid-layout$:
  hui-grid-card:
    $: |
      /* default */
      h1 {
        ...

  hui-grid-card:nth-child(4):
    $: |
      h1 {
        color: red !important;
      }

[Mattias_Persson]

@keesvanbemmel

Is your docker-compose.yml file available somewhere? I can’t seem to find it

https://github.com/matt8707/docker-compose-dsm
https://github.com/matt8707/docker-compose-rpi

(also linked from first post under “hardware”)

[Mattias_Persson]

@chezpaul2

Where should this jwst.py reside?
Can it be on my pi with home assistant and HA can still call it up with the ssh?

The problem is you have to install python module requests-html. So for me moving that script to my rpi was an easy way out. It may also be possible with AppDaemon, but I have zero experience with it.