var whiteboardId = getQueryVariable("whiteboardid"); whiteboardId = whiteboardId || "myNewWhiteboard"; var myUsername = getQueryVariable("username"); var accessToken = getQueryVariable("accesstoken"); myUsername = myUsername || "unknown" + (Math.random() + "").substring(2, 6); accessToken = accessToken || ""; var url = document.URL.substr(0, document.URL.lastIndexOf('/')); var signaling_socket = null; var urlSplit = url.split("/"); var subdir = ""; for (var i = 3; i < urlSplit.length; i++) { subdir = subdir + '/' + urlSplit[i]; } if (subdir != "") { signaling_socket = io("", { "path": subdir + "/socket.io" }); //Connect even if we are in a subdir behind a reverse proxy } else { signaling_socket = io(); } signaling_socket.on('connect', function () { console.log("Websocket connected!"); signaling_socket.on('drawToWhiteboard', function (content) { whiteboard.handleEventsAndData(content, true); }); signaling_socket.on('refreshUserBadges', function () { whiteboard.refreshUserBadges(); }); signaling_socket.on('wrongAccessToken', function () { alert("Access denied! Wrong accessToken!") }); signaling_socket.emit('joinWhiteboard', { wid : whiteboardId, at : accessToken }); }); $(document).ready(function () { whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard whiteboardId: whiteboardId, username: myUsername, sendFunction: function (content) { content["at"] = accessToken; signaling_socket.emit('drawToWhiteboard', content); } }); // request whiteboard from server $.get(subdir + "/loadwhiteboard", { wid: whiteboardId, at : accessToken }).done(function (data) { whiteboard.loadData(data) }); /*----------------/ Whiteboard actions /----------------*/ //Handle key actions $(document).on("keydown", function (e) { if (e.which == 17) { whiteboard.pressedKeys["strg"] = true; } else if (e.which == 90) { //z key if (whiteboard.pressedKeys["strg"] && !whiteboard.pressedKeys["z"]) { whiteboard.undoWhiteboardClick(); } whiteboard.pressedKeys["z"] = true; } else if (e.which == 16) { whiteboard.pressedKeys["shift"] = true; //Used for straight lines... } else if (e.which == 27) { //Esc whiteboard.escKeyAction(); } else if (e.which == 46) { //Remove / Entf whiteboard.entfKeyAction(); } //console.log(e.which); }); $(document).on("keyup", function (e) { if (e.which == 17) { whiteboard.pressedKeys["strg"] = false; } else if (e.which == 90) { whiteboard.pressedKeys["z"] = false; } else if (e.which == 16) { whiteboard.pressedKeys["shift"] = false; } }); // whiteboard clear button $("#whiteboardTrashBtn").click(function () { $("#whiteboardTrashBtnConfirm").show().focus(); }); $("#whiteboardTrashBtnConfirm").focusout(function() { $(this).hide(); }); $("#whiteboardTrashBtnConfirm").click(function () { $(this).hide(); whiteboard.clearWhiteboard(); }); // undo button $("#whiteboardUndoBtn").click(function () { whiteboard.undoWhiteboardClick(); }); // switch tool $(".whiteboardTool").click(function () { $(".whiteboardTool").removeClass("active"); $(this).addClass("active"); var activeTool = $(this).attr("tool"); whiteboard.setTool(activeTool); if(activeTool == "mouse" || activeTool == "recSelect") { $(".activeToolIcon").empty(); } else { $(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon } }); // upload image button $("#addImgToCanvasBtn").click(function () { alert("Please drag the image into the browser."); }); // save image to png $("#saveAsImageBtn").click(function () { var imgData = whiteboard.getImageDataBase64(); var a = document.createElement('a'); a.href = imgData; a.download = 'whiteboard.png'; document.body.appendChild(a); a.click(); document.body.removeChild(a); }); // save image to json containing steps $("#saveAsJSONBtn").click(function () { var imgData = whiteboard.getImageDataJson(); var a = window.document.createElement('a'); a.href = window.URL.createObjectURL(new Blob([imgData], { type: 'text/json' })); a.download = 'whiteboard.json'; // Append anchor to body. document.body.appendChild(a); a.click(); // Remove anchor from body document.body.removeChild(a); }); // upload json containing steps $("#uploadJsonBtn").click(function () { $("#myFile").click(); }); $("#shareWhiteboardBtn").click(function () { var url = window.location.href; var s = url.indexOf("&username=")!==-1 ? "&username=" : "username="; //Remove username from url var urlSlpit = url.split(s); var urlStart = urlSlpit[0]; if(urlSlpit.length>1) { var endSplit = urlSlpit[1].split("&"); endSplit = endSplit.splice(1, 1); urlStart += "&"+endSplit.join("&"); } $("