[SOLVED] Height of horizontal-stack in custom:button-card (print toner monitoring)

Configuration Frontend
1

I am trying to make a pretty printer toner status monitor. I can make the bar chart nicely enough but cannot set a height for the horizontal-stack component. I have fudged it (see the diagram on the right) by sticking in invisble buttons of 200px high, but when I leave that out, the box collapses. Having invisible things to set the height offends me (I feel I am back in the 90s) and there must be a sensible way.

I am using the following to get boxes that sit at the bottom.

    - position: absolute
    - bottom: 0px

I have tried many many approaches and looked at various add-ons and read much but it is beyond me. Anyone got any ideas? Thanks.

Screenshot 2023-11-14 215650
Screenshot 2023-11-14 2156502027×909 44.1 KB

views:
  - title: Home
    cards:
      - square: false
        type: grid
        cards:
          - type: entity
            entity: counter.paper_used
            name: Paper remaining in tray
            unit: sheets
            state_color: false
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                color_type: card
                layout: vertical
                show_state: true
                show_name: true
                show_label: true
                color: rgb(255, 255, 0)
                styles:
                  card:
                    - height: |
                        [[[
                          var toner = 2 * (states['sensor.hl_l8250cdn_yellow_toner_remaining'].state);
                          return (toner ? toner : '0') + 'px';
                        ]]]
                    - position: absolute
                    - bottom: 0px
2

Once you say position: absolute its height no longer influences the height of the parent. So you need to style the parent’s height yourself. Rather than using horizontal-stack (which cannot be styled) you could use stack-in-card and then give it a height.

  - type: custom:stack-in-card
    style: "ha-card { height: 400px }"
    cards:

I’m not sure if style will work by itself, as I might have some addon handling that. If it doesn’t work for you, install and use card_mod thru HACS instead.

  - type: custom:stack-in-card
    card_mod:
      style: "ha-card { height: 400px }"
    cards:

I have not tested your code myself though.

3

You could use aspect ratio and a linear gradient:


type: custom:button-card
entity: sensor.vibrationssensor_battery
triggers_update: '[[[ return entity; ]]]'
variables:
  tint: cyan
  bg: rgba(0,0,0,0)
  level: |
    [[[ return entity?.state || 0; ]]]
show_icon: false
show_name: false
show_state: true
aspect_ratio: 1
styles:
  card:
    - border-width: 0
    - background: |
        [[[
          return `linear-gradient(0deg, 
            ${variables.tint} 0%, 
            ${variables.tint} ${variables.level}%, 
            ${variables.bg} 0%, 
            ${variables.bg} 100%)`;
        ]]]
tap_action:
  action: more-info

computes

IMG_0293
IMG_02931668×698 64.6 KB

(on the left the original code example)

Between Entity Card and Horizontal Stack I’ve inserted


type: custom:button-card
color_type: label-card
color: rgba(0,0,0,0)
tap_action:
  action: none
styles:
  card:
    - border-width: 0

that works as a gap.

4

Thank you both. I appreciate the answers. @michaelblight that one looks like I might need a custom component that I have not installed yet, maybe later…

@pedolsky that is something I could not have thought of. It gets me very close but for some reason the bars are way shorter than yours. What am I missing?

Screenshot 2023-11-15 184806
Screenshot 2023-11-15 1848061040×636 21.7 KB

