Is there a way to create a fold to hide/show lovelace cards?

Configuration
1

There is a great component for lovelace lovelace-fold-entity-row — it can be used to create folds in the entities card.

But I would like to creates folds to hide other cards (for example, buttons, or even vertical-stack with other cards).

Is it possible?

2

So one way to accomplish this is with the custom multiple-entity-row card. This is my favorite control for several reasons. It is highly configurable and works well. It allows you to create information-dense UI controls that look good. Finally, all the content is created in the backend which means that you won’t see template data flash on-screen before it gets rendered.

So let say you want to display the status of all the lights in the house. First, create a group for the lights. This group will be used to create a popup displaying the status of each light with plus toggles for adjustment. Next to make things look nice create a template sensor. Finally put it all together in the UI.

group:
  lights:
    name: Lights
    entities:
      - switch.alcove
      - switch.bar
      - switch.counter
      - switch.dome
      - switch.entry

sensor:
  - platform: template
    sensors:
      lights: # pretty 'lights on' count for ui
        friendly_name: 'Lights'
        icon_template: mdi:lightbulb-on
        entity_id:
          - switch.alcove
          - switch.bar
          - switch.counter
          - switch.dome
          - switch.entry
        value_template: >
          {% set ns = namespace(count=0) %}
          {% set lights = state_attr('group.lights', 'entity_id') %}
          {% for l in lights %}
            {% if states(l) == 'on' %} {% set ns.count = ns.count + 1 %}
            {% endif %}
          {% endfor %}
          {% if ns.count %} 
            {{ ns.count }} light {%- if ns.count > 1 -%} s {% endif %} on 
          {% else %} all off {% endif %}

type: entities
title: 'At a glance'
show_header_toggle: false
state_color: true
entities:
  - entity: sensor.lights
    type: custom:multiple-entity-row
    tap_action:
      entity: group.lights
      action: more-info

This will create a control with the name Lights, a lightbulb icon, and a state message of how many lights are currently on. If you click on the name or state a popup will appear listing all the lights with toggles on each for adjustments.

1 Like
3

I am doing it by defining a dummy switch that I stack above the card to show/hide and then make that a conditional card depending on the above switch. Works perfectly!

So I have this panel that collects all data from my solar inverter, which is a long list that I rarely actually look at. So I want to hide it completely by default and just switch it on occasionally. I define an according boolean flag in configuration:

input_boolean:
  show_inverter_infos:
    name: Kostal Inverter Infos
    icon: mdi:solar-power

Then I create the vertical stack with the switch on top and the conditional card to be hidden or shown below:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_boolean.show_inverter_infos
  - type: conditional
    conditions:
      - entity: input_boolean.show_inverter_infos
        state: 'on'
    card:
      type: 'custom:auto-entities'
      card:
        type: entities
        title: Kostal Inverter
      filter:
        include:
          - entity_id: '*kostal*'

And that’s already all. I can then switch the lower part of the stack on and off, no matter what content:

image
image1002×340 7.65 KB

and switched on:
image
image1020×1908 200 KB

7 Likes
4

As no one did it before me: Thank you habitoti! This was exactly what I was looking for.

2 Likes
5

Hi All,

As of you all, i have the same requirement.

So 3 questions:

  • I guess that until now no one found another solution let’s say “more intrated” instead of this workaround? (dummy switch)
  • If not, how did you managed to set back automatically to off the switch on each screen call? (to avoid that is already on on a next screen call)
  • Did you managed any trick to avoid that if there are 2 users, and 1 is changing the switch, the layout is not changing for the other
1 Like
6

Hi I thought about this, and while the dummy works, I mocked up a card that could perhaps be a bit more elegant.

The idea is that you can define how many cards (default = 1) that is shown in the folded view.

Then when you unfold, the remaining cards would be shown.

Folded view:
image

Unfolded view:

image
image501×638 33.2 KB

We already have it for entities, but it would be lovely if that functionality could be extended to entire cards.

2 Likes
7

Yours is a very nice solution, thanks!

The only thing that I would want to add to this is per-device or per-user capability.
Currently, if I turn the input_boolean on, it affects all the devices (and all users) (i.e. the conditional card on all the devices is shown).
Any idea how this can be accomplished?

1 Like