Troubleshooting Microsoft Surface
This guide will explain how to troubleshoot your Microsoft Surface / Surface Pro if you're not able to write characters on Skritter's canvas.
Chrome
- Copy-paste this into the Chrome address bar:
chrome://flags/#touch-events
- In the drop-down menu that displays Disabled change it to Enabled.
- Restart Chrome
If Touch Events API Option Isn't available
- Install Tampermonkey at: https://chrome.google.com/webstore/detail/tampermonkey/
- Set up this script:
- // ==UserScript==
- // @name Fix stylus input on Surface
- // @namespace http://tampermonkey.net/
- // @version 0.1
- // @description Also allows you to draw the character with your finger
- // @author Me
- // @match https://skritter.com/study
- // @grant none
- // ==/UserScript==
- (function() {
- "use strict";
- var touchHandled;
- /**
- * Simulate a mouse event based on a corresponding touch event
- * @param {Object} event A touch event
- * @param {String} simulatedType The corresponding mouse event
- */
- function simulateMouseEvent(event, simulatedType) {
- // Ignore multi-touch events
- if (event.touches.length > 1) {
- return;
- }
- event.preventDefault();
- var touch = event.changedTouches[0],
- simulatedEvent = document.createEvent("MouseEvents");
- // Initialize the simulated mouse event using the touch event's coordinates
- simulatedEvent.initMouseEvent(
- simulatedType, // type
- true, // bubbles
- true, // cancelable
- window, // view
- 1, // detail
- touch.screenX, // screenX
- touch.screenY, // screenY
- touch.clientX, // clientX
- touch.clientY, // clientY
- false, // ctrlKey
- false, // altKey
- false, // shiftKey
- false, // metaKey
- 0, // button
- null // relatedTarget
- );
- // Dispatch the simulated event to the target element
- event.target.dispatchEvent(simulatedEvent);
- }
- var _touchStart = function(event) {
- var self = this;
- // Ignore the event if another widget is already being handled
- if (touchHandled) {
- return;
- }
- // Set the flag to prevent other widgets from inheriting the touch event
- touchHandled = true;
- // Track movement to determine if interaction was a click
- self._touchMoved = false;
- // Simulate the mouseover event
- simulateMouseEvent(event, "mouseover");
- // Simulate the mousemove event
- simulateMouseEvent(event, "mousemove");
- // Simulate the mousedown event
- simulateMouseEvent(event, "mousedown");
- };
- var _touchMove = function(event) {
- // Ignore event if not handled
- if (!touchHandled) {
- return;
- }
- // Interaction was not a click
- this._touchMoved = true;
- // Simulate the mousemove event
- simulateMouseEvent(event, "mousemove");
- };
- var _touchEnd = function(event) {
- // Ignore event if not handled
- if (!touchHandled) {
- return;
- }
- // Simulate the mouseup event
- simulateMouseEvent(event, "mouseup");
- // Simulate the mouseout event
- simulateMouseEvent(event, "mouseout");
- // If the touch interaction did not move, it should trigger a click
- if (!this._touchMoved) {
- // Simulate the click event
- simulateMouseEvent(event, "click");
- }
- // Unset the flag to allow other widgets to inherit the touch event
- touchHandled = false;
- };
- function addEvent() {
- var elem = document.getElementById("input-canvas");
- if (!elem) return setTimeout(addEvent, 250);
- elem.addEventListener("touchstart", _touchStart);
- elem.addEventListener("touchmove", _touchMove);
- elem.addEventListener("touchend", _touchEnd);
- }
- addEvent();
- })();
3. Refresh the study page.
After setting up this script in Tapermonkey, you should be able to study using your Microsoft Surface.