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

  1. Copy-paste this into the Chrome address bar: chrome://flags/#touch-events
  2. In the drop-down menu that displays Disabled change it to Enabled.
  3. Restart Chrome


If Touch Events API Option Isn't available

  1. Install Tampermonkey at: https://chrome.google.com/webstore/detail/tampermonkey/
  2. 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.

Still need help? Contact Us Contact Us