I'm working on a painting application with multitouch.
This should work on a 32" inch Intellitouch 2521". Unfortunately as expected it is not plug and play together with the Fabric.js which used event.js to catch the touch event.
If i write simple js with touchstart, touchstart and touchmove events these do work with multi touch. But if I try the event.js pinch, touch,... these do not.
Any Idea what could be the reason for this? I already wrote the whole application in expectation that it would just work as it would on a phone (On Mobile the touch functions does work). But with Windows it does not.
I fixed this by using android on desktop for my installation.
Related
So I have run into a problem again with this plugin- PinchZoom.js which started happening after the 13.4 update by Apple for iOS devices.
The problem is that the double tap feature has suddenly stopped working completely on iOS devices now.
For a concrete test, you can refer to the plugin demo page: http://manuelstofer.github.io/pinchzoom/demo/pinchzoom.html
On iOS devices, you won't be able to double tap to zoom in the image whereas this was working fine in previous versions of iOS.
I have even dived down in the source code of the plugin but I am not sure what is causing the double tap TO NOT work in iOS devices after the update.
If anyone has any idea/workaround for this, it would be very helpful.
Thanks
On all browsers there used to be a delay of 300-350ms on touchstart events. Apparently, on iOS there still is. You can test this by logging tap events and time in the touchstart event listener.
And for your issue, you could either solve it by modifying pinchzoom.js to use touchend which has no delay instead of touchstart, or by preventing default behaviour on the touchstart.
I chose the latter and added event.preventDefault() to the touchstart event listener. You can do that too, until the developer provides an official solution.
el.addEventListener('touchstart', function (event) {
event.preventDefault(); //add this
if (target.enabled) {
firstMove = true;
fingers = event.touches.length;
detectDoubleTap(event);
}
});
I have a project created with canvas. This project works fine on every browser on my iMac (Safari, Chrome, Opera, IE, Mozilla). For this I have created a normal click function:
$('#canvas').click(function(e) {}
When opening this project on a Windows7 SmartBoard (with Multisync s521-p nec) it also works fine, except at Chrome, you cannot touch it. If you click with the mouse on the SmartBoard, that is not a problem at all, but you just cannot touch it with the fingers. Since my project will just be used on this SmartBoard, and preferable at Chrome I really need to fix this, but I have no idea how.
Use Javascript touch events instead of click:
https://developer.mozilla.org/en-US/docs/DOM/Touch_events#Setting_up_the_event_handlers
click is a mouse operation and because the device has "mouse" it is reserved for it.
How to test touch events without having any touch based screen / device?
I have Windows 7 PC and my monitor is not touch based.
You can use google chrome. Open console by pressing F12 or inspect any element, in right-bottom corner click on gear icon, then go to "overrides" where you can enable "Emulate touch events". Your mouse clicks will be like touches.
Notice: unbind/remove any pc's click events like onclick,onmousedown,.click and .ect because in this mode will works both of touch and click events.
If it's still actual, you can use this library to test touch events. It's used to test touch for Hammer.
One possible way is to install the Android SDK and use the browser in the emulator. I'd advise an Android 2.x image as emulation is a bit slow, especially the 3.x and 4.0 images.
Hammer.js library can simulate touch events on desktop devices.
http://eightmedia.github.com/hammer.js/
I'm create a website specifically for the ipad. What tools should i use to help me debug CSS? I'm developing from a desktop environment, but testing and viewing my changes on the iPad.
I use firebug to debug your normal website. But my ipad website doesn't show up at all in firefox. It shows up in Safari, but Sencha's drag, touch and slide event handlers don't respond well to my mouse events.
What tool do I use to debug css (and possibly javascript) issues on an ipad website built with Sencha?
Try the Phantom Limb.
It simulates touch events on a desktop browser to enable testing. (it also turns your mouse pointer into a giant hand, which I guess adds to the effect.... hmmmm)
This is quite a new thing -- I haven't tried it myself yet; it's still on my 'todo' list, so I can't tell you how great it is, just that it is supposed to solve the kind of problems you're asking about.
I ended up using google chrome's developer tools. It uses the webkit engine just like safari, so it's the closes thing I have.
In the iPhone or Android, if you have a JQuery Slider, it doesn't quite work (touchscreen will move the screen instead of drag the slider.)
You may need to write this from scratch. Luckily, #ppk has coded up an example of drag and drop for iPhone.
Listen for touch events and move the slider accordingly. These events also work on Android as it also uses WebKit.
You can use this library http://touchpunch.furf.com/
This provides touch events for all the jquery ui elements.
I found sample code online which converts touch events to mouse events. I tested this with jquery-ui's slider and it worked nicely!
Link to source
You can do this for iphone, android and windows phones via jquery+javascript. Windows phone with IE has one flaw, I have not been able to get it to snap to div sections.
I used this to wire up http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ the slider. Works like a charm, just be sure to replace the code that works against specific dom elements. Then add $('#sliderdiv').addTouch (). Works on IPhone, but doesn't work for Android. According to quirksmode touch events don't work on Android.