how to run touch screen applications in non touch environment? - html

I need to run the touch based browser app in my desktop and modify some codes written in touch events. Can some one tell me what are the best ways to run the touch screen apps in non touch environment? and check its event?

If your app is running inside a browser, you can emulate touch events on non-touch systems by turning on touch emulation in Chrome's developer tools.
In Chrome 26+ this can be found by clicking the "gear wheel" icon in the bottom right, and then selecting the "Overrides" panel. See https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events
NB: this will only work while the DevTools are open. So it should be fine for testing, but not for end-user running.

Related

Automatically display touch keyboard on HTML input in Chromium Kiosk mode

I am running Chromium in kiosk mode:
chrome.exe --kiosk http://127.0.0.1:1234/
for an embedded (desktop) computer, which a touch monitor only (no keyboard, no mouse).
Is there a way to configure desktop Chromium to behave like a mobile/touch UI?
More precisely, how to make that when clicking/touching a HTML <input> element, an on-screen keyboard similar to the one displayed on Chrome for Android is automatically displayed?
Note: I'd like to do this directly at Chrome level, and, if possible, avoid to use a third-party extension like Virtual Keyboard or a JS library like this one.
Adding these extra chrome flags used to work previously, however I cannot confirm as I do not have a touchscreen monitor at the moment:
chrome.exe --kiosk --touch-events -enable-viewport http://127.0.0.1:1234/
Also you may want to consider the following, it may also apply to Chromium: Disable Chrome pinch zoom for use in kiosk
For anyone reading in 2022 - those flags does not open on screen keyboard (tested on touchscreen monitor)

Electron steals focus to Windows 10 Touch Keyboard and makes it unusable

I'm trying to run the attached project on Windows 10 Pro (latest version available without Windows Insider Program).
Basically it is a fullscreen browser window that navigate to http://www.google.com.
I configured Windows in Tablet mode, in order to let the touch keyboard popup whenever any text field in the page (in this case the query one) gets focused.
Then, I packaged the application with electron-windows-store in order to let electron work as Windows Store application.
When I start the application and Google home page is loaded I'm not able to use the touch keyboard, because it pops up but immediately disappears, like if electron tries to acquire again focus and causes touch keyboard disposal.
I tried also to disable fullscreen mode and setup frame coordinates in order to be as it was in fullscreen, but no success.
Any suggestion?
TestApp.zip
GitHub Repo
This seems to be related to an open issue on the Electron GitHub repository. You might have to wait for the Electron team to introduce this improvement.
I've managed it. The issue was caused by an old dependency to electron. Once updated it to the latest version I know (1.4.7) it all started working.

Google Chrome kiosk mode compatibility on a touch screen monitor

I'm trying to develop a kiosk web application that uses Google Chrome on kiosk mode setup which loads automatically after start-up.
http://www.sitepoint.com/google-chrome-kiosk-mode/
The kiosk web application also uses a virtual keyboard plugin for Google Chrome for the text inputs.
http://xontab.com/Apps/VirtualKeyboard
I'm planning to setup a computer unit with a touch screen monitor for the kiosk.
Note: It's my first time to develop a web application that uses the kiosk mode setup for Google Chrome and I don't have a touch screen monitor for testing. I wanted to ask this question for developers that has experience with this.
My question is:
Does Google Chrome on kiosk mode setup automatically detects my touch screen monitor?
Does Google Chrome automatically enables touch features when my web application is on kiosk mode such as swipe for scrolling up and down.
A touch screen is an input device just like a computer mouse - Google Chrome receives touch events the same way it receives mouse events (although the events are different).
The annoying thing when starting working with touch screens is that the standard click event that we are used to, is triggered after a delay comparing to mouse event. You should listen for tap event or use a library such as https://github.com/ftlabs/fastclick
Making long story short developing a kiosk application integrated with a touch screen is similar to developing mobile websites. You should probably use a JavaScript library to support all kind of touch events such as tap, swipe etc. See http://hammerjs.github.io/
You may also find this website useful http://peter.sh/experiments/chromium-command-line-switches/
I know this answer is six years later but for anyone reading this. You can run Google Chrome in Kiosk Mode with custom options. This can be done by creating a new account and right clicking (in windows 10) on the icon for this account.
Under properties add the following tags to optimize the application for touchscreen use:
–-touch-events –enable-viewport

Simulating an iPhone browser using HTML/CSS/JS

There are several websites that offer an "iPhone browser emulator". I'm just wondering if there's a way for me to get the same functionality for viewing local html files on my machine.
It seems like basically you would mainly just have to spoof the css "media type". Is that possible using HTML/JS/CSS?
And is there anything other functionality I'm forgetting that would be required for a basic iPhone browser simulator? Obviously discounting all the mobile-only hardware like deviceorientation and gps etc.
You don't need a third party website! you can easily do that with Chrome browser:
F12 to open the developer tools panel
click the setting gear in the bottom right corner
in the left panel select Overrides
"check" the Enable checkbox
select the desired User Agent
you might want to change the Device metrics / orientation and enable touch events
I'm using ripple. Developed by blackberry.
It's a chrome extension. And you can work with your localfiles

Chrome settings - set "emulate touch events" as default settings

We are trying to run some automated tests (coded ui based) on our mobile application via Chrome browser.
In order to make the tests available to run, we must set the browser to work as 'emulate touch events'.
The thing is that as part of our test flow, a new chrome browser is being launched on each test but the definition is gone.
I already check this one, but it doesn't work:
How to Always Emulate Touch Events in Chrome Dev Tools?
Any other suggestions?
Thanks,
Yair
I believe that the dev tools window must be opened for the overrides to kick in, have you tried that?