Lovelace: Button card

KameDomotics · September 25, 2021, 12:18pm

this is the last of the attempts, but even with other tests it only shows me a thermostat icon…

type: custom:button-card
tap_action:
  action: toggle
entity: climate.termostato
aspect_ratio: 1/1
styles:
  card:
    - border-radius: 12%
    - font-size: 100%
  name:
    - font-weight: bold
    - font-size: 18px
    - align-self: middle
    - justify-self: center
    - padding-bottom: 5px
  img_cell:
    - justify-content: center
    - align-items: center
    - margin: none
  icon:
    - width: 64%

rmertz3282 · September 25, 2021, 12:58pm

Where’s your reference to the thermostat card?

The example should look something like this.


- type: custom:button-card
  aspect_ratio: 1/1
  custom_fields:
    graph:
      card:
        type: sensor
        entity: sensor.sensor1
        graph: line
        style: |
          ha-card {
            box-shadow: none;
          }

KameDomotics · September 25, 2021, 1:34pm

ok now it works, thanks!

Is it possible to hide the entity name?
I tried show_name: false but it doesn’t work …

rmertz3282 · September 25, 2021, 2:56pm

The thermostat name? Where did you insert that line?

Keep in mind you technically have a card within a card. The show_name: false works at the button level. The thermostat card will still have a name.

Within the tstat card I think you can override the entity name only. Try something like…

name: []

KameDomotics · September 25, 2021, 3:51pm

Many thanks!
It work with name: []

banllon2008 · September 25, 2021, 7:30pm

Hello, i would like to know how can i return a list to use it inside button card.

my orginal code , i wanna return a list value inside button card template.

          cards:
            - type: custom:button-card
              color_type: label-card
              color: rgb(44, 109, 214)
              entity: light.bed_light
              template: |
                 [[[ return variables.icon ]]]

template: |
   [[[ return variables.icon_1 ]]]

Output passed in button card template :

template: light_white

Failed:

template: |
  - [[[ return variables.icon_1 ]]]
  - [[[ return variables.icon_2 ]]]

how can i do to output a list just like below?

template: 
  - light_white
  - light_rgb

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

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;
}
´