Lovelace: Button card

jimz011 · May 7, 2019, 6:45am

Sure, I can share it, but it is in no means perfect, I just quickly did some copy/pasting whilst I had my old config still in there, I just removed the lines that were necessary to show what I wanted. I will clean it up later. For now you can do with this:

              - type: horizontal-stack
                cards:
                  - type: 'custom:card-modder'
                    style:
                      border-radius: 15px
                      --paper-card-background-color: 'rgba(0, 0, 0, 0.0)'
                      box-shadow: 2px 2px rgba(0,0,0,0.0) 
                      padding: 0px 10px
                      height: 33px
                    card:
                      content: '##### Bijkeuken'
                      type: markdown
              - cards:
                  - type: 'custom:button-card'
                    color_type: blank-card
                    styles:
                      card:
                        - width: 13px 
                  - type: custom:button-card
                    entity: switch.wasmachine
                    name: Wasmachine
                    icon: "mdi:washing-machine"
                    label: .
                    color: auto
                    size: 25%
                    show_state: true
                    show_label: true
                    styles:
                      card:
                        - border-radius: 15px
                        - height: 105px
                        - width: 105px
                      icon:
                        - padding: 0px 60px 0px 0px
                        - margin: -10px
                      name:
                        - padding: 0px 10px
                        - font-size: 13px
                        - font-family: Helvetica 
                        - justify-self: start
                        - font-weight: bold
                      label:
                        - color: gray
                        - font-size: 11px
                        - font-family: Helvetica
                        - padding: 0px 10px
                        - justify-self: start
                      state:
                        - font-size: 11px
                        - font-family: Helvetica
                        - padding: 0px 10px
                        - justify-self: start
                        - text-transform: capitalize
                        - font-weight: bold
                    state:
                      - value: "on"
                        styles:
                          card:
                            - --paper-card-background-color: rgba(255, 251, 239)
                            - box-shadow: none
                          name:
                            - color: black
                          state:
                            - color: gray
                      - value: 'off'
                        styles:
                          card:
                            - --paper-card-background-color: '#FFFFFF'
                            - filter: opacity(40%)
                          icon:
                            - filter: invert(70%)
                          name:
                            - filter: invert(70%)
                          state:
                            - filter: invert(70%)
                      - value: "unavailable"
                        style:
                          - opacity: 0.2
                    tap_action:
                      action: toggle
                      haptic: light
                    hold_action:
                      action: more-info
                      haptic: success

woody4165 · May 7, 2019, 7:49am

Hi all

I have this button and I would like to change also the background color.

Now I’m changing the text and icon colors, but I’m not able to do it with background.

          - type: custom:button-card
            entity: switch.presa_comodino
            icon: mdi:lamp
            name: Comodino
            show_label: true
            state:
              - value: 'on'
                label: "Acceso"
                color: green
                styles:
                  label:
                    - color: green
                  name: 
                    - color: green
              - value: 'off'
                label: "Spento"
                styles:
                  label:
                    - color: grey
            styles:
              label:
                - font-size: 15px
              name:
                - font-size: 15px
                - font-familly: cursive
              card:
                - font-size: 14px
                - font-weight: bold

With this result

comodino

How can I do it?

Thanks

jimz011 · May 7, 2019, 8:13am

Add this to the card style:

--paper-card-background-color: rgba(255, 251, 239, 0.5)

Replace the values for your desired ones.

woody4165 · May 7, 2019, 8:23am

Thanks

I’ve done it like this

                  card: 
                    - --paper-card-background-color: 'rgba(255, 255, 255, 1)'

under styles when value is ‘on’

glyn · May 7, 2019, 10:07am

Thanks. Will give it a try.

Mariusthvdb · May 7, 2019, 10:22am

cool, thanks!

did some resource study comparing the old versus the new Tiles card, and found that this is the new way to makes my previously posted template possible:

type: custom:tiles-card
card_settings:
  title: Family
  columns: 3
  row_height: 100px
  gap: 10px
  padding: 10px

global_settings:
  background:
    image_size: 75px

