mkrieger/asn-qr-code-label-generator
1
0
Fork 0
mirror of https://github.com/tmaier/asn-qr-code-label-generator.git synced 2026-03-14 16:43:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Draw QR-codes with quiet zone, keep more whitespace around label to

Browse source 
accomodate printer misalignment. Print prefix and number on seperate
lines for more whitespace around the QR-code.
This commit is contained in:
Jasper van der Neut 2024-05-30 09:35:06 +02:00 • committed by Jasper van der Neut - Stulen
parent d18719cc26
commit 8ab02178f4
1 changed files with 20 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

31
index.html
View file

@ -201,7 +201,7 @@
<template x-for="label in labels"> <template x-for="label in labels">
<li class="h-[10mm] w-[25.4mm]"> <li class="h-[10mm] w-[25.4mm]">
<div <div
class="flex h-[9mm] w-[24.4mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300" class="flex justify-evenly h-[9mm] w-[24.4mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
:class="{'even:border-transparent odd:border-transparent': !borderToggle}" :class="{'even:border-transparent odd:border-transparent': !borderToggle}"
> >
<img <img
@ -213,16 +213,25 @@
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
/> />
<div <div
class="flex-grow" class="flex-none pr-[2mm]" align="center"
><div
:class="{ :class="{
'text-[3.9mm]': label.text.length <= 6, 'text-[3.3mm]': label.prefix.length <= 3,
'text-[3.2mm]': label.text.length == 7, 'text-[2.9mm]': label.prefix.length == 4,
'text-[2.7mm]': label.text.length == 8, 'text-[2.4mm]': label.prefix.length == 5,
'text-[2.4mm]': label.text.length == 9, 'text-[1.9mm]': label.prefix.length == 6,
'text-[2.1mm]': label.text.length >= 10, 'text-[1.5mm]': label.prefix.length >= 7,
}" }"
x-text="label.text" x-text="label.prefix"
></div> ></div><div
:class="{
'text-[2.9mm]': label.paddedNumber.length <= 4,
'text-[2.4mm]': label.paddedNumber.length == 5,
'text-[1.9mm]': label.paddedNumber.length == 6,
'text-[1.5mm]': label.paddedNumber.length >= 7,
}"
x-text="label.paddedNumber"
></div></div>
</div> </div>
</li> </li>
</template> </template>
@ -272,11 +281,11 @@
.padStart(leadingZerosInt + 1, "0"); .padStart(leadingZerosInt + 1, "0");
let text = this.prefix + paddedNumber; let text = this.prefix + paddedNumber;
// See https://goqr.me/api/doc/create-qr-code/ // See https://goqr.me/api/doc/create-qr-code/
let qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent( let qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&qzone=4&bgcolor=fff&data=${encodeURIComponent(
text text
)}`; )}`;
this.labels.push({ qrCodeUrl, text }); this.labels.push({ qrCodeUrl, text, prefix: this.prefix, paddedNumber });
} }
}, },
printLabels() { printLabels() {