/JS-virtual-Touchpad

Fake touchpad overlay for mobile sites that carries out expected mouse and pointer events. Kind of hacky method to make a desktop application work on mobile. Link to JSketcher application with fake mouse overlay demo. Demo only works on touchscreen devices.

Primary LanguageJavaScriptMIT LicenseMIT

JS-virtual-Touchpad

Its like having a mouse in your mobile browser.

Basic functionality

This project provides a basic emulation of a laptop touchpad that can be overlayed over an application designed for desktop use. The touchpad shows up as a mostly transparent overlay over your web application.

Usage instructions

To use copy the "mouse.html" file and "mouse" folder to the same directory hosting your web application.

In your web application add the following line to the index.html file.

<script src="./mouse/checkIfMobile.js"></script>

Now visit your application from a mobile browser.

If you want to test on a desktop type device you will have togo to the /mouse.html file directly as it will not automatically redirect to use the virtual touchpad unless it detects you are on a mobile device.

troubleshooting

On some sites setting the page to full screen will not work correctly. If you run in to an issue with the iframe contents not showing up correctly comment out the following line in ./mouse/mouseController.js

if (window.innerHeight !== screen.height) document.body.requestFullscreen();

In-depth explanation of how it works

See article: https://medium.com/@admin_11488/bridging-the-gap-making-a-desktop-web-app-mobile-friendly-with-a-virtual-mouse-touchpad-e37b69835a9f

Reason this thing exists

JSketcher is a browser based CAD modeler. I wanted to make it work better on mobile for actually creating models. Not Just viewing. After making this code work in JSKetcher with a few customizations specific to JSketcher I extracted the code and cleaned it up to work more generically. JSketcher project is located here. https://github.com/xibyte/jsketcher