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.
Related
Go to any online multitouch javascript demo page; here are some:
mdn (same as jsfiddle.net/Darbicus/z3Xdx/10/) or this. I can only post max 2 links but every online multitouch demo i could find has same behaviour as described here.
Put one finger on canvas and don't move or release it. Now put another finger on canvas and try to draw some shape by moving it (be careful not to make movement with first finger). It doesn't draw shape, touchmove event is not happening for 2nd touch! Don't release any finger yet. Try to move only first finger. Now you get touchmove event for both fingers at once and all events work fine (immediately) for both touches from now on.
I tested it on 2 different tablets with Android 4.2.2. On both tablets i tested it first with Chrome 31 and 32 and then with Firefox 26. Always same result.
Why is touchmove event not firing for second touch if first touch hasn't moved yet? How to solve this?
Google fixed this behaviour in latest Chrome beta version 33 (https://src.chromium.org/viewvc/chrome?revision=244063&view=revision)
Firefox and Opera still have this problem.
I have this tetris game I programmed with the intention of learning a bit more on javascript: elcodedocle.github.io/tetrominos
I can play it in most tablet/smartphone browsers, but on my Android 2.3.6 stock browser (Samsung Galaxy Ace ST5830) it has two problems:
Zoom events are not exactly canceled by user-scalable=no viewport property: double click and two-finger zooming still work. Sometimes.
The canvas freezes, also sometimes (I'm going mad trying to determine the cause: How the heck you debug a web app running on an android browser??). I'm guessing because of a swipe or drag event triggered that shouldn't be, so it's somehow related to the above. Tapping out of the canvas makes it work again.
I'm using Kineticjs to manipulate the canvas and bind the touch events, on top of jquery-ui for the dialogs and jQuery (not jQuery mobile).
Any suggestions/ideas?
the problem is with the device's processing speed.. evrery device has its own processing speed. canvas animations are based on javascript's setInterval and setTimeout methods..which performs as per the device's processing speed..thats why canvas games are sometimes laggy on handhelds.
Currently what I'm trying to do is rotate an image such as a chair or a table and when user
touch the image and drag upward or downward, they will be able to see the top and bottom of
that chair or table. Can someone give me a solution or any reference which can help me to
fulfill this task? Thank you very much in advance!
If you are using jQuery Mobile (I'm assuming you are because of the tags you applied to your post), try to play with Touch events. Specifically, try taphold.
jQuery mobile >
For the touch and drag, you can use touchstart/touchmove/touchend events. You can easily find documents of touch events from Apple's developer website. Both iOS and Android support touch events.
Because touch and drag is a gesture, you might want to see if there is any library implemented this gesture. A gesture is a combination of touches with restrictions. Of course you can define a gesture with touch events and a lot of JavaScript code, but it would be easier to reuse what's been written and tested by others. See if you can find anything useful in jQuery Mobile, Sencha, or Pointer.js.
Image rotation can be done with CSS3 transform. You can easily get information about transform property from Apple's developer website or just a Google search. Use 3D transform instead of 2D when available, because in most devices 3D transform is hardware accelerated while 2D is not.
I am trying in vain to get this Flash based navigational item working in FF and Chrome on PC. It's all good on Mac and it's just fine using IE 7 or 8 on PC.
The nav item consists of a ball that "follows" the cursor in relation to where it is on the page. JS is used to gather the X/Y info from off the Flash stage and create vars to be used by the Flash movie to move the "orb" in relation to the cursor position. For some reason, FF and Chrome on PC fall short here.
I've tried everything from setting the Flash movie to "opaque" and positioning a transparent DIV over it, all to no avail.
Any thoughts on this? Has anyone encountered something like this?
Example here:
http://anthrograph.com/yarbyarb/thang/
We were given the compiled SWF with the listeners setup, but as of now, I do not have access to the FLA to make changes.
Thank you!
i tried in chrome and firefox, when mouse is on html part, positioning is working, while mouse is on flash it is not working.
if i understand, easiest solution is for window mode, you should make a displayObject, a sprite and set it to belove everything else with alpha = 0, with this you can set window mode anything you like.
other then, you should add Listener to MouseLeave and MouseMove to detect when listen javascript or actionscript.
there is another error, you should mask your buttons that right side. they are under other graphic but mouse_over is working when it should not. For this use ROLL_OVER instead of MOUSE_OVER.
I've been testing out the new functionality of html5 and js to create a sketching site. I've been looking into this for a possible client that wants their site to be ipad accessible, but also have drawing features on it.
So i created a rough experiment where you can drag your mouse across a screen to draw lines. I went to test it on an ipad and realized this doesn't work. Why? because dragging on an ipad is reserved for actually dragging the screen around.
Is there something you can do to get around this? I'm sure this could be done if made for an app, but what about just a normal website.
In your code, replace your events like that:
onmousedown => ontouchstart
onmousemove => ontouchmove
onmouseup => ontouchend
At least that is how it works on iPhones. Further reading: http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
Shameless self promotion - I developed a jQuery plugin for drawing on a website via HTML5 for the purpose of collecting signatures on the iPad screen. http://www.crowdsavings.com/open-source/drawbox