Need help changing button/tile card animations and toggles

[DP0427]

Hi all,
I’m trying to play around with a couple of button or tile cards and how they behave:

On the left is my button card to control my office blinds. It currently shows the default features which show open, stop, close on the first row and the percentage slider on the 2nd row. I can’t seem to get the first row buttons to work but the slider works fine. My intention here is to change the function of tapping the icon (or the button altogether) so that it toggles between 0% and 100% open state and changes the icon/color respectively, kind of like a light switch. Any suggestions on how to achieve that would be greatly appreciated!
For context on the above, I’m using this AVATTO Wifi Smart Roller Blind Motor which was imported into HA via the Tuya Integration.

On the right of the screenshot is a button card that controls a Zigbee Fingerbot that was added to HA via Zigbee2MQTT.
Currently the button works as a toggle to click (more like press and hold) my Desktop PC power button and release it after 1 sec. (Explicitly not using Wake On LAN for offline use cases)
My issue here is that the animation of the tap lights up the icon as “Powered On” and when you tap it again it “Powers off” but technically what it’s doing is triggering the finger bot again to click the power button.
I don’t expect to find a way for the button to know if my computer is actually powered on or not, so instead my intention here is to see if there is a way to change the animation to “light up” as the button is being pressed and quickly fade away/return to default after the button was pressed.

As usual, thanks in advance for all the brilliant and friendly folks out there willing to help a fellow HA enthusiast without as much technical knowledge (but hope to get there some day)!

[LiQuid_cOOled (Not really a...)]

Please provide your card code.

[DP0427]

yeah that would be helpful wouldn’t it?

Here’s the code for the Blinds tile:

features:
  - type: cover-open-close
  - type: cover-position
type: tile
entity: cover.office_blinds_curtain
features_position: bottom
vertical: true
name: " "
hide_state: true
show_entity_picture: false

Here’s the screenshot of the device that was brought in from the Tuya integration.

Worth noting that I when testing, the Open and Close buttons seem to be reversed, as the Close button (on the left of the stop button) actually opens my blinds, where as the Open button (on the right of the stop button) actually doesn’t do anything. The same controls in the Smart Life app work though, and the Motor direction is correct, at least according to what’s in the app.
Again essentially if I could create a toggle here that would be 0% open and 100% open respectively, that would be enough for my purposes.

Here’s the code for the finger bot that turns on my Desktop PC:

show_name: false
show_icon: true
type: button
tap_action:
  action: toggle
entity: switch.desktop_power_button
icon: mdi:power
show_state: true

I’m thinking it might be better to try a different type of card?

[DP0427]

@LiQuid_cOOled was playing around with different card types and found that there’s a type of color: disabled that effectively turns off any color animations but it can’t be added to the button card type, but it can in the tile card type.

I was playing around with it and got something that’s close to what I was thinking of:

type: tile
tap_action:
  action: toggle
entity: switch.desktop_power_button
icon: mdi:power
hold_action:
  action: toggle
features_position: bottom
vertical: true
color: disabled
hide_state: true
name: PC
icon_tap_action:
  action: toggle
grid_options:
  columns: 3
  rows: 2

To reiterate the original intention for this is to show a brief animation when the button is press but it to fade back to the original default color and not the yellow color that indicates it’s still turned on. I’m guessing I’d have to use a custom card like button-card to achieve this?

Also still kind of stuck on the blinds situation. To reiterate the intention of that one is to create a toggle that has:

• State 1: 0% Open
• State 2: 100% Open

The slider can do that now but it’s not the ideal movement/gesture I’m looking for. Just a simple button to switch between Open/Closed states.

[DP0427]

@LiQuid_cOOled I may have half solved my other problem with the Blinds with the tile card below:

type: tile
features_position: bottom
vertical: true
entity: cover.office_blinds_curtain
tap_action:
  action: toggle
icon_tap_action:
  action: toggle
icon: mdi:blinds-vertical-closed
name: " "

The toggle tested to switch between 0 and 100% as expected but my only issue is that the physical state of the device are actually the opposite.
The picture shows the icon as Open when it’s actually closed IRL.
Any idea of a way to switch the states?

[LiQuid_cOOled (Not really a...)]

Sorry took a day off. I’ll take a look.

[LiQuid_cOOled (Not really a...)]

@DP0427

I don’t expect to find a way for the button to know if my computer is actually powered on or not,

One suggestion is to check out HASS.Agent for way to monitor a PC’s status.

GitHub - hass-agent/HASS.Agent-Integration: HASS.Agent's Home Assistant integration. Adds...

We could always template the cover to show the opposite state, but it’s concerning that the device is showing the state reversed.

A simple template example…

 {%- if is_state('cover.bed_curtains', 'closed') -%}
      Open
  {% else %}
     Closed
  {% endif %}

This could be done via template sensor Helper, a Cover template or just in a card like Mushroom Template card or even the Custom Button Card.

[DP0427]

Thanks for that! I likely messed up the set up when setting the upper and lower limits of the blinds and did them in the opposite direction. Not a big deal as long as I can toggle between two states.

I think based on your suggestions, I’ll take a stab at custom button cards as that’s something I’m thinking of trying out anyways.

I’ll report back once I’ve experimented with it.

[LiQuid_cOOled (Not really a...)]

Let me know… I’ll help you work through it

[DP0427]

So I ended up spending a lot of time trying to redo the settings in this Tuya Smart Life WIFI Blind Motor to reconfigure the motor direction and upper and lower limits (0 and 100) but no matter what I did, the every time I re added the device via the Tuya integration the states would show the opposite of the Smart Life app. Alexa integrated with smart life correctly followed open and close instructions so I’m concluding there must’ve been something broken on the integration side as the controls to open and close also don’t work.
As mentioned, only the slider worked to properly toggle between 0 and 100 so I then dug into hour to call services to check for position states.

This is the code I ended up with which might not be the most elegant but it works for me:

type: custom:button-card
entity: cover.office_blinds_curtain
icon: mdi:blinds-vertical-closed
name: " "
tap_action:
  action: call-service
  service: cover.set_cover_position
  service_data:
    entity_id: cover.office_blinds_curtain
    position: |
      [[[
        return entity.attributes.current_position == 100 ? 0 : 100
      ]]]
icon_tap_action:
  action: call-service
  service: cover.set_cover_position
  service_data:
    entity_id: cover.office_blinds_curtain
    position: |
      [[[
        return entity.attributes.current_position == 100 ? 0 : 100
      ]]]
show_state: true
state_display: |
  [[[
    return entity.attributes.current_position == 100 ? "Closed" : "Open"
  ]]]
styles:
  card:
    - height: 80px
    - border-radius: 10px
    - background-color: transparent
  icon:
    - width: 24px
  state:
    - font-size: 12px
state:
  - operator: template
    value: |
      [[[
        return entity.attributes.current_position == 100
      ]]]
    styles:
      icon:
        - color: white
      state:
        - color: white
  - operator: template
    value: |
      [[[
        return entity.attributes.current_position == 0
      ]]]
    styles:
      icon:
        - color: "#FFD700"
      state:
        - color: "#FFD700"