From 31f0b7349ec8200b05583bfb2d966ffee434a88c Mon Sep 17 00:00:00 2001 From: raphael Date: Tue, 7 May 2019 08:36:42 +0200 Subject: [PATCH] Add indicator to show the smallest screen participating --- README.md | 4 ++++ public/js/main.js | 13 ++++++++++-- public/js/whiteboard.js | 11 +++++++--- server.js | 46 ++++++++++++++++++++++++++++++++++++++--- 4 files changed, 66 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index f8e5576..620da15 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,10 @@ Done! * Whiteboards are gone if you restart the Server, so keep that in mind (or save your whiteboard) * You shoud be able to customize the layout without ever toutching the whiteboard.js (take a look at index.html & main.js) +## All run parameters (also docker) +* --accesstoken => take a look at "Security" for a full explanation +* --disablesmallestscreen => can be set to "true" if you don't want show the "smallest screen" indicator (A dotted line) to the users + ## ToDo * Make undo function more reliable on texts * Add more callbacks for errors and things ... diff --git a/public/js/main.js b/public/js/main.js index 3249785..10359fd 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -33,7 +33,11 @@ signaling_socket.on('connect', function () { alert("Access denied! Wrong accessToken!") }); - signaling_socket.emit('joinWhiteboard', { wid: whiteboardId, at: accessToken }); + signaling_socket.on('updateSmallestScreenResolution', function (widthHeight) { + whiteboard.updateSmallestScreenResolution(widthHeight["w"], widthHeight["h"]); + }); + + signaling_socket.emit('joinWhiteboard', { wid: whiteboardId, at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } }); }); $(document).ready(function () { @@ -51,6 +55,11 @@ $(document).ready(function () { whiteboard.loadData(data) }); + $(window).resize(function () { + console.log("CHANGED!"); + signaling_socket.emit('updateScreenResolution', { at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } }); + }) + /*----------------/ Whiteboard actions /----------------*/ @@ -120,7 +129,7 @@ $(document).ready(function () { alert("Please drag the image into the browser."); }); - // save image to png + // save image as png $("#saveAsImageBtn").click(function () { var imgData = whiteboard.getImageDataBase64(); diff --git a/public/js/whiteboard.js b/public/js/whiteboard.js index 50789ac..27bac7a 100644 --- a/public/js/whiteboard.js +++ b/public/js/whiteboard.js @@ -44,7 +44,7 @@ var whiteboard = { var svgRect = null; var svgCirle = null; var latestTouchCoods = null; - //background grid (repeating image) + //background grid (repeating image) and smallest screen indication _this.backgroundGrid = $('
'); // container for background images _this.imgContainer = $('
'); @@ -658,12 +658,17 @@ var whiteboard = { setDrawColor(color) { var _this = this; _this.drawcolor = color; - if (_this.tool == "text" && _this.latestActiveTextBoxId) { _this.sendFunction({ "t": "setTextboxFontColor", "d": [_this.latestActiveTextBoxId, color] }); _this.setTextboxFontColor(_this.latestActiveTextBoxId, color); } - + }, + updateSmallestScreenResolution(width, height) { + this.backgroundGrid.empty(); + if (width < $(window).width() || height < $(window).height()) { + this.backgroundGrid.append('
'); + this.backgroundGrid.append('
smallest screen participating
'); + } }, handleEventsAndData: function (content, isNewData, doneCallback) { var _this = this; diff --git a/server.js b/server.js index 9212d22..624d0ad 100644 --- a/server.js +++ b/server.js @@ -1,7 +1,8 @@ var PORT = 8080; //Set port for the app var accessToken = ""; //Can be set here or as start parameter (node server.js --accesstoken=MYTOKEN) +var disableSmallestScreen = false; //Can be set to true if you dont want to show (node server.js --disablesmallestscreen=true) -fs = require("fs-extra"); +var fs = require("fs-extra"); var express = require('express'); var formidable = require('formidable'); //form upload processing @@ -22,14 +23,24 @@ console.log("Webserver & socketserver running on port:" + PORT); if (process.env.accesstoken) { accessToken = process.env.accesstoken; } +if (process.env.disablesmallestscreen) { + disablesmallestscreen = true; +} var startArgs = getArgs(); if (startArgs["accesstoken"]) { accessToken = startArgs["accesstoken"]; } +if (startArgs["disablesmallestscreen"]) { + disableSmallestScreen = true; +} + if (accessToken !== "") { console.log("AccessToken set to: " + accessToken); } +if (disableSmallestScreen) { + console.log("Disabled showing smallest screen resolution!"); +} app.get('/loadwhiteboard', function (req, res) { var wid = req["query"]["wid"]; @@ -104,16 +115,20 @@ function progressUploadFormData(formData) { }); } +var smallestScreenResolutions = {}; io.on('connection', function (socket) { + var whiteboardId = null; socket.on('disconnect', function () { + delete smallestScreenResolutions[whiteboardId][socket.id]; socket.broadcast.emit('refreshUserBadges', null); //Removes old user Badges + sendSmallestScreenResolution(); }); socket.on('drawToWhiteboard', function (content) { content = escapeAllContentStrings(content); if (accessToken === "" || accessToken == content["at"]) { - socket.broadcast.to(content["wid"]).emit('drawToWhiteboard', content); //Send to all users in the room (not own socket) + socket.broadcast.to(whiteboardId).emit('drawToWhiteboard', content); //Send to all users in the room (not own socket) s_whiteboard.handleEventsAndData(content); //save whiteboardchanges on the server } else { socket.emit('wrongAccessToken', true); @@ -123,11 +138,36 @@ io.on('connection', function (socket) { socket.on('joinWhiteboard', function (content) { content = escapeAllContentStrings(content); if (accessToken === "" || accessToken == content["at"]) { - socket.join(content["wid"]); //Joins room name=wid + whiteboardId = content["wid"]; + socket.join(whiteboardId); //Joins room name=wid + smallestScreenResolutions[whiteboardId] = smallestScreenResolutions[whiteboardId] ? smallestScreenResolutions[whiteboardId] : {}; + smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 }; + sendSmallestScreenResolution(); } else { socket.emit('wrongAccessToken', true); } }); + + socket.on('updateScreenResolution', function (content) { + content = escapeAllContentStrings(content); + if (accessToken === "" || accessToken == content["at"]) { + smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 }; + sendSmallestScreenResolution(); + } + }); + + function sendSmallestScreenResolution() { + if (disableSmallestScreen) { + return; + } + var smallestWidth = 10000; + var smallestHeight = 10000; + for (var i in smallestScreenResolutions[whiteboardId]) { + smallestWidth = smallestWidth > smallestScreenResolutions[whiteboardId][i]["w"] ? smallestScreenResolutions[whiteboardId][i]["w"] : smallestWidth; + smallestHeight = smallestHeight > smallestScreenResolutions[whiteboardId][i]["h"] ? smallestScreenResolutions[whiteboardId][i]["h"] : smallestHeight; + } + io.to(whiteboardId).emit('updateSmallestScreenResolution', { w: smallestWidth, h: smallestHeight }); + } }); //Prevent cross site scripting (xss)