🌻 Lovelace UI • Minimalist

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.

@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";
          }
      ]]]
1 Like

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.

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) :stuck_out_tongue:

2 Likes

nice, spot on:)
image

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?

1 Like

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

Can someone help me put together climate card.

18.08.2021_22.19.02_REC

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

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

Not working:

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

18.08.2021_22.42.52_REC

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

18.08.2021_22.46.50_REC

18.08.2021_22.48.52_REC

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

now is working:

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

thx @tpx01 :beers:

1 Like

What about media_buttons, is same situation here?

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

18.08.2021_23.00.41_REC

Not.

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

18.08.2021_23.27.47_REC

How to get look like this?

18.08.2021_23.30.26_REC

Slowly i getting this lovely interface running! :grinning:

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

My chips cards:
image

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!

2 Likes

@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.

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

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

See the docs for more examples: here

1 Like

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 + " %";
      ]]]
1 Like

@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: ......
2 Likes

Thanks! you are awesome!