Add pressed and released event to allow usage as momentary button

[indykoning]

I added two config values to allow a pressed_action and release_action to be added to allow this button to be used as a momentary button, calling a service eg: light.turn_on when it is pressed down and calling another service eg: light.turn_off to be called once this button is released.

[RomRider]

Great stuff, thanks, I'm going to have a look 😊

[sla89]

Really looking forward having this feature :D thank you so much

Any plans to accept this PR or date to merge it back to master? :)

[indykoning]

This should be ready to merge now, I now use the helpers for it, and added some fixes for later changes of the helpers repository

[maxi1134]

Will this be merged?

[and313]

Will this be merged?

+1

[Expaso]

Me too!

[liadg2]

+1

[williamkikai]

Will this be merged?

[sla89]

I don't get it, why is this ignored @RomRider ?
It looks like there is a need for it by the community.

[RomRider]

Because I don't have time to test it properly, yet

[sla89]

Can the community support you somehow?

[CubieMedia]

I am also looking forward to this as a door opener button, i will do some test when my other PR is accepted!

Do i get this correctly, the pressed_action is added because the hold_action would execute the action delayed?

[indykoning]

Do i get this correctly, the pressed_action is added because the hold_action would execute the action delayed?

Not specifically because of that but it can be used that way, hold action gets triggered after you remove your finger from the button.
The pressed action triggers the moment your finger touches the button
And the released button triggers the moment your finger leaves the button.

You could use it to move a camera right for as long as you are holding the button

[maxi1134]

You could use it to move a camera right for as long as you are holding the button

That's exactly my goal! @indykoning
Could you tell me how to install this code into my own installation?

[CubieMedia]

Ok, i checked out your branch and build the js file. Copied it to my "config/www" folder. Then i added the file as resource in my Configuration -> Lovelace.

I can now add the card on my Dashboard with following configuration:

type: custom:button-card
entity: light.cubiemedia_gpio_output_10_10_20_42_18
name: Test
pressed_action:
  action: call-service
  service: homeassistant.turn_on
  service_data:
    entity_id: light.cubiemedia_gpio_output_10_10_20_42_18
release_action:
  action: call-service
  service: homeassistant.turn_off
  service_data:
    entity_id: light.cubiemedia_gpio_output_10_10_20_42_18

But the normal action (tap_action) is executed when i release the button, so it seems not to work. What am i doing wrong?

When executing the service via developer tools it is working. I also checked the .js file for "release" action and it is present (it is not in the file from master)

Any ideas what i am missing?

[RomRider]

This is untested, that's why it's not merged.

[CubieMedia]

This is a Pull Request and should work.

Also i don't think @indykoning did not test this. That is why i am assuming i am doing something wrong.

[indykoning]

Yeah i'm actually using it right now 😉
I've made a mistake in the comments here calling it "pressed_action"
It shouldve been press_action as shown in the new readme
https://github.com/custom-cards/button-card/pull/360/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R104
So your config would be:

type: custom:button-card
entity: light.cubiemedia_gpio_output_10_10_20_42_18
name: Test
press_action:
  action: call-service
  service: homeassistant.turn_on
  service_data:
    entity_id: light.cubiemedia_gpio_output_10_10_20_42_18
release_action:
  action: call-service
  service: homeassistant.turn_off
  service_data:
    entity_id: light.cubiemedia_gpio_output_10_10_20_42_18

And you are correct the tap or hold actions will still execute as well since those events are still happening as well of course

[CubieMedia]

Thanks for the tip, it works with "press_action"!

type: custom:button-card
entity: light.cubiemedia_gpio_output_10_10_20_42_18
name: Haustür
tap_action:
  action: null
press_action:
  action: call-service
  service: homeassistant.turn_on
  service_data:
    entity_id: light.cubiemedia_gpio_output_10_10_20_42_18
release_action:
  action: call-service
  service: homeassistant.turn_off
  service_data:
    entity_id: light.cubiemedia_gpio_output_10_10_20_42_18

Well done with your work!
I would like to see this in the button-card for everyone.

[ascarola]

Looking forward to the release of this! Thank you for developing and merging.

[CubieMedia]

Since im using this solution now daily i have found a little flaw.

You have a custom-button card in lovelace (eg. door opener).

Use-Case:
If you press the button the defined action is executed (eg. enable door opener) and if you release the button the defined action is also executed (eg. disable door opener). This is the sunny day scenario and it works very well.

Special Use-Case:
You want to scroll down on your mobile phone on your lovelace dashboard. For doing this you press the screen (in this case the door opener button) and move your finger up for scrolling. The press action will be executed but the release action will be executed on the lovelace element that is under the finger after scrolling. So the door opener now is enabled and will only be disabled if you press and release again.

