🌻 Lovelace UI • Minimalist

[steinis (stein)]

Great work on the room button:)

I use groups instead of a singel light and wonder if its possible to add temperature etc… to his card instead of the dimmer value? Think this would be a nice feature to have a quick overview of the room.

[bms (Bavo)]

@steinis I was thinking the same thing. Because i allready know the state of the lights by the color of the toggle button.

You can just change the label component from the template (if you know some javascript)

label: >-
      [[[ 
          if (entity.state !='unavailable'){
            if (entity.state =='off'){
              var bri = Math.round(entity.attributes.brightness / 2.55);
              return 'Off';  
            }else{
              var bri = Math.round(entity.attributes.brightness / 2.55);
              return (bri ? bri : '0') + '%'; 
            }
          }else{
            return "Unavailable";
          }
      ]]]

[steinis (stein)]

Yeah was thinking it was something here. But how do I get/fetch more then one entity from lovelace config and into the generic template? I still want the light to be the main entity but I can easy add temp, lux etc to the card.

[bms (Bavo)]

There are a few possibilities, but the easiest (and most flexible) will probably be to override the label property for each room:

              - type: 'custom:button-card'
                template: 
                  - room
                  - yellow
                entity: light.keuken
                name: Keuken
                icon: mdi:silverware-fork-knife
                tap_action:
                  action: navigate
                  navigation_path: '/lovelace-mobile/keuken/'
                label: '[[[ return states["sensor.temp_sensor_kitchen"].state + "°C" ]]]'

(not tested, but should be close to working)

[steinis (stein)]

nice, spot on:)

[hiddevanbrussel]

Hello I have a question. I am not a very good programmer. But is this possible? And the second question is there somebody how can build this?

[clemalex]

@hiddevanbrussel

But is this possible

Quickly, you can use vertical-stack (or stack-in-card) with a card of tben and Custom:bar-card

[lpt2007]

@tpx01

airco_buttons

Can someone help me put together climate card.

                  - entity: climate.haos_vir_hallway_climate
                    name: Hlajenje
                    template: 
                      - airco_buttons
                    type: 'custom:button-card'

[tpx01]

Try using “variables:” … as depicted in the printscreen.

[lpt2007]

Not working:

                  - entity: climate.haos_vir_hallway_climate
                    variables:
                      entity: climate.haos_vir_hallway_climate
                    name: Hlajenje
                    template: airco_buttons
                    type: 'custom:button-card'

If I remove entity like in your example I get error:

[tpx01]

The error is rather explicit here… bad yaml indentation. Try to literally copy what I did… this means, start with “- type:”… you’re adding an array value but the attributes (variables, template) are not part of that object.

- type: custom:button-card
  template: airco_buttons
  variables:
    entity: climate.haos_vir_hallway_climate

[lpt2007]

now is working:

                  - type: 'custom:button-card'
                    variables:
                      entity: climate.haos_vir_hallway_climate
                    template: airco_buttons

thx @tpx01

[lpt2007]

What about media_buttons, is same situation here?

                  - entity: media_player.haos_vir_livingroom_tv
                    name: Dnevna
                    template: media_buttons
                    type: 'custom:button-card'

[lpt2007]

Not.

                  - type: 'custom:button-card'
                    variables:
                      entity: media_player.haos_vir_livingroom_tv
                      name: Dnevna
                    template: media_buttons

How to get look like this?

[flirtysanchez]

Slowly i getting this lovely interface running!

One question:
Can I get historic information by clicking on the “chips cards” like on the temparatur button-cards?

My chips cards:

Example for button card “click on” infos:

My VIEWS Code:

  - title: OWN
    icon: 'mdi:snake'
    path: own
    cards:
      - cards:
          - cards:
              - template:
                  - chips_temp_nas
                type: 'custom:button-card'
              - template: chips_used_space_nas
                type: 'custom:button-card'
            type: horizontal-stack  
        type: vertical-stack

My TEMPLATE Code:

  chips_temp_nas:
    template: chips
    tap_action:
        action: navigate
    label: |
      [[[
        var temp = states['sensor.ds218plus_temperature'].state;
        return '🌡️' + " " + temp + '° | DS218+';
      ]]]

  chips_used_space_nas:
    template: chips
    tap_action:
        action: navigate
    label: |
      [[[
        var spacetotal = states['sensor.ds218plus_volume_1_used_space'].state;
        var spacepercent = states['sensor.ds218plus_volume_1_volume_used'].state;
        return '💾' + " " + spacetotal + " TB | " + spacepercent + " %";
      ]]]

Thanks!

[bms (Bavo)]

@lpt2007

If i look at the code:

state:
      - operator: template
        value: >
          [[[
            return entity.state !='off'
          ]]]
        name: >
            [[[
              return entity.attributes.media_title;
            ]]]
        label: >
            [[[
              return entity.attributes.media_album_name;
            ]]]
        styles:
          img_cell:
            - background: >
                [[[
                  var image = entity.attributes.entity_picture;
                  return 'center / cover url(' + image + ')';
                ]]]
          icon:
            - color: 'rgba(var(--color-theme),0.0)'

Your media player will need the following attributes:

• media_title
• media_album_name
• entity_picture

Can you check if your media player has these attributes?
Otherwise you will need to change the template to suit your needs.

[bms (Bavo)]

@flirtysanchez You have defined your “tap_action” for the chip card as navigate. But you did not specify where to navigate to.

You can either specify an url to navigate to. Or leave the “tap_action” on ‘more_info’.

See the docs for more examples: here

[flirtysanchez]

OK. Thanks for the hint. But it doesn’t work with this option. If i try to click nothing happens.

  chips_temp_nas:
    template: chips
    tap_action:
      action: more-info
    label: |
      [[[
        var temp = states['sensor.ds218plus_temperature'].state;
        return '🌡️' + " " + temp + '° | DS218+';
      ]]]

  chips_used_space_nas:
    template: chips
    tap_action:
      action: more-info
    label: |
      [[[
        var spacetotal = states['sensor.ds218plus_volume_1_used_space'].state;
        var spacepercent = states['sensor.ds218plus_volume_1_volume_used'].state;
        return '💾' + " " + spacetotal + " TB | " + spacepercent + " %";
      ]]]

[bms (Bavo)]

@flirtysanchez Ah yes, I see the next problem.
You didn’t provide an entity to navigate to.
Either specify one for the button-card:

  chips_temp_nas:
    template: chips
    entity: sensor.ds218plus_temperature
    tap_action:
      action: more-info
    label: ......

or specify an entity in your tap_action:

  chips_temp_nas:
    template: chips
    tap_action:
      action: more-info
      entity: sensor.ds218plus_temperature
    label: ......

[flirtysanchez]

@bms

entity: sensor.ds218plus_temperature

Thanks! you are awesome!