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

add user and whiteboard by get parameters and fix bugs

Browse Source
This commit is contained in:
rofl256 2018-02-08 23:38:41 +01:00
parent d227db5264
commit 577e2969be
3 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/js/main.js
View File

@ -1,6 +1,7 @@
var whiteboardId = "myNewWhiteboard"; var whiteboardId = getQueryVariable("whiteboardid");
var myUsername = "Default"; whiteboardId = whiteboardId || "myNewWhiteboard";
var myUsername = getQueryVariable("username");
myUsername = myUsername || "unkonwn";
var io = signaling_socket = io(); var io = signaling_socket = io();
io.on('connect', function () { io.on('connect', function () {
@ -9,6 +10,10 @@ io.on('connect', function () {
signaling_socket.on('drawToWhiteboard', function (content) { signaling_socket.on('drawToWhiteboard', function (content) {
whiteboard.handleEventsAndData(content, true); whiteboard.handleEventsAndData(content, true);
}); });
signaling_socket.on('refreshUserBadges', function () {
whiteboard.refreshUserBadges();
});
}); });
$(document).ready(function() { $(document).ready(function() {
@ -247,3 +252,15 @@ window.addEventListener("paste", function(e) { //Even do copy & paste from clipb
} }
} }
}); });
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}

7
public/js/whiteboard.js
View File

@ -21,7 +21,7 @@ var whiteboard = {
imgDragActive : false, imgDragActive : false,
settings : { settings : {
whiteboardId : "0", whiteboardId : "0",
username : "defaultuser", username : "unknown",
sendFunction : null, sendFunction : null,
canvasWidth : 3000, canvasWidth : 3000,
canvasHeight : 2000, canvasHeight : 2000,
@ -602,7 +602,7 @@ var whiteboard = {
if(_this.cursorContainer.find("."+content["username"]).length>=1) { if(_this.cursorContainer.find("."+content["username"]).length>=1) {
_this.cursorContainer.find("."+content["username"]).css({"left":data[0]+"px","top":data[1]+"px" }); _this.cursorContainer.find("."+content["username"]).css({"left":data[0]+"px","top":data[1]+"px" });
} else { } else {
_this.cursorContainer.append('<div style="font-size:0.8em; padding-left:2px; padding-right:2px; background:gray; color:white; border-radius:3px; position:absolute; left:'+data[0]+'; top:'+data[1]+';" class="'+content["username"]+'">'+ _this.cursorContainer.append('<div style="font-size:0.8em; padding-left:2px; padding-right:2px; background:gray; color:white; border-radius:3px; position:absolute; left:'+data[0]+'; top:'+data[1]+';" class="userbadge '+content["username"]+'">'+
'<div style="width:4px; height:4px; background:gray; position:absolute; top:-2px; left:-2px; border-radius:50%;"></div>'+ '<div style="width:4px; height:4px; background:gray; position:absolute; top:-2px; left:-2px; border-radius:50%;"></div>'+
content["username"]+'</div>'); content["username"]+'</div>');
} }
@ -623,6 +623,9 @@ var whiteboard = {
userLeftWhiteboard(username) { userLeftWhiteboard(username) {
this.cursorContainer.find("."+username).remove(); this.cursorContainer.find("."+username).remove();
}, },
refreshUserBadges() {
this.cursorContainer.find(".userbadge").remove();
},
getImageDataBase64() { getImageDataBase64() {
_this = this; _this = this;
var width = this.mouseOverlay.width(); var width = this.mouseOverlay.width();

4
server.js
View File

@ -71,6 +71,10 @@ function progressUploadFormData(formData) {
} }
io.on('connection', function(socket){ io.on('connection', function(socket){
socket.on('disconnect', function () {
socket.broadcast.emit('refreshUserBadges', null);
});
socket.on('drawToWhiteboard', function(content) { socket.on('drawToWhiteboard', function(content) {
socket.broadcast.emit('drawToWhiteboard', content); socket.broadcast.emit('drawToWhiteboard', content);
s_whiteboard.handleEventsAndData(content); //save whiteboardchanges on the server s_whiteboard.handleEventsAndData(content); //save whiteboardchanges on the server