First version

.gitignore

@@ -0,0 +1 @@
+nbproject

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Bence Fodor (Fodi.be)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,2 @@
+# aurco-painter
+Paint custom ArUco markers using touch or mouse input

app.js

@@ -0,0 +1,103 @@
+const LS_KEY_PREFIX = "v1.editor.aruco.fodi.be";
+const LS_KEY_SUFFIX_RESOLUTION = ".resolution";
+
+let currentResolution = parseInt(localStorage.getItem(LS_KEY_PREFIX + LS_KEY_SUFFIX_RESOLUTION)) || 5; // try to load last used resolution from local storage or fall back to default value
+let currentMode; // current painting mode, either "dark" or "light"
+let currentCodeBin, currentCodeHex; // binary / hexadecimal representation of the current marker
+
+// utility functions
+const hex2bin = (hexString, numberOfBits) => parseInt(hexString, 16).toString(2).padStart(numberOfBits, "0");
+const bin2hex = (binString) => "0x" + parseInt(binString, 2).toString(16) + "UL";
+
+// table setup
+const initTable = (resolution) => {
+
+    if (!parseInt(resolution)) { // fail if requested resolution cannot be parsed as an integer
+        alert("Invalid resolution.");
+        return;
+    }
+
+    currentResolution = resolution;
+
+    localStorage.setItem(LS_KEY_PREFIX + LS_KEY_SUFFIX_RESOLUTION, currentResolution); // save current resolution to local storage it can be automatically set on a page refresh
+
+    document.querySelector(":root").style.setProperty("--grid-resolution", resolution);
+
+    // generate table HTML
+    let tableHTML = "<table>";
+    for (let y = 0; y < resolution; y++) {
+        tableHTML += "<tr>";
+        for (let x = 0; x < resolution; x++) {
+            tableHTML += "<td id='cell" + (x + y) + "'></td>";
+        }
+        tableHTML += "</tr>";
+    }
+    tableHTML += "</table>";
+
+    // add table HTML to DOM
+    document.querySelector("#grid").innerHTML = tableHTML;
+
+    // paint and rig table cells for interaction
+    document.querySelectorAll("td").forEach((el) => {
+        el.classList.add("dark"); // set default mode for all cells
+
+        const ondown = (e) => {
+            currentMode = e.target.classList.contains("dark") ? "light" : "dark";
+
+            paintCell(e.target);
+
+            el.onpointermove = onmove;
+            el.setPointerCapture(e.pointerId);
+        };
+
+        const onup = (e) => {
+            el.onpointermove = null;
+            el.releasePointerCapture(e.pointerId);
+            updateCode();
+        };
+
+        const onmove = (e) => {
+            elRealTarget = document.elementFromPoint(e.x, e.y);
+            if (e.buttons && elRealTarget.localName === 'td') {
+                paintCell(elRealTarget);
+            }
+        };
+
+        el.onpointerdown = ondown;
+        el.onpointerup = onup;
+    });
+
+    updateCode();
+};
+
+// set one cell to the current mode (dark or light)
+const paintCell = (el) => {
+    if (currentMode === "light") {
+        el.classList.remove("dark");
+        el.classList.add("light");
+    } else {
+        el.classList.remove("light");
+        el.classList.add("dark");
+    }
+};
+
+// generate and display the hexadecimal representation of the current marker
+const updateCode = () => {
+    currentCodeBin = "";
+    document.querySelectorAll("td").forEach((el) => {
+        currentCodeBin += el.classList.contains("light") ? "1" : "0";
+    });
+    currentCodeHex = bin2hex(currentCodeBin);
+    document.getElementById("grid-info").textContent = currentCodeHex;
+};
+
+// prompt user for new resolution and reinit
+const setResolution = () => {
+    const newResolution = prompt("This will clear the current code. Enter new resolution:", currentResolution);
+    if (newResolution) {
+        initTable(parseInt(newResolution));
+    }
+};
+
+// init on load
+initTable(currentResolution);

index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArUco Painter by Fodi</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <link rel="icon" type="image/png" href="favicon.png">
+        <link rel="stylesheet" href="style.css"/>
+    </head>
+    <body>
+        <header>
+            <h1>ArUco Painter</h1>
+            <button class="button" onclick="setResolution()">Set resolution</button>
+            <label for="toggle-grid" class="button">Toggle grid</label>
+        </header>
+        <input type="checkbox" id="toggle-grid" style="display:none" checked>
+        <main>
+            <div id="grid"></div>
+            <div id="grid-info" class="mt-small"></div>
+        </main>
+        <div class="mt-big">
+            &copy; <a href="https://fodi.be" target="_blank">Fodi</a> of
+            <a href="https://lasermagnet.com" target="_blank">Lasermagnet Games</a>
+        </div>
+        <div class="mt-small">Code is on <a href="https://github.com/fodi/aruco-painter" target="_blank">GitHub</a>.</div>
+        <script src="app.js"></script>
+    </body>
+</html>

style.css

@@ -0,0 +1,66 @@
+:root {
+    --grid-resolution: 0;
+    --cell-max-size: 60px;
+}
+
+html, body {
+    height: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+    line-height: 1.3rem;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+table, tr, td, th {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-collapse: collapse;
+}
+
+td {
+    width: min(calc(98vw / var(--grid-resolution)), var(--cell-max-size));
+    height: min(calc(98vw / var(--grid-resolution)), var(--cell-max-size));
+    box-sizing: border-box;
+    touch-action: none;
+}
+
+td.dark {
+    background: black;
+    /*border-radius: 100%;*/
+}
+
+td.light {
+    background: white;
+}
+
+input[type="checkbox"]#toggle-grid:checked + main table td {
+    border: 2px solid #ccc;
+}
+
+.button {
+    display: inline-block;
+    margin: 0.5rem;
+    padding: 0.5rem 1rem;
+    background-color: #ccc;
+    border: 2px solid #bbb;
+    border-radius: 2px;
+    font-size: 1rem;
+}
+
+.button:hover {
+    background-color: #ddd;
+}
+
+.mt-small {
+    margin-top: 0.5rem
+}
+
+.mt-big {
+    margin-top: 2rem
+}