mirror of
https://github.com/tmaier/asn-qr-code-label-generator.git
synced 2026-03-14 16:43:31 +00:00
Merge e18b39b0f1 into d18719cc26
This commit is contained in:
Jona
GitHub
commit
ace81dedcc
2 changed files with 83 additions and 22 deletions
|
|
@ -16,6 +16,7 @@ Users are encouraged to validate the output, especially the positioning of the l
|
|||
The application currently supports the following label formats:
|
||||
|
||||
- Avery L4731REV-25 (See [UK shop](https://www.avery.co.uk/product/mini-multipurpose-labels-l4731rev-25), [DE shop](https://www.avery-zweckform.com/produkt/universal-etiketten-l4731rev-25))
|
||||
- Avery 3666 (See [UK shop](https://www.avery.co.uk/product/multipurpose-labels-3666-3666), [DE shop](https://www.avery-zweckform.com/produkt/universal-etiketten-3666))
|
||||
|
||||
### Limitations
|
||||
|
||||
|
|
@ -23,7 +24,7 @@ The application currently has the following limitations:
|
|||
|
||||
- The application is currently only available in English.
|
||||
This is considered a non-issue, as the application is designed to be self-explanatory.
|
||||
- The application currently only supports the Avery L4731REV-25 label format.
|
||||
- The application currently only supports the Avery L4731REV-25 and Avery 3666 label format.
|
||||
Contributions for additional label formats are welcome.
|
||||
- The application only supports Google Chrome and Chromium-based browsers, such as Microsoft Edge. And partially Firefox.
|
||||
This limitation is due to the use of the [CSS `@page` rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@page) for printing.
|
||||
|
|
|
|||
100
index.html
100
index.html
|
|
@ -18,7 +18,7 @@
|
|||
/* See https://caniuse.com/css-paged-media */
|
||||
@page {
|
||||
/* Remove default margin set by the browser */
|
||||
margin: 0mm;
|
||||
margin: 0;
|
||||
size: A4;
|
||||
}
|
||||
}
|
||||
|
|
@ -56,8 +56,7 @@
|
|||
<p>
|
||||
This tool generates QR code labels for the
|
||||
<abbr title="Archive Serial Number">ASN</abbr> feature. You can
|
||||
generate labels for up to 189 documents at once. The labels are
|
||||
formatted to <strong>fit on Avery L4731REV-25 labels</strong>.
|
||||
generate labels for up to 189 (<strong>Avery L4731REV-25</strong>) or 65 (<strong>Avery 3666</strong>) documents at once.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
@ -99,14 +98,21 @@
|
|||
<p
|
||||
class="prose prose-sm prose-a:text-blue-600 prose-a:underline hover:prose-a:text-blue-700 max-w-none"
|
||||
>
|
||||
The number of labels generated will be 7 x 27 = 189. This means
|
||||
The number of labels generated will be 7 x 27 = 189 (Avery L4731REV-25) or 5 x 13 = 65 (Avery 3666). This means
|
||||
the <strong>next batch</strong> of labels should
|
||||
<strong
|
||||
>start with
|
||||
<span x-text="parseInt(startNumber, 10) + 189"
|
||||
>190</span
|
||||
></strong
|
||||
>.
|
||||
>
|
||||
or
|
||||
<strong
|
||||
> with
|
||||
<span x-text="parseInt(startNumber, 10) + 65"
|
||||
>190</span
|
||||
></strong
|
||||
> respectively.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,6 +159,17 @@
|
|||
class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="selectedLabel"
|
||||
class="mb-2 block text-sm font-medium text-gray-900"
|
||||
>Chose Labels</label
|
||||
>
|
||||
<select id="selectedLabel" x-model="selectedLabel" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500">
|
||||
<option value="L4731REV-25">Avery L4731REV-25</option>
|
||||
<option value="3666">Avery 3666</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-start">
|
||||
<div class="flex h-5 items-center">
|
||||
|
|
@ -173,10 +190,11 @@
|
|||
<p
|
||||
class="prose prose-sm prose-a:text-blue-600 prose-a:underline hover:prose-a:text-blue-700 max-w-none"
|
||||
>
|
||||
This may be useful for debugging or to calibrate the print out.
|
||||
This may be useful for debugging or to calibrate the print-out.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button
|
||||
@click.prevent="generateLabels()"
|
||||
|
|
@ -194,14 +212,15 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="container mx-auto w-[210mm] border px-[8.45mm] py-[13.5mm] print:w-full print:max-w-full print:border-0"
|
||||
class="container mx-auto w-[210mm] border print:w-full print:max-w-full print:border-0"
|
||||
:class="`px-[${currentConfig.px}mm] py-[${currentConfig.py}mm]`"
|
||||
>
|
||||
<!-- Display QR Code Labels -->
|
||||
<ol class="grid grid-cols-7 gap-x-[2.55mm]">
|
||||
<ol class="grid" :class="`grid-cols-${currentConfig.cols} gapx-[${currentConfig.gapx}mm]`">
|
||||
<template x-for="label in labels">
|
||||
<li class="h-[10mm] w-[25.4mm]">
|
||||
<li :class="`h-[${currentConfig.labelHeight}mm] w-[${currentConfig.labelWidth}mm]`">
|
||||
<div
|
||||
class="flex h-[9mm] w-[24.4mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
|
||||
class="flex mx-[1mm] my-[1mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
|
||||
:class="{'even:border-transparent odd:border-transparent': !borderToggle}"
|
||||
>
|
||||
<img
|
||||
|
|
@ -209,18 +228,13 @@
|
|||
alt=""
|
||||
width="100"
|
||||
height="100"
|
||||
class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
|
||||
class="mr-[0.5mm] aspect-square flex-none"
|
||||
:class="`h-[${currentConfig.codeHeight}mm] w-[${currentConfig.codeWidth}mm]`"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<div
|
||||
class="flex-grow"
|
||||
:class="{
|
||||
'text-[3.9mm]': label.text.length <= 6,
|
||||
'text-[3.2mm]': label.text.length == 7,
|
||||
'text-[2.7mm]': label.text.length == 8,
|
||||
'text-[2.4mm]': label.text.length == 9,
|
||||
'text-[2.1mm]': label.text.length >= 10,
|
||||
}"
|
||||
:class="getTextSizeClass(label.text.length)"
|
||||
x-text="label.text"
|
||||
></div>
|
||||
</div>
|
||||
|
|
@ -254,15 +268,61 @@
|
|||
<script>
|
||||
function qrCodeApp() {
|
||||
return {
|
||||
selectedLabel: "L4731REV-25",
|
||||
startNumber: 1,
|
||||
prefix: "ASN",
|
||||
leadingZeros: 4,
|
||||
borderToggle: false,
|
||||
labels: [],
|
||||
|
||||
configs: {
|
||||
"L4731REV-25": {
|
||||
px: 8.45,
|
||||
py: 13.5,
|
||||
cols: 7,
|
||||
rows: 27,
|
||||
gapx: 2.55,
|
||||
labelHeight: 10,
|
||||
labelWidth: 25.4,
|
||||
codeHeight: 9,
|
||||
codeWidth: 9,
|
||||
textSize_6: 3.9,
|
||||
textSize_7: 3.2,
|
||||
textSize_8: 2.7,
|
||||
textSize_9: 2.4,
|
||||
textSize_10: 2.1
|
||||
},
|
||||
"3666": {
|
||||
px: 11.19,
|
||||
py: 10.7,
|
||||
cols: 5,
|
||||
rows: 13,
|
||||
gapx: 2.5,
|
||||
labelHeight: 21.1,
|
||||
labelWidth: 38,
|
||||
codeHeight: 15.2,
|
||||
codeWidth: 15.2,
|
||||
textSize_6: 5,
|
||||
textSize_7: 4.4,
|
||||
textSize_8: 4,
|
||||
textSize_9: 3.4,
|
||||
textSize_10: 3.1
|
||||
},
|
||||
},
|
||||
get currentConfig() {
|
||||
return this.configs[this.selectedLabel];
|
||||
},
|
||||
getTextSizeClass(textLength) {
|
||||
const { textSize_6, textSize_7, textSize_8, textSize_9, textSize_10 } = this.currentConfig;
|
||||
if (textLength <= 6) return `text-[${textSize_6}mm]`;
|
||||
if (textLength === 7) return `text-[${textSize_7}mm]`;
|
||||
if (textLength === 8) return `text-[${textSize_8}mm]`;
|
||||
if (textLength === 9) return `text-[${textSize_9}mm]`;
|
||||
return `text-[${textSize_10}mm]`;
|
||||
},
|
||||
generateLabels() {
|
||||
this.labels = [];
|
||||
let totalLabels = 7 * 27; // 7 columns x 27 rows
|
||||
const { cols, rows } = this.currentConfig;
|
||||
const totalLabels = cols * rows;
|
||||
let startNumberInt = parseInt(this.startNumber, 10); // Ensure startNumber is an integer
|
||||
let leadingZerosInt = parseInt(this.leadingZeros, 10); // Ensure leadingZeros is an integer
|
||||
for (let i = 0; i < totalLabels; i++) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue