I am developing using Openseadragon
When I am zooming in using mouse wheel and reading the value of the current zoom using the function getZoom() , I am getting the value of the zoom for each wheel step
When I keep scrolling the mouse wheel in the up direction the zoom value keep changing normally as expected , going bigger.
But on a direction change of the mouse wheel , going down , ( in the first step only ) the zoom value continue to rise ( getting bigger ) but it should decrease ( getting smaller )
I think it is a bug of the Openseadragon , does anyone can help on the issue ? any info ?
I would think what you're seeing is because of the spring animation (slowing the zoom change exponentially as the zoom approaches the target level) after each wheel event.
If you use getZoom(false) you'll get the target zoom, which should change sign when you change the wheel direction.
Related
As for the current version, I have not found a proper way to detect the zoom start (without overriding the animation function). In my case both movestart and moveend events does not solve the problem.
The actual need for the zoom start is the TileWMS layer. I need to set it to invisible on certain zoom levels. This cannot be set on move end, because at move end the layer still loads tiles from geoserver although set to invisible. Enable / disable property is also not available on the layer itself.
Setting the layer invisible on movestart solves the problem with fetching but on drag already loaded the tiles are not visible :) this is annoying for the user experience.
Is there any other idea how to solve this?
Thanks
With flash and AS3 it seems to be a problem with mouse move event in full screen mode and mouseLock activated that I don't understand how to solve.
When I enter in full screen mode with Stage.mouseLock property enabled and i make very slow movements with the mouse, the two properties to determine the location of the mouse (MouseEvent.movementX and MouseEvent.movementY) return zero (0).
A print of the event event.toString() returns:
[MouseEvent type="mouseMove" bubbles=true cancelable=false eventPhase=2 localX=0 localY=0 stageX=0 stageY=0 relatedObject=null ctrlKey=false altKey=false shiftKey=false buttonDown=false delta=0]
"The mouse can be moved as far as I want always returning 0 for x and y if the mouse are moved very slow, so it's impossible to determine the movement of the mouse." (*) After a better test I've added a correction of this sentence, below in the "Note".
It's very strange because the event are fired correctly when the mouse is moved (also with slow movements), but the returning movement is 0. Seems like the movement is < 1 but are reported only integer movements, so the values are always returned 0.
I've tried also changing mouse settings of OS (Mac OSX) without success.
If you want I can give you sample code to enter in fullscreen mode and activate Stage.mouseLock properties.
Thank you for any suggestion.
Note:
After testing better I've found that flash player (my flash player version is 11,7,700,203) has a behavior that looks like a bug: if the current mouse movement (movementX and movementY) is equals to the previous movement, than flash return movementX=0 and movementY=0. The next mouse movement will be the correct value because it will be different from zero.
Because of this, with a constant movement always in the same direction (with a very slow movement is easier to reproduce), the player show "zero values" every two events fired.
At this link you can test a working example (faster than code yourself an example).
If the behavior I've found is correct, than it's easy to modify the code to rectify this problem, anyway IMHO it remain a bug. I'll report it to adobe.
At this other link (thank you to #nemostein) there is another working example.
I try to explain me better: if you move the cursor very slowly (i.e. to the right direction) you'll receive the output Movement( X:1 Y:0 ) when you move the cursor enough. If you move again the cursor enough to the right you'll receive the output Movement( X:0 Y:0 ). If you repeat the micro movements you'll receive the movements report always with this pattern: (x:1,y:0),(x:0,y:0),(x:1,y:0),(x:0,y:0)... instead of (x:1,y:0),(x:1,y:0),(x:1,y:0)...
I think it's wrong to receive a movement like (x:0,y:0) and seems to me that this values are returned every time when you make a movement equals (both the x and the y) to your previous movement.
I hope this is understandable.
There is no bug, but the MouseEvent.movementX/Y (alongside with MouseEvent.localX/Y and MouseEvent.stageX/Y) are somewhat misleading...
Although they are Numbers, not ints, there is no such thing like "half pixel", so they always reports int values.
The precision you're looking for (e.g.: movementX == 0.75) can't be achieved.
I couldn't reproduce the behavior you described at the note ("current mouse movement equals to the previous") and here is a working example of Stage.mouseLock = true and Stage.displayState = StageDisplayState.FULL_SCREEN.
Note that if you move the cursor very slowly you'll, eventually, receive an MouseEvent.movementX/Y == 1 (when you moved the cursor enough).
I've asked in adobe forum and they told me to open a bug.
Here is the link: https://bugbase.adobe.com/index.cfm?event=bug&id=3575123
I am making a musical instrument (mobile) where I have a rectangle that listens to user touch gestures . I would like to analyse the angle of the finger movement and play a short mp3 file in respond. I was researching and found a few options to use where I listen to the touch_end event and calculate the angle, however what I would like to accomplish is listening to one long swipe (going up , down, sideways etc.) and playing sounds accordingly.
Use case - user touches centre of the rectangle , swipes upwards , to the right , down (without removing finger) : output - playing upSound.mp3 , playing rightSound.mp3 , playing downSound.mp3 .
putting it together (should be fast gestures):
swipes upwards : playing upSound.mp3 ,
to the right: playing rightSound.mp3
down (without removing finger) : playing downSound.mp3
user ends gesture by removing finger.
My question- is there any library or tutorial that might help me accomplish this task .
Thanks
This may help you find that gesture angle
I've tried unsuccessfully (because of my poor 3D geometry understanding and unfortunate lack of time to dig in) to build a GoogleEarth-like controls for three.js. Maybe someone can help me, or might already have it. Anyways, i think it would be an excellent addition to three.js library.
Here's the specific functionality I am trying to build:
Zoom in with mouse wheel TO MOUSE CURSOR
Rotate around the scene by holding down Shift
Pan by pressing left mouse button.
As a bonus: show a little target icon during 1 and 2 operations above.
I have most trouble with 1, and haven't attempted 2. Panning is easy (there are lots of examples).
Right now I am unable to zoom into the scene so that it stays fixed under the cursor (so I can point at the top right corner of the screen, zoom-in and still see what I had under the cursor).
My thanks in advance,
Alex
I've implemented something similar in a past life. I assume here that you are interacting with a flat plane; conversion of these techniques to a plane tangent to a sphere is left as an exercise for the reader. ;)
Zoom in with mouse wheel TO MOUSE CURSOR
To do this, you'll want to cast a ray into the scene, and note where it hits. You'll then want to translate the eye point of the camera towards that intersection. To feel "correct", you'll want some kind of proportional zoom in instead of fixed steps--for example, each zoom step reduces the distance from the current eye point to the target by 20%, instead of just moving 20 units. This will automatically slow down the camera as it approaches.
Rotate around the scene by holding down Shift
One you hold shift, you'll want left and right mouse movements to orbit about your view point. To do this, you'll need to yaw about an axis perpendicular to your point of intersection. You'll cast a ray into the scene (once shift is held down), note the intersection point, and then rotate your camera's eye point about that axis. Note that you'll need also to reorient the camera to continually point towards that intersection as you rotate, or perhaps to have the eye direction rotate to keep a constant angle with the vector from the eye point to the intersection axis.
Pan by pressing left mouse button.
You simply need to get the eye right vector and eye up vector, and move in the appropriate direction (multiply the mouse dx/dy with the normalized eye right/eye up, and multiply by the timestep for framerate independent movement).
As a bonus: show a little target icon during 1 and 2 operations above.
At the intersection in the scene, add a little object. Once you exit a mode, remove the object.
for your first question you can use this program under mouse wheel
mousewheel = function (event) {
event.preventDefault();
var factor = 15;
var mX = (event.clientX / jQuery(THREE_STUFF.container).width()) * 2 - 1;
var mY = -(event.clientY / jQuery(THREE_STUFF.container).height()) * 2 + 1;
var vector = new THREE.Vector3(mX, mY, 0.1);
vector.unproject(camera);
vector.sub(camera.position);
if (event.deltaY < 0) {
camera.position.addVectors(camera.position, vector.setLength(factor)); trackBallControls.target.addVectors(trackBallControls.target, vector.setLength(factor));
} else {
camera.position.subVectors(camera.position, vector.setLength(factor)); trackBallControls.target.subVectors(trackBallControls.target, vector.setLength(factor));
}
}
I hope this will help you sure.
I saw here Click to zoom in WebGL how to zoom in to a particular point. How can I reverse that functionality- i.e. zoom out?
Change the statement
vec3.subtract(eye,dir) ;
to
vec3.add(eye,dir) ;
This moves the eye in the opposite direction from before.
Here's the modified live example: http://jsfiddle.net/3wwdU/1/