Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mmiscool/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.
https://github.com/mmiscool/js-virtual-touchpad
desktop dom-events dom-manipulation events javascript mobile mouse
Last synced: 28 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/mmiscool/js-virtual-touchpad
- Owner: mmiscool
- License: mit
- Created: 2023-03-02T07:46:06.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-09-01T21:17:21.000Z (over 1 year ago)
- Last Synced: 2024-10-15T09:29:13.640Z (2 months ago)
- Topics: desktop, dom-events, dom-manipulation, events, javascript, mobile, mouse
- Language: JavaScript
- Homepage: https://maker.cloud/jsketcher/mouse.html
- Size: 16.6 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```
```
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