Stack-In-Card: Drop-in replacement for vertical-stack-in-card

jukkevp · March 18, 2021, 2:03pm

Ok, but after adapting my config I get this:

My sensors are almost correct, but now my buttons are vertical!
I guess I don’t understand the whole stuff correctly.

type: 'custom:stack-in-card'
mode: vertical
cards:
  - type: 'custom:button-card'
    name: Woonkamer
    icon: 'hass:sofa'
    size: 30px
    tap_action:
      action: navigate
      navigation_path: '#p1'
  - type: 'custom:button-card'
    name: Slaapkamer Ouders
    icon: 'hass:bed'
    size: 30px
    tap_action:
      action: navigate
      navigation_path: '#p2'
  - type: 'custom:button-card'
    name: Slaapkamer Lukas
    icon: 'hass:bed'
    size: 30px
    tap_action:
      action: navigate
      navigation_path: '#p3'
  - type: 'custom:button-card'
    name: Slaapkamer Jasper
    icon: 'hass:bed'
    size: 30px
    tap_action:
      action: navigate
      navigation_path: '#p4'
  - type: 'custom:state-switch'
    entity: hash
    default: p1
    states:
      p1:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: sensor.netatmo_kerkstraat_10_woonkamer_temperature
            graph: line
            name: Temperatuur
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_humidity
            name: Luchtvochtigheid
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_co2
            name: Co2
      p2:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: sensor.slaapkamer_ouders
            naam: Temperatuur
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_humidity
            name: Luchtvochtigheid
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_co2
            name: Co2
      p3:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: >-
              sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_temperature
            naam: Temperatuur
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_humidity
            name: Luchtvochtigheid
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_co2
            name: Co2
      p4:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: sensor.slaapkamer_jasper
            name: Temperatuur

In need 2 rows, one row with my buttons, and the other with my sensors.

ASNNetworks · March 18, 2021, 2:21pm

No, that’s not what I wrote. You now created:

STACK-IN-CARD VERTICAL
  - BUTTON CARD
  - BUTTON CARD
  - BUTTON CARD
  - BUTTON CARD
  - HORIZONTAL-STACK

You need to create the button-card inside a horizontal-stack, just like all other rows you created. This is what it actually means:

175a819824256f4a9fd8c499b3417d5716713fe0

So you have ONE vertical-stack, that places all cards inside it under another. Then inside that, you place horizontal-stacks, containing cards you want in a horizontal line.

In need 2 rows, one row with my buttons, and the other with my sensors.

If you need two rows, then you need to create two rows, just like I explained. A horizontal-stack is a row of cards. So if you need 2 rows, create two horizontal-stacks and put both stacks inside a vertical-stack. Makes sense?

jukkevp · March 18, 2021, 2:53pm

Thanks for your help ASNNetworks!

Here my result:
Is it also possible to highlight the active button?
And adapt my button font size?

ASNNetworks · March 18, 2021, 3:23pm

That is all possible, but that’s not what this thread is about. That is all up to custom:button-card. You should read the docs of button-card first, because it has a lot of options and is very powerful. All is possible, but you need to make it work and spend a lot of time figuring stuff out. You need to work with state. If you need help regaring button-card, you can ask here: Lovelace: Button card - Share your Projects! / Lovelace & Frontend - Home Assistant Community (home-assistant.io)

jukkevp · March 18, 2021, 3:31pm

Thx I will do!

KaherdinTristan · March 27, 2021, 7:31pm

Thanks for a good card!
Q; Can someone tell me if, and maybe how, I could change the vertical position of the title in my card, as shown

type: 'custom:stack-in-card'
mode: horizontal
title: Badrum
keep:
  box_shadow: false
  margin: true
  border_radius: false
  background: false
  outer_padding: false
cards:
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.badrummet
    hours_to_show: 72
    line_color: green
    line_width: 4
    font_size: 80
    hour24: true
    animate: true
    show:
      name: false
      icon: false
      extrema: true
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.badrummet_2
    hours_to_show: 72
    line_color: grey
    line_width: 4
    font_size: 80
    hour24: true
    animate: true
    show:
      name: false
      icon: false
      extrema: true

Mariusthvdb · March 30, 2021, 8:13am

HI @RomRider

trying to get a background on a horizontal-stack (with a couple of custom:button-card s) in a stack-in-card, I am stuck. Apparently we can not (yet) set a background on a horizontal stack?

as explained here I’ve tried the various options known to me, and some alternatives, none of which come close to what I am looking for:
Id like the background to only show on the horizontal stack, and have the reset of the stack-in-card as regular card.

Would you know of a way, or, if not, be willing to see if either of your cards could be FR’ed…?

thanks for having a look!

bigverm23 · May 20, 2021, 2:32pm

where is the actual .js file for this? cannot find it on the page anywhere.

