diff --git a/index.html b/index.html
index 16840fe..e889079 100644
--- a/index.html
+++ b/index.html
@@ -31,11 +31,6 @@
px per module
-
diff --git a/script.js b/script.js
index 63413ec..59f8fa5 100644
--- a/script.js
+++ b/script.js
@@ -3,50 +3,6 @@ function intDiv(a, b) {
return ~~(a / b)
}
-let getCodeVersion
-
-const alignmentCoords = [
- [6, 18],
- [6, 22],
- [6, 26],
- [6, 30],
- [6, 34],
- [6, 22, 38],
- [6, 24, 42],
- [6, 26, 46],
- [6, 28, 50],
- [6, 30, 54],
- [6, 32, 58],
- [6, 34, 62],
- [6, 26, 46, 66],
- [6, 26, 48, 70],
- [6, 26, 50, 74],
- [6, 30, 54, 78],
- [6, 30, 56, 82],
- [6, 30, 58, 86],
- [6, 34, 62, 90],
- [6, 28, 50, 72, 94],
- [6, 26, 50, 74, 98],
- [6, 30, 54, 78, 102],
- [6, 28, 54, 80, 106],
- [6, 32, 58, 84, 110],
- [6, 30, 58, 86, 114],
- [6, 34, 62, 90, 118],
- [6, 26, 50, 74, 98, 122],
- [6, 30, 54, 78, 102, 126],
- [6, 26, 52, 78, 104, 130],
- [6, 30, 56, 82, 108, 134],
- [6, 34, 60, 86, 112, 138],
- [6, 30, 58, 86, 114, 142],
- [6, 34, 62, 90, 118, 146],
- [6, 30, 54, 78, 102, 126, 150],
- [6, 24, 50, 76, 102, 128, 154],
- [6, 28, 54, 80, 106, 132, 158],
- [6, 32, 58, 84, 110, 136, 162],
- [6, 26, 54, 82, 110, 138, 166],
- [6, 30, 58, 86, 114, 142, 170],
-]
-
addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
@@ -57,73 +13,24 @@ addEventListener('DOMContentLoaded', () => {
size: document.getElementById("width"),
ver: document.getElementById("version"),
scale: document.getElementById("scale"),
- gap: document.getElementById("gap"),
}
document.getElementById("gen-btn").addEventListener("click", () => {
const mask = options.mask.value
- const size = Number(options.size.value)
- const scale = Number(options.scale.value)
- const gap = Math.min(Number(options.gap.value), scale) // not more than 1 module scaled size
-
- const wh = scale - gap * 2 // width&height for 1 module with grid gap
+ const size = options.size.value
+ const scale = options.scale.value
canvas.width = canvas.height = size * scale
ctx.clearRect(0, 0, canvas.width, canvas.height)
- ctx.fillStyle = "black"
for (let row = 0; row < size; row++) {
for (let col = 0; col < size; col++) {
if (eval(mask) == 0) {
- ctx.fillRect(col * scale + gap, row * scale + gap, wh, wh)
+ ctx.fillRect(col * scale, row * scale, scale, scale)
}
}
}
-
- const idSize = 8 * scale
-
- { // finder pattern
- ctx.fillStyle = "rgba(224, 63, 102, 0.5)"
-
- ctx.fillRect(0, 0, idSize, idSize)
- ctx.fillRect(canvas.width - idSize, 0, idSize, idSize)
- ctx.fillRect(0, canvas.height - idSize, idSize, idSize)
- }
-
- const ver = getCodeVersion()
-
- if (ver > 1) { // alignment pattern
- ctx.fillStyle = "rgba(209, 63, 224, 0.5)"
-
- const alignSize = 5 * scale
- const coords = alignmentCoords[ver - 2] // array begins with version 2
- const len = coords.length
-
- for (let i = 0; i < len; i++) {
- for (let j = 0; j < len; j++) {
- const row = coords[i], col = coords[j]
- if (row < 8 && col < 8 || row < 8 && col > size - 8 || row > size - 8 && col < 8) {
- // do not overlap with finder pattern
- continue
- }
- ctx.fillRect((row - 2) * scale, (col - 2) * scale, alignSize, alignSize)
- }
- }
- }
-
- { // timing pattern
- ctx.fillStyle = "rgba(76, 63, 224, 0.5)"
-
- const idEndPos = 6 * scale
- const betweenIds = canvas.width - idSize * 2
- ctx.fillRect(idSize, idEndPos, betweenIds, scale)
- ctx.fillRect(idEndPos, idSize, scale, betweenIds)
- }
-
- { // format info
- // TODO
- }
})
{ // Choose best scale for screen height
@@ -138,7 +45,7 @@ addEventListener('DOMContentLoaded', () => {
const MIN_VER = 1
const MAX_VER = 40
- getCodeVersion = () => {
+ const getCodeVersion = () => {
const size = options.size.value
return Math.floor((size - MICRO_4) / DIFF)
}
diff --git a/style.css b/style.css
index 9a807d6..a4d7014 100644
--- a/style.css
+++ b/style.css
@@ -3,17 +3,14 @@ body {
padding: 0.5rem;
}
-body > div {
- width: fit-content;
- margin: auto;
-}
-
-body > div#options {
+#options {
display: flex;
flex-direction: column;
row-gap: 0.25rem;
+ width: fit-content;
max-width: calc(100vw - 0.5rem * 2);
+ margin: auto;
}
select, input, button {
@@ -23,7 +20,7 @@ select, input, button {
}
input[type=number] {
- width: calc(4rem + 0.125rem * 2);
+ width: calc(1rem * 4 + 0.125rem * 2);
}
label {
@@ -38,11 +35,6 @@ label#width-wrapper > button {
}
label > span:nth-child(1) {
- width: 5rem;
+ width: calc(3.5rem);
text-align: right;
}
-
-canvas {
- margin-top: 0.5rem;
- border: 2px solid #555;
-}