views:
  - title: Home
    cards:
      - square: false
        type: grid
        cards:
          - type: entity
            entity: counter.paper_used
            name: Paper remaining in tray
            unit: sheets
            state_color: false
          - type: custom:button-card
            color_type: label-card
            color: rgba(0,0,0,0)
            tap_action:
              action: none
            styles:
              card:
                - border-width: 0
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: sensor.hl_l8250cdn_cyan_toner_remaining
                triggers_update: '[[[ return entity; ]]]'
                variables:
                  tint: cyan
                  bg: rgba(0,0,0,0)
                  level: |
                    [[[ return entity?.state || 0; ]]]
                show_state: true
                show_icon: false
                show_name: false
                aspect-ratio: 1
                styles:
                  card:
                    - border-width: 0
                    - background: |
                        [[[
                          return `linear-gradient(0deg, 
                            ${variables.tint} 0%, 
                            ${variables.tint} ${variables.level}%, 
                            ${variables.bg} 0%, 
                            ${variables.bg} 100%)`;
                        ]]]
              - type: custom:button-card
                entity: sensor.hl_l8250cdn_magenta_toner_remaining
                triggers_update: '[[[ return entity; ]]]'
                variables:
                  tint: magenta
                  bg: rgba(0,0,0,0)
                  level: |
                    [[[ return entity?.state || 0; ]]]
                show_state: true
                show_icon: false
                show_name: false
                aspect-ratio: 1
                styles:
                  card:
                    - border-width: 0
                    - background: |
                        [[[
                          return `linear-gradient(0deg, 
                            ${variables.tint} 0%, 
                            ${variables.tint} ${variables.level}%, 
                            ${variables.bg} 0%, 
                            ${variables.bg} 100%)`;
                        ]]]    
              - type: custom:button-card
                entity: sensor.hl_l8250cdn_yellow_toner_remaining
                triggers_update: '[[[ return entity; ]]]'
                variables:
                  tint: yellow
                  bg: rgba(0,0,0,0)
                  level: |
                    [[[ return entity?.state || 0; ]]]
                show_state: true
                show_icon: false
                show_name: false
                aspect-ratio: 1
                styles:
                  card:
                    - border-width: 0
                    - background: |
                        [[[
                          return `linear-gradient(0deg, 
                            ${variables.tint} 0%, 
                            ${variables.tint} ${variables.level}%, 
                            ${variables.bg} 0%, 
                            ${variables.bg} 100%)`;
                        ]]]    
              - type: custom:button-card
                entity: sensor.hl_l8250cdn_black_toner_remaining
                triggers_update: '[[[ return entity; ]]]'
                variables:
                  tint: white
                  bg: rgba(0,0,0,0)
                  level: |
                    [[[ return entity?.state || 0; ]]]
                show_state: true
                show_icon: false
                show_name: false
                #show_label: false
                aspect-ratio: 1
                styles:
                  card:
                    - border-width: 0
                    - background: |
                        [[[
                          var toner = 2 * (states['sensor.hl_l8250cdn_black_toner_remaining'].state);
                          return `linear-gradient(0deg, 
                            ${variables.tint} 0%, 
                            ${variables.tint} ${variables.level}%, 
                            ${variables.bg} 0%, 
                            ${variables.bg} 100%)`;
                        ]]]                      
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                color_type: icon
                entity: sensor.hl_l8250cdn_cyan_toner_remaining
                layout: vertical
                show_state: true
                show_name: true
                show_label: true
                color: rgb(0, 255, 255)
              - type: custom:button-card
                color_type: icon
                entity: sensor.hl_l8250cdn_magenta_toner_remaining
                layout: vertical
                show_state: true
                show_name: true
                show_label: true
                color: rgb(255, 0, 255)
              - type: custom:button-card
                color_type: icon
                entity: sensor.hl_l8250cdn_yellow_toner_remaining
                layout: vertical
                show_state: true
                show_name: true
                show_label: true
                color: rgb(255, 255, 0)
              - type: custom:button-card
                color_type: icon
                entity: sensor.hl_l8250cdn_black_toner_remaining
                layout: vertical
                show_state: true
                show_name: true
                show_label: true
                color: rgb(255, 255, 255)
        columns: 1
5

It’s aspect_ratio

P.S.: You can also try aspect_ratio: 1/2 to get longer bars.

6

Got it. It works perfectly with the aspect ratio moved further out in to the card. Thank you so much. This is exactly what I wanted.

card:
  - aspect-ratio: 0.8 #moved out to here
  - border-width: 0
  - background: |
      [[[
        return `linear-gradient(0deg, 
          ${variables.tint} 0%, 
          ${variables.tint} ${variables.level}%, 
          ${variables.bg} 0%, 
          ${variables.bg} 100%)`;
      ]]]

My whole working card is attached below.

Screenshot 2023-11-15 212009
Screenshot 2023-11-15 2120091021×750 20.1 KB

