185 lines
4.9 KiB
JavaScript
185 lines
4.9 KiB
JavaScript
/// Division with fast fraction truncating
|
|
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")
|
|
ctx.fillStyle = "black"
|
|
|
|
const options = {
|
|
mask: document.getElementById("mask-expr"),
|
|
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
|
|
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
|
|
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
|
|
let padding = getComputedStyle(document.body).paddingBottom
|
|
// remove `px` at the end and convert to number
|
|
padding = Number(padding.slice(0, padding.length - 2))
|
|
|
|
// compute available height
|
|
const height =
|
|
document.documentElement.clientHeight
|
|
- canvas.offsetTop // substract height of everything above canvas
|
|
- padding // substract body padding
|
|
|
|
const width =
|
|
document.documentElement.clientWidth
|
|
- padding * 2
|
|
|
|
options.scale.value = Math.max(
|
|
intDiv(
|
|
width < height ? width : height,
|
|
25, // divide least dimension by QR version 2 size
|
|
),
|
|
10, // minimum scale for this auto-detect algorithm
|
|
)
|
|
}
|
|
|
|
{ // QR version related stuff
|
|
const MICRO_4 = 17 // size for version M4, before version 1
|
|
const DIFF = 4 // difference between versions
|
|
const MIN_VER = 1
|
|
const MAX_VER = 40
|
|
|
|
getCodeVersion = () => {
|
|
const size = options.size.value
|
|
return Math.floor((size - MICRO_4) / DIFF)
|
|
}
|
|
|
|
const updateSizeVersion = (versionStep) => {
|
|
const ver = getCodeVersion() + versionStep
|
|
if (ver > MAX_VER || ver < MIN_VER) {
|
|
return
|
|
}
|
|
options.size.value = ver * DIFF + MICRO_4
|
|
options.ver.innerText = ver
|
|
}
|
|
|
|
document.getElementById("width-incr").addEventListener("click", () => {
|
|
updateSizeVersion(+1)
|
|
})
|
|
|
|
document.getElementById("width-decr").addEventListener("click", () => {
|
|
updateSizeVersion(-1)
|
|
})
|
|
|
|
options.size.addEventListener("input", () => {
|
|
options.ver.innerText = getCodeVersion()
|
|
})
|
|
}
|
|
})
|