entities:
  - entity: device_tracker.life360_name
    templates:
      background: >
        if (state === 'home' || state === 'not_home') return 'url(\"/local/tiles/family/name_' + state + '.png\")';
        return 'url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
      style: >
        if (state === 'home') return 'background-color: #008000';
        if (state === 'not_home') return 'background-color: #808080';
        return 'background-color: #643aac';
    more_info: group.name

and add entries for all entities (family-members in this case)

because I have a longer background with the tiles card, I really dreaded changing all that, but comparing it to trying to template other cards, or nested custom cards even, it is so much simpler. Won’t go off-topic any further here, but simply point you to the source for the Tiles card: https://github.com/rodrigofragadf/lovelace-cards

will implement your Buttons later on, and hope to enjoy them in a simpler setup… thanks again!

Tyfoon · May 7, 2019, 11:26am

Nice job! really looking good.

Hope you don’t mind asking: Now you have quite a lot of stuff on a button / screen. Most information is there actually triple, sometimes four times. eg when you have a light on: Icon is yellow, button is bright, it mentions “on” and if dimmable there is a number%. They all tell you the same info “light is on”. Does that not cause more ‘cluttering’ then needed to give you the info you would want to see at a glance?

petro · May 7, 2019, 11:28am

I was able to get it done with this card

Anchors

anchors:
  # CUSTOM BUTTON-CARDS (MAIN LABEL) 
      
  custom_button_label: &custom_button_main_label
    type: custom:button-card
    show_name: false
    show_icon: false
    show_label: true
    styles:
      card:
        - height: 50px
        - --ha-card-background: "rgba(0, 0, 0, 0.0)"
        - --ha-card-box-shadow: 'none'
      label:
        - justify-self: start
        - padding-left: 20px
      
  custom_button_label_on: &custom_button_label_on
    type: custom:button-card
    color: auto
    show_name: true
    show_icon: false
    name: 'on'
    state:
      - value: 'on'
        styles:
          card:
            - --paper-card-background-color: rgba(20, 20, 20, 0.4)
      - value: 'off'
        styles:
          card:
            - border-style: solid
            - border-width: 2px
            - border-color: rgba(20, 20, 20, 0.4)
    styles:
      card:
        - border-radius: 20px
        - height: 50px
        - width: 50px
        
  custom_button_label_off: &custom_button_label_off
    type: custom:button-card
    color: auto
    show_name: true
    show_icon: false
    name: 'off'
    state:
      - value: 'off'
        styles:
          card:
            - --paper-card-background-color: rgba(20, 20, 20, 0.4)
      - value: 'on'
        styles:
          card:
            - border-style: solid
            - border-width: 2px
            - border-color: rgba(20, 20, 20, 0.4)
    styles:
      card:
        - border-radius: 20px
        - height: 50px
        - width: 50px

section w/ header

      - id: basement_card
        type: vertical-stack
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              - type: horizontal-stack
                cards:
                  - <<: *custom_button_main_label
                    label: "Basement"
                  - <<: *custom_button_label_on
                    entity: switch.basement
                    tap_action:
                      action: call-service
                      service: switch.turn_on
                      service_data:
                        entity_id: switch.basement
                  - <<: *custom_button_label_off
                    entity: switch.basement
                    tap_action:
                      action: call-service
                      service: switch.turn_off
                      service_data:
                        entity_id: switch.basement

output:

jimz011 · May 7, 2019, 1:50pm

Perhaps yes, but I wanted to make a close copy of the original homekit button. So that is why all this info is there, as it is also there within homekit. (The only thing that is different is the brightness level, which only shows on Homekit when it is actually turned on).

So as to compare:
The official Homekit button:

My version of it (yes colors are slightly off):

Tyfoon · May 7, 2019, 2:04pm

Well done! Text in red / green is actually quite cool also. Not sure if that can be done

jimz011 · May 7, 2019, 2:06pm

It can probably be done (the red text is only available in locks and alarms on Homekit).

All other devices will be just grey like the name.

jimz011 · May 7, 2019, 3:00pm

@RomRider the card is really great, however I have a slight problem. It all works fine at start, but after a few minutes this starts to happen (note that it only happens to buttons that are in the “off” state). When the button is in the “on” state nothing is wrong.

It looks like there is something off here, as it shows artifacts. (It gets worse over time, a refresh solves is temporarily).

I have used this code

RomRider · May 7, 2019, 3:29pm

That’s looks like a render bug in your browser/app, that’s not something I can fix. Maybe buy an android phone?

Prathik_Gopal · May 7, 2019, 4:00pm

@jimz011 i see that happen only on the old app, its not depicting that on the new 2.0 app

And Oh, i made this, thanks to you!

Holdestmade · May 7, 2019, 4:08pm

Could you share your code for the gapless row ? - Lounge Kitchen Bedroom Bathroom

Thanks

petro · May 7, 2019, 4:18pm

is there a way to fix the aspect ratio of the buttons? Lets say I don’t want to set a height or width, but I want the button square. Is this possible?

PodPerson · May 7, 2019, 4:25pm

If you mean the one in the under the alarm panel? It’s basically just surrounding a horizontal-stack card with a vertical-stack-in-card.

cards:
  - cards:
      - color: auto
        entity: binary_sensor.ms_lounge
        icon: 'mdi:walk'
        name: Lounge
        show_last_changed: true
        show_state: false
        state:
          - color: 'rgb(221, 232, 6)'
            icon: 'mdi:run'
            value: 'on'
          - color: 'rgb(91, 237, 54)'
            icon: 'mdi:walk'
            value: 'off'
        styles:
          card:
            - transform: scale(1)
            - text-transform: scale(.5)
          label:
            - font-size: 10px
        tap_action:
          action: more-info
        type: 'custom:button-card'
      - color: auto
        entity: binary_sensor.ms_kitchen
        icon: 'mdi:walk'
        name: Kitchen
        show_last_changed: true
        show_state: false
        state:
          - color: 'rgb(221, 232, 6)'
            icon: 'mdi:run'
            value: 'on'
          - color: 'rgb(91, 237, 54)'
            icon: 'mdi:walk'
            value: 'off'
        styles:
          card:
            - transform: scale(1)
          label:
            - font-size: 10px
        tap_action:
          action: more-info
        type: 'custom:button-card'
      - action: more_info
        color: auto
        entity: binary_sensor.ms_bedroom
        icon: 'mdi:walk'
        name: Bedroom
        show_last_changed: true
        show_state: false
        state:
          - color: 'rgb(221, 232, 6)'
            icon: 'mdi:run'
            value: 'on'
          - color: 'rgb(91, 237, 54)'
            icon: 'mdi:walk'
            value: 'off'
        styles:
          card:
            - transform: scale(1)
          label:
            - font-size: 10px
        type: 'custom:button-card'
      - color: auto
        entity: binary_sensor.ms_bathroom
        icon: 'mdi:walk'
        name: Bathroom
        show_last_changed: true
        show_state: false
        state:
          - color: 'rgb(221, 232, 6)'
            icon: 'mdi:run'
            value: 'on'
          - color: 'rgb(91, 237, 54)'
            icon: 'mdi:walk'
            value: 'off'
        styles:
          card:
            - transform: scale(1)
          label:
            - font-size: 10px
        tap_action:
          action: more-info
        type: 'custom:button-card'
    type: horizontal-stack
type: 'custom:vertical-stack-in-card'

jimz011 · May 7, 2019, 4:44pm

That is really great, well the thing is, I have the 2.0 app (latest build) I run the latest ios (12.3) I run the latest HA (0.93.0dev) and I still have this problem. What’s crazy is that it only does it with buttons that are in the “off” state (and only after switching some lights). It might be some other code that is conflicting, will have to sort that out. Or maybe another card that is conflicting like CCH or swipe navigation?

Still great to see my post helped someone.

Edit: I have to mention that all experimental features in Safari are turned on, I don’t know if that impacts the app though, but considering it probably uses the same webkit it could be possible.

Edit2: I turned off all experimental features in safari, so far so good. I do not have the problem (yet). Will report back if it does again though.

Edit3: it still seem to do it although less prominent. I will try removing some unnecessary lines of code as I think I have like 2 vertical-stacks in a vertical-stack etc. or perhaps something else is causing it.

jimz011 · May 7, 2019, 4:46pm

Is you set width and heigth the same size you basically would have a square icon.

Homekit sized buttons for example are 105px both width and height.

Holdestmade · May 7, 2019, 5:22pm

Brilliant, thanks, didn’t know about that card