Lovelace: Button card

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.

Abeksis · May 10, 2019, 3:38pm

Is there a code for iframe?

RomRider · May 10, 2019, 6:20pm

What do you mean?

jimz011 · May 10, 2019, 7:25pm

@RomRider I still have the Alarm_away in my button state. Do I need to change the state to something else? I though you had a fix for it a few versions ago, but there are so many docs about this button that I couldn’t find it that quickly haha.

RomRider · May 10, 2019, 7:46pm

Argh, yeah it should be fixed (since 1.7.0), but apparently not for alarm… I’ll need to look but I don’t have a alarm to test with

BTW, why is the first caracter in capital?

Make sure you are using the latest version (not in custom updater but on your disk) and if it’s still not working please open an issue on github so that I can trace it. Also post your config if you don’t mind