2018-02-08 17:45:07 +01:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<title>Whiteboard</title>
|
|
|
|
|
|
|
|
|
|
|
|
<!--- JS References -!-->
|
|
|
|
|
|
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
|
2018-02-08 20:04:13 +01:00
|
|
|
|
<script type="text/javascript" src="./js/jquery-ui.min.js"></script> <!--- for dragabbles -!-->
|
2018-02-08 17:45:07 +01:00
|
|
|
|
<script type="text/javascript" src="./js/socketio2.0.4.min.js"></script>
|
2018-02-08 20:04:13 +01:00
|
|
|
|
<script type="text/javascript" src="./js/jqColorPicker.min.js"></script>
|
2018-02-08 17:45:07 +01:00
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="./js/whiteboard.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="./js/main.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!--- CSS References -!-->
|
2018-02-08 20:04:13 +01:00
|
|
|
|
<link rel="stylesheet" href="./css/jquery-ui.min.css">
|
2018-02-08 17:45:07 +01:00
|
|
|
|
<link href="./css/fontawesome-all.min.css" rel="stylesheet">
|
2018-02-08 20:04:13 +01:00
|
|
|
|
<link href="./css/main.css" rel="stylesheet">
|
|
|
|
|
|
|
2018-02-08 17:45:07 +01:00
|
|
|
|
</head>
|
|
|
|
|
|
<body style="position: relative; margin: 0px; height: 100vh; width: 100%; overflow: hidden;">
|
|
|
|
|
|
<!---Whiteboard container -!-->
|
2018-02-08 20:04:13 +01:00
|
|
|
|
<div style="height: 100vh; width: 100%;" id="whiteboardContainer"></div>
|
2018-02-08 17:45:07 +01:00
|
|
|
|
|
|
|
|
|
|
<!---Toolbar -!-->
|
2018-02-08 20:04:13 +01:00
|
|
|
|
<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 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>
|
2018-02-08 17:45:07 +01:00
|
|
|
|
|
2018-02-08 20:04:13 +01:00
|
|
|
|
<div class="btn-group">
|
2018-02-08 21:53:48 +01:00
|
|
|
|
<button id="saveAsImageBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn">
|
2018-02-08 20:04:13 +01:00
|
|
|
|
<i class="fas fa-image"></i>
|
2018-02-08 23:16:28 +01:00
|
|
|
|
<i style="position: absolute; top: 3px; left: 2px; color: #000000; background: grey; font-size: 0.5em; " class="fas fa-save"></i>
|
2018-02-08 20:04:13 +01:00
|
|
|
|
</button>
|
2018-02-08 21:53:48 +01:00
|
|
|
|
<button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button" class="whiteboardBtn">
|
2018-02-08 20:04:13 +01:00
|
|
|
|
<i class="far fa-file-alt"></i>
|
2018-02-08 23:16:28 +01:00
|
|
|
|
<i style="position: absolute; top: 3px; left: 2px; color: #000000; background: grey; font-size: 0.5em; " class="fas fa-save"></i>
|
2018-02-08 23:25:57 +01:00
|
|
|
|
</button>
|
2018-02-08 23:16:28 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="btn-group">
|
|
|
|
|
|
<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button" class="whiteboardBtn">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button" class="whiteboardBtn">
|
|
|
|
|
|
<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>
|
2018-02-08 20:04:13 +01:00
|
|
|
|
</button>
|
2018-02-08 23:25:57 +01:00
|
|
|
|
<input style="display:none;" id="myFile" type="file"/>
|
2018-02-08 20:04:13 +01:00
|
|
|
|
</div>
|
2018-02-08 17:45:07 +01:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
