2018-02-08 17:45:07 +01:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<head>
|
|
|
|
|
|
<title>Whiteboard</title>
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
|
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
|
|
|
|
|
|
</head>
|
2018-09-08 19:15:23 +02:00
|
|
|
|
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<body>
|
|
|
|
|
|
<!---Whiteboard container -!-->
|
|
|
|
|
|
<div id="whiteboardContainer"></div>
|
2018-09-08 19:15:23 +02:00
|
|
|
|
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<!---Toolbar -!-->
|
|
|
|
|
|
<div id="toolbar" style="position: absolute; top: 10px; left: 10px;">
|
|
|
|
|
|
<div class="btn-group">
|
|
|
|
|
|
<button
|
|
|
|
|
|
id="whiteboardLockBtn"
|
|
|
|
|
|
style="background-color: orange;"
|
|
|
|
|
|
title="View and Write"
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="fa fa-lock"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button id="whiteboardUnlockBtn" title="View Only" type="button">
|
|
|
|
|
|
<i class="fa fa-lock-open"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
2018-02-08 17:45:07 +01:00
|
|
|
|
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<div class="btn-group whiteboard-edit-group">
|
|
|
|
|
|
<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button">
|
|
|
|
|
|
<i class="fa fa-trash"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button
|
|
|
|
|
|
style="position: absolute; left: 0px; top: 0px; width: 46px; display: none;"
|
|
|
|
|
|
id="whiteboardTrashBtnConfirm"
|
|
|
|
|
|
title="Confirm clear..."
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="fa fa-check"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button id="whiteboardUndoBtn" title="Undo your last step" type="button">
|
|
|
|
|
|
<i class="fa fa-undo"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button id="whiteboardRedoBtn" title="Redo your last undo" type="button">
|
|
|
|
|
|
<i class="fa fa-redo"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
2020-05-02 15:07:34 +02:00
|
|
|
|
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<div class="btn-group whiteboard-edit-group">
|
|
|
|
|
|
<button tool="mouse" title="Take the mouse" type="button" class="whiteboard-tool">
|
|
|
|
|
|
<i class="fa fa-mouse-pointer"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button
|
|
|
|
|
|
style="padding-bottom: 11px;"
|
|
|
|
|
|
tool="recSelect"
|
|
|
|
|
|
title="Select an area"
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
class="whiteboard-tool"
|
|
|
|
|
|
>
|
|
|
|
|
|
<img src="./images/dottedRec.png" />
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button
|
|
|
|
|
|
tool="pen"
|
|
|
|
|
|
title="Take the pen"
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
class="whiteboard-tool active"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="fa fa-pencil-alt"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button
|
|
|
|
|
|
style="padding-bottom: 8px; padding-top: 6px;"
|
|
|
|
|
|
tool="line"
|
|
|
|
|
|
title="draw a line"
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
class="whiteboard-tool"
|
|
|
|
|
|
>
|
|
|
|
|
|
╱
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button tool="rect" title="draw a rectangle" type="button" class="whiteboard-tool">
|
|
|
|
|
|
<i class="far fa-square"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button tool="circle" title="draw a circle" type="button" class="whiteboard-tool">
|
|
|
|
|
|
<i class="far fa-circle"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button tool="text" title="write text" type="button" class="whiteboard-tool">
|
|
|
|
|
|
<i class="fas fa-font"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button tool="eraser" title="take the eraser" type="button" class="whiteboard-tool">
|
|
|
|
|
|
<i class="fa fa-eraser"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
2018-02-08 20:04:13 +01:00
|
|
|
|
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<div class="btn-group whiteboard-edit-group">
|
|
|
|
|
|
<button style="width: 190px; cursor: default;">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="activeToolIcon"
|
|
|
|
|
|
style="position: absolute; top: 2px; left: 2px; font-size: 0.6em;"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="fa fa-pencil-alt"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<img
|
|
|
|
|
|
style="
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 11px;
|
|
|
|
|
|
top: 16px;
|
|
|
|
|
|
height: 14px;
|
|
|
|
|
|
width: 130px;
|
|
|
|
|
|
"
|
|
|
|
|
|
src="./images/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
|
|
|
|
|
|
id="whiteboardColorpicker"
|
|
|
|
|
|
style="
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 155px;
|
|
|
|
|
|
top: 10px;
|
|
|
|
|
|
width: 26px;
|
|
|
|
|
|
height: 23px;
|
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
border: 1px solid darkgrey;
|
|
|
|
|
|
"
|
|
|
|
|
|
data-color="#000000"
|
|
|
|
|
|
></div>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
2018-02-08 20:04:13 +01:00
|
|
|
|
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<div class="btn-group whiteboard-edit-group">
|
|
|
|
|
|
<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button">
|
|
|
|
|
|
<i class="fas fa-image"></i>
|
|
|
|
|
|
<i
|
|
|
|
|
|
style="
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 3px;
|
|
|
|
|
|
left: 2px;
|
|
|
|
|
|
color: #000000;
|
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
|
"
|
|
|
|
|
|
class="fas fa-upload"
|
|
|
|
|
|
></i>
|
|
|
|
|
|
</button>
|
2018-02-08 17:45:07 +01:00
|
|
|
|
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<button
|
|
|
|
|
|
style="position: relative;"
|
|
|
|
|
|
id="uploadJsonBtn"
|
|
|
|
|
|
title="Load saved JSON to whiteboard"
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="far fa-file-alt"></i>
|
|
|
|
|
|
<i
|
|
|
|
|
|
style="
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 3px;
|
|
|
|
|
|
left: 2px;
|
|
|
|
|
|
color: #000000;
|
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
|
"
|
|
|
|
|
|
class="fas fa-upload"
|
|
|
|
|
|
></i>
|
|
|
|
|
|
</button>
|
2019-07-01 13:15:11 +02:00
|
|
|
|
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<input style="display: none;" id="myFile" type="file" />
|
|
|
|
|
|
</div>
|
2020-05-02 15:07:34 +02:00
|
|
|
|
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<div class="btn-group">
|
|
|
|
|
|
<button id="saveAsImageBtn" title="Save whiteboard as image" type="button">
|
|
|
|
|
|
<i class="fas fa-image"></i>
|
|
|
|
|
|
<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"
|
|
|
|
|
|
>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<button
|
|
|
|
|
|
style="position: relative;"
|
|
|
|
|
|
id="saveAsJSONBtn"
|
|
|
|
|
|
title="Save whiteboard as JSON"
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="far fa-file-alt"></i>
|
|
|
|
|
|
<i
|
|
|
|
|
|
style="
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 3px;
|
|
|
|
|
|
left: 2px;
|
|
|
|
|
|
color: #000000;
|
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
|
"
|
|
|
|
|
|
class="fas fa-save"
|
|
|
|
|
|
></i>
|
|
|
|
|
|
</button>
|
2018-02-08 23:16:28 +01:00
|
|
|
|
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<button id="shareWhiteboardBtn" title="share whiteboard" type="button">
|
|
|
|
|
|
<i class="fas fa-share-square"></i>
|
|
|
|
|
|
</button>
|
2020-05-10 14:16:12 +02:00
|
|
|
|
|
|
|
|
|
|
<button id="displayWhiteboardInfoBtn" title="Show whiteboard info" type="button">
|
|
|
|
|
|
<i class="fas fa-info-circle"></i>
|
|
|
|
|
|
</button>
|
2020-05-09 15:40:26 +02:00
|
|
|
|
</div>
|
2019-05-13 11:39:33 +02:00
|
|
|
|
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<div class="btn-group minGroup">
|
|
|
|
|
|
<button
|
|
|
|
|
|
style="width: 25px; padding: 11px 11px;"
|
|
|
|
|
|
id="minMaxBtn"
|
|
|
|
|
|
title="hide buttons"
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i
|
|
|
|
|
|
id="minBtn"
|
|
|
|
|
|
style="position: relative; left: -5px;"
|
|
|
|
|
|
class="fas fa-angle-left"
|
|
|
|
|
|
></i>
|
|
|
|
|
|
<i
|
|
|
|
|
|
id="maxBtn"
|
|
|
|
|
|
style="position: relative; left: -5px; display: none;"
|
|
|
|
|
|
class="fas fa-angle-right"
|
|
|
|
|
|
></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2019-03-04 19:50:38 +01:00
|
|
|
|
|
2020-05-10 14:16:12 +02:00
|
|
|
|
<div id="whiteboardInfoContainer">
|
|
|
|
|
|
<p><b>Whiteboard information:</b></p>
|
2020-05-09 15:40:26 +02:00
|
|
|
|
<p># msg. sent to server: <i id="messageSentCount">0</i></p>
|
|
|
|
|
|
<p># msg. received from server: <i id="messageReceivedCount">0</i></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
