Scribblio

From 3a3d0fc3d4733f8908e23a03f860d76340479ec4 Mon Sep 17 00:00:00 2001 From: Dennis Kobert Date: Tue, 11 Jun 2019 23:53:30 +0200 Subject: Reorganize Project structure --- scribble/index.html | 15 ---- scribble/mainstyle.css | 53 ------------ scribble/script.js | 215 ------------------------------------------------- 3 files changed, 283 deletions(-) delete mode 100644 scribble/index.html delete mode 100644 scribble/mainstyle.css delete mode 100644 scribble/script.js (limited to 'scribble') diff --git a/scribble/index.html b/scribble/index.html deleted file mode 100644 index ee7d052..0000000 --- a/scribble/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - -

- Scribblio - - -

- -

-
-

- - diff --git a/scribble/mainstyle.css b/scribble/mainstyle.css deleted file mode 100644 index 82045d1..0000000 --- a/scribble/mainstyle.css +++ /dev/null @@ -1,53 +0,0 @@ -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 deleted file mode 100644 index 75173ae..0000000 --- a/scribble/script.js +++ /dev/null @@ -1,215 +0,0 @@ -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); - } -} -- cgit v1.2.3-70-g09d2