Implement a prototype for a web based skribbl.io

author: Dennis Kobert <d-kobert@web.de> 2019-05-21 00:44:31 +0200
committer: Dennis Kobert <d-kobert@web.de> 2019-05-21 00:44:31 +0200
commit: b7e6649f321f7560fa16b88674c64a98009cbcf2 (patch)
tree: 1cadda6eaf80b7161031992d6b2e209b3b49b105
parent: c7bc91ecd6c32afab52c5e45b569e3945bdd1056 (diff)
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);
+    }
+}
author	Dennis Kobert <d-kobert@web.de>	2019-05-21 00:44:31 +0200
committer	Dennis Kobert <d-kobert@web.de>	2019-05-21 00:44:31 +0200
commit	b7e6649f321f7560fa16b88674c64a98009cbcf2 (patch)
tree	1cadda6eaf80b7161031992d6b2e209b3b49b105
parent	c7bc91ecd6c32afab52c5e45b569e3945bdd1056 (diff)