Tongle visibility of group entities with if statement?

Hello.
Iam a new hassio user (since yesterday), very excited and very overwellmed by the amount of info i have to absorb. But during the past 24 hours, with lots of reading i managed to install, configure and set up basic functions of my hassio and tplink bulb (LB100) and tplink switch (HS110) having no prior knowledge or experience.
So now let me get down to it…
I managed to group my tplink hs100 switch AND his energy sensors (following the instructions) into one card but i want to make the energy sensors visible only when i turn the switch on.
At the moment the switch and the energy sensors are always visible in the card.
How do i do that? With if statements?

My groups.yaml is:

convector:
control: hidden
entities:
- switch.delonghi1
- sensor.delonghi1_today_kwh
- sensor.delonghi1_total_kwh
- sensor.delonghi1_amps
- sensor.delonghi1_volts
- sensor.delonghi1_watts

There is card for that. The most notable part is at the bottom. The state_filter will only show based on the state entered. In my case and probably what you want is to use ‘on’.

 - card:
      show_header_toggle: false
      title: Lights That Are On
    entities:
      - entity: binary_sensor.garage_door
        icon: 'mdi:garage'
        name: Garage Door
      - entity: light.bed_light
        name: Bed
      - entity: switch.outside_light
        icon: 'mdi:lightbulb'
        name: Outside Light
      - entity: switch.hallway_light
        icon: 'mdi:lightbulb'
        name: Front Hall
      - entity: switch.upstairs_light
        icon: 'mdi:lightbulb'
        name: Up Stairs Light
      - entity: switch.kitchen_main_light
        icon: 'mdi:lightbulb'
        name: Kitchen Main Lignt
      - entity: switch.kitchen_pot_light
        icon: 'mdi:lightbulb'
        name: Kitchen Pot Lights
      - entity: switch.kitchen_table_light
        icon: 'mdi:lightbulb'
        name: Kitchen Table Light
      - entity: light.07200106b4e62d281541
        name: Basement 1
      - entity: light.07200106bcddc2ef64c3
        name: Basement 2
      - entity: light.07200106b4e62d284ceb
        name: Piano Light
      - entity: light.07200106dc4f22396d5e
        name: Family Room
    state_filter:
      - 'on'
    type: entity-filter

@sleeepy2 This is incorrect. What OP wants is hide a couple of sensors when switch is off. What you present here is; group a couple of devices and only show them if individual state is on.

And please format your code. This is unreadable.

I guess I miss understood.
fixed the formating

No worries, I guess it’s because of your username :wink:
OP’s question is interesting though. Don’t have a solution yet.

monster-card can do this:

card:
  show_header_toggle: false
  title: Switch and Energy Sensors
  type: entities
filter:
  include:
    - domain: switch
      entity_id: '*delonghi1*'
    - domain: sensor
      entity_id: '*delonghi1*'
show_empty: false
type: 'custom:monster-card'
when:
  entity: switch.delonghi1
  state: 'on'

thank you for the reply
but at this stage i’d prefer a native way of solving this so i can understand better the hassio language
rather than having to learn extra dependant techniques.

you can use a conditional card:

  - type: conditional
    conditions:
      - entity: switch.debug_view
        state: "on"
    card:
      type: entities
      entities:
        - group.orphans
        - group.ghosts
        - group.finder

That’s what i’ve been experimenting and here’s what i managed to do but still is not quite right:

- type: conditional
    conditions:
      - entity: switch.delonghi1
        state: "on"
    card:
      type: entities
      entities:
        - switch.delonghi1
        - sensor.delonghi1_today_kwh
        - sensor.delonghi1_total_kwh
        - sensor.delonghi1_amps
        - sensor.delonghi1_volts
        - sensor.delonghi1_watts
  - type: conditional
    conditions:
      - entity: switch.delonghi1
        state: "off"
    card:
      type: entities
      entities:
        - switch.delonghi1
        - sensor.delonghi1_today_kwh
        - sensor.delonghi1_total_kwh

first condition show’s everything when its switched on
second condition show’s only the things i want
which is great BUT
it creates two cards, when i hide the first card, it doesnt free up the space in the DOM therefore the second card appears right next to the invisible card… which makes it weird. As if the card moves on the right messing the alignment up

you might be able to try to put them in a vertical stack card or maybe a vertical-stack-in-card?

Bingo!
With code i have what i want BUT vertical-stack doesnt have a title attribute to give a title to the card…

 - type: vertical-stack
  cards:

    - type: conditional
      conditions:
        - entity: switch.delonghi1
          state: "on"
      card:
        type: entities
        entities:
          - switch.delonghi1
          - sensor.delonghi1_today_kwh
          - sensor.delonghi1_total_kwh
          - sensor.delonghi1_amps
          - sensor.delonghi1_volts
          - sensor.delonghi1_watts

    - type: conditional
      conditions:
        - entity: switch.delonghi1
          state: "off"
      card:
        type: entities
        entities:
          - switch.delonghi1
          - sensor.delonghi1_today_kwh
          - sensor.delonghi1_total_kwh

I don’t use it but I think I remember that the vertical-stack-in-card custom card can have a title.

i followed the instructions to install the js file but for some reason
i get an error message that it cant recognize the custom:vertical-stack-in-card

Where did you put the js file? And what was the code you used in the resources section to install the card?

i placed it inside the config/www folder which is accessible as /local

and instead of type: vertical-stack i entered: type: custom:vertical-stack-in-card
but it doesnt recognize the vertical-stack-in-card

you need to enter the card in the “resources:” section of your Lovelace config.

I use the yaml mode but I know you can enter it in the GUI editor by manually editing the raw file. I’ve been told to “click the three dots in the top right. then click the three dots in there and click edit raw file” or something like that.

the add the following:

- url: /local/lovelace/vertical-stack-in-card.js?v=v0.1.0
  type: js

yep did that too

resources:
  - url: https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/weather-card.min.js
    type: module

  - url: /local/lovelace/vertical-stack-in-card.js?v=v0.1.0
    type: js

The only other things are just to make sure you copied the file over correctly (copy & paste the “raw” file contents), restart HA and then do a refresh of your browser (ctrl-F5).

ok now it works… thank you

there’s a problem now
it doesnt work on safari.app or on the mobiles i tested it
only on desktop google chrome works fine.

still looking for alternatives

update: finally i found the right code for it:

      - type: vertical-stack
        cards:

          - type: conditional
            conditions:
              - entity: switch.delonghi1
                state: "on"
            card:
              type: entities
              title: Bedroom
              show_header_toggle: false
              entities:
                - switch.delonghi1
                - sensor.delonghi1_today_kwh
                - sensor.delonghi1_total_kwh
                - sensor.delonghi1_amps
                - sensor.delonghi1_volts
                - sensor.delonghi1_watts

          - type: conditional
            conditions:
              - entity: switch.delonghi1
                state: "off"
            card:
              type: entities
              entities:
                - switch.delonghi1
                - sensor.delonghi1_today_kwh
                - sensor.delonghi1_total_kwh
1 Like