Push issues with browser Javascript

[AStratton]

Hi Everyone
I've been using the Leap for allowing visitors to make selection for Interactive Exhibits - I found that pushing to select would often 'miss' the target - so ended up using a hover instead.

Has anyone else had this issue and solved it - or maybe never had the issue in the first place - or know a better way to allow (untrained) Visitors to make selections.

Oh - I'm using Javascript from a kiosk browser page.

In case it helps, there is a brief video (complete with bug) at https://youtu.be/hqpg245L3wU

Best wishes
Andy

P.S. In case it helps - here's a copy of my code - probably needs some smoothing as well.

    leap.loop(
    { hand: function (hand) {
        let [x, y] = hand.screenPosition(hand.palmPosition);
        let cursor = document.getElementById('cursor');
        cursor.style.left = x + 'px';
        cursor.style.top = y + 'px';
        cursor.style.visibility = "hidden";
        let elem = document.elementFromPoint(x, y);
        cursor.style.visibility = "visible";
        if (elem) {
            if (!elem.classList.contains("focus")) {
                // remove focus from all other elements - since the cursor isn't over them
                self._removeFocus();
                if (elem.classList.contains("quando_label")) {
                    elem.classList.add("focus");
                    elem.addEventListener("transitionend", self._handle_transition);
                }
            }
        } else {
            // remove focus from any elements - since the cursor isn't over them
            self._removeFocus();
        }
        }
    }).use('screenPosition', {
        scale: 1, verticalOffset: screen.height
    });

[Joe_Ward]

Judging from the 2D apps submitted to our app store, hover to select is the best, or at least the most popular method. Quite possibly the reason for this is simply because it is the easiest to implement. For a hover cursor, some sort of visual count-down indicator is helpful. It both lets the user discover that something happens when they hold the cursor over a button and how long it will take -- letting them move off the button if they are "resting" there by mistake. The inherent problem is that the pushing movement also tends to move the cursor, possibly off the target. Probably not an insurmountable problem, but one that does need to be dealt with. False positives that occur when a user is just moving their hands is another inherent issue.

[AStratton]

Hi Joe
Just for the record - I chose hover because it was more 'accurate/reliable' - I had already implemented push - so ease of implementation wasn't relevant.

Yes - I use a countdown - which is a CSS transition - the opacity of the selected item (label) increases with the hover. This isn't in the code - it's here though...

.quando_label {
    -webkit-transition: background-color 0.8s linear;
    -moz-transition: background-color 0.8s linear;
    -o-transition: background-color 0.8s linear;
    transition: background-color 0.8s linear;
    background-color: rgba(224, 119, 0, 0.6);
}
.quando_label.focus {
    background-color: rgba(224, 119, 0, 1);
}

As you correctly identify the - problem with push (and grab) was that the hand position is changed by the movement (gesture).

Do you know of any advice for this?

Cheers
Andy