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

Add indicator to show the smallest screen participating

Browse Source
This commit is contained in:
raphael
2019-05-07 08:36:42 +02:00
parent b839fd66fa
commit 31f0b7349e
4 changed files with 66 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/js/main.js
View File

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

11
public/js/whiteboard.js
View File

@@ -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;