Scribblio

From b7e6649f321f7560fa16b88674c64a98009cbcf2 Mon Sep 17 00:00:00 2001 From: Dennis Kobert Date: Tue, 21 May 2019 00:44:31 +0200 Subject: Implement a prototype for a web based skribbl.io --- scribble/index.html | 15 ++++ scribble/mainstyle.css | 53 ++++++++++++ scribble/script.js | 215 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 283 insertions(+) create mode 100644 scribble/index.html create mode 100644 scribble/mainstyle.css create mode 100644 scribble/script.js 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 @@ + + +

+ Scribblio + + +

+ +

+
+

+ + 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); + } +} -- cgit v1.2.3-54-g00ecf