Add indicator to show the smallest screen participating
This commit is contained in:
parent
b839fd66fa
commit
31f0b7349e
|
@ -52,6 +52,10 @@ Done!
|
||||||
* Whiteboards are gone if you restart the Server, so keep that in mind (or save your whiteboard)
|
* 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)
|
* 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
|
## ToDo
|
||||||
* Make undo function more reliable on texts
|
* Make undo function more reliable on texts
|
||||||
* Add more callbacks for errors and things ...
|
* Add more callbacks for errors and things ...
|
||||||
|
|
|
@ -33,7 +33,11 @@ signaling_socket.on('connect', function () {
|
||||||
alert("Access denied! Wrong accessToken!")
|
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 () {
|
$(document).ready(function () {
|
||||||
|
@ -51,6 +55,11 @@ $(document).ready(function () {
|
||||||
whiteboard.loadData(data)
|
whiteboard.loadData(data)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$(window).resize(function () {
|
||||||
|
console.log("CHANGED!");
|
||||||
|
signaling_socket.emit('updateScreenResolution', { at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
|
||||||
|
})
|
||||||
|
|
||||||
/*----------------/
|
/*----------------/
|
||||||
Whiteboard actions
|
Whiteboard actions
|
||||||
/----------------*/
|
/----------------*/
|
||||||
|
@ -120,7 +129,7 @@ $(document).ready(function () {
|
||||||
alert("Please drag the image into the browser.");
|
alert("Please drag the image into the browser.");
|
||||||
});
|
});
|
||||||
|
|
||||||
// save image to png
|
// save image as png
|
||||||
$("#saveAsImageBtn").click(function () {
|
$("#saveAsImageBtn").click(function () {
|
||||||
var imgData = whiteboard.getImageDataBase64();
|
var imgData = whiteboard.getImageDataBase64();
|
||||||
|
|
||||||
|
|
|
@ -44,7 +44,7 @@ var whiteboard = {
|
||||||
var svgRect = null;
|
var svgRect = null;
|
||||||
var svgCirle = null;
|
var svgCirle = null;
|
||||||
var latestTouchCoods = 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>');
|
_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
|
// container for background images
|
||||||
_this.imgContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
|
_this.imgContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
|
||||||
|
@ -658,12 +658,17 @@ var whiteboard = {
|
||||||
setDrawColor(color) {
|
setDrawColor(color) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
_this.drawcolor = color;
|
_this.drawcolor = color;
|
||||||
|
|
||||||
if (_this.tool == "text" && _this.latestActiveTextBoxId) {
|
if (_this.tool == "text" && _this.latestActiveTextBoxId) {
|
||||||
_this.sendFunction({ "t": "setTextboxFontColor", "d": [_this.latestActiveTextBoxId, color] });
|
_this.sendFunction({ "t": "setTextboxFontColor", "d": [_this.latestActiveTextBoxId, color] });
|
||||||
_this.setTextboxFontColor(_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) {
|
handleEventsAndData: function (content, isNewData, doneCallback) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
46
server.js
46
server.js
|
@ -1,7 +1,8 @@
|
||||||
var PORT = 8080; //Set port for the app
|
var PORT = 8080; //Set port for the app
|
||||||
var accessToken = ""; //Can be set here or as start parameter (node server.js --accesstoken=MYTOKEN)
|
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 express = require('express');
|
||||||
var formidable = require('formidable'); //form upload processing
|
var formidable = require('formidable'); //form upload processing
|
||||||
|
|
||||||
|
@ -22,14 +23,24 @@ console.log("Webserver & socketserver running on port:" + PORT);
|
||||||
if (process.env.accesstoken) {
|
if (process.env.accesstoken) {
|
||||||
accessToken = process.env.accesstoken;
|
accessToken = process.env.accesstoken;
|
||||||
}
|
}
|
||||||
|
if (process.env.disablesmallestscreen) {
|
||||||
|
disablesmallestscreen = true;
|
||||||
|
}
|
||||||
|
|
||||||
var startArgs = getArgs();
|
var startArgs = getArgs();
|
||||||
if (startArgs["accesstoken"]) {
|
if (startArgs["accesstoken"]) {
|
||||||
accessToken = startArgs["accesstoken"];
|
accessToken = startArgs["accesstoken"];
|
||||||
}
|
}
|
||||||
|
if (startArgs["disablesmallestscreen"]) {
|
||||||
|
disableSmallestScreen = true;
|
||||||
|
}
|
||||||
|
|
||||||
if (accessToken !== "") {
|
if (accessToken !== "") {
|
||||||
console.log("AccessToken set to: " + accessToken);
|
console.log("AccessToken set to: " + accessToken);
|
||||||
}
|
}
|
||||||
|
if (disableSmallestScreen) {
|
||||||
|
console.log("Disabled showing smallest screen resolution!");
|
||||||
|
}
|
||||||
|
|
||||||
app.get('/loadwhiteboard', function (req, res) {
|
app.get('/loadwhiteboard', function (req, res) {
|
||||||
var wid = req["query"]["wid"];
|
var wid = req["query"]["wid"];
|
||||||
|
@ -104,16 +115,20 @@ function progressUploadFormData(formData) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var smallestScreenResolutions = {};
|
||||||
io.on('connection', function (socket) {
|
io.on('connection', function (socket) {
|
||||||
|
var whiteboardId = null;
|
||||||
|
|
||||||
socket.on('disconnect', function () {
|
socket.on('disconnect', function () {
|
||||||
|
delete smallestScreenResolutions[whiteboardId][socket.id];
|
||||||
socket.broadcast.emit('refreshUserBadges', null); //Removes old user Badges
|
socket.broadcast.emit('refreshUserBadges', null); //Removes old user Badges
|
||||||
|
sendSmallestScreenResolution();
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on('drawToWhiteboard', function (content) {
|
socket.on('drawToWhiteboard', function (content) {
|
||||||
content = escapeAllContentStrings(content);
|
content = escapeAllContentStrings(content);
|
||||||
if (accessToken === "" || accessToken == content["at"]) {
|
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
|
s_whiteboard.handleEventsAndData(content); //save whiteboardchanges on the server
|
||||||
} else {
|
} else {
|
||||||
socket.emit('wrongAccessToken', true);
|
socket.emit('wrongAccessToken', true);
|
||||||
|
@ -123,11 +138,36 @@ io.on('connection', function (socket) {
|
||||||
socket.on('joinWhiteboard', function (content) {
|
socket.on('joinWhiteboard', function (content) {
|
||||||
content = escapeAllContentStrings(content);
|
content = escapeAllContentStrings(content);
|
||||||
if (accessToken === "" || accessToken == content["at"]) {
|
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 {
|
} else {
|
||||||
socket.emit('wrongAccessToken', true);
|
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)
|
//Prevent cross site scripting (xss)
|
||||||
|
|
Loading…
Reference in New Issue