summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--scribble/index.html15
-rw-r--r--scribble/mainstyle.css53
-rw-r--r--scribble/script.js215
3 files changed, 283 insertions, 0 deletions
diff --git a/scribble/index.html b/scribble/index.html
new file mode 100644
index 0000000..ee7d052
--- /dev/null
+++ b/scribble/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+ <header>
+ <title> Scribblio </title>
+ <script src="./script.js"></script>
+ <link rel="stylesheet" type="text/css" href="mainstyle.css">
+ </header>
+ <body>
+ <div class="wrapper">
+ <div class="toolbar">
+ </div><br>
+ <canvas id="my-canvas" width="1000" height="1000"></canvas>
+ </div>
+ </body>
+</html>
diff --git a/scribble/mainstyle.css b/scribble/mainstyle.css
new file mode 100644
index 0000000..82045d1
--- /dev/null
+++ b/scribble/mainstyle.css
@@ -0,0 +1,53 @@
+body {
+ padding: 0,2;
+ margin: 0;
+ background: #222222;
+}
+.wrapper {
+ max-width: 900px;
+ margin: auto;
+ font-family: "Arial";
+}
+
+.toolbar{
+ width: 100%;
+ background-color: #440044;
+ overflow: auto;
+}
+
+.toolbar a {
+ float: left;
+ width: 11%;
+ text-align: center;
+ padding: 6px 5px;
+ transition: all 0.5s ease;
+ color: white;
+}
+
+/* Change color on hover */
+.toolbar a:hover {
+ background-color: #000;
+ }
+
+/* Change color on selected icon */
+.selected {
+ background-color: #000;
+}
+
+#my-canvas{
+ width: 100%;
+ background: white;
+ border: 3px solid #000000;
+}
+
+#img-data-div{
+ width: 100%;
+ max-width: 900px;
+ height: 200px;
+}
+
+/* Resize image to container */
+.toolbar a img{
+ max-width:100%;
+ height:auto;
+}
diff --git a/scribble/script.js b/scribble/script.js
new file mode 100644
index 0000000..75173ae
--- /dev/null
+++ b/scribble/script.js
@@ -0,0 +1,215 @@
+const socket = new WebSocket("ws://localhost:5001", "tuesday");
+
+//var exampleSocket = new WebSocket("ws://192.168.3.42:5001", "tuesday");
+socket.onopen = function (event) {
+ console.log("Connection established");
+ // Display user friendly messages for the successful establishment of connection
+ socket.send("42");
+};
+socket.onmessage = function (event) {
+ console.log(event.data);
+ AddBrushPoint(JSON.parse(event.data));
+ DrawBrush();
+ SaveCanvasImage();
+ RedrawCanvasImage();
+};
+window.onbeforeunload = function () {
+ socket.onclose = function () { }; // disable onclose handler first
+ console.log("Connection terminated");
+ socket.close();
+};
+
+let canvas;
+let context;
+let savedImageData;
+let dragging = false;
+let strokeColor = 'black';
+let fillColor = 'black';
+let color = 'black';
+let lineWidth = 2;
+let currentTool = "brush";
+let canvasHeight = 1000;
+let canvasWidth = 1000;
+
+let usingBrush = false;
+let brushPoints = new Array();
+
+class ShapeBoundingBox {
+ constructor(left, top, width, height) {
+ this.left = left;
+ this.top = top;
+ this.width = width;
+ this.height = height;
+ }
+}
+
+class DrawPoint {
+ constructor(x, y, mouseDown) {
+ this.x = x;
+ this.y = y;
+ this.mouseDown = mouseDown;
+ }
+}
+
+class MouseDownPos {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ }
+}
+
+class Location {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ }
+}
+
+
+let shapeBoundingBox = new ShapeBoundingBox(0, 0, 0, 0);
+let mousedown = new MouseDownPos(0, 0);
+let loc = new Location(0, 0);
+
+document.addEventListener('DOMContentLoaded', setupCanvas);
+
+function setupCanvas() {
+ canvas = document.getElementById('my-canvas');
+ context = canvas.getContext('2d');
+ context.strokeStyles = strokeColor;
+ context.lineWidth = lineWidth;
+ canvas.addEventListener("mousedown", ReactToMouseDown);
+ canvas.addEventListener("mousemove", ReactToMouseMove);
+ canvas.addEventListener("mouseup", ReactToMouseUp);
+}
+
+
+function GetMousePosition(x, y) {
+ let canvasSizeData = canvas.getBoundingClientRect();
+ return {
+ x: (x - canvasSizeData.left) * (canvas.width / canvasSizeData.width),
+ y: (y - canvasSizeData.top) * (canvas.height / canvasSizeData.height)
+ };
+}
+
+function SaveCanvasImage() {
+ savedImageData = context.getImageData(0, 0, canvas.width, canvas.height);
+}
+
+function RedrawCanvasImage() {
+ context.putImageData(savedImageData, 0, 0);
+}
+
+function UpdateRubberbandSizeData(location) {
+ shapeBoundingBox.width = Math.abs(location.x - mousedown.x);
+ shapeBoundingBox.height = Math.abs(location.y - mousedown.y);
+
+ if (location.x > mousedown.x) {
+ shapeBoundingBox.left = mousedown.x;
+ } else {
+ shapeBoundingBox.left = location.x;
+ }
+ if (location.y > mousedown.y) {
+ shapeBoundingBox.top = mousedown.y;
+ } else {
+ shapeBoundingBox.top = location.y;
+ }
+}
+
+function AddNetBrushPoint(x, y, mouseDown) {
+ let point = new DrawPoint(x, y, mouseDown);
+ socket.send(JSON.stringify(point));
+
+ AddBrushPoint(point);
+}
+
+function AddBrushPoint(point) {
+ brushPoints.push(point);
+}
+
+function DrawBrush() {
+ for (let i = 1; i < brushPoints.length; i++) {
+ context.beginPath();
+ if (brushPoints[i].mouseDown) {
+ context.moveTo(brushPoints[i - 1].x, brushPoints[i - 1].y);
+ } else {
+ context.moveTo(brushPoints[i].x - 1, brushPoints[i].y);
+ }
+ context.lineTo(brushPoints[i].x, brushPoints[i].y)
+ context.closePath();
+ context.stroke();
+ }
+}
+
+function UpdateRubberbandOnMove(location) {
+ UpdateRubberbandSizeData(location);
+ drawRubberbandShape(location);
+}
+
+function drawRubberbandShape(location) {
+ context.strokeStyle = strokeColor;
+ context.fillStyle = fillColor;
+
+ if (currentTool === "brush") {
+ DrawBrush();
+ } else if (currentTool === "line") {
+ context.beginPath();
+ context.moveTo(mousedown.x, mousedown.y);
+ context.lineTo(location.x, location.y);
+ context.closePath();
+ context.stroke();
+ } else if (currentTool === "rectangle") {
+ context.strokeRect(shapeBoundingBox.left, shapeBoundingBox.top,
+ shapeBoundingBox.width, shapeBoundingBox.height);
+ }
+}
+
+function ReactToMouseDown(e) {
+ // Change the mouse pointer to a crosshair
+ canvas.style.cursor = "crosshair";
+ // Store location
+ loc = GetMousePosition(e.clientX, e.clientY);
+ // Save the current canvas image
+ SaveCanvasImage();
+ // Store mouse position when clicked
+ mousedown.x = loc.x;
+ mousedown.y = loc.y;
+ // Store that yes the mouse is being held down
+ dragging = true;
+
+ if (currentTool === "brush") {
+ usingBrush = true;
+ AddNetBrushPoint(mousedown.x, mousedown.y);
+ }
+};
+
+function ReactToMouseMove(e) {
+ canvas.style.cursor = "crosshair";
+ loc = GetMousePosition(e.clientX, e.clientY);
+
+ if (currentTool === "brush" && dragging && usingBrush) {
+ if (loc.x > 0 && loc.x < canvasWidth && loc.y > 0 && loc.y < canvasHeight) {
+ AddNetBrushPoint(loc.x, loc.y, true);
+ }
+ RedrawCanvasImage();
+ DrawBrush();
+ } else if (dragging) {
+ RedrawCanvasImage();
+ UpdateRubberbandOnMove(loc);
+ }
+};
+
+function ReactToMouseUp(e) {
+ canvas.style.cursor = "default";
+ loc = GetMousePosition(e.clientX, e.clientY);
+ RedrawCanvasImage();
+ UpdateRubberbandOnMove(loc);
+ dragging = false;
+ usingBrush = false;
+
+ brushXPoints = new Array();
+ brushYPoints = new Array();
+ brushDownPos = new Array();
+ if (currentTool === "brush") {
+ AddBrushPoint(loc.x, loc.y);
+ }
+}