labels: one module knows how to draw a code, seven views stop guessing

Three core pages and four plugin pages each imported qrcode and jsbarcode
directly, and each carried its own answer to the same questions: what margin,
what width, which error correction, how big a module must be before a scanner
can read it. The answers had already drifted - margin 0 in one place and 2 in
another, width 150 against 160 - and on a label that is the difference between
a sticker that scans and one that does not.

frontend/src/utils/codes.js owns it now: the label-stock presets, the quiet-zone
and margin defaults, CODE128 with no printed value, and the printer-resolution
arithmetic that only the Tech Tools generator had. A view passes what is
specific to its own label and nothing else - MachineBadge still asks for CODE39,
because the badge readers predate the shop-floor scanners and decode nothing
else, and that is exactly the kind of thing a call site should say out loud.

views/print/qrLogo.js is folded in rather than left as a second half-shared
helper that only some of the pages reached into.

The check script now fails a build that imports either library outside that
module. Without it this re-forks within a month: the next label page starts by
copying the nearest existing one, which is how it happened the first time.

Tests cover the part no amount of looking at a screen verifies - a QR that
looks fine at 96 dpi on a monitor can be unreadable at 203 dpi on half-inch
stock.
This commit is contained in:
cproudlock
2026-08-14 14:03:49 -04:00
parent b37c08eb5b
commit c648bdf560
12 changed files with 836 additions and 633 deletions

View File

@@ -52,7 +52,7 @@
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import QRCode from 'qrcode'
import { qrPngDataUrl } from '@/utils/codes'
import { printedpartsApi } from '@/api'
const items = ref([])
@@ -123,9 +123,7 @@ watch(printLabels, async labels => {
await Promise.all(labels.map(async (label, index) => {
// margin 2 = quiet zone (scannability); EC 'M' keeps modules big for the
// short payload on tiny media; no logo overlay on a 0.36in code.
urls[index] = await QRCode.toDataURL(labelPayload(label), {
margin: 2, errorCorrectionLevel: 'M', width: 160
})
urls[index] = await qrPngDataUrl(labelPayload(label), { margin: 2, width: 160 })
}))
qrDataUrls.value = urls
}, { deep: true, immediate: true })