forge-viewer-mobile-touch.js

var socket = io('http://mydummy.com');;

$(document).ready(function () {

    canvas = document.getElementById("canDrag");
     canvas.addEventListener("touchstart", onTouchStart);   
});



//when touch start on mobile
function onTouchStart(evt) {
    

    var bRect = canvas.getBoundingClientRect();

    iniTouchPt = {x:(evt.changedTouches[0].clientX - bRect.left)*(canvas.width/bRect.width),
                  y:(evt.changedTouches[0].clientY - bRect.top)*(canvas.height/bRect.height)
                 }; 


    window.addEventListener("touchmove", onTouchMove, false);           
    canvas.removeEventListener("touchstart", onTouchStart, false);
    window.addEventListener("touchend", onTouchEnd, false);
    
    //code below prevents the mouse down from having an effect on the main browser window:
    if (evt.preventDefault) {
        evt.preventDefault();
    } //standard
    else if (evt.returnValue) {
        evt.returnValue = false;
    } //older IE
    
    return false;
}

//for touch end on mobile
function onTouchEnd(evt) {
    canvas.addEventListener("touchstart", onTouchStart); 
    window.removeEventListener("touchend", onTouchEnd, false);
    window.removeEventListener("touchmove", onTouchMove, false);  

}

//for touch move on mobile
function onTouchMove(evt) { 
  
    //getting mouse position correctly 
    var bRect = canvas.getBoundingClientRect();
    var mouseX = (evt.changedTouches[0].clientX - bRect.left)*(canvas.width/bRect.width);
    var mouseY = (evt.changedTouches[0].clientY - bRect.top)*(canvas.height/bRect.height);  
                     
    var IoTJson = {TouchData:{x:mouseX - iniTouchPt.x ,y:mouseY - iniTouchPt.y }};
                     
    socket.emit('au_Touchdata', JSON.stringify(IoTJson));

}