Lock\unlock from picture-element card

I have been racking my brain and looking online trying to figure out how to get my lock image icon to toggle the door locks between locked and unlocked. I know its probably something really easy but I just can’t figure it out.

Here is my ui-lovelace.yaml file. I think I need to configure some type of if/then/else statement since the toggle action doesn’t seem to work. I’m also having issues getting the tap_action to call the service lock.lock but then that would only be half of what I need since I’d still need to then unlock it if it is locked. (hence the if/then/else statement)

Any advice would be greatly appreciated.

resources:
  - url: /local/plan-coordinates.js?v=1
    type: js
views:
  - title: Floor plan
    panel: true
    cards:
      - type: vertical-stack
        cards:
          - type: custom:plan-coordinates
          - type: picture-elements
            image: /local/downstairs_floorplan.png
            elements:
              - type: state-badge
                entity: sensor.2gig_technologies_ct100_thermostat_usa_temperature
                name: Downstairs Temp
                style:
                  top: 60%
                  left: 33%
                  font-size: 10px
              ### Start Front Door ###
              - type: image # Door open/close sensor
                entity: binary_sensor.aeotec_zw089_recessed_door_sensor_gen5_sensor_6
                state_image:
                  "on": /local/door_open.png
                  "off": /local/door_closed.png
                style:
                  top: 35.5%
                  left: 73.8%
                  width: 2.5%
              - type: image # Lock Status and locked state toggle
                entity:  lock.kwikset_touchpad_electronic_deadbolt_locked_8
                tap_action: toggle
                state_image:
                  "locked": /local/lock_locked.png
                  "unlocked": /local/lock_unlocked.png
                style:
                  top: 35.2%
                  left: 71%
                  width: 4%
               # End Front Door #
             ### Start Garage Door ###
              - type: image # Door open/close sensor
                entity: binary_sensor.aeotec_zw089_recessed_door_sensor_gen5_sensor_7
                state_image:
                  "on": /local/door_open.png
                  "off": /local/door_closed.png
                style:
                  top: 47%
                  left: 42.95%
                  width: 2.5%
                  transform: rotate(-90deg)
              - type: image # Lock Status and locked state toggle
                entity:  lock.kwikset_touchpad_electronic_deadbolt_locked_6
                tap_action: toggle
                state_image:
                  "locked": /local/lock_locked.png
                  "unlocked": /local/lock_unlocked.png
                style:
                  top: 44.5%
                  left: 44.3%
                  width: 4%
                # End Garage Door #
              ### Start Back Door ###
              - type: image # Door open/close sensor
                entity: binary_sensor.aeotec_zw089_recessed_door_sensor_gen5_sensor_8
                state_image:
                  "on": /local/door_open.png
                  "off": /local/door_closed.png
                style:
                  top: 45.6%
                  left: 22.5%
                  width: 2.5%

\##########  Test Lock to get locked state toggle working ############
                - type: image # Lock Status and locked state toggle
                entity:  lock.kwikset_touchpad_electronic_deadbolt_locked_5
                tap_action: toggle
                 # action: call-service  
                 # service: lock.lock
                 # service_data:
                 #   entity_id: lock.kwikset_touchpad_electronic_deadbolt_locked_5
                state_image:
                  "locked": /local/lock_locked.png
                  "unlocked": /local/lock_unlocked.png
                style:
                  top: 45.5%
                  left: 25.4%
                  width: 4%
                # End Back Door #

Please, please, please… Format your code as asked on the top of the page. Without your code correctly formatted, it is extremely difficult for people to help to diagnose potential issue

1 Like

Sorry about that. Had trouble figuring that out.

Did u make the icon as required , i also need same type of door lock icon for my setup ,
Details of the setup plz.