geddonn

Hi there, I have been trying to implement a continuous drag slider in JSUI. By this I mean that when dragging, if the mouse hits the edge of the screen it loops around and adds/subtracts to/from the incrementing/decrementing value.

I am getting some funny behaviour. First of all the coordinates seem to get messed up if the toolbar is visiable (and in some cases it gets messed up in the Y-axis further after a while, though I'm not sure exactly how to replicate this behaviour!).

Secondly I'm getting weird behaviour on the edge where it will jump to the number above suddenly and then go back to the desired values, I've illustrated this by including [peak] and [trough] in the example patch.

Anyway, here is the example code if anyone can shed any light on this for me.

jsui-continuous-drag-pitfalls-and-bugs

Ok, I have resolved the peak/trough weirdness by rewriting the loopMouse function as it is below.

However, the toolbar offset stuff is still an issue.

    result = [(relX / screenSize[0]) + dragLoopCount[0], (relY / screenSize[1]) + dragLoopCount[1]];

        max.pupdate(screenSize[0], patchpos[1]+objpos[1]+y);

    if(relX >= (screenSize[0] - 1)) { //off right

        max.pupdate(0, patchpos[1]+objpos[1]+y);

        max.pupdate(patchpos[0]+objpos[0]+x, screenSize[1]);

    if(relY >= (screenSize[1] - 1)) { //off bottom

        max.pupdate(patchpos[0]+objpos[0]+x, 0);

Ok, I have resolved the peak/trough weirdness by rewriting the loopMouse function as it is below.
However, the toolbar offset stuff is still an issue.

var loopMouse = function(x, y) {
	var relX, relY, result = [];
	relX = patchpos[0]+objpos[0]+x;
	relY = patchpos[1]+objpos[1]+y;

	//normalise and add loop count
	result = [(relX / screenSize[0]) + dragLoopCount[0], (relY / screenSize[1]) + dragLoopCount[1]];

	if(relX 
		max.pupdate(screenSize[0], patchpos[1]+objpos[1]+y);
		dragLoopCount[0] -= 1;
	}
	if(relX >= (screenSize[0] - 1)) { //off right
		max.pupdate(0, patchpos[1]+objpos[1]+y);
		dragLoopCount[0] += 1;
	}
	if(relY 
		max.pupdate(patchpos[0]+objpos[0]+x, screenSize[1]);
		dragLoopCount[1] -= 1;
	}
	if(relY >= (screenSize[1] - 1)) { //off bottom
		max.pupdate(patchpos[0]+objpos[0]+x, 0);
		dragLoopCount[1] += 1;
	}

A further update. It appears the random offset I was talking about is something to do with where the max window is scrolled to. So I guess the algorithm isn't taking into account window scroll position. Not sure that explains the toolbar issues though...

So I thought it might fix my problem if I use the scroll offset in the mouse position equation.

Unfortunately it appears that 'this.patcher.scrolloffset' is broken.

Try this and you will only ever get the array: [0, 1]....

So I thought it might fix my problem if I use the scroll offset in the mouse position equation.
Unfortunately it appears that 'this.patcher.scrolloffset' is broken.

var printOffset = function() {
 var off = this.patcher.scrolloffset;
 post('offset: ' + off + '\n');
};


I haven't had a chance to test it, but I guess you just can't call max.pupdate in the middle of a drag.

The way I solved that in ej.numbox was just to replicate the last offset when you are still going in the same direction. Example on 

The way I solved that in ej.numbox was just to replicate the last offset when you are still going in the same direction. Example on github might be useful.


Thanks for the reply Emmanuel. At the moment the only times I'm calling max.pupdate is on mouse up (to reset the mouse position) and when the mouse hits the screen edges (to wrap it around so we can continue scrolling).

The issue I'm having at the moment, I suppose, is that when calculating mouse position in relation to screen coordinates I cant find a way of including patcher scroll offset and toolbar offset.

At the moment I'm using this to get coordinates:

var patchpos = this.patcher.wind.location, objpos = this.box.rect, coords = [];

coords = [patchpos[0]+objpos[0]+x, patchpos[1]+objpos[1]+y] //x and y are taken from click and drag events

I'm not sure I fully understand your code to see where you are doing this, can you explain it a bit more to me?

At the moment I'm using this to get coordinates:
var patchpos = this.patcher.wind.location, objpos = this.box.rect, coords = [];
coords = [patchpos[0]+objpos[0]+x, patchpos[1]+objpos[1]+y] //x and y are taken from click and drag events

I'm not sure I fully understand your code to see where you are doing this, can you explain it a bit more to me?
Cheers.


JSUI continuous drag - pitfalls and bugs.