Can anyone confirm this?

Do we also need a move (drag) action?
Should it be the same as release action?

Would be perfect if there is no need to define the drag action, only in the backround the drag action does the same as release.

[sla89]

Since this MR is from 2020 I am afraid that this will never be merged back.
An alternative maybe https://github.com/twrecked/hass-momentary

[Maco65]

This is very good idea and I am looking forward to have it available in HA. However I am not sure how soon this can happen :(
In a meantime (as I am not that experienced), can anyone give me simple directions how to make it in my instance ? Like @CubieMedia did ?
If it is as simple as putting mentioned js file into "config/www" and creating lovelace resource from it - I trust I can manage. Only the js file is the challenge...

[Maco65]

I have placed js file in config/www folder but unfortunately neither press_action: nor release_action: does not seem to work. :(
Could it be that button-card.js file is being used from /hacsfiles/button-card/ location instead of config/www ?
Should I try to replace the js file in /hacsfiles/button-card/ location ?
I have cleared the cache of my browser just to be safe.

[enorfelt]

I have placed js file in config/www folder but unfortunately neither press_action: nor release_action: does not seem to work. :( Could it be that button-card.js file is being used from /hacsfiles/button-card/ location instead of config/www ? Should I try to replace the js file in /hacsfiles/button-card/ location ? I have cleared the cache of my browser just to be safe.

@Maco65 make sure the new button-card.js is the only file in the directory. I also had to remove/rename the compressed gzip (button-card.js.gz) file.

[Maco65]

@Maco65 make sure the new button-card.js is the only file in the directory. I also had to remove/rename the compressed gzip (button-card.js.gz) file.

@enorfelt thanks for help. In config/www I have only few jpg files and button-card.js. I have also folder 'config/www/community/button-card/withbutton-card.jsandbutton-card.js.gz files. Tried to remove this folder, restart HA - no change :(. Put back the 'config/www/community/button-card/ folder.
Strange enough for the test button configuration below:

type: custom:button-card
entity: light.sonoff_10010aa283
name: testing
icon: mdi:test-tube
press_action:
  action: call-service
  service: light.turn_on
  service_data:
    entity_id: light.sonoff_10010aa283
release_action:
  action: call-service
  service: light.turn_off
  service_data:
    entity_id: light.sonoff_10010aa283

now, when I click it turns on the light and when I click again it turns it off.
Sort of weird as there is no tap_action: defined. Or maybe in case entity is defined the default action is toggle ? Anyhow when I press and hold, nothing happens. So, my guess is that the "test" js file is not used by my system...

[CubieMedia]

@Maco65 Please remember to define a resource for your js file

[Maco65]

@Maco65 Please remember to define a resource for your js file

Did it at the same time as placing js file in config/www. Print screen: first 2 lines:

Appreciate your time to help me resolving this issue.

[CubieMedia]

Oh i see you defined the wrong folder name, try this:

[Maco65]

Oh i see you defined the wrong folder name, try this:

@CubieMedia you are Star! and I have learned something...
After changing resources path it works! Thank you !

[Maco65]

@indykoning I wan to THANK you for this change. It is so useful for me (I use it to control movement of the camera [it moves as long a button it depressed] and movement of lights). It sound easy, but I could not find a good solution and this SIMPLE solution is EXCELLENT. Thanks!
Hope it will become part of regular button-card release.

[CubieMedia]

I have looked into the code and came up with following Patch to solve this problem.

Since i can not upload Patch files, this is renamed to .txt

fix_scroll_bug.txt

Please test and then we have to get in touch with @RomRider

[Maco65]

Since i can not upload Patch files, this is renamed to .txt
fix_scroll_bug.txt
Please test and then we have to get in touch with @RomRider
Hi, I will be happy to test (did not write but, on the smartphone indeed the tap and hold is kind of sensitive and it is relatively easy to have an effect that button is pressed and hold even if the "finger" is already on other part of the screen) but, apology for my ignorance, what should I do with this fix_scroll_bug.txt file ?

[CubieMedia]

Hi, I will be happy to test (did not write but, on the smartphone indeed the tap and hold is kind of sensitive and it is relatively easy to have an effect that button is pressed and hold even if the "finger" is already on other part of the screen) but, apology for my ignorance, what should I do with this fix_scroll_bug.txt file ?

A Patch file is a technical documentation how code has changed, this can be applied automaticly with your IDE (eg. PyCharm) or manually. Since this are only four changes you can apply them manually if you are not familiar with this kind of work. Look for the filename and line numbers and the lines that start with '-' and '+'. Then rebuild your js file and test.

[Maco65]

A Patch file is a technical documentation how code has changed, this can be applied automaticly with your IDE (eg. PyCharm) or manually. Since this are only four changes you can apply them manually if you are not familiar with this kind of work. Look for the filename and line numbers and the lines that start with '-' and '+'. Then rebuild your js file and test.

Sorry for late response. The challenge for me is that I do not have environment and knowledge to "rebuild js file". Last time it was @PiotrMachowski who did it and I was happy to just place js file in my HA instance.
If anyone can do this again I will be more then happy to test.

[CubieMedia]

I have created a new patch file and the resulting js file into this zip.

fix_scroll_bug.zip

For me it feels not like good code since i don't know much about web handling and events. Sadly @RomRider seems to be "dead" so this Pull Request will soon die as it is.

[RomRider]

I'm not dead, I have no time ATM

[zagi988]

@RomRider dude, you stopped maintaining this... at least you could merge all the PR's that look promising. shouldn't take you more than an hour. would be fair towards the community.

[CubieMedia]

Sadly this PR is not ready for merge since there is some event handling missing. But the RePing of RomRider is nice :-)

[maciekelga]

Hi,
I want to use button with press and release action. I used installation by HACS. Do I need install UI Lovelace Minimalist ? I added
/local/button-card/button-card.js

https://github.com/custom-cards/button-card#installation-and-tracking-with-hacs

I have similar behavior as @Maco65 is working as normal tap action.

[Maco65]

@maciekelga - it work fine now for me for almost a year now. The challenge is on mobile device where once a while I have to refresh the view in order for my buttons to work.
Did you also defined resource in for your js file? I would say that I did what is written above (nothing else) so it should work...

[cibernox]

I found myself needing this feature. In my dumb (as in not-connected to any network) motorized pool cover the remove, because of safety reasons, only moves (opens or closes) the cover (which is a fairly heavy structure) for as long as you have the button pressed. If you release the button for any reason it stops immediately.

I've made the motors smart with ESPHome but I am yet to find a way to make a UI in home assistant that works in a similar safe way.

[Maco65]

I've made the motors smart with ESPHome but I am yet to find a way to make a UI in home assistant that works in a similar safe way.

As this solution is not 200% stable (in my case it happened that I have released the button and the system still was "thinking" it is pressed (especially on mobile) I think you need to double check if such situation will not create any trouble for your structure.

[Mariusthvdb]

even though this might be 'needed' by some of you, it would be appreciated if we'd all show Romrider some courtesy and not 'Hey Dude' him.

He didnt merge this for a reason, (not being able to test it properly), and reading all of the issues in this topic with the manual edits, we shouldnt blame but applaud him. For not breaking the most versatile card we have.

If anyone of you all is convinced this, or other PR's should be merged, it would be an easy feat to fork this repo, rename it and have a go at it.

Dont start complaining when people actually start using it, and expect you to fix and maintain though....

[goldriver2]

I added two config values to allow a pressed_action and release_action to be added to allow this button to be used as a momentary button, calling a service eg: light.turn_on when it is pressed down and calling another service eg: light.turn_off to be called once this button is released.

@indykoning , thanks for this mod, but...
few questions;
do i have to remove the original button-card ?
once the button-card.js file copied to the /config/www directory and ressources pointed to /local/button-card.js is there anything else to do ?

I did all of those but the below card is acting as a toggle card. Can you help with this ?

type: custom:button-card
entity: light.lumiere_plafond
name: testing
icon: mdi:test-tube
press_action:
action: call-service
service: light.turn_on
service_data:
entity_id: light.lumiere_plafond
release_action:
action: call-service
service: light.turn_off
service_data:
entity_id: light.lumiere_plafond

************** update: remove the original button-card.js from hacs ****************

[RomRider]

Closing as this is implemented in the next release. Thanks for the PR and patience :)

[RomRider]

Note: I didn't test all the possibilities/ways of breaking the card with press/release so please report back with bugs in new individual issues.

Also I am not responsible if you break your swimming pool with it for eg. or anything else because it doesn't trigger the release action ;)

[RomRider]

Actually, I'm going to revert the change, this creates so much chalenge and breaks so much things (scrolling, button kept on while moving...)
I've tried to fix it but it would require a full revamp of the action handler and it's a nightmare already...
Sorry for that...

[Maco65]

It's pitty but understandable.
So, what is the prospect for this feature to be implemented in future ?

[bobynator93]

Will this be continued?

[Maco65]

I am personally using this "test" version (with once a while instability).
I am also behing several version of HA so I do not know if potentially this "pressed" and "released" funcitonality is not already present in the official HA Core verison. If not I woudl still like to have in productive environment.