Light off timer on picture elements card

Configuration Frontend
1

Hey everybody,
I’m using ha for a couple of months now and this forum helped a lot - thanks a lot for that!
Mainly I use a floorplan (picture-elements card) with a lot of state-icons like:

                  - type: state-icon
                    tap_action:
                      action: toggle
                    entity: light.light_garden
                    style:
                      top: 15%
                      left: 13%
                      border-radius: 60%
                      text-align: center
                      background-color: rgba(102, 102, 102, 0.2)

Now I’m stuck with this ‘simple’ task: creating an icon for a light-timer, for example light_garden ON for 10 minutes after hitting the icon.

This is what I tried so far:

                  - type: state-icon
                    icon: mdi:timer-outline
                    tap_action:
                      action: call-service
                      service: timer.start
                      service_data:
                        entity_id: timer.10sec
                    entity: light.light_garden
                    style:
                      top: 15%
                      left: 20%
                      border-radius: 60%
                      text-align: center
                      background-color: rgba(102, 102, 102, 0.2)

timer.10min looks like:

duration: '0:10:00'
editable: true
icon: mdi:timer-outline
friendly_name: 10min

This does absolutely nothing, I think I did not understand a main thing with timers.
Thanks
Kai

2

If anyone struggles here like me, this is the - a little bit complicated - solution:

1st you need a helper:
grafik

2nd the automation:

alias: Garten vorn 10min
description: ""
trigger:
  - platform: state
    entity_id:
      - input_boolean.power_garden
    to: "on"
    for:
      hours: 0
      minutes: 0
      seconds: 0
condition: []
action:
  - service: light.turn_on
    data: {}
    target:
      entity_id: light.licht_garten_vorne_2
  - delay:
      hours: 0
      minutes: 10
      seconds: 0
      milliseconds: 0
  - service: light.turn_off
    data: {}
    target:
      entity_id: light.licht_garten_vorne_2
  - service: input_boolean.turn_off
    data: {}
    target:
      entity_id: input_boolean.power_garden
mode: single

3rd the static icon

                  - type: state-icon
                    icon: mdi:timer-outline
                    title: front garden 10 minutes timer
                    tap_action:
                      action: toggle
                    entity: input_boolean.power_garden
                    style:
                      top: 15%
                      left: 20%
                      border-radius: 60%
                      text-align: center
                      background-color: rgba(102, 102, 102, 0.2)