views:
  - title: Home
    cards:
      - square: false
        type: grid
        cards:
          - type: entity
            entity: counter.paper_used
            name: Paper remaining in tray
            unit: sheets
            state_color: false
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: sensor.hl_l8250cdn_cyan_toner_remaining
                triggers_update: '[[[ return entity; ]]]'
                variables:
                  tint: cyan
                  bg: rgba(0,0,0,0)
                  level: |
                    [[[ return entity?.state || 0; ]]]
                show_state: false
                show_icon: false
                show_name: false
                styles:
                  card:
                    - aspect-ratio: 0.8
                    - border-width: 0
                    - background: |
                        [[[
                          return `linear-gradient(0deg, 
                            ${variables.tint} 0%, 
                            ${variables.tint} ${variables.level}%, 
                            ${variables.bg} 0%, 
                            ${variables.bg} 100%)`;
                        ]]]
              - type: custom:button-card
                entity: sensor.hl_l8250cdn_magenta_toner_remaining
                triggers_update: '[[[ return entity; ]]]'
                variables:
                  tint: magenta
                  bg: rgba(0,0,0,0)
                  level: |
                    [[[ return entity?.state || 0; ]]]
                show_state: false
                show_icon: false
                show_name: false
                styles:
                  card:
                    - aspect-ratio: 0.8
                    - border-width: 0
                    - background: |
                        [[[
                          return `linear-gradient(0deg, 
                            ${variables.tint} 0%, 
                            ${variables.tint} ${variables.level}%, 
                            ${variables.bg} 0%, 
                            ${variables.bg} 100%)`;
                        ]]]    
              - type: custom:button-card
                entity: sensor.hl_l8250cdn_yellow_toner_remaining
                triggers_update: '[[[ return entity; ]]]'
                variables:
                  tint: yellow
                  bg: rgba(0,0,0,0)
                  level: |
                    [[[ return entity?.state || 0; ]]]
                show_state: false
                show_icon: false
                show_name: false
                styles:
                  card:
                    - aspect-ratio: 0.8
                    - border-width: 0
                    - background: |
                        [[[
                          return `linear-gradient(0deg, 
                            ${variables.tint} 0%, 
                            ${variables.tint} ${variables.level}%, 
                            ${variables.bg} 0%, 
                            ${variables.bg} 100%)`;
                        ]]]    
              - type: custom:button-card
                entity: sensor.hl_l8250cdn_black_toner_remaining
                triggers_update: '[[[ return entity; ]]]'
                variables:
                  tint: white
                  bg: rgba(0,0,0,0)
                  level: |
                    [[[ return entity?.state || 0; ]]]
                show_state: false
                show_icon: false
                show_name: false
                styles:
                  card:
                    - aspect-ratio: 0.8
                    - border-width: 0
                    - background: |
                        [[[
                          var toner = 2 * (states['sensor.hl_l8250cdn_black_toner_remaining'].state);
                          return `linear-gradient(0deg, 
                            ${variables.tint} 0%, 
                            ${variables.tint} ${variables.level}%, 
                            ${variables.bg} 0%, 
                            ${variables.bg} 100%)`;
                        ]]]                      
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                color_type: icon
                entity: sensor.hl_l8250cdn_cyan_toner_remaining
                layout: vertical
                show_state: true
                show_name: true
                show_label: true
                color: rgb(0, 255, 255)
              - type: custom:button-card
                color_type: icon
                entity: sensor.hl_l8250cdn_magenta_toner_remaining
                layout: vertical
                show_state: true
                show_name: true
                show_label: true
                color: rgb(255, 0, 255)
              - type: custom:button-card
                color_type: icon
                entity: sensor.hl_l8250cdn_yellow_toner_remaining
                layout: vertical
                show_state: true
                show_name: true
                show_label: true
                color: rgb(255, 255, 0)
              - type: custom:button-card
                color_type: icon
                entity: sensor.hl_l8250cdn_black_toner_remaining
                layout: vertical
                show_state: true
                show_name: true
                show_label: true
                color: rgb(255, 255, 255)
        columns: 1
1 Like