WebDev/VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix spelling error and format code

Browse Source
This commit is contained in:
cracker 2018-09-08 19:15:23 +02:00
parent 200391c613
commit 3efb36ac19
3 changed files with 653 additions and 648 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
public/index.html
View File

@ -1,11 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Whiteboard</title> <title>Whiteboard</title>
<!--- JS References -!--> <!--- JS References -!-->
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script> <!--- for dragabbles -!--> <script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<!--- for dragabbles -!-->
<script type="text/javascript" src="./js/socketio2.0.4.min.js"></script> <script type="text/javascript" src="./js/socketio2.0.4.min.js"></script>
<script type="text/javascript" src="./js/jqColorPicker.min.js"></script> <script type="text/javascript" src="./js/jqColorPicker.min.js"></script>
@ -18,6 +20,7 @@
<link href="./css/main.css" rel="stylesheet"> <link href="./css/main.css" rel="stylesheet">
</head> </head>
<body style="position: relative; margin: 0px; height: 100vh; width: 100%; overflow: hidden;"> <body style="position: relative; margin: 0px; height: 100vh; width: 100%; overflow: hidden;">
<!---Whiteboard container -!--> <!---Whiteboard container -!-->
<div style="height: 100vh; width: 100%;" id="whiteboardContainer"></div> <div style="height: 100vh; width: 100%;" id="whiteboardContainer"></div>
@ -26,66 +29,68 @@
<div style="position: absolute; top: 10px; left: 10px;"> <div style="position: absolute; top: 10px; left: 10px;">
<div class="btn-group"> <div class="btn-group">
<button id="whiteboardTrashBtn" title="Clears the whiteboard" type="button" class="whiteboardBtn"> <button id="whiteboardTrashBtn" title="Clears the whiteboard" type="button" class="whiteboardBtn">
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</button> </button>
<button id="whiteboardUndoBtn" title="Undo your last step" type="button" class="whiteboardBtn"> <button id="whiteboardUndoBtn" title="Undo your last step" type="button" class="whiteboardBtn">
<i class="fa fa-undo"></i> <i class="fa fa-undo"></i>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button tool="mouse" title="Take the mouse" type="button" class="whiteboardTool"> <button tool="mouse" title="Take the mouse" type="button" class="whiteboardTool">
<i class="fa fa-mouse-pointer"></i> <i class="fa fa-mouse-pointer"></i>
</button> </button>
<button style="padding-bottom: 11px;" tool="recSelect" title="Select an area" type="button" class="whiteboardTool"> <button style="padding-bottom: 11px;" tool="recSelect" title="Select an area" type="button" class="whiteboardTool">
<img src="./img/dottedRec.png"> <img src="./img/dottedRec.png">
</button> </button>
<button tool="pen" title="Take the pen" type="button" class="whiteboardTool active"> <button tool="pen" title="Take the pen" type="button" class="whiteboardTool active">
<i class="fa fa-pencil-alt"></i> <i class="fa fa-pencil-alt"></i>
</button> </button>
<button style="padding-bottom: 8px; padding-top: 7px;" tool="line" title="draw a line" type="button" class="whiteboardTool"> <button style="padding-bottom: 8px; padding-top: 7px;" tool="line" title="draw a line" type="button" class="whiteboardTool">
╱ ╱
</button> </button>
<button tool="rect" title="draw a rectangle" type="button" class="whiteboardTool"> <button tool="rect" title="draw a rectangle" type="button" class="whiteboardTool">
<i class="far fa-square"></i> <i class="far fa-square"></i>
</button> </button>
<button tool="circle" title="draw a circle" type="button" class="whiteboardTool"> <button tool="circle" title="draw a circle" type="button" class="whiteboardTool">
<i class="far fa-circle"></i> <i class="far fa-circle"></i>
</button> </button>
<button tool="eraser" title="take the eraser" type="button" class="whiteboardTool"> <button tool="eraser" title="take the eraser" type="button" class="whiteboardTool">
<i class="fa fa-eraser" aria-hidden="true"></i> <i class="fa fa-eraser" aria-hidden="true"></i>
</button> </button>
</div> </div>
<div style="width: 190px; height: 44px; border: 1px solid green;" class="btn-group"> <div style="width: 190px; height: 44px; border: 1px solid green;" class="btn-group">
<img style="position: absolute; left: 11px; top: 16px; height:14px; width:130px;" src="./img/slider-background.svg"> <img style="position: absolute; left: 11px; top: 16px; height:14px; width:130px;" src="./img/slider-background.svg">
<input title="Thickness" id="whiteboardThicknessSlider" style="position: absolute; left:9px; width: 130px; top: 15px;" type="range" min="1" max="50" value="3"> <input title="Thickness" id="whiteboardThicknessSlider" style="position: absolute; left:9px; width: 130px; top: 15px;" type="range"
<div title="Colorpicker" style="position: absolute; left: 155px; top: 10px; width: 26px; height: 23px; border-radius: 3px; overflow: hidden; border: 1px solid darkgrey;"> min="1" max="50" value="3">
<div id="whiteboardColorpicker" value="#000000" style="width: 40px; height: 35px; border: 0px; padding: 0px; position: relative; top: 0px; left: -5px;"></div> <div title="Colorpicker" style="position: absolute; left: 155px; top: 10px; width: 26px; height: 23px; border-radius: 3px; overflow: hidden; border: 1px solid darkgrey;">
</div> <div id="whiteboardColorpicker" value="#000000" style="width: 40px; height: 35px; border: 0px; padding: 0px; position: relative; top: 0px; left: -5px;"></div>
</div>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button id="saveAsImageBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn"> <button id="saveAsImageBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn">
<i class="fas fa-image"></i> <i class="fas fa-image"></i>
<i style="position: absolute; top: 3px; left: 2px; color: #000000; background: grey; font-size: 0.5em; " class="fas fa-save"></i> <i style="position: absolute; top: 3px; left: 2px; color: #000000; background: grey; font-size: 0.5em; " class="fas fa-save"></i>
</button> </button>
<button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button" class="whiteboardBtn"> <button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button" class="whiteboardBtn">
<i class="far fa-file-alt"></i> <i class="far fa-file-alt"></i>
<i style="position: absolute; top: 3px; left: 2px; color: #000000; background: grey; font-size: 0.5em; " class="fas fa-save"></i> <i style="position: absolute; top: 3px; left: 2px; color: #000000; background: grey; font-size: 0.5em; " class="fas fa-save"></i>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button" class="whiteboardBtn"> <button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button" class="whiteboardBtn">
<i class="fas fa-image"></i> <i class="fas fa-image"></i>
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; " class="fas fa-upload"></i> <i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; " class="fas fa-upload"></i>
</button> </button>
<button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button" class="whiteboardBtn"> <button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button" class="whiteboardBtn">
<i class="far fa-file-alt"></i> <i class="far fa-file-alt"></i>
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; " class="fas fa-upload"></i> <i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; " class="fas fa-upload"></i>
</button> </button>
<input style="display:none;" id="myFile" type="file"/> <input style="display:none;" id="myFile" type="file" />
</div> </div>
</body> </body>
</html> </html>

