Add indicator to show the smallest screen participating

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 ...

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();
 

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 = $('<div style="position: absolute; left:0px; top:0; opacity: 0.2; background-image:url(\'' + _this.settings["backgroundGridUrl"] + '\'); height: 100%; width: 100%;"></div>');
 		// container for background images
 		_this.imgContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
@@ -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('<div style="position:absolute; left:0px; top:0px; border-right:3px dotted black; border-bottom:3px dotted black; width:' + width + 'px; height:' + height + 'px;"></div>');
+			this.backgroundGrid.append('<div style="position:absolute; left:' + (width + 5) + 'px; top:0px;">smallest screen participating</div>');
+		}
 	},
 	handleEventsAndData: function (content, isNewData, doneCallback) {
 		var _this = this;

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)