Lovelace: Button card

Share your Projects! Dashboards & Frontend
6579

Bump if anyone can help :slight_smile:

6580

Iā€™m trying to make something like in the below image, if anyone could help or has any ideas of how to do it that would be great. I managed to make a round gradient button but canā€™t figure out how to make a square button around it and have it change with an on/off state.

image
image925Ɨ289 24.1 KB 

type: custom:button-card
show_state: true
hold_action:
 action: none
tap_action:
 action: call-service
 haptic: medium
 service: scene.turn_on
 service_data:
   entity_id: scene.default
styles:
  card:
     - background: 'linear-gradient(110deg, #6d3c01, #fea980)'
     - height: 50px
     - width: 50px
     - border-radius: 50%
3 Likes
6581

Would like some help in this as well

i thought it might also work if this was intergrated into the settings tab but with no luck

6582

Hi, sorry if this was asked before, tried to search in this post but it has over 6000 replies so excuse me please.

Is it possible that I can stack two mdi/phu icons together? Basicaly overlap them so I can get it displayed as one?

thanks!

6583

Kind of this?

type: custom:button-card
styles:
  grid:
    - grid-template-areas: '"icon_1 icon_2"'
custom_fields:
  icon_1: |
    [[[
      return `<ha-icon
        icon="mdi:white-balance-sunny"
        style="width: 32px; height: 32px; color: orange;">
        </ha-icon>`
    ]]]
  icon_2: |
    [[[
      return `<ha-icon
        icon="mdi:circle-outline"
        style="width: 32px; height: 32px; color: green;">
        </ha-icon>`
    ]]]
card_mod:
  style: |
    div#icon_2 {
      grid-column-start: 1 !important;
    }

image

6584

Yes - thank you! I will try implementing this into my code :slight_smile:

6585

Hi everybody,

Iā€™m playing with button_card and something (ok that really a detailā€¦) annoying meā€¦

  graph_temp_hum:
    variables:
      entity: "sensor.xiaomi_multisensor_salon_humidite"
      color: "var(--info-color)"
      name: "Default name"
      icon: "mdi:adjust"
    styles:
      card:
        - padding: 0px
      grid:
        - grid-template-areas: '"item1" "item2"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr max-content
    custom_fields:
      item1:
        card:
          entity: '[[[ return variables.entity ]]]'
          icon: '[[[ return variables.icon ]]]'
          template:
            - icon_info_vertical
          style: |
            ha-card {
              box-shadow: none;
              background: none;
              border-radius: var(--border-radius);
            }
          styles:
            card:
              - top: 12px
              - left: 12px
              - height: 47px
          type: 'custom:button-card'
      item2:
        card:
          type: 'custom:mini-graph-card'
          entities:
            - entity: '[[[ return variables.entity ]]]'
          line_color: '[[[ return variables.color ]]]'
          line_width: 10
          font_size: 55
          height: 120
          show:
            name: false
            icon: false
            legend: false
            state: true
          style: |
            ha-card {
              box-shadow: none;
              background: none;
              border-radius: var(--border-radius);
            }
          styles:
            card:
              - top: 4px
              - left: 12px

And the result:

image
image1073Ɨ626 85.5 KB

How to reduce the tiny white gap ?

Thank you !!

1 Like
6586

tablet_dash
tablet_dash992Ɨ578 103 KB

1 Like
6587

Having a blank, hoping someone can help with the best way to have two objects directly overlapping each other and centered both left/right and top/down? Would it be a grid with absolute positioning?

Trying to get these two objects (apex chart and button) over each other:
image

6589

unfortunately, it is not available now :frowning:

6590

Sorry, I use a different dashboard now and donā€™t have the old version stored anywhere

6591

I have multiple WiZ Light Bulbs that I am using the newly added integration for.

The integration reports back the state of the bulb, but itā€™s difficult to display an accurate bulb color when a bulb effect is in use (see below). Iā€™d like to specify an RGB value for the icon color based on the active effect (examplesā€¦ Ocean: Blue, Romance: Pink, Sunset: Orange, Forest: Green, ā€¦)

