Button-card in picture-element: how to hide with sun entity

Configuration Frontend
1

Hi All

I’m new in home asssistant arround two month a go. I have tried to look for information about what I want but have not found it.

I have the following picture-element and I have a custom:button-card and what I want to do is that when the sun is below_horizon the button doesn’t appear and when the sun is above_horizon comes up.

The code I have is this

type: picture-elements
image: /local/floorplan/01_PlantaBaja/01_PlantaBaja_Noche.png
elements:
  - type: image
    entity: sun.sun
    state_image:
      below_horizon: /local/floorplan/01_PlantaBaja/01_PlantaBaja_Noche.png
      above_horizon: /local/floorplan/01_PlantaBaja/01_PlantaBaja_Dia.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: custom:button-card
    icon: mdi:lightbulb
    show_name: false
    entity: switch.pruebas_mss310_main_channel
    aspect_ratio: 3/1
    styles:
      card:
        - border-radius: 40%
        - box-shadow: 0px 0px 3px 3px green
        - height: 45px
        - width: 45pX
        - margin-top: 0px 5px 0px 0px
      icon:
        - margin-top: '-5%'
    style:
      top: 56%
      left: 17%
      width: 3%
    tap_action:
      action: toggle
    state:
      - value: 'on'
        styles:
          card:
            - box-shadow: 0px 0px 3px 3px red
          icon: null
        icon: mdi:lightbulb-on
        color: red

I have tried the following to add inside de card the next code

- display: |
            [[[ 
              if ( states['sun.sun'].state == 'above_horizon' )
                return 'none'
              return 'block'
            ]]]

other optios I tried

- display: >-
    [[[
       return (states['sun.sun'].state == 'above_horizon') ? 'none' : 'block';
    ]]]

I get the following error

52 |         - margin-top: 0px 5px 0px 0px
53 |         - display: >
54 |           [[[
55 |              return (states['sun.sun'].state == 'above_hor ...
---------------------------------^
56 |               ? 'none' : 'none'
57 |           ]]]

Could you tell me the best way to solve the problem or could you tell me where I can find some information about this?

Many thanks in advance
Regards

2

So, you have a custom:button-card inside picture-elements.
And you need to hide this button-card conditionally.
Suggest to achieve this w/o picture-elements first.
Make the job EASIER.

Also, check if the custom:button-card has a native option for hiding.
In general, suggest to ask similar questions in a huge button-card thread.

3

Hi Ildar_Gabdullin

Thanks for the answer. I can hide if I use the code bellow.

But my problem is that I can make work this code.

- display: |
            [[[ 
              if ( states['sun.sun'].state == 'above_horizon' )
                return 'none'
              return 'block'
            ]]]

I will ask in huge button-card thread.

Thanks for your help
Regards

4

Check this:

type: picture-elements
elements:
  - type: custom:button-card
    entity: sun.sun
    styles:
      card:
        - display: >-
            [[[
              if(states['input_boolean.test_boolean'].state === 'on')
                return 'none';
            ]]]
    style:
      top: 33%
      left: 50%
  - type: state-icon
    entity: input_boolean.test_boolean
    style:
      top: 66%
      left: 50%
    tap_action:
      action: toggle
image: /local/images/test/white.jpg

image
image988×686 8.32 KB

5

Hi Ildar

Thank for al your help. Looking your last answer I solved the problem with your if states adding the code below.

 - display: |-
            [[[
              if(states['sun.sun'].state === 'below_horizon')
                return 'none';
            ]]]

Many thanks for all your help.
Regards

6

I think it is almost same as your variant:

image
image964×271 10.5 KB

You should have added “;” after “return ‘none’”.