Picture Elements - onClick

Configuration Frontend
1

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…

2

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

sensor:
  - platform: template
    sensors:
      sw_battery:
        value_template: >-
          {% if is_state('binary_sensor.study_window_low_battery', 'on') %}
            low
          {% else %}
            normal
          {% endif %}
        icon_template: >-
          {% if is_state('binary_sensor.study_window_low_battery', 'on') %}
            mdi:battery-alert
          {% elif is_state('binary_sensor.study_window_low_battery', 'off') %}
            mdi:check-bold
          {% else %}
            mdi:close-thick
          {% endif %}
3

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” ?
4

Figured it out :slight_smile:

Something like this:

- type: image
  image: /local/icons/shortcut.png
  entity: script.blaha
  tap_action:
    action: call-service
    service: script.blaha
  state_filter:
    "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.

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