Picture Elements - onClick

Working on a tablet interface with Picture Elements… some of my icons triggers scripts that take some time to run and therefore the feedback on the tablet is not what I want it to be.

Is there a way do something like a JavaScript onClick and change the attributes of the icon that you click?

Thinking something like a shortcut is normally a image with colors and when clicked it turns to grayscale for a few seconds just to show the user that the click is received and the script is running…

Could you do something with a sensor template? I have a picture element card where the icons change depending on the state of batteries. The sensors are defined in configuration.yaml:

# Study window battery

  - platform: template
        value_template: >-
          {% if is_state('binary_sensor.study_window_low_battery', 'on') %}
          {% else %}
          {% endif %}
        icon_template: >-
          {% if is_state('binary_sensor.study_window_low_battery', 'on') %}
          {% elif is_state('binary_sensor.study_window_low_battery', 'off') %}
          {% else %}
          {% endif %}

The icons are different depending on state of the sensors/lights/etc…

Two problems…

  1. The light might take a few seconds to report back the changed state and therefore the icon on the tablet doesn’t change immediately when someone presses the icon
  2. For “shortcuts” to scripts and automations I can’t see how this can be done… can you change the image depending on something like “is the script running” ?

Figured it out :slight_smile:

Something like this:

- type: image
  image: /local/icons/shortcut.png
  entity: script.blaha
    action: call-service
    service: script.blaha
    "on": grayscale(1)

Then on the script side you just add an delay at the end to keep it in the state of running for a while.

  - delay: "00:00:05" # Icon grayscaled for 5 sec