summaryrefslogtreecommitdiff
path: root/scribble
diff options
context:
space:
mode:
Diffstat (limited to 'scribble')
-rw-r--r--scribble/index.html15
-rw-r--r--scribble/mainstyle.css53
-rw-r--r--scribble/script.js215
3 files changed, 0 insertions, 283 deletions
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 @@
-<!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
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);
- }
-}
generated by cgit v1.2.3-54-g00ecf (git 2.45.0) at 2024-05-20 15:38:17 +0000