Lovelace: Button card

myle · May 10, 2019, 6:38am

Just one question
HOW you do that

that is so sexly

RomRider · May 10, 2019, 6:40am

Use the label to customize the show last changed part:

styles:
  label:

Abeksis · May 10, 2019, 7:10am

I’m looking for something like this for TV - you can share this code

glyn · May 10, 2019, 8:23am

How did you get that glow effect around your buttons? It looks amazing.

RomRider · May 10, 2019, 8:31am

Sure, here you go:

    - type: horizontal-stack
      cards:
        - type: custom:vertical-stack-in-card
          cards:
          - type: horizontal-stack
            cards:
            - type: custom:card-modder
              style:
                padding: 5px 16px
              card:
                type: entities
                show_header_toggle: false
                entities:
                - type: custom:slider-entity-row
                  entity: media_player.player1
                  name: Volume
                  icon: mdi:volume-high
            - type: custom:button-card
              icon: mdi:volume-minus
              size: 60%
              tap_action:
                action: call-service
                service: input_number.decrement
                service_data:
                  entity_id: input_number.player1_volume
              styles:
                card:
                  - width: 40px
                  - height: 100%
            - type: custom:button-card
              entity: media_player.player1
              icon: mdi:volume-mute
              size: 60%
              show_name: false
              tap_action:
                action: call-service
                service: script.mute_unmute_entity
                service_data:
                  entity_id: media_player.player1
              styles:
                card:
                  - width: 40px
                  - height: 100%
              state:
                - operator: template
                  value: >
                    return states['media_player.player1'].state != 'off'
                    && states['media_player.player1'].attributes.is_volume_muted;
                  color: '#FF0000'
                - operator: default
                  color: var(--primary-text-color)
            - type: custom:button-card
              icon: mdi:volume-plus
              size: 60%
              tap_action:
                action: call-service
                service: input_number.increment
                service_data:
                  entity_id: input_number.player1_volume
              styles:
                card:
                  - width: 40px
                  - height: 100%

RomRider · May 10, 2019, 8:58am

You can use this to generate your box shadow:

And then paste the result here:

styles:
  card:
    - box-shadow: RESULT_HERE

glyn · May 10, 2019, 10:28am

What I brilliant link. Thanks very much.

Tyfoon · May 10, 2019, 10:51am

@RomRider The CSS world is quite new for me and acquires quite some study to understand.

I’m still struggling what the best way is to move the “label” (last_changed) up to be directly under either the state or name. The icon_name_state2nd does not do the job. The padding Jimz011 suggested also not.

petro · May 10, 2019, 11:28am

Yeah, I’d like to possibly use it on the shadows. I was wondering if i could template it with the template card. Haven’t researched it. Hoping there was an easier way.

petro · May 10, 2019, 11:34am

@myle @glyn

These are the anchors that I’m currently using for lights and switches:

  custom_button_switch_active_glow: &custom_button_switch_active_glow
    type: "custom:button-card"
    layout: icon_label    
    show_state: true
    show_name: true
    show_label: false
    styles:
      grid:
        - grid-template-rows: 30px auto 30px
      card:
        - border-radius: 15px
        - height: 105px
        - width: 105px
        - margin: 0px 5px 0px 0px
      icon:
        - align-self: end
        - height: 30px
        - width: 30px
      name:
        - justify-self: start
        - padding: 0px 10px
        - font-size: 13px
      label:
        - align-self: end
        - padding: 1px
        - font-size: 11px
        - font-weight: bold
        - font-family: Helvetica
        - text-transform: capitalize
      state:
        - font-size: 11px
        - font-family: Helvetica
        - text-transform: capitalize
        - font-weight: bold
        - align-self: end
        - justify-self: start
        - padding: 5px 10px
    state:
      - value: "on"
        styles:
          card:
            - --paper-card-background-color: rgba(40, 40, 40)
            - box-shadow: 0px 0px 20px 3px var(--paper-item-icon-active-color)
          icon:
            - color: var(--paper-item-icon-active-color)
          name:
            - color: white
          state:
            - color: white
          label:
            - color: white
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  
  custom_button_light_active_glow: &custom_button_light_active_glow
    type: "custom:button-card"
    layout: icon_label    
    show_state: true
    show_name: true
    show_label: true
    styles:
      grid:
        - grid-template-rows: 30px auto 30px
      card:
        - border-radius: 15px
        - height: 105px
        - width: 105px
        - margin: 0px 5px 0px 0px
      icon:
        - align-self: end
        - height: 30px
        - width: 30px
      name:
        - justify-self: start
        - padding: 0px 10px
        - font-size: 13px
      label:
        - align-self: end
        - padding: 1px
        - font-size: 11px
        - font-weight: bold
        - font-family: Helvetica
      state:
        - font-size: 11px
        - font-family: Helvetica
        - text-transform: capitalize
        - font-weight: bold
        - align-self: end
        - justify-self: start
        - padding: 5px 10px
    state:
      - value: "on"
        styles:
          card:
            - --paper-card-background-color: rgba(40, 40, 40)
            - box-shadow: 0px 0px 20px 3px var(--paper-item-icon-active-color)
          icon:
            - color: var(--paper-item-icon-active-color)
          name:
            - color: white
          state:
            - color: white
          label:
            - color: white
      - value: "off"
        styles:
          label:
            - color: rgba(0, 0, 0, 0.0)
    tap_action:
      action: toggle
    hold_action:
      action: more-info

Then to use them you just need to call out the anchor properly and add the missing attributes.

This is an example of a light that turns a group on and off (switch template controls group, label_template counts lights that are on).

              - <<: *custom_button_light_active_glow
                name: Lights
                entity: switch.living_room
                icon: mdi:alpha-l-box
                label_template: >
                  var i;
                  var entities = states['group.living_room'].attributes.entity_id;
                  var count = 0;
                  for (i = 0; i < entities.length; i++) {
                    var state = states[entities[i]].state;
                    if (state === 'on') {
                      count += 1;
                    }
                  }
                  return count.toString() + ' of ' + entities.length.toString();

This is a normal dimmer. Nothing too crazy.

              - <<: *custom_button_light_active_glow
                label_template: >
                  var bri = Math.round(states['light.living_room'].attributes.brightness / 2.55);
                  return (bri ? bri : '0') + '%';
                name: Light
                entity: light.living_room

And this is a switch.

              - <<: *custom_button_switch_active_glow
                name: Outlet
                entity: switch.living_room_window

Anchors make it easy to adjust all your buttons at once and shrink your config from 5k lines to 1k lines. Very useful.

RomRider · May 10, 2019, 12:10pm

Next version will include this feature it’s already developed, I’ll release it probably tonight (for me)

petro · May 10, 2019, 12:12pm

Slow down man. Take a coffee break! Thanks for all the work. This card forced me to learn CSS which was on my bucket list. I can’t thank you enough for just that alone.

RomRider · May 10, 2019, 12:42pm

The next release will include a fix for this when there is no state displayed. You’ll have to use layout: icon_name_state2nd.

It was literally 1 line of code

RomRider · May 10, 2019, 12:51pm

Version 1.8.0

NEW FEATURES

hold_action now has a new parameter: repeat (in milliseconds). If set, while you hold the button, the action will repeat itself every repeat in milliseconds. Fixes #147
repeat

      - type: custom:button-card
        entity: input_number.test
        show_state: true
        hold_action:
          action: call-service
          repeat: 500
          service: input_number.increment
          service_data:
            entity_id: input_number.test

New double click action: dbltap_action (this introduces a slight delay [250ms] for single click actions on buttons where you also use double tap)
dbltap

      - type: custom:button-card
        entity: input_number.test
        show_state: true
        hold_action:
          action: call-service
          repeat: 500
          service: input_number.increment
          service_data:
            entity_id: input_number.test
        dbltap_action:
          action: call-service
          service: input_number.decrement
          service_data:
            entity_id: input_number.test

