How to use Tap Action:Toggle to turn on 2 different scene under Picture Element State-Icon?

Configuration Frontend
1

Hi, need some help to write a code for Lovelace , Picture Element.
I tried to search HA forum and Github, but could not find any similar application. Please kindly direct me to the right post if there is already resource available, Thanks in Advance.

My objective is to use Picture Element, place an Air-Conditioner icon on it.
Use this Icon to activate 2 different scene, “turn on the AC” and “turn off the AC” scene.
At the same time change the color of the ICON for each scene triggered.

  1. My AC does not have state feedback, and I am using Tuya IR remote.
  2. I can only turn on my AC by activating the Tuya IR remote scene.
    a) scene.turn on AC
    b) scene.turn off AC.
  3. I am thinking if I could use the State-Icon element, use Tap Action: toggle to trigger 2 call-service, one to call-service “scene.turn on AC”, the other to call-service “scene.turn off AC”. at the same time make the Icon to change color for the toggled scene.

At the moment, I have only successfully written a code to toggle icon color with the state-icon element. I am thinking if I could use it to activate 2 call-services in the toggle mode. I will just get my IR remote to fire 2 scene although I do not know the actual state of the AC…

Or maybe it is not possible, could you suggest other method if this is not possible, Thanks

Under Picture Element of Lovelace.

elements:
  - entity: switch.down1
    icon: 'mdi:car-defrost-rear'
    style:
      left: 60%
      top: 78%
      '--paper-item-icon-color': green
      '--paper-item-icon-active-color': 'rgb(245,25,25)'
    tap_action:
      action: toggle
    type: state-icon

and it look something like this,
1

2

You’ll need to fake out a state feedback. You can use an input boolean to do that.

input_boolean:
  fake_state:

Then make a template switch.

switch:
- platform: template
  switches:
    tuya_ac:
      value_template: "{{ is_state('input_boolean.fake_state', 'on') }}"
      turn_on:
      - service: input_boolean.turn_on
        entity_id: input_boolean.fake_state
      - service: scene.turn_on
        entity_id: scene.turn_on_the_ac
      turn_off:
      - service: input_boolean.turn_off
        entity_id: input_boolean.fake_state
      - service: scene.turn_on
        entity_id: scene.turn_off_the_ac

Then just use toggle on your newly created switch.

elements:
  - entity: switch.tuya_ac
    icon: 'mdi:car-defrost-rear'
    style:
      left: 60%
      top: 78%
      '--paper-item-icon-color': green
      '--paper-item-icon-active-color': 'rgb(245,25,25)'
    tap_action:
      action: toggle
    type: state-icon

The drawback here is that you’ll get out of sync with your device here and there. The good news is that you just need to physically change the state on the device or call one of the scenes without touching the switch.

3 Likes
3

Hi, appreciate your immediate response.
Does that mean I will input all these 3 scripts into ui-lovelace.yaml file?
Sorry for this dumb question, I am really a beginner…

So we are actually faking a “tuya_ac” switch…cool.
I will take sometime to experiment with it and digest. I will give a feedback if it is successful.
Thanks for your generous help. Looking at the code, I cannot see myself getting this far if I am on my own…Thanks, really appreciate.

4

As I am excited, I tried it out immediately, unfortunately the icon didn’t show up and come with an error message when mouse over “entity not available: switch.tuya_ac”

3
3989×557 34.4 KB

and this is what I input into my yaml file, Any advice will be appreciated… maybe indentation problem?

title: My Carissa
views:
  - badges: []
    cards:
      - input_boolean:
          fake_state: null
        switch:
          - platform: template
            switches:
              tuya_ac:
                value_template: '{{ is_state(''input_boolean.fake_state'', ''on'') }}'
                turn_on:
                  - service: input_boolean.turn_on
                    entity_id: input_boolean.fake_state
                  - service: scene.turn_on
                    entity_id: scene.ac_on
                turn_off:
                  - service: input_boolean.turn_off
                    entity_id: input_boolean.fake_state
                  - service: scene.turn_on
                    entity_id: scene.ac_off
        elements:
          - entity: switch.tuya_ac
            icon: 'mdi:car-defrost-rear'
            style:
              left: 60%
              top: 78%
              '--paper-item-icon-color': green
              '--paper-item-icon-active-color': 'rgb(245,25,25)'
            tap_action:
              action: toggle
            type: state-icon
        image: /local/carissas.jpg
        type: picture-elements
    panel: true
    path: foor-plan
    title: Foor Plan
5

the switch and input_boolean go in configuration.yaml, not lovelace.

1 Like
6

Silly me, I place everything into ui-lovelace.yaml.
Now I place this under configuration.yaml

input_boolean:
  fake_state:

switch:
- platform: template
  switches:
    tuya_ac:
      value_template: "{{ is_state('input_boolean.fake_state', 'on') }}"
      turn_on:
      - service: input_boolean.turn_on
        entity_id: input_boolean.fake_state
      - service: scene.turn_on
        entity_id: scene.turn_on_the_ac
      turn_off:
      - service: input_boolean.turn_off
        entity_id: input_boolean.fake_state
      - service: scene.turn_on
        entity_id: scene.turn_off_the_ac

And this into my ui-lovelace.yaml

elements:
  - entity: switch.tuya_ac
    icon: 'mdi:car-defrost-rear'
    style:
      left: 60%
      top: 78%
      '--paper-item-icon-color': green
      '--paper-item-icon-active-color': 'rgb(245,25,25)'
    tap_action:
      action: toggle
    type: state-icon

Voila! It work perfectly. Thanks @petro.
I almost wanted to buy a dummy smart switch just to achieve the same purpose.
Didn’t know we can create a fake switch in HA.
Brilliant!

3

1 Like