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
Related
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.
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.
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.
While attempting to make a game using Canvas I noticed a few quirks on tablet / phone browsers.
1) How do I disable the Canvas from being selectable? It seems like when the user touches it, it highlights the canvas, and almost makes an attempt to select it. This is undesired.
2) Browser slide gestures. Some browser have slide gestures that override any movement capturing done in the canvas or webpage. This is extremely annoying and undesired as well.
3) Canvas control with HTML UI elements. I noticed when there is a canvas present with fellow ui elements (such as text) sometimes clicking or dragging in the canvas will highlight a part of the HTML and instead drags the HTML elements instead of hitting the canvas.
Any help is greatly appreciated! I was hoping HTML5 would be mature enough to allow for good compatibility on mobile as well as desktop. The idea is to be able to code once and play everywhere....thanks!
This should fix your issues relating to #1 and #3:
canvas.addEventListener('selectstart', function(e) { e.preventDefault(); return false; }, false);
#2 seems like an awfully separate question, but I've never had a problem with slide gestures overriding any of my canvas stuff. Try using e.preventDefault(); at the beginning of your touch events.
I am having a redraw issue, when you are scrolling the canvas will not redraw until you release your touch. The problem with that is I depend on "ontouchmove" to move my character around. So until the touch is release, the canvas will not redraw.
Another problem is when ever the canvas is touched it is focus, or activated. It develops a focus ring around it. I tried setting both the :focus and :active pseudo's borders and outlines to nothing. Also I saw "drawFocusRing" for the context of the canvas, however that didn't seem to resolve the issue.
Currently I tested on Android stock browser 2.2 (MyTouch 3G)
I believe the orange focus ring is more in relation to the WebView you are using to view the canvas maybe? I know I had a similar issue with js drawing on a canvas.
myWebView.setFocusable(false)
myWebView.setFocusableInTouchMode(false)
Should solve the focus problem.
I don't know about Android specifically, but in mobile Safari you can prevent scrolling using the event.preventDefault() method. If your application requires scrolling, it might be possible to implement your own scrolling mechanism whilst still preventing the default behaviour, maybe by combining touch events with CSS positioning on a page wrapper div?