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)