I am creating a web app that I am wanting to be usable on mobile devices.
The initial mechanic of said app requires the current X/Y coordinates of the mouse - which doesn't require clicking and dragging, just simply moving the mouse around a browser window.
Now I have been looking in to the various jQuery/Javascript libraries concerning Touch and Gestures, yet I am unable to find anything that suits what I am after.
So basically I am looking for a way to get the x/y pos of a single finger touch/drag.
Eg: Touch the screen at 0, 0 then hold and drag it to 480,320. The values would then interpolate between x1, y1 to x2, y2.
Thanks.
$(function() {
var $log = $("#log");
function updateLog(x, y) {
$log.html('X: '+x+'; Y: '+y);
}
document.addEventListener('touchstart', function(e) {
updateLog(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}, false);
document.addEventListener('touchmove', function(e) {
e.preventDefault();
updateLog(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
}, false);
});
You shouldn't need a library for this, it's fairly easy to write your own code using the touchstart, touchmove and touchend events.
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
As a side note, if you're using the iOS simulator for testing, be aware that it can sometimes give incorrect coordinates in a way that an actual device wouldn't, so you'll always need to keep a physical iOS device handy to verify that your code works.
Related
I have an A-Frame multiplayer project, which relies on each user moving around the map, and it works well in desktop browsers. The stumbling block is the lack of motion controls in mobile, like the WASD-controls for the camera.
What workaround would you suggest? Perhaps, adding on-screen buttons and triggering keypress events with jQuery?
Or is there a more straightforward method of adding a function that would change the camera position for each on-screen button press? In this case, is there a way to find the exact functions attributed to the W, A, S, D keys?
Among several things I've tried was:
$(".up-button").click(function(){
window.dispatchEvent(new KeyboardEvent('keypress',{keyCode: 38}));
And another one:
var e = jQuery.Event("keydown");
e.which = 38;
$(window).trigger(e);
Neither is producing any change.
Have you tried something like:
window.dispatchEvent(new KeyboardEvent('keypress',{keyCode: 38} ) );
to simulate pressing the up arrow key?
You could simulate pressing wasd or up down left right.
The rotation might be a little more tricky though,
you would have to simulate the onMouseDown and onMouseMove events.
I see what you mean. Most people wouldn't even have a controller to properly move the character in your project/game. I've seen in a demo in A-Frame that is pretty clever in my opinion. Basically if the user is looking down on floor, then the camera moves forward. This is good as it requires no outside input whatsoever so it works on everything.
As how to implement it, this may be a solution:
//First calculate the verticle angle of the camera
var verticalAngle = getVerticalAngle(camera.getWorldDirection());
console.log('vertical angle:' + verticalAngle);
function getVerticalAngle(cameraVector) {
return vRadiansToDegrees(Math.atan(cameraVector.y));
}
function vRadiansToDegrees(radians) {
return radians * 180 / Math.PI;
}
And then move the camera forward if the user is looking down on the floor
if (verticalAngle < -43) {
//move camera
}
I'm having difficulties implementing multi-touch panning with hammer.js. Panning events are only fired with single pointers. If I try to drag with two fingers it does not fire until I release at least one finger.
Do I have to do something special to the hammer configuration?
EDIT: I already found that I can configure 2 pointers for the pan event, but now I see that Chrome has a built-in feature to open a context menu on two-finger tap, which most of the time prevents the panning from being recognized.
If I simply catch the 'contextmenu' event and call preventDefault(), it will (obviously) completely disable the pan recognizer.
Any other way?
BR,
Daniel
You should use 'pinch' event. For two-fingers panning and zooming. PINCH event has property: 'pointers', with finger events;
var previous_pinch_delta = {
x: 0,
y: 0
};
hammered.on('pinch', function(e){
camera.pan(e.deltaX-previous_pinch_delta.x, e.deltaY-previous_pinch_delta.y);
previous_pinch_delta = {
x: e.deltaX,
y: e.deltaY
};
});
I am working on a Transformer Pad and developing a drawing plate.
I use PhoneGap(javascript) to write the code instead of JAVA.
But the touchmove event is quite weird.
I think as I move my finger on the pad, it will continuously to collect the coordinates which I
touch on the canvas. BUT IT DOES NOT!
It's ridiculous, it only collect "1" coordinate: the first point on the canvas my finger moves to.
Here are my code about the "Touch && Move event":
function touchStart(event){
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
if (event.type == "touchstart") {
line_start_x= touch.pageX- canvas_org_x;
line_start_y= touch.pageY- canvas_org_y;
context.beginPath();
context.moveTo(line_start_x, line_start_y);
}//if
}//if 1
}//function.
function Touch_Move(event){
line_end_x= event.touches[0].pageX- canvas_org_x;
line_end_y= event.touches[0].pageY- canvas_org_y;
context.lineTo(line_end_x, line_end_y);
context.stroke();
test++;
}
I don't know why each time I move my finger on the pad, trying to draw a line, curve, or anything
I want. As the finger moves, only a VERY SHORT segment appears. So I declare a variable:"var test=0" in the beginning of this js file. I found that although I move my finger on the pad without leaving it or stopping, the value of "test" remains 1. It means that I move my finger on it. But it doesn't
continuously to trigger the event: "Touch_Move".
What can I do now? I need a corresponding event to "mousemove" on touch pad. At least, the event has to continuously be triggered.
Thank you!
Oh, Jesus. I finally find the answers:
Please take reference for this site.
If you work on an Android System,remember the 'touchmove' only fire ONCE as your finger
moves around the pad. So if you wanna draw a line or something, you have to do this:
function onStart ( touchEvent ) {
if( navigator.userAgent.match(/Android/i) ) { // if you already work on Android system, you can skip this step
touchEvent.preventDefault(); //THIS IS THE KEY. You can read the difficult doc released by W3C to learn more.
}
And if you have more time, you can read the W3C's document about introducing the
'movetouch', it is REALLY hard to understand. The doc sucks.
The current scenario I need to solve, is rotating an image with the mousewheel.
As KineticJS does not have a specific hook for the mousewheel event (in that it's not a standard one anyway), I've used jquery-mousewheel to hook into the surrounding canvas, and KineticJS to store, on mouseover, the image that requires rotation.
On the mousewheel event, it checks if KineticJS has marked an image for rotation, it then goes ahead and rotates the image.
I'm not sure this is the best solution for the situation, as it doesn't take into account overlapped images (although I could probably prioritise the marking of 'active' shape to the topmost on the stack), or if this is even the most efficient solution.
Essentially:
on each shape-
this.image.on("mouseover", function() { Engine.scrolling = _this.image;})
this.image.on("mouseout", function() { Engine.scrolling = null;})
on the outer container -
$("#DraftingBoard").mousewheel(function(event, delta, deltaX, deltaY){
if(Engine.scrolling != null)
{
Engine.scrolling.rotateDeg(90);
Engine.scrolling.getLayer().draw();
event.preventDefault();
}
I'm designing user controls and I'm trying to code the controls for the mouse. This is what I came up with to get user input.
var mouseInput = new GLGE.MouseInput(window);
window.onmousemove = function(ev){
var dx = window.mouseX - prevMousePos.x;
var dy = window.mouseY - prevMousePos.y;
prevMousePos ={
x:window.mouseX,
y:window.mouseY
};
// I do movement calculations with dx and dy here
}
However what I came up with above isn't perfect because if the mouse reaches the end of the window it would not detect movement.
Is there a better way of detecting mouse movement? I'd rather not calculate it using its co-ordinates because using that method I'm unable to calculate distance moved when the mouse is at the edge of the screen.
PS: If anyone was wondering, what I'm designing is sorta like Google Streetview or a first person shooter. I just want the user to be able to move the mouse in one direction infinitely.
I mean, you're already using an onmuseover event handler (the most efficient way because Javascript is async). So you just compute distances from he previous, only when the user moves the mouse. If he doesn't further move the muse, the player just proceeds in the same direction prviously computed.
No, there is no method to handle mouse movements outside of the browser window.