Lovelace: Button card

[kaosmagix (Cristian Van Loenen)]

@petro

transparent_1to1.png

Thanks, with the image the positioning is correct. However, the graph is not showing. the plugin and history data is present. Below, the output of only the graph part of your sample and the output of your button beneath it.

The lovelace code:

# lovelace_gen
title: Test
icon: mdi:test-tube
cards:
- type: custom:mini-graph-card
  style:
    top: 40%
    left: 50%
    width: 100%
    height: 80%
    translate: translate(-50%, -50%)
    '--paper-card-background-color': 'rgba(0, 0, 0, 0.0)'
    '--ha-card-background': "rgba(0, 0, 0, 0.0)"
    '--ha-card-box-shadow': 'none'
    z-index: 3
    pointer-events: none
  entities:
    - sensor.dsmr_reading_electricity_currently_delivered
  group: true
  points_per_hour: 1
  hour24: true
  line_color: '#ff3300'
  line_width: 10
  hours_to_show: 24
  update_interval: 600
  show:
    name: false
    icon: false
    state: false
    points: false
    legend: false
    average: false
    extrema: false
    labels: false
    fill: false
    labels_secondary: false
    name_adaptive_color: false
    icon_adaptive_color: false


- type: horizontal-stack
  cards:
  - !include
    - '../includes/graph_button.yaml'
    - entity: sensor.dsmr_reading_electricity_currently_delivered
      ratio: 1/1
      icon: mdi:flash
  - !include
    - '../includes/graph_button.yaml'
    - entity: sensor.dsmr_reading_electricity_currently_delivered
      color: '#ff3300'
      ratio: 1/1
      icon: mdi:flash
  - !include
    - '../includes/graph_button.yaml'
    - entity: sensor.dsmr_reading_electricity_currently_delivered
      color: '#ff3300'
      ratio: 1/1
      icon: mdi:flash

Any idea what the reason could be it doesn’tshow the graph?

[petro]

No clue, did you change anything with the code I posted?

[kaosmagix (Cristian Van Loenen)]

No, just copied the code,pasted it into an include. Created the simple view and it works except for the graph (which works fine if just copy/pasted that as a separate card). I might try it with a few different sensors as there seems some logic in the code which might affect this in your code

[petro]

There’s no logic, it drops the entity directly into the mini-graph-card.

[kaosmagix (Cristian Van Loenen)]

Interesting, it actually just works, it only takes a very long time before it is displayed on the tile (so I didn’t see it before). If you wait a minute the graph is there. I think this is directly related to the graph component and maybe the recorded history. I will try to look into that. Thanks for your great help and your work in this topic!

UPDATE: It is caused by the “update_interval” property, when remove this it displays in a second. Not sure why that doesn’t affect the standalone graph, that doesn’t make much sense.

[RomRider]

You should report an issue, I think it is is related to this

[VPC]

Can someone help me get into these attributes? I’m looking to have a button card for each of my BOSE SoundTouch players. These like the Sonos can be paired together into a “play all” so they all have the same timing for the music.

I would like to have a button card for each SoundTouch player that will be “on” when that speaker is part of the play all zone. If it is not in the play all zone then I would like to be able to tap_action the card to send the play all command to BOSE Soundtouch.

When I look at the states for the media player I get the following (below). I would like to be able to detect and put the button card “on” when the player is in the soundtouch_group.

Basically I want to capture if media_player.soundtouch_living_room is in the list of soundtouch_group. I’m not sure how to write this if statement since what comes back in soundtouch_group is a list.

entity: media_player.soundtouch_living_room
state: playing

state attributes
source_list:
  - AUX
  - BLUETOOTH
volume_level: 0.21
is_volume_muted: false
media_title: Antenne Bayern
media_artist: Antenne Bayern - Verkehrsservice
media_track: Antenne Bayern
source: TUNEIN
soundtouch_zone:
  master: media_player.soundtouch_wireless_adapter_living_room
  is_master: false
  slaves:
    - media_player.soundtouch_wireless_adapter_living_room
    - media_player.soundtouch_living_room
    - media_player.soundtouch_chris_office
soundtouch_group:
  - media_player.soundtouch_wireless_adapter_living_room
  - media_player.soundtouch_wireless_adapter_living_room
  - media_player.soundtouch_living_room
  - media_player.soundtouch_chris_office
friendly_name: SoundTouch Living Room
entity_picture: >-
  /api/media_player_proxy/media_player.soundtouch_living_room?token=e84a05d8fa488a3c3ea1de6ecf96dfe133f57d366dd18b80b03433a383e6ec01&cache=1c12a1eb05bc7c1e
supported_features: 20413

[RomRider]

I’d do it this way:

variables:
  is_on: |
    [[[
      return entity && entity.attributes && entity.attributes.soundtouch_group.includes(entity.entity_id);
    ]]]
state:
  - value: '[[[ return variables.is_on ]]]'
    operator: template
    styles:
      # THE STYLES YOU WANT WHEN ON (ie. when in the group)
tap_action:
  action: '[[[ return variables.is_on ? "none" : "call-service" ]]]'
  service: THE.SERVICE
  service_data:
    THE_SERVICE_DATA

Edit: some typos

[VPC]

That’s awesome. Thank you so very much!!

[clemalex]

Hi, and thanks for this card type !
is there a way to use “button_card_templates” in UI mode ( UI to edit Lovelace interface) and not yaml mode ?

i am in UI mode and i would like to use the same template for all my button on a view without repeat code…

thanks.

[jonslilbro]

Seem to be having a problem set a card color dependent on if one state is greater than another entities state (one is target temperature, the other is actual temperature, I want it red when it’s heating and green when it’s reached target temperature).

Currently using (with no success)

- entity: sensor.octoprint_actual_bed_temp
     icon: 'mdi:crop-square'
      layout: icon_state
      name: Bed Temp
      show_name: false
      show_state: true
      color_type: card
      color: |
        [[[
          if (states.sensor.octoprint_actual_bed_temp.state > states.sensor.octoprint_target_bed_temp.state)
            return 'green';
          else
            return 'red';
        ]]]
      tap_action:
        action: more-info
      type: 'custom:button-card'

Any ideas?

[RomRider]

color doesn’t support template.
Instead, put the same code here:

styles:
  card:
    - background-color: YOUR CODE HERE

[ronschaeffer]

I’m trying to choose a different entity_picture based on the current user, but it’s not working. Any suggestions are much appreciated.

In the following configuration, the template for entity_picture always evaluates to true, regardless of user. I have also tried using user IDs instead of user names.

entity_picture: |
  [[[
    if ( user = "TOPFLOORTAB")
      return "/local/images/logos/sonos_white.png";
    else
      return "/local/images/logos/sonos_black.png";
  ]]]
show_entity_picture: true
styles:
  card:
    - padding: 15px
    - height: 60px
    - width: 120px
  entity_picture:
    - height: 17px
    - width: 86px
tap_action:
  action: call-service
  service: script.turn_on
  service_data:
    entity_id: script.call_sonos_topfloortab_launch
type: 'custom:button-card'

[RomRider]

user is an object, it contains a bunch of stuff.
user.name is the real user name (not the login username)
user.id is the user id

[VPC]

I’m working on getting my blinds into cards. So far I have this layout with the buttons along the bottom. I would like to have the buttons down the right hand side. I can’t figure out the css for this. Lack of knowledge on my side and I’m a loop of try it now, try it now and is becoming frustrating. Could someone with css know how help me get the buttons to the right hand side in a column?

The yaml I have for that part is

            styles:
              grid:
                - grid-template-areas: '"i i i i i" "n n n n n" ". up stop down ."'
                - grid-template-rows: min-content 1fr 0.28fr
                - grid-template-columns: 5% 1fr 1fr 1fr 5%

[petro]

            - grid-template-areas: '"i i up" "n n stop" ". . down"'

FYI take a look at the grid-template-areas section of the buttoncard help. It draws a diagram of how this field works.

[VPC]

@petro

• grid-template-areas: ‘“i i up” “n n stop” “. . down”’

              grid:
#                - grid-template-areas: '"i i i i i" "n n n n n" ". up stop down ."'
#                - grid-template-rows: min-content 1fr 0.28fr
#                - grid-template-columns: 5% 1fr 1fr 1fr 5%
                - grid-template-areas: '"i i up" "n n stop" ". . down"'
                - grid-template-rows: min-content 1fr 0.28fr
                - grid-template-columns: 5% 1fr 1fr 1fr 5%

[petro]

You have to adjust a few other things to match your grid-template-areas.

            styles:
              card:
              - padding: 5%
              grid:
              - grid-template-areas: '"i i up" "n n stop" ". . down"'
              - grid-template-rows: 1fr 1fr 1fr
              - grid-template-columns: 1fr 1fr 1fr

[VPC]

@petro

1fr 1fr 1fr

Thank you! That is just what I needed. I am so new to Home Assistant (coming from HomeSeer) that I just need to get something into production on my panels. Mad rush for approval factor. I am planning on learning css in the future. Thank you for getting me over the hump!!

              grid:
#                - grid-template-areas: '"i i i i i" "n n n n n" ". up stop down ."'
#                - grid-template-rows: min-content 1fr 0.28fr
#                - grid-template-columns: 5% 1fr 1fr 1fr 5%
                - grid-template-areas: '"i i up ." "n n stop ." ". . down ."'
                - grid-template-rows: 1fr 1fr 1fr
                - grid-template-columns: 1fr 1fr 1fr 10%

I’m planning on adding the % open under the name (Left) and then an icon top left representing the blind itself.

A long press on the button will eventually bring the user a popup with sliders for all of the blinds for more precise control.

Thanks again!

[petro]

FYI Don’t bother with the padding inside the grid. Add it to the card.

padding: 5% 5% 5% 5% will put 5% around each side

it’s the same as this too

`padding: 5%’

Just google padding CSS and it will teach you how to pad each side of an area.