Lovelace: Button card

pedolsky · September 25, 2021, 8:23pm

You can simply use a custom field inside your card:


type: custom:button-card
entity: sensor.time
show_icon: false
show_name: false
show_state: true
custom_fields:
  counter: |
    [[[ return states['counter.testzaehler'].state ]]]
styles:
  card: null
  state:
    - padding-bottom: 11px
  grid:
    - grid-template-areas: "'s' 'counter'"
    - grid-template-columns: 1

returns

Or you can use a custom:button-card as custom field:


type: custom:button-card
entity: sensor.time
show_icon: false
show_name: false
show_state: true
custom_fields:
  counter:
    card:
      type: custom:button-card
      entity: counter.testzaehler
      show_icon: false
      show_name: false
      show_state: true
      styles:
        card:
          - box-shadow: none
          - border-radius: 0%
          - border-top: 1px dotted
styles:
  card:
    - padding: 0
  state:
    - padding: 14px
  grid:
    - grid-template-areas: "'s' 'counter'"
    - grid-template-columns: 1

returns

The advantage of the second variant is that you have the more info dialogue on tap/click.

BeastHouse · September 26, 2021, 12:51pm

Could you post a shot of the final result?

Mariusthvdb · September 26, 2021, 1:24pm

check https://github.com/Deejayfool/hass-shutter-card
if you want some custom shutter icons, check https://github.com/g-kiss/Home-Assistant-custom-shutter-icons

KameDomotics · September 26, 2021, 1:46pm

Yesss

image1125×2436 111 KB

krovachek · September 27, 2021, 5:25am

I played with similar card like this:

TheDarthFather · September 27, 2021, 9:24am

Hello,
This is amazing! I am an css-empiric user and I love it … even if took me 4-6h to make it work :).
I do have some questions:

How does scaling works ? In the second picture (from my laptop screen) they lose “data” from the right side or the screen, why ? I guess is normal for the text as it has a px fixed size …
Why do I have to pad-bottom to push the icon on the top ? I tried with align top and it was just aligning quite far from top …
Why is CPU slightly further away than the others ? They should be at equal distance, right !?
How can I make the full page (txt, img, sub-cards) to work/scale on any device / screen size ?

Deskop: Imgur: The magic of the Internet
Laptop (smaller ress): Imgur: The magic of the Internet
The code is inside one of a “3 columns” grid!

type: custom:button-card
entity: sensor.docker_homeassistant_state
icon: mdi:home-assistant
aspect_ratio: 1/1
name: Home Assistant
styles:
  card:
    - border-radius: 10%
    - padding: 5%
    - font-size: 10px
  grid:
    - grid-template-areas: '"i n n " "sts sts sts" "cpu ramp ram"'
    - grid-template-columns: 33% 33% 33%
    - grid-template-rows: 30% 10% 60%
  name:
    - font-weight: bold
    - font-size: 100%
    - color: dodgerblue
    - align-self: top
    - justify-self: right
    - padding-bottom: 25%
  img_cell:
    - justify-content: left
    - align-items: top
    - padding-top: 10%
    - padding-bottom: 50%
  icon:
    - width: 60%
    - padding-top: 10%
    - color: |
        [[[          
          if (entity.state = "Running") return 'lime'; 
          if (entity.state = "Restarting") return 'yellow'; 
          else return 'red';
        ]]]
  custom_fields:
    sts:
      - align-self: top
      - justify-self: right
      - font-size: 8px
      - padding-bottom: 40%
      - '--text-color-sensor': |-
          [[[  if (entity.state = "Running") return 'lime';  
               if (entity.state ="Restarting") return 'yellow';  
               else return 'red'; 
          ]]]
    cpu:
      - justify-self: left
    ramp:
      - justify-self: left
    ram:
      - justify-self: left