319
public/js/main.js
View File

@ -1,23 +1,23 @@
var whiteboardId = getQueryVariable("whiteboardid"); var whiteboardId = getQueryVariable("whiteboardid");
whiteboardId = whiteboardId || "myNewWhiteboard"; whiteboardId = whiteboardId || "myNewWhiteboard";
var myUsername = getQueryVariable("username"); var myUsername = getQueryVariable("username");
myUsername = myUsername || "unkonwn"+(Math.random()+"").substring(2,6); myUsername = myUsername || "unknown" + (Math.random() + "").substring(2, 6);
var url = document.URL.substr(0,document.URL.lastIndexOf('/')); var url = document.URL.substr(0, document.URL.lastIndexOf('/'));
var signaling_socket = null; var signaling_socket = null;
var urlSplit = url.split("/"); var urlSplit = url.split("/");
var subdir = ""; var subdir = "";
for(var i=3;i<urlSplit.length;i++) { for (var i = 3; i < urlSplit.length; i++) {
subdir = subdir+'/'+urlSplit[i]; subdir = subdir + '/' + urlSplit[i];
} }
if(subdir !="") { if (subdir != "") {
signaling_socket = io("",{"path":subdir+"/socket.io"}); //Connect even if we are in a subdir behind a reverse proxy signaling_socket = io("", { "path": subdir + "/socket.io" }); //Connect even if we are in a subdir behind a reverse proxy
} else { } else {
signaling_socket = io(); signaling_socket = io();
} }
signaling_socket.on('connect', function () { signaling_socket.on('connect', function () {
console.log("Websocket connected!"); console.log("Websocket connected!");
signaling_socket.on('drawToWhiteboard', function (content) { signaling_socket.on('drawToWhiteboard', function (content) {
whiteboard.handleEventsAndData(content, true); whiteboard.handleEventsAndData(content, true);
@ -30,16 +30,16 @@ signaling_socket.on('connect', function () {
signaling_socket.emit('joinWhiteboard', whiteboardId); signaling_socket.emit('joinWhiteboard', whiteboardId);
}); });
$(document).ready(function() { $(document).ready(function () {
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
whiteboardId : whiteboardId, whiteboardId: whiteboardId,
username : myUsername, username: myUsername,
sendFunction : function(content) { sendFunction: function (content) {
signaling_socket.emit('drawToWhiteboard', content); signaling_socket.emit('drawToWhiteboard', content);
} }
}); });
$.get( subdir+"/loadwhiteboard", { wid: whiteboardId } ).done(function( data ) { $.get(subdir + "/loadwhiteboard", { wid: whiteboardId }).done(function (data) {
whiteboard.loadData(data) whiteboard.loadData(data)
}); });
@ -47,134 +47,133 @@ $(document).ready(function() {
Whiteboard actions Whiteboard actions
/----------------*/ /----------------*/
$("#whiteboardTrashBtn").click(function() { $("#whiteboardTrashBtn").click(function () {
whiteboard.clearWhiteboard(); whiteboard.clearWhiteboard();
}); });
$("#whiteboardUndoBtn").click(function() { $("#whiteboardUndoBtn").click(function () {
whiteboard.undoWhiteboardClick(); whiteboard.undoWhiteboardClick();
}); });
$(".whiteboardTool").click(function() { $(".whiteboardTool").click(function () {
$(".whiteboardTool").removeClass("active"); $(".whiteboardTool").removeClass("active");
$(this).addClass("active"); $(this).addClass("active");
whiteboard.setTool($(this).attr("tool")); whiteboard.setTool($(this).attr("tool"));
}); });
$("#addImgToCanvasBtn").click(function() { $("#addImgToCanvasBtn").click(function () {
alert("Just drag and drop images in!"); alert("Just drag and drop images in!");
}); });
$("#saveAsImageBtn").click(function() { $("#saveAsImageBtn").click(function () {
var imgData = whiteboard.getImageDataBase64(); var imgData = whiteboard.getImageDataBase64();
var a = document.createElement('a'); var a = document.createElement('a');
a.href = imgData; a.href = imgData;
a.download = 'whiteboard.png'; a.download = 'whiteboard.png';
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
}); });
$("#saveAsJSONBtn").click(function() { $("#saveAsJSONBtn").click(function () {
var imgData = whiteboard.getImageDataJson(); var imgData = whiteboard.getImageDataJson();
var a = window.document.createElement('a'); var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([imgData], {type: 'text/json'})); a.href = window.URL.createObjectURL(new Blob([imgData], { type: 'text/json' }));
a.download = 'whiteboard.json'; a.download = 'whiteboard.json';
// Append anchor to body. // Append anchor to body.
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
// Remove anchor from body // Remove anchor from body
document.body.removeChild(a); document.body.removeChild(a);
}); });
$("#uploadJsonBtn").click(function() { $("#uploadJsonBtn").click(function () {
$("#myFile").click(); $("#myFile").click();
}); });
$("#myFile").on("change", function() { $("#myFile").on("change", function () {
var file = document.getElementById("myFile").files[0]; var file = document.getElementById("myFile").files[0];
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function (e) { reader.onload = function (e) {
try { try {
var j = JSON.parse(e.target.result); var j = JSON.parse(e.target.result);
whiteboard.loadJsonData(j); whiteboard.loadJsonData(j);
} catch(e) { } catch (e) {
alert("File was not a valid JSON!"); alert("File was not a valid JSON!");
} }
}; };
reader.readAsText(file); reader.readAsText(file);
$(this).val(""); $(this).val("");
}); });
var dragCounter = 0; var dragCounter = 0;
$('#whiteboardContainer').on("dragenter", function(e) { $('#whiteboardContainer').on("dragenter", function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
dragCounter++; dragCounter++;
whiteboard.dropIndicator.show(); whiteboard.dropIndicator.show();
});
$('#whiteboardContainer').on("dragleave", function(e) {
e.preventDefault();
e.stopPropagation();
dragCounter--;
if (dragCounter === 0) {
whiteboard.dropIndicator.hide();
}
}); });
$("#whiteboardThicknessSlider").on("change", function() { $('#whiteboardContainer').on("dragleave", function (e) {
e.preventDefault();
e.stopPropagation();
dragCounter--;
if (dragCounter === 0) {
whiteboard.dropIndicator.hide();
}
});
$("#whiteboardThicknessSlider").on("change", function () {
whiteboard.thickness = $(this).val(); whiteboard.thickness = $(this).val();
}); });
$('#whiteboardContainer').on('drop', function(e) { //Handle drag & drop $('#whiteboardContainer').on('drop', function (e) { //Handle drag & drop
if(e.originalEvent.dataTransfer){ if (e.originalEvent.dataTransfer) {
if(e.originalEvent.dataTransfer.files.length) { //File from harddisc if (e.originalEvent.dataTransfer.files.length) { //File from harddisc
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
var filename = e.originalEvent.dataTransfer.files[0]["name"]; var filename = e.originalEvent.dataTransfer.files[0]["name"];
if(isImageFileName(filename)) { if (isImageFileName(filename)) {
var blob = e.originalEvent.dataTransfer.files[0]; var blob = e.originalEvent.dataTransfer.files[0];
var reader = new window.FileReader(); var reader = new window.FileReader();
reader.readAsDataURL(blob); reader.readAsDataURL(blob);
reader.onloadend = function() { reader.onloadend = function () {
console.log("Uploading image!"); base64data = reader.result;
base64data = reader.result; uploadImgAndAddToWhiteboard(base64data);
uploadImgAndAddToWhiteboard(base64data); }
} } else {
} else { console.error("File must be an image!");
console.error("File must be an image!"); }
}
} else { //File from other browser } else { //File from other browser
var fileUrl = e.originalEvent.dataTransfer.getData('URL'); var fileUrl = e.originalEvent.dataTransfer.getData('URL');
var imageUrl = e.originalEvent.dataTransfer.getData('text/html'); var imageUrl = e.originalEvent.dataTransfer.getData('text/html');
var rex = /src="?([^"\s]+)"?\s*/; var rex = /src="?([^"\s]+)"?\s*/;
var url = rex.exec(imageUrl); var url = rex.exec(imageUrl);
if(url && url.length > 1) { if (url && url.length > 1) {
url = url[1]; url = url[1];
} else { } else {
url = ""; url = "";
} }
isValidImageUrl(fileUrl, function(isImage) { isValidImageUrl(fileUrl, function (isImage) {
if(isImage && isImageFileName(url)) { if (isImage && isImageFileName(url)) {
whiteboard.addImgToCanvasByUrl(fileUrl); whiteboard.addImgToCanvasByUrl(fileUrl);
} else { } else {
isValidImageUrl(url, function(isImage) { isValidImageUrl(url, function (isImage) {
if(isImage) { if (isImage) {
if(isImageFileName(url)) { if (isImageFileName(url)) {
whiteboard.addImgToCanvasByUrl(url); whiteboard.addImgToCanvasByUrl(url);
} else { } else {
var blob = items[i].getAsFile(); var blob = items[i].getAsFile();
uploadImgAndAddToWhiteboard(url); uploadImgAndAddToWhiteboard(url);
} }
} else { } else {
console.error("Can only upload imagedata!"); console.error("Can only upload imagedata!");
} }
}); });
} }
}); });
} }
} }
dragCounter = 0; dragCounter = 0;
@ -182,46 +181,46 @@ $(document).ready(function() {
}); });
$('#whiteboardColorpicker').colorPicker({ $('#whiteboardColorpicker').colorPicker({
renderCallback : function(elm) { renderCallback: function (elm) {
whiteboard.drawcolor = elm.val(); whiteboard.drawcolor = elm.val();
} }
}); });
}); });
//Prevent site from changing tab on drag&drop //Prevent site from changing tab on drag&drop
window.addEventListener("dragover",function(e){ window.addEventListener("dragover", function (e) {
e = e || event; e = e || event;
e.preventDefault(); e.preventDefault();
},false); }, false);
window.addEventListener("drop",function(e){ window.addEventListener("drop", function (e) {
e = e || event; e = e || event;
e.preventDefault(); e.preventDefault();
},false); }, false);
function uploadImgAndAddToWhiteboard(base64data) { function uploadImgAndAddToWhiteboard(base64data) {
var date = (+new Date()); var date = (+new Date());
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: document.URL.substr(0,document.URL.lastIndexOf('/'))+'/upload', url: document.URL.substr(0, document.URL.lastIndexOf('/')) + '/upload',
data: { data: {
'imagedata': base64data, 'imagedata': base64data,
'whiteboardId' : whiteboardId, 'whiteboardId': whiteboardId,
'date' : date 'date': date
}, },
success: function(msg){ success: function (msg) {
var filename = whiteboardId+"_"+date+".png"; var filename = whiteboardId + "_" + date + ".png";
whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/uploads/"+filename); //Add image to canvas whiteboard.addImgToCanvasByUrl(document.URL.substr(0, document.URL.lastIndexOf('/')) + "/uploads/" + filename); //Add image to canvas
console.log("Image uploaded!"); console.log("Image uploaded!");
}, },
error : function(err) { error: function (err) {
console.error("Failed to upload frame: "+JSON.stringify(err)); console.error("Failed to upload frame: " + JSON.stringify(err));
} }
}); });
} }
function isImageFileName(filename) { function isImageFileName(filename) {
var ending = filename.split(".")[filename.split(".").length-1]; var ending = filename.split(".")[filename.split(".").length - 1];
if(ending.toLowerCase()=="png" || ending.toLowerCase()=="jpg" || ending.toLowerCase()=="jpeg" || ending.toLowerCase()=="gif" || ending.toLowerCase()=="tiff") { if (ending.toLowerCase() == "png" || ending.toLowerCase() == "jpg" || ending.toLowerCase() == "jpeg" || ending.toLowerCase() == "gif" || ending.toLowerCase() == "tiff") {
return true; return true;
} }
return false; return false;
@ -244,37 +243,37 @@ function isValidImageUrl(url, callback) { //Check if given url it is a vaild img
img.src = url; img.src = url;
} }
window.addEventListener("paste", function(e) { //Even do copy & paste from clipboard window.addEventListener("paste", function (e) { //Even do copy & paste from clipboard
if (e.clipboardData) { if (e.clipboardData) {
var items = e.clipboardData.items; var items = e.clipboardData.items;
if (items) { if (items) {
// Loop through all items, looking for any kind of image // Loop through all items, looking for any kind of image
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") !== -1) { if (items[i].type.indexOf("image") !== -1) {
// We need to represent the image as a file, // We need to represent the image as a file,
var blob = items[i].getAsFile(); var blob = items[i].getAsFile();
var reader = new window.FileReader(); var reader = new window.FileReader();
reader.readAsDataURL(blob); reader.readAsDataURL(blob);
reader.onloadend = function() { reader.onloadend = function () {
console.log("Uploading image!"); console.log("Uploading image!");
base64data = reader.result; base64data = reader.result;
uploadImgAndAddToWhiteboard(base64data); uploadImgAndAddToWhiteboard(base64data);
} }
} }
} }
} }
} }
}); });
function getQueryVariable(variable) { function getQueryVariable(variable) {
var query = window.location.search.substring(1); var query = window.location.search.substring(1);
var vars = query.split("&"); var vars = query.split("&");
for (var i=0;i<vars.length;i++) { for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("="); var pair = vars[i].split("=");
if (pair[0] == variable) { if (pair[0] == variable) {
return pair[1]; return pair[1];
}
} }
} return false;
return false;
} }

855
public/js/whiteboard.js
View File

File diff suppressed because it is too large Load Diff