SOLVED: Picture-elements - call service input_boolean.toggle to toggle between 2 pictures

Configuration
1

Hi all,

I want to toggle between 2 pictures by clicking on the picture.
When I used the button below, that toggles the boolean, this works perfectly.
What am I not seeing? I can’t seem to trigger any action by clicking on the image.
Perhaps because the state-images are fully overlapping the original image?

      - type: picture-elements
        image: "http://api.buienradar.nl/image/1.0/radarmapbe/gif/?hist=0&forc=36&width=550&l=1&step=1"
        entity: input_boolean.buienradar_image
        tap_action: 
          action: call-service
          service: input_boolean.toggle
          service_data: 
            entity_id: input_boolean.buienradar_image    
        state_image:
          "on": "http://api.buienradar.nl/image/1.0/radarmapbe/gif/?hist=0&forc=36&width=550&l=1&step=1"
          "off": "https://image.buienradar.nl/2.0/image/animation/RadarMapRain24HourForecastBE?height=512&width=550&extension=gif&renderBackground=True&renderBranding=False&renderText=True&history=0&forecast=24&skip=0"
        elements:
          - type: "custom:text-element"
            text: "Buienradar"
            title: null
            tap_action: none
            style:
              left: 10%
              top: 95%
              color: 'rgba(255, 255, 255, 1)'
              
      - type: "custom:button-card"
        template: light_card
        entity: input_boolean.buienradar_image
        name: BuienRadar Boolean
2

That one took me a little while to spot. It does look correct, but tap-action isn’t actually supported by type picture-elements itself, it’s only supported by the sub-element types (such as image). So it would need to be something like:

      - type: picture-elements
        image: "http://api.buienradar.nl/image/1.0/radarmapbe/gif/?hist=0&forc=36&width=550&l=1&step=1"
        elements:
          - type: image
            tap_action: 
              action: call-service
              service: input_boolean.toggle
              service_data: 
                entity_id: input_boolean.buienradar_image    
            state_image:
              "on": "http://api.buienradar.nl/image/1.0/radarmapbe/gif/?hist=0&forc=36&width=550&l=1&step=1"
              "off": "https://image.buienradar.nl/2.0/image/animation/RadarMapRain24HourForecastBE?height=512&width=550&extension=gif&renderBackground=True&renderBranding=False&renderText=True&history=0&forecast=24&skip=0"
            style:
              left: 50%
              top: 50%
          - type: "custom:text-element"
            text: "Buienradar"
            title: null
            tap_action: none
            style:
              left: 10%
              top: 95%
              color: 'rgba(255, 255, 255, 1)'
3

Now I can’t even toggle it at all, with my external button …

4

ok fixed. It still needed the entity. Thanks!

      - type: picture-elements
        image: "http://api.buienradar.nl/image/1.0/radarmapbe/gif/?hist=0&forc=36&width=550&l=1&step=1"
        elements:
          - type: image
            tap_action: 
              action: call-service
              service: input_boolean.toggle
              service_data: 
                entity_id: input_boolean.buienradar_image    
            entity: input_boolean.buienradar_image
            state_image:
              "on": "http://api.buienradar.nl/image/1.0/radarmapbe/gif/?hist=0&forc=36&width=550&l=1&step=1"
              "off": "https://image.buienradar.nl/2.0/image/animation/RadarMapRain24HourForecastBE?height=512&width=550&extension=gif&renderBackground=True&renderBranding=False&renderText=True&history=0&forecast=24&skip=0"
            style:
              left: 50%
              top: 50% 
              width: 100%
          - type: "custom:text-element"
            text: "Buienradar"
            title: null
            tap_action: none
            style:
              left: 10%
              top: 95%
              color: 'rgba(255, 255, 255, 1)'
              # font-weight: normal
2 Likes