I'm developing a webportal and I would to make a webpage that support pen touch to draw sketch directly in the browser.
I thought about Canvas and Javascript or JQuery with php to store the image on the webserver. and I tested few examples that I found online without success.
Some examples works better than other. Opera probably is more complete to manage canvas than Chrome but the problem is always to exclude the finger touch if I'm using the pen.
Anyone have idea or suggestion about drawing with pen in a browser with a mobile device that support pen gestures (like Samsung Note or similar)?
Use jquery events:
Ontouchstart -> You should start a timer here.
Ontouchmove -> Gives you the x and y value of the movement in px.
Ontouchend -> If very short and you have not moved an x amount of pixels in horizontal or vertical directions, it is a click. You can also sync the changes with your db here.
Those are just one of the many things you can do with the three touch events.
I'm having some trouble with the hammer.js-touch-framework, to be more precise, the rotation-trigger. My code is pretty minimalistic, as you can see in this jsfiddle (I'm using jquery.hammer.js from the official hammer.js-website):
http://jsfiddle.net/kgEFs/
My main problem is, that rotation and pinch both are not triggered, only tap gets fired.
I know, other browsers might be better for web-development, but I'm interested in how I can make my object rotate, even in Internet Explorer.
Tapping on the <div> with MSIE 10 triggers the tapping event and even could rotate the object, if there was a value (you can check by simply changing e.rotation to 10). I already got the rotation-event once, but I can't reproduce how I achieved it.
Any ideas?
Using the JavaScript MouseWheel on OSX seems to be not useable for precise stepped scrolling.
Any idea how to fix this example for OSX:
http://jsfiddle.net/daslicht/Qbq4k/
The issue is that, on OSX multiple MouseWheel Events get dispatched.
I only need to touch the MouseWheel of my Logitech Anywhere MX Mouse
and 3 or more events get dispatched.
When I try to scroll the list with the Touchpad,
precise scrolling is impossible due to the excessive MouseWheel Events.
On Windows scolling the List, works like a charm,
since only ONE Event get dispatched on each MouseWheel Step
(even in hyperscrolling Mode of the Anywhere Mouse)
I have even tried to block the incoming events
or lower the threshhold but nothing worked as nice as on Windows:
http://jsfiddle.net/daslicht/Qbq4k/ //blocking events after the first incoming for n ms
How do you guys deal with the MouseWheel on OSX?
if(osx){
mouse=false; //?
}
I have a canvas object which once you mousedown, it will begin "sliding" the content of the canvas until you mouse up. It does not seem like mousemove is triggered for hand-held devices (my Kindle Fire).
I've noticed though that google maps is able to achieve this effect, so how do they do it? What is the accepted method for determining the position of someone dragging their finger across a canvas object?
You want to use the touchmove event. It's supported on iOS and Android.
Although Flash has a mouse wheel event (MouseEvent.MOUSE_WHEEL), it comes with quite a few problems.
The first is that the event is not yet supported on the Mac. So there are a bunch of solutions, all of which (basically) capture the mousewheel (or DOMMouseScroll) event in javascript and pass it into the flash app. Luckily, under all the Mac browsers I tested, this also works when flash is in fullscreen mode.
Problem 2 is that flash ignores mouse wheel events with small "deltas". For example, Microsoft's IntelliPoint Mice with "Smooth Scroll" causes this problem. A solution to this is the same as the solution for the mac... i.e. capture the javascript mouse wheel event in the browser and pass it to the app. The issue is that of the browsers in windows that I tested (firefox, ie, safari, and chrome), they don't seem to capture this event when flash is in full screen mode. Does anyone know why or how to fix that?
I currently have a hybrid solution that always takes events from javascript (in non-fullscreen or fullscreen mode) except when it's in fullscreen mode on Windows (at which point it takes them from the flash mousewheel event). So the only times it fails is in full screen mode on Windows with a mouse that has small deltas. Anyone have a full solution? Or just a better one?
It's a know issue on adobe's JIRA. You need to wait'em to fix it, or use another event instead MouseEvent.MOUSE_WHEEL. It's not working on windows because the flash player implementation is completly different in windows from mac and linux. Mac and Linux uses GTK to implement the plugin Handle. On windows it uses a Win32API Common HWND, which steal focus on full screen mode, causing the non dispatching of scroll events on the browser. On Mac and Linux, GTK just stretch the plugin size into desktop's size, and don't do a real fullscreen. It's a GTK behavior inside these systems. Nothing can be done.
Your solution is one of the best. Only one is better - don't use mouse wheel :(
Adobe should do something with it (and with support for other controllers).
MouseEvent.MOUSE_WHEEL seems to work fine on mac since Gala beta and 10.1 final. i can trigger mouse wheel events using the magic mouse and track pad in both Safari and Chrome.
Pixelbreaker's MacMouseWheel has given me successful fullscreen scrolling on a mac, but I haven't used it in a while (on Safari 5 for example).
The downside is that it captures events for the whole page, so you will lose scrolling for the HTML even if the flash element is only a little box on the screen.
But you could basically switch between what you've built already, and what he's using in the macmousewheel.js when you've enabled full screen.
Hope that helps, good luck.
You could try using the simple AS3 class MacMouseWheelHandler at http://blog.earthbrowser.com/2009/01/simple-solution-for-mousewheel-events.html which makes it so you don't have to integrate with Javascrpt. It injects the Javascript right from Actionscript.