RomRider · May 20, 2021, 6:15pm

It is in the releases, on github.

PedroKTFC · May 22, 2021, 2:23pm

I think I’m being thick but I can’t seem to keep a margin between each card in the stack. This is what I’ve put together without any joy. Can you point me to what I should be doing. Thanks

type: 'custom:stack-in-card'
keep:
  - margin: 'true'
title: Living room
cards:
  - type: entities
    entities:
      - switch.light
      - switch.telly
  - type: media-control
    name: Sonos Beam
    entity: media_player.living_room
  - type: media-control
    entity: media_player.living_room_tv

RomRider · May 23, 2021, 2:33pm

margin: true not margin: 'true'

Jens_Wymeersch · July 16, 2021, 7:49am

Hi Rom, again an amazing card that I’m trying to fit in… I had some trouble initially figuring out how the background works but got this solved.
One maybe stupid question, but is there a simple way to play with the size and styling of the card ? Currently I tried using card-mod but without success.

ASNNetworks · July 16, 2021, 11:14am

Have you tried using mod-card (not card-mod, but is part of card-mod_. GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card

Since stack-in-card doesn’t gave an actual card, you need mod-card. Same applies to cards like vertical-stack etc.

ASNNetworks · July 16, 2021, 1:36pm

Check your indentations. Right at the top, below the mod-card. Whenever you see: card (and not cards), this ALWAYS means the code expects ONE card. So no array (-).

So leave out the (-) before the stack in card and put the indents correct, then the code is correct. (I’m on mobile right now, so difficult copy/pasting your code with fix).

Jens_Wymeersch · July 16, 2021, 1:39pm

Thank you. After another try adding card-mod, it looks like I can change the background, margin, padding of the card but not width nor length. Am I missing something ?

ASNNetworks · July 16, 2021, 1:41pm

Hard to say since you deleted your post . But I recommend you to take a look in the card-mod thread. Most likely there already has been code shared regarding this. If not, some amazing people there can help.

Jens_Wymeersch · July 16, 2021, 1:47pm

I’m already on that track, but also looking at layout card. I think the latter, should be the way forward based on what i’ve seen.
My intent is to have a small card where you can change the colour, Brightness of the light without opening the card itself. The size should be as the other cards.

      - type: "custom:stack-in-card"
        title: My Stack In Card
        keep:
          background: true
          outer_padding: true
          margin: true
        modus: vertical
        card_mod:
          style: |
            ha-card {
              --ha-card-background: teal;
            }
        cards:
          - type: entities
            entities:
              - type: "custom:slider-entity-row"
                entity: input_number.input_color
                full_row: true
                hide_state: true
                attribute: hue
            style: |
              ha-card {
                background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
              }
          - type: entities
            entities:
              - type: "custom:slider-entity-row"
                entity: input_number.input_color_temp
                full_row: true
                hide_state: true
                attribute: hue
            style: |
              ha-card {
                background: linear-gradient(to right, rgb(195, 209, 255) 0%, rgb(255,255,255) 50%, rgb(255, 169, 87) 100%);
              }

Jens_Wymeersch · July 17, 2021, 1:42pm

@ASNNetworks I’ve been able to progress. I got the card to the size I wanted but now within the card, I want to change the size of each card which seems to be impossible. Any ideas ?

code

cards:
  - type: horizontal-stack
    cards:
      - type: "custom:stack-in-card"
        keep:
          background: true
          outer_padding: true
          margin: true
        modus: vertical
        triggers_update:
            - sun.sun
        card_mod:
          style: |
            ha-card {
              height: 100px;
              background-color: var(--primary-background-color)
              box-shadow: >
                [[[
                  if (states['sun.sun'].state == "below_horizon")
                    return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
                  else if (states['sun.sun'].state == "above_horizon")
                    return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
                ]]]
            }
        cards:
          - type: entities
            entities:
              - type: "custom:slider-entity-row"
                entity: input_number.input_color
                full_row: false
                hide_state: true
                attribute: hue
            style: |
              ha-card {
                background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
              }
          - type: entities
            entities:
              - type: "custom:slider-entity-row"
                entity: input_number.input_color_temp
                full_row: true
                hide_state: true
                attribute: hue
            style: |
              ha-card {
                background: linear-gradient(to right, rgb(195, 209, 255) 0%, rgb(255,255,255) 50%, rgb(255, 169, 87) 100%);
              }
      - type: "custom:button-card"
        entity: light.master_colour_spots
        icon: "mdi:led-strip"

Jens_Wymeersch · July 20, 2021, 7:57am

@RomRider I’ve been trying card-mod, mod-card, layout-card, etc in multiple scenarios without success, and I’m ready to call it a day. Can you please let me know if you can actually change the height of the cards within the stack-in-card ? Or use layout cards within this card ?

Ildar_Gabdullin · July 20, 2021, 11:15am