styling for the lock, available also per state (Fixes #150)

styles:
  lock:
    - color: red
    - align-items: flex-end
    - justify-content: flex-start

You can now use the current light color in your CSS styles. If a light entity is assigned to the button, the CSS variable --button-card-light-color will contain the current light color so that you can use it where you want on your card. Example:
```
styles:
  name:
    color: var(--button-card-light-color)
  card:
    - -webkit-box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
    - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
```

FIXES

Misalignment of label for layout: icon_name_state2nd when there was no state.

jarrah · May 10, 2019, 1:41pm

The multiple card embedding you have there for the volume slider example is excellent! It’s amazing what you can do with these custom cards - half the trouble is figuring it all out!

Thanks for sharing @RomRider

petro · May 10, 2019, 1:45pm

You gotta get inventive with combinations. You can come up with some pretty cool cards using vertical-in-stack-card. It’s what makes these card combo’s flat

EDIT: I need to replace the uptime w/ this button card to get an icon and some nice styling. That’s using the built in button-card.

EDIT: Another tip is to make your background and shadow for cards transparent, this anchor will get you that with the card-modder card:

anchor

  transparent_background: &transparent_background
    type: 'custom:card-modder'
    style:
      --ha-card-background: "rgba(0, 0, 0, 0.0)"
      --ha-card-box-shadow: 'none'

anchor use in environment

        # The filter card will filter entities for their state
      - <<: *transparent_background
        card:
          type: ...etc...

glyn · May 10, 2019, 2:03pm

Thanks. I must try anchors out when I am brave enough.

petro · May 10, 2019, 2:09pm

They’re only hard if you don’t understand data structures in yaml.

This is a pretty good read here:

https://blog.daemonl.com/2016/02/yaml.html

jarrah · May 10, 2019, 3:33pm

I started using anchors yesterday based on @petro’s (thanks for the tip!) previous posts and I really like what it can do to save space and make it easier to navigate the UI file.

For example, in the same ui-lovelace.yaml file, I have anchors at the start (just after resources), and refer to them throughout that file.

anchors:
 custom_button_motion: &custom_button_motion
   type: "custom:button-card"
   color_type: card
   show_name: true
   show_icon: true
   show_last_changed: true
   size: 20px
   styles:
     label:
       - font-size: 10px
     card:
       - border-radius: 10px
   state:
     - value: "on"
       color: rgb(71,39,45) #Red
       icon: mdi:run-fast
       styles:
         label:
           - color: rgb(220,69,121)
         icon:
           - color: rgb(220,69,121)
     - value: "off"
       color: rgb(49,68,42) #Green
       icon: mdi:run
       styles:
         label:
           - color: rgb(134,219,85)
         icon:
           - color: rgb(134,219,85)

title: Home
views:
 - title: New View
   icon: mdi:view-dashboard-variant
   panel: false
   path: newview
   cards:
     - type: vertical-stack # Motion
       cards:
         - type: horizontal-stack # Motion Title
           cards:
             - type: "custom:button-card"
               name: MOTION
               styles:
                 card:
                   - height: 30px
                   - padding: 0px 0px
         - type: horizontal-stack # Motion Buttons Lvl 1
           cards:
             - <<: *custom_button_motion # Study
               entity: binary_sensor.motion_study_occupancy
               name: Study

             - <<: *custom_button_motion  # Lounge
               entity: binary_sensor.motion_sensor_158d0001ad5c5c
               name: Lounge

             - <<: *custom_button_motion # Kitchen
               entity: binary_sensor.motion_sensor_158d0001e43b9f
               name: Kitchen

             - <<: *custom_button_motion # Downstairs Hall
               entity: binary_sensor.motion_hall_downstairs_occupancy
               name: D Hall

             - <<: *custom_button_motion # Upstairs Hall
               entity: binary_sensor.motion_sensor_158d0001ad4ad6
               name: U Hall

         - type: horizontal-stack # Motion Buttons Lvl 2
           cards:
             - <<: *custom_button_motion # Garage
               entity: binary_sensor.motion_sensor_158d0001ad3413
               name: Garage

             - <<: *custom_button_motion # Porch
               entity: binary_sensor.motion_sensor_158d0001ad3403
               name: Porch

             - <<: *custom_button_motion # Bed 1
               entity: binary_sensor.motion_sensor_158d0001ad33f3
               name: Bed 1

             - <<: *custom_button_motion # Bed 2
               entity: binary_sensor.motion_sensor_158d0001ad698e
               name: Bed 2

             - <<: *custom_button_motion # Bed 3
               entity: binary_sensor.motion_sensor_158d0001ad4a0f
               name: Bed 3

@petro I’d love to see the yaml behind your NUC and Switch cards, along with details on the brushed metal background and colour theme there please?

petro · May 10, 2019, 3:35pm

Yes, I will share. I’m rebuilding the interface and sensors for the sole purpose of making a github page for my configuration. I plan to have it posted in the next few days.