Touch and Hold Option

Started by sparky, February 28, 2017, 12:02:35 PM

sparky

Looking for tips or suggestions how to implement a "touch and hold" type button into the metrics.  Example would be like the image below which you could adjust how long the button has to be pressed before activating and also some type of visual feedback to let you know the action is complete.

The reasoning behind this is occasionally when using my phone I have mistakenly turned something on/off when all I was doing is scrolling a page to view the status of a particular node. I know most of the time this is not a big deal because so what if you turn a light on by mistake, right?.. you just turn it back off..

Well I'm temporarily controlling my garage doors from 2 spare sprinkler zones which is controlled thru my sprinkler mote.  I would rather have a "press and hold" type button so I don't mistakenly open a garage door especially if I don't have text alerts enabled..

To help this mistake from happening I currently have spaced the buttons in a way that they are not next to my sprinkler zones and I also disabled the ability to turn 15 & 16 on/off by pressing them directly, you have to press 1 car / 2 car to activate.  This gives me a little extra space to help minimize a mistaken press..  :-\

Felix, wouldn't this be a great addition to your already great Dashboard..??  ;D 

Thanks..

Felix

It's something to consider to "fix" for sure.
The root problem here is mobile support for touch events which is tricky and not consistent between platforms. For instance I implemented main node list reordering with drag and drop but I could only make it work reliably on desktop. On the mobile it's a huge huge pain (well ... impossible) to make it work the same as the desktop so i disabled it. I spent a few days on that and I researched all the touch libs out there, but things might have changed (though I doubt it).

Similar effects come into play here since this too involves scrolling in some degree. But this might be a different problem if scrolling has to stop before a tap action is considered.
So i will note this down on my 2mile long TODO for the gateway and hopefully its something quick.

Thanks for the suggestion!

sparky

#2
Thanks for even putting it on the TODO list..   :)

Here is the link I got the image from; it's Greek to me but it might of some help to you..

http://browniefed.com/blog/react-native-press-and-hold-button-actions/

Thanks Felix

Felix

#3
on a second thought I might just need to change the event type doh... I will try that...

EDIT: i cant replicate this on android chrome, what mobile do you have? iOS?

sparky

Android.. :'(

Is this going to cost me a new phone now.. ?  lol

Felix

Ok can you help in replicating?
Youre on a node detail page with buttons. You scroll up/down and end with your finger on a button and it "clicks" ? Even with slight movement i could not do it, only if I clearly tap on a button. I use the app quite a bit too  :D

sparky

If I understand you correctly..

If I'm on the sprinkler node screen, I can place my finger right on a button, not removing it, I can scroll up/down numerous times, then release my finger without activating anything.  It only activates if you touch a particular button quickly.. hope that makes sense.

The problems I've had in the past was when I swiped the screen (not leaving my finger on the screen) where my finger only touched the screen momentarily and it happened to hit a button which caused something to activate.

Felix

I really cant trigger anything. Maybe a video would help show it.
If anyone can chime in here with feedback that would be great.

sparky

Maybe I'm misunderstanding your question..  When can't you trigger anything?

I'll try to make a video

Felix

Maybe we're using different terminology. Activate = trigger = click = press  ... a button on the screen.

sparky

#10
Got a video, about 50meg though.. too big to post here I believe..

Yeah, ok so if I touch a button and as long as I don't lift my finger I can scroll up/down the screen..  when I release my finger it will not activate the button that my finger was on when scrolling.  Is that what you want to know?

Felix

Ok maybe I got this wrong, but that's exactly how I'd expect things to work.

IE If you scroll (regardless where your finger is) ... i just want the page to scroll, not press any button (before during or after the scroll is complete). I only want a button to be pressed when i do a tap with my finger (not scroll tap or anything like that). And that's how it works, no issues for me, haven't heard anyone else mis-pressing a button before. This is done with jquery standard events as seen in index.html.

sparky

So I guess I'm not sure how I did it but what I am sure of is I've pressed/energized a zone mistakenly before..  maybe it was just a fat finger thing.. can't remember but I will make note of the details next time..

I also know these phone screens are very finicky at times..

So it sounds like this idea might have been removed from the TODO list.. :-\

Felix

Quote from: sparky on February 28, 2017, 05:23:24 PM
So it sounds like this idea might have been removed from the TODO list.. :-\
Sorta.. i mean i can't find a reason to fix something that works :)  ........... right?

sparky

#14
By no means am I saying anything needs fixing, just adding what I think is a nice addition.  Just thinking of a couple projects I have in mind which it would be nice to have something where you had to press and hold before activating, or one could cancel the button press before the actual activating takes place..  anything that would give someone time to say, Oh, I screwed up, let me cancel.

Do a search for Ford's new "FordPass" app, even they have it so you have to press and hold the button approximately 4 seconds for functions such as unlocking, locking, and/or starting the car.

Even if you could give me some hints as to where I could start so I could at least research it and try it myself.. (probably way over my head..)

Edit:  Found a video, skip to 2:05;  https://www.youtube.com/watch?v=vqkIFqf0HyA