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

Merge branch 'webdav'

This commit is contained in:
raphael 2019-08-19 10:29:04 +02:00
parent 4de3a1ad43 7342c22257
commit ed41ca9edd
8 changed files with 4433 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
README.md
View File

@ -12,6 +12,7 @@ This is a lightweight NodeJS collaborative Whiteboard/Sketchboard witch can easi
* Save Whiteboard to Image and JSON
* Draw angle lines by pressing "shift" while drawing (with line tool)
* Draw square by pressing "shift" while drawing (with rectangle tool)
* Indicator that shows the smallest screen participating
* Working on PC, Tablet & Mobile
## Install the App
@ -25,7 +26,7 @@ You can run this app with and without docker
### With Docker
1. `docker run -d -p 8080:8080 rofl256/whiteboard`
2. Surf to http://YOURIP:8080
2. Surf to http://YOURIP:8080s
## URL Parameters
Call your site with GET parameters to change the WhiteboardID or the Username
@ -38,27 +39,45 @@ Call your site with GET parameters to change the WhiteboardID or the Username
## Security - AccessToken (Optional)
To prevent clients who might know or guess the base URL from abusing the server to upload files and stuff..., you can set an accesstoken at server start.
<b>Without docker:</b> `node server.js --accesstoken="mySecToken"`
<b>Server (Without docker):</b> `node server.js --accesstoken="mySecToken"`
<b>With docker:</b> `docker run -d -e accesstoken="mySecToken" -p 8080:8080 rofl256/whiteboard`
<b>Server (With docker):</b> `docker run -d -e accesstoken="mySecToken" -p 8080:8080 rofl256/whiteboard`
Then set the same token on the client side as well.
Then set the same token on the client side as well:
<b>Client (With and without docker):</b> `http://YOURIP:8080?accesstoken=mySecToken&whiteboardid=MYID&username=MYNAME`
Done!
## WebDAV (Optional)
This function allows your users to save the whiteboard directly to a webdav server as image without downloading it.
<b>Server (Without docker):</b> `node server.js --webdav=true`
<b>Server (With docker):</b> `docker run -d -e webdav=true -p 8080:8080 rofl256/whiteboard`
Then set the same parameter on the client side as well:
<b>Client (With and without docker):</b> `http://YOURIP:8080?webdav=true&whiteboardid=MYID&username=MYNAME`
Refresh the site and You will notice an extra save button in the top panel. Set your WebDav Parameters, and you are good to go!
Note: For the most owncloud/nextcloud setups you have to set the Server URL to: https://YourDomain.tl/remote.php/webdav/
Done!
## Things you may want to know
* 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 server run parameters (also docker)
## All server start parameters (also docker)
* accesstoken => take a look at "Security - AccessToken" for a full explanation
* disablesmallestscreen => set this to "true" if you don't want show the "smallest screen" indicator (A dotted gray line) to the users
* webdav => Enable the function to save to a webdav-server (Must also be enabled on the client; Take a look at the webdav section)
## ToDo
* Make undo function more reliable on texts
* Add more callbacks for errors and things ...
## Nginx Reverse Proxy configuration
Add this to your server part:

4172
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -1,5 +1,5 @@
{
"name": "Whiteboard",
"name": "whiteboard",
"version": "1.0.0",
"description": "Collaborative Whiteboard / Sketchboard",
"main": "server.js",
@ -23,7 +23,8 @@
"formidable": "1.*",
"fs-extra": "7.*",
"jsdom": "^14.0.0",
"socket.io": "2.*"
"socket.io": "2.*",
"webdav": "^2.8.0"
},
"author": "Cracker0dks",
"license": "MIT"

8
public/css/main.css
View File

@ -74,4 +74,12 @@ button {
.textBox.active>.removeIcon, .textBox.active>.moveIcon {
display: block;
}
.modalBtn {
padding: 5px;
border-radius: 5px;
border: 0px;
min-width: 50px;
cursor: pointer;
}

7
public/index.html
View File

@ -99,6 +99,13 @@
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
class="fas fa-save"></i>
</button>
<button style="position: relative; display: none;" id="uploadWebDavBtn" title="Save whiteboard to webdav"
type="button" class="whiteboardBtn">
<i class="fas fa-globe"></i>
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
class="fas fa-save"></i>
</button>
</div>
<div class="btn-group">

142
public/js/main.js
View File

@ -31,7 +31,7 @@ signaling_socket.on('connect', function () {
});
signaling_socket.on('wrongAccessToken', function () {
if(!accessDenied) {
if (!accessDenied) {
accessDenied = true;
showBasicAlert("Access denied! Wrong accessToken!")
}
@ -45,6 +45,10 @@ signaling_socket.on('connect', function () {
});
$(document).ready(function () {
if (getQueryVariable("webdav") == "true") {
$("#uploadWebDavBtn").show();
}
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
whiteboardId: whiteboardId,
username: myUsername,
@ -164,6 +168,80 @@ $(document).ready(function () {
}, 0);
});
$("#uploadWebDavBtn").click(function () {
if ($(".webdavUploadBtn").length > 0) {
return;
}
var webdavserver = localStorage.getItem('webdavserver') || ""
var webdavpath = localStorage.getItem('webdavpath') || "/"
var webdavusername = localStorage.getItem('webdavusername') || ""
var webdavpassword =localStorage.getItem('webdavpassword') || ""
var webDavHtml = $('<div>' +
'<table>' +
'<tr>' +
'<td>Server URL:</td>' +
'<td><input class="webdavserver" type="text" value="'+webdavserver+'" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
'<td></td>' +
'</tr>' +
'<tr>' +
'<td>Path:</td>' +
'<td><input class="webdavpath" type="text" placeholder="folder" value="'+webdavpath+'"></td>' +
'<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
'</tr>' +
'<tr>' +
'<td>Username:</td>' +
'<td><input class="webdavusername" type="text" value="'+webdavusername+'" placeholder="username"></td>' +
'<td style="font-size: 0.7em;"></td>' +
'</tr>' +
'<tr>' +
'<td>Password:</td>' +
'<td><input class="webdavpassword" type="password" value="'+webdavpassword+'" placeholder="password"></td>' +
'<td style="font-size: 0.7em;"></td>' +
'</tr>' +
'<tr>' +
'<td style="font-size: 0.7em;" colspan="3">Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server!</td>' +
'</tr>' +
'<tr>' +
'<td></td>' +
'<td colspan="2"><span class="loadingWebdavText" style="display:none;">Saving to webdav, please wait...</span><button class="modalBtn webdavUploadBtn"><i class="fas fa-upload"></i> Start Upload</button></td>' +
'</tr>' +
'</table>' +
'</div>');
webDavHtml.find(".webdavUploadBtn").click(function () {
var webdavserver = webDavHtml.find(".webdavserver").val();
localStorage.setItem('webdavserver', webdavserver);
var webdavpath = webDavHtml.find(".webdavpath").val();
localStorage.setItem('webdavpath', webdavpath);
var webdavusername = webDavHtml.find(".webdavusername").val();
localStorage.setItem('webdavusername', webdavusername);
var webdavpassword = webDavHtml.find(".webdavpassword").val();
localStorage.setItem('webdavpassword', webdavpassword);
var base64data = whiteboard.getImageDataBase64();
var webdavaccess = {
webdavserver: webdavserver,
webdavpath: webdavpath,
webdavusername: webdavusername,
webdavpassword: webdavpassword
}
webDavHtml.find(".loadingWebdavText").show();
webDavHtml.find(".webdavUploadBtn").hide();
saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
if (err) {
webDavHtml.find(".loadingWebdavText").hide();
webDavHtml.find(".webdavUploadBtn").show();
} else {
webDavHtml.parents(".basicalert").remove();
}
});
})
showBasicAlert(webDavHtml, {
header: "Save to Webdav",
okBtnText: "cancel",
headercolor: "#0082c9"
})
});
// upload json containing steps
$("#uploadJsonBtn").click(function () {
$("#myFile").click();
@ -257,7 +335,7 @@ $(document).ready(function () {
showBasicAlert("File must be an image!");
}
} else { //File from other browser
var fileUrl = e.originalEvent.dataTransfer.getData('URL');
var imageUrl = e.originalEvent.dataTransfer.getData('text/html');
var rex = /src="?([^"\s]+)"?\s*/;
@ -330,6 +408,36 @@ function uploadImgAndAddToWhiteboard(base64data) {
});
}
function saveWhiteboardToWebdav(base64data, webdavaccess, callback) {
var date = (+new Date());
$.ajax({
type: 'POST',
url: document.URL.substr(0, document.URL.lastIndexOf('/')) + '/upload',
data: {
'imagedata': base64data,
'whiteboardId': whiteboardId,
'date': date,
'at': accessToken,
'webdavaccess': JSON.stringify(webdavaccess)
},
success: function (msg) {
showBasicAlert("Whiteboard was saved to Webdav!", {
headercolor: "#5c9e5c"
});
console.log("Image uploaded for webdav!");
callback();
},
error: function (err) {
if (err.status == 403) {
showBasicAlert("Could not connect to Webdav folder! Please check the credentials and paths and try again!");
} else {
showBasicAlert("Unknown Webdav error! ", err);
}
callback(err);
}
});
}
// verify if filename refers to an image
function isImageFileName(filename) {
var extension = filename.split(".")[filename.split(".").length - 1];
@ -357,6 +465,9 @@ function isValidImageUrl(url, callback) {
// handle pasting from clipboard
window.addEventListener("paste", function (e) {
if($(".basicalert").length>0) {
return;
}
if (e.clipboardData) {
var items = e.clipboardData.items;
var imgItemFound = false;
@ -379,22 +490,33 @@ window.addEventListener("paste", function (e) {
}
}
if (!imgItemFound && whiteboard.tool!="text") {
if (!imgItemFound && whiteboard.tool != "text") {
showBasicAlert("Please Drag&Drop the image into the Whiteboard. (Browsers don't allow copy+past from the filesystem directly)");
}
}
});
function showBasicAlert(text) {
var alertHtml = $('<div style="position:absolute; top:0px; left:0px; width:100%; top:70px; font-family: monospace;">' +
'<div style="width: 30%; margin: auto; background: #aaaaaa; border-radius: 5px; font-size: 1.2em; border: 1px solid gray;">'+
'<div style="border-bottom: 1px solid #676767; background: #d25d5d; padding-left: 5px; font-size: 0.8em;">INFO MESSAGE</div>'+
'<div style="padding: 10px;">' + text + '</div>'+
'<div style="height: 20px; padding: 10px;"><button style="float: right; padding: 5px; border-radius: 5px; border: 0px; min-width: 50px; cursor: pointer;">Ok</button></div>'+
function showBasicAlert(html, newOptions) {
var options = {
header: "INFO MESSAGE",
okBtnText: "Ok",
headercolor: "#d25d5d"
}
if (newOptions) {
for (var i in newOptions) {
options[i] = newOptions[i];
}
}
var alertHtml = $('<div class="basicalert" style="position:absolute; top:0px; left:0px; width:100%; top:70px; font-family: monospace;">' +
'<div style="width: 30%; margin: auto; background: #aaaaaa; border-radius: 5px; font-size: 1.2em; border: 1px solid gray;">' +
'<div style="border-bottom: 1px solid #676767; background: ' + options["headercolor"] + '; padding-left: 5px; font-size: 0.8em;">' + options["header"] + '</div>' +
'<div style="padding: 10px;" class="htmlcontent"></div>' +
'<div style="height: 20px; padding: 10px;"><button class="modalBtn okbtn" style="float: right;">' + options["okBtnText"] + '</button></div>' +
'</div>' +
'</div>');
alertHtml.find(".htmlcontent").append(html);
$("body").append(alertHtml);
alertHtml.find("button").click(function () {
alertHtml.find(".okbtn").click(function () {
alertHtml.remove();
})
}

17
public/js/whiteboard.js
View File

@ -298,12 +298,9 @@ var whiteboard = {
imgDiv.find(".addToCanvasBtn").click(function () {
_this.imgDragActive = false;
_this.refreshCursorAppearance();
var widthT = imgDiv.width();
var heightT = imgDiv.height();
var p = imgDiv.position();
var leftT = Math.round(p.left * 100) / 100;
var topT = Math.round(p.top * 100) / 100;
//xf, yf, xt, yt, width, height
_this.drawId++;
_this.sendFunction({ "t": _this.tool, "d": [left, top, leftT, topT, width, height] });
_this.dragCanvasRectContent(left, top, leftT, topT, width, height);
@ -774,7 +771,6 @@ var whiteboard = {
var left = Math.round(p.left * 100) / 100;
var top = Math.round(p.top * 100) / 100;
top += 25; //Fix top position
console.log(text, fontSize, fontColor, left, top)
ctx.font = fontSize + " monospace";
ctx.fillStyle = fontColor;
ctx.fillText(text, left, top);
@ -801,7 +797,7 @@ var whiteboard = {
}
});
},
loadDataInSteps(content, isNewData, callAfterEveryStep, doneCallback) {
loadDataInSteps(content, isNewData, callAfterEveryStep) {
var _this = this;
function lData(index) {
for (var i = index; i < content.length; i++) {
@ -819,12 +815,15 @@ var whiteboard = {
}
lData(0);
},
loadJsonData(content) {
loadJsonData(content, doneCallback) {
var _this = this;
_this.loadDataInSteps(content, false, function (stepData, index) {
_this.sendFunction(stepData);
if (index >= content.length - 1) { //Done with all data
_this.drawId++;
if(doneCallback) {
doneCallback();
}
}
});
},
@ -842,12 +841,6 @@ var whiteboard = {
_this.drawBuffer.push(content);
}
},
isRecRecCollision: function (rx1, ry1, rw1, rh1, rx2, ry2, rw2, rh2) {
return rx1 < rx2 + rw2 && rx1 + rw1 > rx2 && ry1 < ry2 + rh2 && rh1 + ry1 > ry2;
},
isRecPointCollision: function (rx, ry, rw, rh, px, py) {
return rx <= px && px <= rx + rw && ry <= py && py <= ry + rh;
},
refreshCursorAppearance() { //Set cursor depending on current active tool
var _this = this;
if (_this.tool === "pen" || _this.tool === "eraser") {

89
server.js
View File

@ -1,6 +1,7 @@
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)
var webdav = false; //Can be set to true if you want to allow webdav save (node server.js --webdav=true)
var fs = require("fs-extra");
var express = require('express');
@ -11,6 +12,8 @@ const { JSDOM } = require('jsdom');
const window = (new JSDOM('')).window;
const DOMPurify = createDOMPurify(window);
const { createClient } = require("webdav");
var s_whiteboard = require("./s_whiteboard.js");
var app = express();
@ -26,6 +29,9 @@ if (process.env.accesstoken) {
if (process.env.disablesmallestscreen) {
disablesmallestscreen = true;
}
if (process.env.webdav) {
webdav = true;
}
var startArgs = getArgs();
if (startArgs["accesstoken"]) {
@ -34,6 +40,9 @@ if (startArgs["accesstoken"]) {
if (startArgs["disablesmallestscreen"]) {
disableSmallestScreen = true;
}
if (startArgs["webdav"]) {
webdav = true;
}
if (accessToken !== "") {
console.log("AccessToken set to: " + accessToken);
@ -41,6 +50,9 @@ if (accessToken !== "") {
if (disableSmallestScreen) {
console.log("Disabled showing smallest screen resolution!");
}
if (webdav) {
console.log("Webdav save is enabled!");
}
app.get('/loadwhiteboard', function (req, res) {
var wid = req["query"]["wid"];
@ -76,8 +88,18 @@ app.post('/upload', function (req, res) { //File upload
form.on('end', function () {
if (accessToken === "" || accessToken == formData["fields"]["at"]) {
progressUploadFormData(formData);
res.send("done");
progressUploadFormData(formData, function (err) {
if (err) {
if (err == "403") {
res.status(403);
} else {
res.status(500);
}
res.end();
} else {
res.send("done");
}
});
} else {
res.status(401); //Unauthorized
res.end();
@ -87,7 +109,7 @@ app.post('/upload', function (req, res) { //File upload
form.parse(req);
});
function progressUploadFormData(formData) {
function progressUploadFormData(formData, callback) {
console.log("Progress new Form Data");
var fields = escapeAllContentStrings(formData.fields);
var files = formData.files;
@ -96,7 +118,12 @@ function progressUploadFormData(formData) {
var name = fields["name"] || "";
var date = fields["date"] || (+new Date());
var filename = whiteboardId + "_" + date + ".png";
var webdavaccess = fields["webdavaccess"] || false;
try {
webdavaccess = JSON.parse(webdavaccess);
} catch (e) {
webdavaccess = false;
}
fs.ensureDir("./public/uploads", function (err) {
if (err) {
console.log("Could not create upload folder!", err);
@ -109,14 +136,61 @@ function progressUploadFormData(formData) {
fs.writeFile('./public/uploads/' + filename, imagedata, 'base64', function (err) {
if (err) {
console.log("error", err);
callback(err);
} else {
if (webdavaccess) { //Save image to webdav
if (webdav) {
saveImageToWebdav('./public/uploads/' + filename, filename, webdavaccess, function (err) {
if (err) {
console.log("error", err);
callback(err);
} else {
callback();
}
})
} else {
callback("Webdav is not enabled on the server!");
}
} else {
callback();
}
}
});
} else {
callback("no imagedata!");
console.log("No image Data found for this upload!", name);
}
});
}
function saveImageToWebdav(imagepath, filename, webdavaccess, callback) {
if (webdavaccess) {
var webdavserver = webdavaccess["webdavserver"] || "";
var webdavpath = webdavaccess["webdavpath"] || "/";
var webdavusername = webdavaccess["webdavusername"] || "";
var webdavpassword = webdavaccess["webdavpassword"] || "";
const client = createClient(
webdavserver,
{
username: webdavusername,
password: webdavpassword
}
)
client.getDirectoryContents(webdavpath).then((items) => {
var cloudpath = webdavpath+ '' + filename;
console.log("webdav saving to:", cloudpath);
fs.createReadStream(imagepath).pipe(client.createWriteStream(cloudpath));
callback();
}).catch((error) => {
callback("403");
console.log("Could not connect to webdav!")
});
} else {
callback("Error: no access data!")
}
}
var smallestScreenResolutions = {};
io.on('connection', function (socket) {
var whiteboardId = null;
@ -211,4 +285,9 @@ function getArgs() {
}
})
return args
}
}
process.on('unhandledRejection', error => {
// Will print "unhandledRejection err is not defined"
console.log('unhandledRejection', error.message);
})