I have to develop an application in html/js for a kiosk.
This Kiosk will be displayed on a Windows Touch screen, with "Windows Touch" capability.
It seems that there is some frameworks to use the gestures on mobile plateform, but I found nothing for a Desktop with a Touch Screen.
Is there a mean to use a "Slide gesture" on an html page, (for example to slide a big panel), opening the page in a browser in Windows 7, on a Desktop computer?
Thanx in advance for your help
Support for proper touch events in the browser is a browser-by-browser consideration. In IE 10 and 11, Microsoft have abstracted the concept away from Mouse and Touch events to what they call Pointer events and Gesture events respectively.
With your specific request for a "slide gesture" for interacting with a carousel, there's a specific IE Blog article on the topic.
Related
I am trying to compare scrolling behavior on a mobile vs desktop website. The plan is to let participants scroll on a mobile phone and desktop in a lab respectively for x minutes. Therefore, I have full control over the devices.
How do I capture the scrolling events on third-party websites such as Reddit? Google Chrome has a feature called performance insights to track user behavior, but it does not record scrolling.
What are some viable alternatives to record the scrolling of users on mobile and desktop?
I think the simplest way is to create a bookmarklet that injects a tracking script into the website you want to track.
Flicks are gestures that can be triggered with a stylus or finger to go back, forward, scroll down or up in an app in windows.
http://windows.microsoft.com/en-us/windows7/what-are-flicks
In my web app, I am using an HTML5 canvas to capture mouse events to draw. In a Microsoft Surface (where flicks are enabled), because of flicks, the mousedown event is delayed and several mousemoves plain ignored and not transferred to the web app. Furthermore, sometimes, the user goes back/forward/scrolls up/down because of the flick actions.
Here's a repro/description/screenshot of this issue:
https://github.com/jogonzal/MinimalisticFlickDelayRepro
The fix is to disable flick gestures in Chrome or Firefox - this means a code change in Firefox/Chrome windows apps to either:
Turn this off completely (preferred, this is what IE and Edge do)
Allow the developer to turn this off via CSS/Javascript
Option 1 Use TABLET_DISABLE_FLICKS (recommended, plenty of examples on github, this is how IE and Edge do it)
(C++):
Disable flicks as described in this article:
https://msdn.microsoft.com/en-us/library/dd562171(v=VS.85).aspx
Code sample
https://github.com/jonathanhook/Waves/blob/bc5a3c9a8a2c8574b28174e25650753237bc8cd2/Source/MultiTouchEvents/WMTouchEventSource.cpp
(C#):
Code example
https://github.com/leowangzi/DanielLib/blob/6aaae88bd9ec9ae91da35fa3bdcd280f2c701e64/DanielLib.TouchAppTemplate/Touchtech.Surface.Community/TabletUtil.cs
Option 2 Respond to WM_TABLET_QUERY_SYSTEM_GESTURE_STATUS
https://msdn.microsoft.com/en-us/library/windows/desktop/ms699430(v=vs.85).aspx
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/
There are JavaScript events for desktop web, e.g. mouse over, key press, etc. etc.
My question is why there is no JavaScript events for mobile web? e.g. fling? orientation change? etc. etc.
What if a web developer wants to write web pages specifically for mobile devices? How can they take advantage of phone specified user interaction (like the ones I mentioned)?
jQuery and other mobile application frameworks offer extended events for mobile devices. See some of the options below:
Sencha Touch
jQuery Mobile
There are JavaScript events for desktop web, e.g. mouse over, key press, etc.etc. My question is why there is no JavaScript events for mobile web?
There have been (relatively speaking) decent web browsers for desktops for a lot longer then there have been decent web browsers for mobile devices, so these things haven't been standardised. That doesn't mean they don't exist though.
A decade later and they are well supported and standardised.
Some events you can listen for include touchstart, ScreenOrientation.onchange, and devicemotion
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.