From bee63d137f949399212625da43df587801db29ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= Date: Wed, 22 Jan 2025 08:40:01 +0100 Subject: [PATCH] data-pretty WIP --- .gitignore | 3 +- data-pretty/Canvas.js | 41 ++++++++++++++++++++ data-pretty/Drawing.js | 87 ++++++++++++++++++++++++++++++++++++++++++ data-pretty/Picker.js | 48 +++++++++++++++++++++++ data-pretty/index.css | 3 ++ data-pretty/index.html | 15 ++++++++ data-pretty/index.js | 9 +++++ 7 files changed, 205 insertions(+), 1 deletion(-) create mode 100644 data-pretty/Canvas.js create mode 100644 data-pretty/Drawing.js create mode 100644 data-pretty/Picker.js create mode 100644 data-pretty/index.css create mode 100644 data-pretty/index.html create mode 100644 data-pretty/index.js diff --git a/.gitignore b/.gitignore index eda9072..d9cd68c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ -.pio +.pio/ +img/ CMakeListsPrivate.txt cmake-build-*/ /.idea \ No newline at end of file diff --git a/data-pretty/Canvas.js b/data-pretty/Canvas.js new file mode 100644 index 0000000..74d9611 --- /dev/null +++ b/data-pretty/Canvas.js @@ -0,0 +1,41 @@ +class Canvas { + + width; + + height; + + canvas; + + ctx; + + constructor(canvasElementId, width, height, mouseMove) { + this.width = width; + this.height = height; + + this.canvas = document.getElementById(canvasElementId); + this.canvas.width = width; + this.canvas.height = height; + this.canvas.addEventListener('contextmenu', event => event.preventDefault()); + this.canvas.onmousemove = mouseMove; + this.canvas.onmousedown = mouseMove; + this.canvas.onmouseup = mouseMove; + + this.ctx = this.canvas.getContext("2d"); + } + + getPixelColor(event) { + const colorArray = this.ctx.getImageData(event.offsetX, event.offsetY, 1, 1).data; + const colorInt = (colorArray[0] << 16) | (colorArray[1] << 8) | colorArray[2]; + const colorHex = colorInt.toString(16); + return "#" + colorHex.padStart(6, "0"); + } + + fillRect(x, y, color) { + this.ctx.beginPath(); + this.ctx.fillStyle = color; + this.ctx.rect(x * this.size, y * this.size, this.size, this.size); + this.ctx.fill(); + } + + +} \ No newline at end of file diff --git a/data-pretty/Drawing.js b/data-pretty/Drawing.js new file mode 100644 index 0000000..7d3f491 --- /dev/null +++ b/data-pretty/Drawing.js @@ -0,0 +1,87 @@ +class Drawing extends Canvas { + + mouseRasterX = -1; + + mouseRasterY = -1; + + color0 = "#00F"; + + color1 = "#FFF"; + + constructor(rasterCountWidth, rasterCountHeight, size, canvasElementId) { + super(canvasElementId, rasterCountWidth * size, rasterCountHeight * size, (event) => this.mouseEvent(event)); + this.size = size; + this.matrix = new Array(rasterCountHeight).fill(0).map(() => new Array(rasterCountWidth).fill(undefined)); + this.draw(); + } + + mouseEvent(event) { + this.updateCursor(event); + this.mouseDraw(event); + this.draw(); + } + + mouseDraw(event) { + let color; + if (Boolean(event.buttons & 1)) { + color = this.color0; + } else if (Boolean(event.buttons & 2)) { + color = undefined; + } else { + return; + } + this.matrix[this.mouseRasterY][this.mouseRasterX] = color; + } + + updateCursor(event) { + this.mouseRasterX = Math.floor(event.offsetX / this.size); + this.mouseRasterY = Math.floor(event.offsetY / this.size); + } + + draw() { + this.ctx.fillStyle = "#fff"; + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + this.drawMatrix(); + this.drawRaster(0, 0, this.canvas.width, this.canvas.height, this.size, this.size); + } + + drawMatrix() { + for (let y = 0; y < this.matrix.length; y++) { + const row = this.matrix[y]; + for (let x = 0; x < row.length; x++) { + const color = row[x]; + if (color === undefined) { + continue; + } + this.ctx.beginPath(); + this.ctx.fillStyle = color; + this.ctx.rect(x * this.size, y * this.size, this.size, this.size); + this.ctx.fill(); + } + } + } + + drawRaster(xBgn, yBgn, w, h, rx, ry) { + const xEnd = xBgn + w; + const yEnd = yBgn + h; + + this.ctx.beginPath(); + for (let x = xBgn; x <= xEnd; x += rx) { + this.ctx.moveTo(x, yBgn); + this.ctx.lineTo(x, yEnd); + } + for (let y = yBgn; y <= yEnd; y += ry) { + this.ctx.moveTo(xBgn, y); + this.ctx.lineTo(xEnd, y); + } + this.ctx.strokeStyle = "#aaa"; + this.ctx.stroke(); + + if (this.mouseRasterX >= 0) { + this.ctx.beginPath(); + this.ctx.strokeStyle = "blue"; + this.ctx.rect(this.mouseRasterX * this.size, this.mouseRasterY * this.size, this.size, this.size); + this.ctx.stroke(); + } + } +} diff --git a/data-pretty/Picker.js b/data-pretty/Picker.js new file mode 100644 index 0000000..496d4aa --- /dev/null +++ b/data-pretty/Picker.js @@ -0,0 +1,48 @@ +const STEPS = 8; + +class Picker extends Canvas { + + setColor0; + + setColor1; + + constructor(size, canvasElementId, setColor0, setColor1) { + super(canvasElementId, (STEPS + 1) * size, 7 * size, (event) => this.mouseEvent(event)); + this.setColor0 = setColor0; + this.setColor1 = setColor1; + this.size = size; + this.draw(); + } + + mouseEvent(event) { + const color = this.getPixelColor(event); + if (Boolean(event.buttons & 1)) { + this.setColor0(color); + } else if (Boolean(event.buttons & 2)) { + this.setColor1(color); + } + } + + draw() { + this.ctx.fillStyle = "#fff"; + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + let y = 0; + this.drawMatrix(true, false, false, y++); + this.drawMatrix(true, true, false, y++); + this.drawMatrix(false, true, false, y++); + this.drawMatrix(false, true, true, y++); + this.drawMatrix(false, false, true, y++); + this.drawMatrix(true, false, true, y++); + this.drawMatrix(true, true, true, y++); + } + + drawMatrix(dr, dg, db, y) { + for (let x = 0; x <= STEPS; x++) { + const r = x * (dr ? 256 / STEPS : 0) - 1; + const g = x * (dg ? 256 / STEPS : 0) - 1; + const b = x * (db ? 256 / STEPS : 0) - 1; + this.fillRect(x, y, `rgb(${r},${g},${b})`); + } + } + +} diff --git a/data-pretty/index.css b/data-pretty/index.css new file mode 100644 index 0000000..699a279 --- /dev/null +++ b/data-pretty/index.css @@ -0,0 +1,3 @@ +body { + margin: 0; +} diff --git a/data-pretty/index.html b/data-pretty/index.html new file mode 100644 index 0000000..d961844 --- /dev/null +++ b/data-pretty/index.html @@ -0,0 +1,15 @@ + + + + + RGBMatrixDisplay + + + + + + + + + + \ No newline at end of file diff --git a/data-pretty/index.js b/data-pretty/index.js new file mode 100644 index 0000000..3ba4d2f --- /dev/null +++ b/data-pretty/index.js @@ -0,0 +1,9 @@ +window.onload = function () { + const drawing = new Drawing(8, 8, 60, "canvas"); + new Picker( + 60, + "picker", + (color => drawing.color0 = color), + (color => drawing.color1 = color), + ); +};