How to set max size to button card

Configuration Frontend
1

using a conditional set of custom button-cards, I am left with the challenge to set a max size to the (variable number of) buttons while also retaining aspect_ratio: 1/1

the framework of the buttons is as follows:

type: conditional
conditions:
  - entity: binary_sensor.alerts #package package_hassio_pi4_system
    state: 'on'
card:
  type: vertical-stack
  cards:

    - type: 'custom:button-card'
      name: 'Alerts: action required'
      template: button_default_title_fixed
      styles:
        card:
          - background-color: red

    - type: horizontal-stack

      cards:

        - !include /config/lovelace/includes/include_button_trash_alert.yaml

        - type: conditional
          conditions:
            - entity: binary_sensor.schimmel_alert
              state: 'on'
          card: !include /config/lovelace/includes/include_button_ventilate.yaml

        - type: conditional
          conditions:
            - entity: persistent_notification.updater_notification
              state: notifying
          card: !include /config/lovelace/includes/include_button_updater.yaml

        - type: conditional
          conditions:
            - entity: binary_sensor.meteoalarm_brabant
              state: 'on'
          card: !include /config/lovelace/includes/include_button_meteoalarm_alert.yaml

        - type: custom:button-card
          color_type: blank-card

    - type: custom:button-card
      template: vertical-filler

Now I ‘know’ a situation where all 4 cards would be alive together will never happen, so Ive aded a custom blank-card in there, otherwise a single alert card would even be bigger.

I’d love the cards to have a max setting as if 4 cards in the horizontal-stack would be alive.

Can this be achieved?

as an example the Alert setup as it is now, with 1 alert going on, together with the card below, with the desired 4 button size for comparison:

25
25912×1136 183 KB

suppose I couldn’t set a dynamic number of blank cards, based on the number of live cards?

I’d love to get to this:

58
58906×682 174 KB

please have a look? thanks!

2

I think you’ll have to have a conditional based on the number of cards that will appear in that area and then make each possibility with only the number of cards that will be displayed.

3

yeah, I fear I have to come up with something manual like that… not too simple though.

Didn’t @RomRider mention he was considering something with a grid in one of the threads? this would be a nice trick, a conditional grid of sorts based on entities states…

or another way maybe: set these buttons to a fixed width, and use Lay-out card to do the lay outing…🔹 Layout-card - Take control of where your cards end up

can that be done @thomasloven?, based on a sensor counting the number of alerts to be displayed (in my use-case here). assume a grid of 4 buttons (button-card), condition binary alert is on, show:

count alert 1: show button 1 of 4
count alert 2: show button 2 of 4
etc
etc
and most importantly, show these buttons left to right, no matter which alert is on…

4

would this be the best counter syntax:

{% set alerts = ['binary_sensor.schimmel_alert','binary_sensor.hubs_offline','binary_sensor.critical_devices_offline',
          'binary_sensor.meteoalarm_brabant','binary_sensor.updater_notification',
          'binary_sensor.trash_notification'] %}
{{ states|selectattr('entity_id','in',alerts)
             |selectattr('state','eq','on')|list|count}}

to count the needed buttons? I could create lets say 4 layouts depending on that count…

5

Yeah that would work! Still would be a lot of code. I’ve always wanted to do something like this with the button card.

6

yeah, now have this in my view:

cards:

#  - !include /config/lovelace/includes/include_button_marquee_alerts.yaml

#  - !include /config/lovelace/buttons/buttons_alerts.yaml

  - !include /config/lovelace/buttons/buttons_alerts_1.yaml

  - !include /config/lovelace/buttons/buttons_alerts_2.yaml

  - !include /config/lovelace/buttons/buttons_alerts_3.yaml

  - !include /config/lovelace/buttons/buttons_alerts_4.yaml

and a view is like:

type: conditional
conditions:
  - entity: sensor.alerts_counter #package package_hassio_pi4_system
    state: '1'
card:
  type: vertical-stack
  cards:

    - !include /config/lovelace/includes/include_button_marquee_alerts.yaml

#    - type: 'custom:button-card'
#      name: 'Alerts: action required'
#      template: button_default_title_fixed
#      styles:
#        card:
#          - background-color: red

    - type: horizontal-stack
      cards:

        - type: conditional
          conditions:
            - entity: binary_sensor.trash_notification
              state: 'on'
          card: !include /config/lovelace/includes/include_button_trash_alert.yaml

        - type: conditional
          conditions:
            - entity: binary_sensor.schimmel_alert
              state: 'on'
          card: !include /config/lovelace/includes/include_button_ventilate.yaml

        - type: conditional
          conditions:
            - entity: binary_sensor.updater_notification
              state: 'on'
          card: !include /config/lovelace/includes/include_button_updater.yaml

        - type: conditional
          conditions:
            - entity: binary_sensor.meteoalarm_brabant
              state: 'on'
          card: !include /config/lovelace/includes/include_button_meteoalarm_alert.yaml

        - type: conditional
          conditions:
            - entity: binary_sensor.hubs_offline
              state: 'on'
          card: !include /config/lovelace/includes/include_button_sensor_hubs.yaml

        - type: conditional
          conditions:
            - entity: binary_sensor.critical_devices
              state: 'on'
          card: !include /config/lovelace/includes/include_button_sensor_status.yaml

        - type: custom:button-card
          color_type: blank-card

        - type: custom:button-card
          color_type: blank-card

        - type: custom:button-card
          color_type: blank-card

    - type: custom:button-card
      template: vertical-filler

have one of those for 1 to 4 alerts…

but, just downloaded state-switch. Should at least make my home-view nicer (based on the alert-counter state)

after that, hope to do something with the layout-card. didn’t see yet though if we can template that somehow…

since the order of the alert buttons is now ‘fixed’, there seems to be a very small horizontal gap if the card are no displayed, and lets say the updater card only (like now) is shown.

04
04810×292 38.1 KB

Still we are getting closer… :wink:

small update

this works:

cards:

  - type: custom:state-switch
    default: ''
    entity: sensor.alerts_counter
    states:
      '1':
        !include /config/lovelace/buttons/buttons_alerts_1.yaml
      '2':
        !include /config/lovelace/buttons/buttons_alerts_2.yaml
      '3':
        !include /config/lovelace/buttons/buttons_alerts_3.yaml
      '4':
        !include /config/lovelace/buttons/buttons_alerts_4.yaml