maemo.org - Talk

maemo.org - Talk (https://talk.maemo.org/index.php)
-   Applications (https://talk.maemo.org/forumdisplay.php?f=41)
-   -   'Kinetic' scrolling with greasemonkey (javascript) (https://talk.maemo.org/showthread.php?t=18995)

binauralbeat 2008-04-11 15:59
'Kinetic' scrolling with greasemonkey (javascript)
 
I know...touchy subject for some, but I thought I should pass this on for anyone interested.

Here is a rough Greasemonkey script I've written for 'kinetic' scrolling for MicroB. It needs some tweaking, but it works! Let me know what you think.

-Broc

Code:

var TIME_THRESHOLD = 500;
var MAX_VELOCITY = 5000;

var scrollBy;
var sintv;
var startY = 0;
var endY = 0;
var startTime;
var endTime;
var timeScrolled;
var distanceScrolled;
var velocity;
var direction;


var intervalCount = 0;

function setStartY(e){
        stopScroll();
        startY = e.pageY;
        startTime = new Date();
}

function startScroll(e){
        stopScroll();
        endY = e.pageY;
        endTime = new Date();
        if(e.pageX < 700){  // 700 should be innerwidth of window ... change me
                Scroll(startY, endY, startTime, endTime);
        }
}


function Scroll(stY,enY,stTime,enTime){

        timeScrolled = (enTime.getSeconds()+ enTime.getMilliseconds()/1000) -

(stTime.getSeconds()+stTime.getMilliseconds()/1000);

       

        if(timeScrolled < TIME_THRESHOLD){

                distanceScrolled = Math.abs(enY - stY);

                velocity = (distanceScrolled / timeScrolled);

                if(velocity > MAX_VELOCITY){
                        velocity = MAX_VELOCITY;
                }

               
                //get direction
                if(enY > stY){
                        direction = -1;
                }else{
                        direction = 1;
                }

                sintv = setInterval(scrollIt, 10);
               
        }
}

function scrollIt(){

        intervalCount +=1;

        var cseconds = 1+intervalCount/100;

        scrollBy = (velocity*0.098)/(cseconds*cseconds);

        if(scrollBy > 2){
                window.scrollBy(0,parseInt(scrollBy * direction));
        }else{
                stopScroll();
        }
       
}

function stopScroll(){
       
        direction = 0;
        velocity = 0;
        intervalCount = 0;
        distanceToScroll = 0;
        clearInterval(sintv);
}

document.addEventListener('mousedown', setStartY, false);
document.addEventListener('mouseup', startScroll, false);

Benson 2008-04-11 16:41
Re: 'Kinetic' scrolling with greasemonkey (javascript)
 
Main problem I see (looking at the code, I haven't even downloaded it yet) is that it seems to go off the average speed of a given drag; that means that dragging for a specific distance (drag, hesitate at the end, and then release) will send it flying anyway, if it's less than the threshold, while deliberately dragging up to finish this paragraph, then flicking down to get back to the top, will exceed the threshold and not get kinetized.

I think monitoring the speed at the end of the drag is really what we need.

I don't know any javascript, but it seems the setInterval and clearInterval are essentially timer-triggering a method? Perhaps if, instead of setStartY, we had something like:
Code:
function startSpeedTracking(e) {
  stopScroll();
  oldY = e.pageY;
  tintv = setInterval(speedTracker, 50);
}

function speedTracker() {
  //Somehow get current coords? Stuffing the new y in newY...
  velocity = (newY - oldY)/50;
  oldY = newY;
}

function startScroll(e) {
  clearInterval(tintv);
  if(velocity > 0){
    direction = -1;
  }else{
    direction = 1;
  }
  velocity = Math.abs(velocity);

  //Rest of stuff unchanged...
  //Maybe threshold off velocity, instead of time?
}
I'd give it a shot, but I've no clue how to get the cursor position in mid-drag...

Benson 2008-04-11 16:51
Re: 'Kinetic' scrolling with greasemonkey (javascript)
 
Wait a sec, I think I'm already understanding something; Microb's scrolling doesn't happen, does it, because we grabbed the mouse-down? So, something to scroll the page should also be added in speedTracker... If someone can point me at how to get the mouse position without an event, I'll try to go away and come back when I have something working...

Bundyo 2008-04-11 17:01
Re: 'Kinetic' scrolling with greasemonkey (javascript)
 
I already tried doing kinetic scrolling for one of my projects and it seems MicroB's javascript is too slow for this. But keep trying, mine was largely unoptimized.

Why without an event?

Code:
<body onmousemove="console.log(event.screenX)">
That will show you in FF FB horizontal coordinate of the mouse cursor...

If we had a mousemove :) We have during drag :)

Benson 2008-04-11 17:23
Re: 'Kinetic' scrolling with greasemonkey (javascript)
 
I'd think the overhead of tracking every move would be bad... Oh, well, it's something, and that's better than nothing. I shall try it.

tarkam 2008-04-11 17:26
Re: 'Kinetic' scrolling with greasemonkey (javascript)
 
It works pretty good on "small" websites. On heavily coded sites it tends to go crazy. With finger scrolling you have to do small swipes or otherwise it went the opposite direction!:)

Anyway I think it's a good start and would love to see more development on this script.

Bundyo 2008-04-11 17:27
Re: 'Kinetic' scrolling with greasemonkey (javascript)
 
I don't think you need to track the drag, maybe just the start point, the end point and the speed of getting there?

Benson 2008-04-11 17:59
Re: 'Kinetic' scrolling with greasemonkey (javascript)
 
The trouble is, if you make a fast drag for 2 inches, then want it to stop, the norma behavior is to drag, pause at the end, and then take your finger off. If you just track the average speed, you won't see that stop at the end, just a slower average speed. That's cured in binaural's script with a threshold, so if the drag took more than 0.5 sec, it doesn't kineticize. But that results in the opposite; a long drag ending with a flick now won't have the flick recognized.
So I need some way of determining the speed at release. The only obvious way is to track speed continuously (at 20 Hz, I was guessing, though that's tunable) and discard all but the last datum.

Bundyo 2008-04-11 18:33
Re: 'Kinetic' scrolling with greasemonkey (javascript)
 
Yeah, you're right...


All times are GMT. The time now is 05:57.

vBulletin® Version 3.8.8