A different take on designing a Lovelace UI

Share your Projects!
2923

Hi there!
Quick one, please.
but first: great work from Matt and the community: I am “playing” with this design since few weeks now !

I’d like to finalise the theme customisation here, changing the buttons background / active colors.
it’s all good for “normal” buttons, but i can’t find where to edit the on/off background for swipe cards ?

fore-background_colors

1 - I’d like to edit the background of the first card (“Spotify” here), when it’s inactive.
2 - as well as the background of buttons in the 2nd (“slided”) card, according to what you see above, ie: “Wall” (ex of state=off) and “Table” (ex of state=on) buttons

Can you help me pointing which settings must be edited? (and from which file), if it can be.

2924

Info on the gyroscope option for us android users? Sounds neat

2925

Hi, thanks for this great inspiration!

I’m trying to add my ESPresense location within the current Home cards using auto-entities but I’m not able to figure it out. I am able to create a new card with the required data (below) but I would like to embed only the ESPresense room for example ‘office’ under my name. Hoping for some suggestions.

          - type: custom:auto-entities
            card:
              title: Location
              type: entities
            filter:
              include:
                - state: office
                  options:
                    secondary_info: last-changed
                - state: bedroom
                  options:
                    secondary_info: last-changed
                - name: '* espresense'
                  options:
                    secondary_info: last-changed
            show_empty: false

EDIT: I found a way to hack the room location using the current Home cards but how can I change the color to white when I’m in a room vs grey when I’m not in a room?

2926

Search in the button_card_template.yaml file for state_on.

Can u share ur code for swipe cards?

2927

Same problem here… Did you already find a solution?

2928

Hi!
Sorry, i got it managed after a good night of sleep! (it always work like this, eh!)
- I didn’t notice the template section was not including the ‘base’ model. I’ll tune that part

All good now.

1 Like
2929

Great!
Curious, are u not using the template etc.? Seeing placement of icons in center like normal custom-buttons.

2930

Could someone pls point me in the right direction regarding background color when not using custom button card. I want to have the same appearance with gray rounded corners as all the other buttons but not using a button if you know what I mean.

A example is this power meter gauge test am playing around with.
It doesent blend in and need a grey background.

image
image700×614 46.8 KB 

              - type: horizontal-stack
                cards:

                  - type: gauge
                    entity: sensor.tvattmaskin_power
                    min: 0
                    max: 2500
                    name: Energi
                    unit: W
                    needle: true
                    severity:
                      green: 0
                      yellow: 1500
                      red: 2000
2932

hi everybody,
1st @Mattias_Persson thank you very much for your work and sharing it with us.

i´ve just tried to start with that phantastic approach of a lovelace UI.
Did everything like described but running in an error on the Dashboard
" in “/config/button_card_templates.yaml”, line 1167, column 9: Unable to read file /config/.youtube_token.txt."

can sombody pls help?
regards
Bjoern

1 Like
2934

You need to create the .youtube_token.txt file in the root folder of you configuration, as implied by the error message. If you don’t need the new YouTube Cover Art Retrieval Logic via the YouTube API on Conditional Media, you could simply remove if from your button_card_templates.yaml.

1 Like
2935

Does anyone know where to change the code to make my new buttons look like the original in the footer?
I added an entity so I can start a flow in homey instead of getting info about cleaning etc.

botten
botten981×195 13.1 KB

kod

2936

Try removing the icon: ' ' on line 866.

2937

It needs to be there, otherwise it will be another icon.

kod2
kod2841×133 8.09 KB

2938

Did you doublecheck that you took over all footer related configurations in button_card_templates.yaml and themes.yaml?

My footer looks like this without icon: ' ' (I did some CSS Tweaks myself, which is the reason why it looks slightly different)

image
image2798×133 23.9 KB 

- type: horizontal-stack
    view_layout:
      grid-area: footer
    cards:

      - type: custom:button-card
        name: >
          <ha-icon icon="mdi:nas"></ha-icon> NAS
        tap_action:
          !include popup/footer/nas.yaml
        template: footer

      - type: custom:button-card
        name: >
          <ha-icon icon="mdi:tablet"></ha-icon> Tablet
        tap_action:
          !include popup/footer/tablet.yaml
        template: footer

      - type: custom:button-card
        name: >
          <ha-icon icon="mdi:network"></ha-icon> Netzwerk
        tap_action:
          !include popup/footer/network.yaml
        template: footer

      - type: custom:button-card
        name: >
          <ha-icon icon="mdi:calendar"></ha-icon> Kalender
        tap_action:
          !include popup/footer/calendar.yaml
        template: footer

      - type: custom:button-card
        name: >
          <ha-icon icon="mdi:train"></ha-icon> Abfahrt
        tap_action:
          !include popup/footer/departure_monitor.yaml
        template: footer
2939

If I only have it as the original, with a tap action, it looks good. But as soon as I add an entity, it looks like an extra line is being added. What will your layout look like if you add an entity?

2940

No, unfortunately not.
First I thought the include for the browser_mod.js is broken, since it it the only js that seems to be included like this in the final html:

<script>import("/hacsfiles/iconset.js");
    import("/browser_mod.js");
    </script>

But it looks like it is correctly loaded during page loading. It does not seems to be called though.

@Mattias_Persson Do you have an idea what could go wrong? No error messages, nothing.

2941

Hello. How is the new conditional_media/recently_added working for you after commit merge conditional_media & recently_added · matt8707/hass-config@f026163 · GitHub ? I can’t see the name/state fields (Recently added/title) or the blur field. How is this supposed to work without z-index?

2942

Same for me aswell. I have the default dashboard and there its working when opening for instance my light.
But not in this beatiful lovelace design :frowning:

2943 
          type: custom:mini-graph-card
          color_thresholds:
            - color: '#f53a1b'
              value: 28
            - color: '#ef6a12'
              value: 26
            - color: '#8ff331'
              value: 22
            - color: '#00a1ff'
              value: 20
          line_width: 4
          font_size: 75
          height: 200 <------ this setting
          margin: '-11.5% -10.5% -10.5% -11.5%'
          show:
            name: false
            icon: false
            state: false
            legend: false
            labels: false
2945

Sorry, I somehow missed that you didn’t have a tap_action and instead used an entity.

It looks the same when I do it in my Config.

image
image1286×194 14.8 KB

The easiest thing would be to just hide the Icon that comes with the entity by adding the following below styles: in the footer template.

      icon:
        - display: none

Then it should looks like this:

image
image1296×99 10.5 KB