Picture-elements - tap-action toggle template

Again I’m reaching the end of my knowledge and understanding…

I’m trying to rebuild my smartphone for my people lovelace in an abstract way to get a handy way to change or - in this part - toggle different states of my mobile.

Unbenannt

To start I want to have an image showing me the current ringer_mode AND the option to tap_action that image to toggle between the three different modes (normal, vibrate, silent).

I got the first part and can show the different states and I got one third of the second but as I’m able call the service to change the ringer_mode to ONE other state.

type: picture-elements
image: /local/Icons/pixel4xl.png
elements:
  - type: image
    entity: sensor.pixel_4_xl_ringer_mode
    state_image:
      silent: /local/Icons/silent.png
      vibrate: /local/Icons/vibrate.png
      normal: /local/Icons/normal.png
    style:
      top: 11%
      left: 20%
      width: 15%
    tap_action:
      action: call-service
      service: notify.mobile_app_pixel_4_xl
      service_data:
        message: command_ringer_mode
        title: normal

The next step should be a template to change the states of the ringer_mode depending on the actual state at the moment. This is what I tried and what didn’t work.

type: picture-elements
image: /local/Icons/pixel4xl.png
elements:
  - type: image
    entity: sensor.pixel_4_xl_ringer_mode
    tap_action:
      action: call-service
      service: notify.mobile_app_pixel_4_xl
      service_data:
          message: command_ringer_mode
          title: '{% if is_state('sensor.pixel_4_xl_ringer_mode', 'normal') %} vibrate {% elif is_state('sensor.pixel_4_xl_ringer_mode', 'vibrate') silent %} {% elif is_state('sensor.pixel_4_xl_ringer_mode', 'silent'), normal {%endif %}'
    state_image:
      silent: /local/Icons/silent.png
      vibrate: /local/Icons/vibrate.png
      normal: /local/Icons/normal.png
    style:
      top: 11%
      left: 20%
      width: 15%

Would be great if somebody could push me in the right direction!

Edited: wrong information.

1 Like

Okay, although you’re not right in this case as templating is supported you pointed in the right direction somehow as I tried to call it via script and the script wasn’t working either.

That got me to the Developer Tools >> Template were I found out that my template was totally messed up. :slight_smile:

I corrected the template and now everything’s working. Every new tap changes to the next state as I wanted it.

type: picture-elements
image: /local/Icons/pixel4xl.png
elements:
  - type: image
    entity: sensor.pixel_4_xl_ringer_mode
    state_image:
      silent: /local/Icons/silent.png
      vibrate: /local/Icons/vibrate.png
      normal: /local/Icons/normal.png
    style:
      top: 11%
      left: 20%
      width: 15%
    tap_action:
      action: call-service
      service: notify.mobile_app_pixel_4_xl
      service_data:
        message: command_ringer_mode
        title: >-
          {% if is_state('sensor.pixel_4_xl_ringer_mode', 'normal')  %} vibrate
          {% elif is_state('sensor.pixel_4_xl_ringer_mode', 'vibrate') %} silent
          {% elif is_state('sensor.pixel_4_xl_ringer_mode', 'silent') %} normal
          {% endif %}


One thing leaves to be desired:
‘silent’ is the mode of my ringer when totally know sound ist on, checked via Developer Tools but if I sent ‘silent’ via notify service it sets my mobile to ‘do not disturb’. I can live with that right now but…