Iā€™ve been lost at how to parse this, when the attribute for ā€œeffectā€ is only present when an effect is active.

min_mireds: 153
max_mireds: 454
effect_list:
  - Ocean
  - Romance
  - Sunset
  - Party
  - Fireplace
  - Cozy
  - Forest
  - Pastel Colors
  - Wake up
  - Bedtime
  - Warm White
  - Daylight
  - Cool white
  - Night light
  - Focus
  - Relax
  - True colors
  - TV time
  - Plantgrowth
  - Spring
  - Summer
  - Fall
  - Deepdive
  - Jungle
  - Mojito
  - Club
  - Christmas
  - Halloween
  - Candlelight
  - Golden white
  - Pulse
  - Steampunk
  - Rhythm
supported_color_modes:
  - color_temp
  - rgbw
friendly_name: Office02
supported_features: 4
color_mode: brightness
brightness: 128
effect: Deepdive

min_mireds: 153
max_mireds: 454
effect_list:
  - Ocean
  - Romance
  - Sunset
  - Party
  - Fireplace
  - Cozy
  - Forest
  - Pastel Colors
  - Wake up
  - Bedtime
  - Warm White
  - Daylight
  - Cool white
  - Night light
  - Focus
  - Relax
  - True colors
  - TV time
  - Plantgrowth
  - Spring
  - Summer
  - Fall
  - Deepdive
  - Jungle
  - Mojito
  - Club
  - Christmas
  - Halloween
  - Candlelight
  - Golden white
  - Pulse
  - Steampunk
  - Rhythm
supported_color_modes:
  - color_temp
  - rgbw
friendly_name: Office02
supported_features: 4
color_mode: color_temp
brightness: 128
color_temp: 184
hs_color:
  - 27.746
  - 13.648
rgb_color:
  - 255
  - 236
  - 220
xy_color:
  - 0.356
  - 0.344
6592

Neither of these work. What am I missing?

                tap_action:
                  action: call-service
                  service: button.press
                  target:
                    entity_id: button.all_open

                tap_action:
                  action: call-service
                  service: button.press
                  service-data:
                    entity_id: button.all_open
6593

I think service-data: should be service_data: i.e. underscore, not hyphen.

1 Like
6594

Right. Thanks.

6595

I have Wiz as well but Iā€™m not using a bulb icon in my interface. In your case, if the bulb is off could you not use a light grey icon for the bulb icon? Like you say the bulb reports back the effect when the bulb is on.

In my case

min_mireds: 153
max_mireds: 454
effect_list: Ocean, Romance, Sunset, Party, Fireplace, Cozy, Forest, Pastel Colors, Wake up, Bedtime, Warm White, Daylight, Cool white, Night light, Focus, Relax, True colors, TV time, Plantgrowth, Spring, Summer, Fall, Deepdive, Jungle, Mojito, Club, Christmas, Halloween, Candlelight, Golden white, Pulse, Steampunk, Rhythm
supported_color_modes: color_temp, rgbww
friendly_name: WiZ RGBWW Tunable 3E33FE
supported_features: 4
color_mode: brightness
brightness: 255
effect: Christmas
6596

How can I display the entity picture of a media_player on the background of a button?

6597

@mdb17 What is the ā€œentity pictureā€? Do you mean some cover art or? Wouldnā€™t it be dependent on if the media_player in question is delivering the art?

6598

Iā€™m my case itā€™s a roku player that I am wanting to display the picture of the app that is currently open. The roku entity displays this in

entity_picture: >-
  /api/media_player_proxy/media_player.43_tcl_roku_tv?token=889ebfe32a2b469fe7a0800feda9099d4ee08b16bb6c8a591358e877641ca0f4&cache=97b9c6b5e83572

I have been able to apply that to background: url and it will display it but I want to be able to use the entity id

6599

Would you mind sharing the entire code? It looks incomplete (the first part seems to be missing).

Thank you in advance!