custom_fields:
  sts: |
    [[[
      return `<span><span style="color: var(--text-color-sensor);">${states['sensor.docker_homeassistant_status'].state}</span></span>`
    ]]]
  cpu:
    card:
      type: custom:bar-card
      entity: sensor.docker_homeassistant_1cpu
      name: CPU
      height: 50px
      width: 10px
      direction: up
      positions:
        icon: 'off'
        indicator: 'on'
        minmax: 'off'
        title: outside
        value: outside
        name: outside
      decimal: 1
      animation:
        state: 'on'
      entity_row: true
      severity:
        - color: '#00BFFF'
          from: 0
          to: 10
        - color: '#40bf40'
          from: 11
          to: 40
        - color: '#ffde00'
          from: 41
          to: 80
        - color: '#fd0000'
          from: 81
          to: 100
  ramp:
    card:
      type: custom:bar-card
      entity: sensor.docker_homeassistant_memory_percent
      name: RAM%
      height: 50px
      width: 10px
      direction: up
      positions:
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
        title: outside
        value: outside
        name: outside
      decimal: 1
      animation:
        state: 'on'
      entity_row: true
      severity:
        - color: '#00BFFF'
          from: 0
          to: 10
        - color: '#40bf40'
          from: 11
          to: 40
        - color: '#ffde00'
          from: 41
          to: 80
        - color: '#fd0000'
          from: 81
          to: 100
  ram:
    card:
      type: custom:bar-card
      entity: sensor.docker_homeassistant_memory
      name: RAM
      height: 50px
      width: 10px
      direction: up
      max: 2048
      positions:
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
        title: outside
        value: outside
        name: outside
      decimal: 0
      animation:
        state: 'on'
      entity_row: true
      severity:
        - color: '#00BFFF'
          from: 0
          to: 204
        - color: '#40bf40'
          from: 205
          to: 820
        - color: '#ffde00'
          from: 821
          to: 1642
        - color: '#fd0000'
          from: 1643
          to: 2048

flemmingss · September 30, 2021, 12:13pm

This must be simple, but I can’t find out how. I just wan to add a “Dim level: XX%” to my card. How do I accomplish this?

type: custom:button-card
name: Under seng
show_state: true
entity: light.zigbee_29
icon: mdi:bed
color_type: card
color: auto
tap_action:
  action: toggle
hold_action:
  action: more-info
double_tap_action:
  action: call-service
  service: light.turn_on
  service_data:
    entity_id: light.zigbee_29
    brightness: 255
    kelvin: 40000

pedolsky · September 30, 2021, 3:17pm

If you mean brightness level, search for Math.round here.

edSverige · September 30, 2021, 8:34pm

Hi, can someone please guide me on getting the icon to align to the right, opposed to center?

I’ve tried various ideas using the developer console. As an example, i thought if i changed justify-content to right on the img-cell it would solve it.

I confess i have very little knowledge of CSS so any pointers would be really great.

Ed

Luxor73 · October 2, 2021, 3:09pm

A compact size WebOs player

custom-button-card + card-mod + slider-entity-row + yaml

wosp04 wosp05 wosp06 wosp08 wosp09
wosp03
wosp02

Features

navigator pad
keynumber pad
sources selector
favorite channels selector
channel up/down
play/pause
forward/rewind
volume slider
volume value
volume mute button
home, back, exit buttons
settings, channels list, info buttons
color buttons
channel logo background
source image background
power on/off
channel/source name label
input text to write, notify or web search

If someone likes to play with it … click here

Pulsaro · October 4, 2021, 1:28am

Screenshot_16

Hello Community,
can someone help a newbie?
How do I get the edges of the card as rounded as in the picture?

pjn77 · October 4, 2021, 5:17pm

How can I get a button that calls a script to show the current color of a light entity? I’ve tried using a template in the color: value of the config but that doesn’t work.

pedolsky · October 4, 2021, 6:09pm

styles:
  card:
    - border-radius: 5%

or:

styles:
  card:
    - border-radius: 25px

Jason_hill · October 4, 2021, 6:12pm

Install card-mod and use border radius

´
card_mod:
style: |
ha-card
{
border-radius:10;
}
´

pedolsky · October 4, 2021, 6:18pm

There’s no need to install another custom card for that.

pedolsky · October 4, 2021, 6:20pm

What do you mean with showing the light color? The value or the color itself?

pjn77 · October 4, 2021, 6:51pm

Sorry I meant i’d like the icon color of a custom button card to be the color of another light that it doesnt activate. So if it just turned a light on and off I could have color: auto and it would show red when the light is red, but this button controls a script that ends up with the light changing color, and I want to be able to use that color as the button’s icon color.

pedolsky · October 4, 2021, 7:19pm

This are the data of my Hue Iris:


min_mireds: 153
max_mireds: 500
effect_list:
  - colorloop
  - random
supported_color_modes:
  - color_temp
  - hs
color_mode: hs
brightness: 89
hs_color:
  - 38.667
  - 52.941
rgb_color:
  - 255
  - 207
  - 120
xy_color:
  - 0.457
  - 0.41
effect: none
friendly_name: Hue Iris
supported_features: 63

With


  icon:
    - color: |
        [[[
          return 'rgb(' + entity.attributes.rgb_color)'
        ]]]

I am able to call the rgb color of the light.
So when your tap action turns on another light via script, you should ne able to use the current light color.

VMCosco · October 4, 2021, 8:45pm

Can I use a template for name: or label: such that it extracts the the remain_time attribute from a sensor called sensor.washer? This is a different sensor than I am using for entity:

paddy0174 · October 4, 2021, 8:59pm

Take a look here in the documentation of button-card. These are the fields you can use templates: