add some btns and functions
This commit is contained in:
rofl256
parent
9b58e572ae
commit
2eb098d627
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,48 @@
|
|||
.btn-group button {
|
||||
background-color: #4CAF50; /* Green background */
|
||||
border: 1px solid green; /* Green border */
|
||||
color: black; /* White text */
|
||||
padding: 11px 14px; /* Some padding */
|
||||
cursor: pointer; /* Pointer/hand icon */
|
||||
float: left; /* Float the buttons side by side */
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.btn-group button:not(:last-child) {
|
||||
border-right: none; /* Prevent double borders */
|
||||
}
|
||||
|
||||
/* Clear floats (clearfix hack) */
|
||||
.btn-group:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* Add a background color on hover */
|
||||
.btn-group button:hover {
|
||||
background-color: #3e8e41;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
background-color: #4CAF50;
|
||||
margin-left: 5px;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.whiteboardTool.active {
|
||||
background: #2d8a41;
|
||||
}
|
||||
|
||||
#whiteboardThicknessSlider {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity .15s ease-in-out;
|
||||
transition: opacity .15s ease-in-out;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 222 B |
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="220px" height="14px" viewBox="0 0 220 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>BE12FC0E-FD5E-426C-9BBF-550FC50194C3</title>
|
||||
<defs></defs>
|
||||
<g id="Main" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Popupovi---razmaci" transform="translate(-678.000000, -342.000000)" fill="#D9D9D9">
|
||||
<g id="Group-5-Copy-4" transform="translate(618.000000, 241.000000)">
|
||||
<g id="Group-4" transform="translate(19.000000, 74.000000)">
|
||||
<g id="Group-16" transform="translate(38.000000, 27.000000)">
|
||||
<path d="M3.99962831,5.97241081 L216.002602,0.190511533 L216.002602,0.190511533 C219.763198,0.0879498169 222.894906,3.05337273 222.997468,6.81396899 C222.999156,6.87585608 223,6.9377633 223,6.9996734 L223,6.9996734 L223,6.9996734 C223,10.761668 219.950301,13.8113671 216.188306,13.8113671 C216.126396,13.8113671 216.064489,13.8105231 216.002602,13.8088353 L3.99962831,8.02693599 L3.99962831,8.02693599 C3.44319453,8.01176053 3,7.55631408 3,6.9996734 L3,6.9996734 L3,6.9996734 C3,6.44303273 3.44319453,5.98758628 3.99962831,5.97241081 Z" id="slider-background"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -5,20 +5,80 @@
|
|||
|
||||
<!--- JS References -!-->
|
||||
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="./js/jquery-ui.min.js"></script> <!--- for dragabbles -!-->
|
||||
<script type="text/javascript" src="./js/socketio2.0.4.min.js"></script>
|
||||
<script type="text/javascript" src="./js/jqColorPicker.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="./js/whiteboard.js"></script>
|
||||
<script type="text/javascript" src="./js/main.js"></script>
|
||||
|
||||
<!--- CSS References -!-->
|
||||
<link rel="stylesheet" href="./css/jquery-ui.min.css">
|
||||
<link href="./css/fontawesome-all.min.css" rel="stylesheet">
|
||||
<link href="./css/main.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body style="position: relative; margin: 0px; height: 100vh; width: 100%; overflow: hidden;">
|
||||
<!---Whiteboard container -!-->
|
||||
<div style="position:absolute; left: 0px; top: 0px; height: 100vh; width: 100%;" id="whiteboardContainer"></div>
|
||||
<div style="height: 100vh; width: 100%;" id="whiteboardContainer"></div>
|
||||
|
||||
<!---Toolbar -!-->
|
||||
|
||||
<div style="position: absolute; top: 10px; left: 10px;">
|
||||
<div class="btn-group">
|
||||
<button id="whiteboardTrashBtn" title="Clears the whiteboard" type="button" class="whiteboardBtn">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
<button id="whiteboardUndoBtn" title="Undo your last step" type="button" class="whiteboardBtn">
|
||||
<i class="fa fa-undo"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button tool="mouse" title="Take the mouse" type="button" class="whiteboardTool">
|
||||
<i class="fa fa-mouse-pointer"></i>
|
||||
</button>
|
||||
<button style="padding-bottom: 11px;" tool="recSelect" title="Select an area" type="button" class="whiteboardTool">
|
||||
<img src="./img/dottedRec.png">
|
||||
</button>
|
||||
<button tool="pen" title="Take the pen" type="button" class="whiteboardTool active">
|
||||
<i class="fa fa-pencil-alt"></i>
|
||||
</button>
|
||||
<button style="padding-bottom: 8px; padding-top: 7px;" tool="line" title="draw a line" type="button" class="whiteboardTool">
|
||||
╱
|
||||
</button>
|
||||
<button tool="rect" title="draw a rectangle" type="button" class="whiteboardTool">
|
||||
<i class="far fa-square"></i>
|
||||
</button>
|
||||
<button tool="circle" title="draw a circle" type="button" class="whiteboardTool">
|
||||
<i class="far fa-circle"></i>
|
||||
</button>
|
||||
<button tool="eraser" title="take the eraser" type="button" class="whiteboardTool">
|
||||
<i class="fa fa-eraser" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button id="addImgToCanvasBtn" title="Add an image" type="button" class="whiteboardBtn">
|
||||
<i class="fas fa-image"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div style="width: 190px; height: 44px; border: 1px solid green;" class="btn-group">
|
||||
<img style="position: absolute; left: 11px; top: 16px; height:14px; width:130px;" src="./img/slider-background.svg">
|
||||
<input title="Thickness" id="whiteboardThicknessSlider" style="position: absolute; left:9px; width: 130px; top: 15px;" type="range" min="1" max="50" value="3">
|
||||
<div title="Colorpicker" style="position: absolute; left: 155px; top: 10px; width: 26px; height: 23px; border-radius: 3px; overflow: hidden; border: 1px solid darkgrey;">
|
||||
<div id="whiteboardColorpicker" value="#000000" style="width: 40px; height: 35px; border: 0px; padding: 0px; position: relative; top: 0px; left: -5px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button id="saveAsJSONBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn">
|
||||
<i class="fas fa-image"></i>
|
||||
<i style="position: absolute; top: 6px; left: 9px; color: #000000; background: grey; font-size: 0.8em; " class="fas fa-save"></i>
|
||||
</button>
|
||||
<button style="position: relative;" id="saveAsJsonBtn" title="Save whiteboard as JSON" type="button" class="whiteboardBtn">
|
||||
<i class="far fa-file-alt"></i>
|
||||
<i style="position: absolute; top: 5px; left: 7px; color: #000000; background: grey; font-size: 0.8em; " class="fas fa-save"></i>
|
||||
</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,6 @@
|
|||
var whiteboardId = "myNewWhiteboard";
|
||||
var myUsername = "Default";
|
||||
|
||||
var io = signaling_socket = io();
|
||||
|
||||
io.on('connect', function () {
|
||||
|
|
@ -9,10 +12,9 @@ io.on('connect', function () {
|
|||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
var whiteboardId = "myNewWhiteboard";
|
||||
whiteboard.loadWhiteboard("#whiteboardContainer", {
|
||||
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
|
||||
whiteboardId : whiteboardId,
|
||||
username : "Username",
|
||||
username : myUsername,
|
||||
sendFunction : function(content) {
|
||||
io.emit('drawToWhiteboard', content);
|
||||
}
|
||||
|
|
@ -21,4 +23,223 @@ $(document).ready(function() {
|
|||
$.get( "/loadwhiteboard", { wid: whiteboardId } ).done(function( data ) {
|
||||
whiteboard.loadData(data)
|
||||
});
|
||||
|
||||
/*----------------/
|
||||
Whiteboard actions
|
||||
/----------------*/
|
||||
|
||||
$("#whiteboardTrashBtn").click(function() {
|
||||
whiteboard.clearWhiteboard();
|
||||
});
|
||||
|
||||
$("#whiteboardUndoBtn").click(function() {
|
||||
whiteboard.undoWhiteboardClick();
|
||||
});
|
||||
|
||||
$(".whiteboardTool").click(function() {
|
||||
$(".whiteboardTool").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
whiteboard.setTool($(this).attr("tool"));
|
||||
});
|
||||
|
||||
$("#addImgToCanvasBtn").click(function() {
|
||||
alert("Just drag and drop images in!");
|
||||
});
|
||||
|
||||
$("#saveAsImageBtn").click(function() {
|
||||
alert("yoyo");
|
||||
});
|
||||
|
||||
$("#saveAsJSONBtn").click(function() {
|
||||
alert("yoyo");
|
||||
});
|
||||
|
||||
var dragCounter = 0;
|
||||
$('#whiteboardContainer').on("dragenter", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounter++;
|
||||
whiteboard.dropIndicator.show();
|
||||
});
|
||||
|
||||
$('#whiteboardContainer').on("dragleave", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounter--;
|
||||
if (dragCounter === 0) {
|
||||
whiteboard.dropIndicator.hide();
|
||||
}
|
||||
});
|
||||
|
||||
$("#whiteboardThicknessSlider").on("change", function() {
|
||||
whiteboard.thickness = $(this).val();
|
||||
});
|
||||
|
||||
$('#whiteboardContainer').on('drop', function(e) { //Handle drag & drop
|
||||
if(e.originalEvent.dataTransfer){
|
||||
if(e.originalEvent.dataTransfer.files.length) { //File from harddisc
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var filename = e.originalEvent.dataTransfer.files[0]["name"];
|
||||
if(isImageFileName(filename)) {
|
||||
var form = $('<form action="#" enctype="multipart/form-data" method="post"></form>');
|
||||
var formData = new FormData(form[0]);
|
||||
formData.append("file", e.originalEvent.dataTransfer.files[0]);
|
||||
formData.append("userId", ownSocketId);
|
||||
formData.append("uploadType", "singleFileUpload");
|
||||
formData.append("room", roomImIn["roomName"]);
|
||||
sendFormData(formData, function(msg) {
|
||||
//success callback
|
||||
whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename);
|
||||
writeToChat("Success", "Upload success!");
|
||||
}, function(err) {
|
||||
writeToChat("Error", err);
|
||||
}, function(progress) {
|
||||
writeToChat("Uploading", progress+'%');
|
||||
//Upload progress
|
||||
}, function(progress) {
|
||||
//Download progress
|
||||
});
|
||||
} else {
|
||||
writeToChat("Error", "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*/;
|
||||
var url = rex.exec(imageUrl);
|
||||
if(url && url.length > 1) {
|
||||
url = url[1];
|
||||
} else {
|
||||
url = "";
|
||||
}
|
||||
|
||||
isValidImageUrl(fileUrl, function(isImage) {
|
||||
if(isImage && isImageFileName(url)) {
|
||||
whiteboard.addImgToCanvasByUrl(fileUrl);
|
||||
} else {
|
||||
isValidImageUrl(url, function(isImage) {
|
||||
if(isImage) {
|
||||
if(isImageFileName(url)) {
|
||||
whiteboard.addImgToCanvasByUrl(url);
|
||||
} else {
|
||||
var date = (+new Date());
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: document.URL.substr(0,document.URL.lastIndexOf('/'))+'/upload',
|
||||
data: {
|
||||
'imagedata': url,
|
||||
'room' : roomImIn["roomName"],
|
||||
'name' : "whiteboard",
|
||||
'date' : date,
|
||||
'userId' : ownSocketId,
|
||||
'uploadType' : "singleFileUpload"
|
||||
},
|
||||
success: function(msg){
|
||||
var filename = username+"_whiteboard_"+date+".png";
|
||||
whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename);
|
||||
writeToChat("Server", "Image uploaded");
|
||||
|
||||
},
|
||||
error : function(err) {
|
||||
writeToChat("Error", "Failed to upload frame: "+JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
writeToChat("Error", "Can only upload imagedata!");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
dragCounter = 0;
|
||||
whiteboard.dropIndicator.hide();
|
||||
});
|
||||
|
||||
$('#whiteboardColorpicker').colorPicker({
|
||||
renderCallback : function(elm) {
|
||||
whiteboard.drawcolor = elm.val();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function isImageFileName(filename) {
|
||||
var ending = filename.split(".")[filename.split(".").length-1];
|
||||
if(ending.toLowerCase()=="png" || ending.toLowerCase()=="jpg" || ending.toLowerCase()=="jpeg" || ending.toLowerCase()=="gif" || ending.toLowerCase()=="tiff") {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isValidImageUrl(url, callback) { //Check if given url it is a vaild img url
|
||||
var img = new Image();
|
||||
var timer = null;
|
||||
img.onerror = img.onabort = function () {
|
||||
clearTimeout(timer);
|
||||
callback(false);
|
||||
};
|
||||
img.onload = function () {
|
||||
clearTimeout(timer);
|
||||
callback(true);
|
||||
};
|
||||
timer = setTimeout(function () {
|
||||
callback(false);
|
||||
}, 2000);
|
||||
img.src = url;
|
||||
}
|
||||
|
||||
//Prevent site from changing tab on drag&drop
|
||||
window.addEventListener("dragover",function(e){
|
||||
e = e || event;
|
||||
e.preventDefault();
|
||||
},false);
|
||||
window.addEventListener("drop",function(e){
|
||||
e = e || event;
|
||||
e.preventDefault();
|
||||
},false);
|
||||
|
||||
window.addEventListener("paste", function(e) { //Even do copy & paste from clipboard
|
||||
if (e.clipboardData) {
|
||||
var items = e.clipboardData.items;
|
||||
if (items) {
|
||||
// Loop through all items, looking for any kind of image
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf("image") !== -1) {
|
||||
// We need to represent the image as a file,
|
||||
var blob = items[i].getAsFile();
|
||||
|
||||
var reader = new window.FileReader();
|
||||
reader.readAsDataURL(blob);
|
||||
reader.onloadend = function() {
|
||||
console.log("Uploading image!");
|
||||
base64data = reader.result;
|
||||
var date = (+new Date());
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: document.URL.substr(0,document.URL.lastIndexOf('/'))+'/upload',
|
||||
data: {
|
||||
'imagedata': base64data,
|
||||
'room' : roomImIn["roomName"],
|
||||
'name' : "whiteboard",
|
||||
'date' : date,
|
||||
'userId' : ownSocketId,
|
||||
'uploadType' : "singleFileUpload"
|
||||
},
|
||||
success: function(msg){
|
||||
var filename = username+"_whiteboard_"+date+".png";
|
||||
whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename);
|
||||
console.log("Image uploaded!");
|
||||
},
|
||||
error : function(err) {
|
||||
console.error("Failed to upload frame: "+JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -49,7 +49,7 @@ var whiteboard = {
|
|||
|
||||
_this.cursorContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
|
||||
|
||||
_this.dropIndicator = $('<div style="position:absolute; height: 100%; width: 100%; border: 7px dashed gray; text-align: center; top: 0px; left: 0px; color: gray; font-size: 23em; display: none;"><i class="fa fa-plus-square-o" aria-hidden="true"></i></div>')
|
||||
_this.dropIndicator = $('<div style="position:absolute; height: 100%; width: 100%; border: 7px dashed gray; text-align: center; top: 0px; left: 0px; color: gray; font-size: 23em; display: none;"><i class="far fa-plus-square" aria-hidden="true"></i></div>')
|
||||
|
||||
_this.mouseOverlay = $('<div style="cursor:none; position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
|
||||
|
||||
|
|
@ -473,7 +473,7 @@ var whiteboard = {
|
|||
'<button draw="0" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Add to background</button> '+
|
||||
'<button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>'+
|
||||
'</div>'+
|
||||
'<i style="position:absolute; bottom: -4px; right: 2px; font-size: 2em; color: gray; transform: rotate(-45deg);" class="fa fa-sort-desc" aria-hidden="true"></i>'+
|
||||
'<i style="position:absolute; bottom: -4px; right: 2px; font-size: 2em; color: gray; transform: rotate(-45deg);" class="fas fa-sort-down" aria-hidden="true"></i>'+
|
||||
'</div>');
|
||||
imgDiv.find(".xCanvasBtn").click(function() {
|
||||
_this.imgDragActive = false;
|
||||
|
|
@ -510,9 +510,9 @@ var whiteboard = {
|
|||
_this.drawId++;
|
||||
imgDiv.remove();
|
||||
});
|
||||
_this.mouseOverlay.append(imgDiv);
|
||||
imgDiv.draggable();
|
||||
imgDiv.resizable();
|
||||
_this.mouseOverlay.append(imgDiv);
|
||||
},
|
||||
drawImgToBackground(url,width,height,left,top) {
|
||||
this.imgContainer.append('<img crossorigin="anonymous" style="width:'+width+'px; height:'+height+'px; position:absolute; top:'+top+'px; left:'+left+'px;" src="'+url+'">')
|
||||
|
|
@ -528,7 +528,7 @@ var whiteboard = {
|
|||
}
|
||||
img.src = url;
|
||||
},
|
||||
undoWhiteboard : function(username) {
|
||||
undoWhiteboard : function(username) { //Not call this directly because you will get out of sync whit others...
|
||||
var _this = this;
|
||||
if(!username) {
|
||||
username = _this.settings.username;
|
||||
|
|
|
|||
Loading…
Reference in New Issue