data-pretty WIP

.gitignore

@@ -1,4 +1,5 @@
-.pio
+.pio/
+img/
 CMakeListsPrivate.txt
 cmake-build-*/ 
 /.idea

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();
+  }
+
+
+}

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();
+    }
+  }
+}

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})`);
+    }
+  }
+
+}

data-pretty/index.css

@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}

data-pretty/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>RGBMatrixDisplay</title>
+  <link rel="stylesheet" href="./index.css">
+  <script src="Canvas.js"></script>
+  <script src="Drawing.js"></script>
+  <script src="Picker.js"></script>
+  <script src="./index.js"></script>
+</head>
+<body>
+<canvas id="canvas"></canvas><canvas id="picker"></canvas>
+</body>
+</html>

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),
+  );
+};