mirror of
https://github.com/tmaier/asn-qr-code-label-generator.git
synced 2026-03-14 08:33:37 +00:00
Add index.html and README
This commit is contained in:
Tobias Ludwig Maier
parent
b5fae776fa
commit
18221828a9
3 changed files with 334 additions and 0 deletions
12
.editorconfig
Normal file
12
.editorconfig
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
# EditorConfig is awesome: https://EditorConfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
# Unix-style newlines with a newline ending every file
|
||||
[*]
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
53
README.md
Normal file
53
README.md
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
# QR Code Label Generator for ASNs in Paperless-ngx
|
||||
|
||||
## About the Project
|
||||
|
||||
This project is a web-based QR code label generator specifically designed for generating Archive Serial Number (ASN) labels in Paperless-ngx. It's a simple and efficient tool aimed at streamlining the process of creating QR code labels for document management.
|
||||
|
||||
A live version of this application can be accessed at <https://tobiasmaier.info/asn-qr-code-label-generator/>.
|
||||
|
||||
### Current Status
|
||||
|
||||
This application is currently in an **early alpha stage** and has not been extensively tested.
|
||||
Users are encouraged to validate the output, especially the positioning of the labels.
|
||||
|
||||
### Supported label formats
|
||||
|
||||
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))
|
||||
|
||||
### Limitations
|
||||
|
||||
The application currently has the following limitations:
|
||||
|
||||
- The application is currently only available in English.
|
||||
- The application currently only supports the Avery L4731REV-25 label format.
|
||||
- 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.
|
||||
|
||||
### Key Design Decisions
|
||||
|
||||
- **Browser-Based Application**: The application is designed to run entirely on the client side, avoiding the need for server-side logic. This approach simplifies deployment and reduces hosting requirements.
|
||||
|
||||
- **Simple Technology Stack**: The application is built using [TailwindCSS](https://tailwindcss.com) and [AlpineJS](https://alpinejs.dev). TailwindCSS provides utility-first CSS classes for styling, while AlpineJS offers reactive and declarative JavaScript for handling interactivity. This combination results in a comparatively lightweight and maintainable codebase.
|
||||
|
||||
## Contributions
|
||||
|
||||
Contributions to this project are welcome.
|
||||
If you have ideas for improvements or have found bugs, please feel free to contribute.
|
||||
You can submit your contributions via GitHub at <https://github.com/tmaier/asn-qr-code-label-generator>.
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
This project has been made possible with the support and sponsorship of [BauCloud GmbH](https://www.baucloud.com).
|
||||
|
||||
Special thanks to [Marvin Gaube](https://margau.net) for the insightful blog post ["paperless-ngx with qr codes as ASN: My Workflow"](https://margau.net/posts/2023-04-16-paperless-ngx-asn/). His workflow greatly inspired the development of this application.
|
||||
|
||||
Additionally, this project drew inspiration from the CLI tool [paperless-asn-qr-codes](https://git.jcg.re/jcgruenhage/paperless-asn-qr-codes) developed by [Jan Christian Grünhage](https://jcg.re). His work follows the same goal of streamlining the process of creating ASN labels for paperless-ng, but uses a different approach.
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the [GNU Affero General Public License v3.0 (AGPL-3.0)](https://www.gnu.org/licenses/agpl-3.0.html).
|
||||
|
||||
All rights reserved by [Tobias L. Maier](https://tobiasmaier.info).
|
||||
269
index.html
Normal file
269
index.html
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>QR Code Label Generator for ASN in Paperless-ngx</title>
|
||||
<link rel="canonical" href="https://tobiasmaier.info/asn-qr-code-label-generator/" />
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
|
||||
defer
|
||||
></script>
|
||||
<style>
|
||||
@media print {
|
||||
/* See https://caniuse.com/css-paged-media */
|
||||
@page {
|
||||
/* Remove default margin set by the browser */
|
||||
margin: 0mm;
|
||||
size: A4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="print:p-0" x-data="qrCodeApp()">
|
||||
<div class="container mx-auto print:hidden">
|
||||
<h1 class="mb-4 text-xl font-bold print:hidden">
|
||||
QR Code Label Generator for
|
||||
<abbr title="Archive Serial Number">ASN</abbr> in Paperless-ngx
|
||||
</h1>
|
||||
<div
|
||||
class="prose prose-a:text-blue-600 prose-a:underline hover:prose-a:text-blue-700 mb-4 print:hidden"
|
||||
>
|
||||
<p>
|
||||
This tool generates QR code labels for the
|
||||
<a
|
||||
href="https://docs.paperless-ngx.com/advanced_usage/#archive-serial-number-assignment"
|
||||
>Archive Serial Number (ASN)</a
|
||||
>
|
||||
feature in
|
||||
<a href="https://docs.paperless-ngx.com/">Paperless-ngx</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The <abbr title="Archive Serial Number">ASN</abbr> feature allows you
|
||||
to assign a unique serial number to each document in your archive.
|
||||
This is useful if you want to refer to a document in a paperless
|
||||
workflow. For example, you can print the
|
||||
<abbr title="Archive Serial Number">ASN</abbr>
|
||||
on a document and then use it to search for the document in
|
||||
Paperless-ngx.
|
||||
</p>
|
||||
|
||||
<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>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To use this tool, enter the start number, prefix, and number of
|
||||
leading zeros. Then click the "Regenerate Labels" button. The labels
|
||||
will be generated and displayed below. You can then print the labels
|
||||
by clicking the "Print Labels" button.
|
||||
</p>
|
||||
</div>
|
||||
<form class="mb-8 print:hidden">
|
||||
<!-- User Input Fields -->
|
||||
<div class="mb-5 grid grid-cols-1 gap-5 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
for="startNumber"
|
||||
class="mb-2 block text-sm font-medium text-gray-900"
|
||||
>Start Number</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="startNumber"
|
||||
x-model="startNumber"
|
||||
min="1"
|
||||
step="1"
|
||||
value="1"
|
||||
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 class="mt-1">
|
||||
<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 <strong>next batch</strong> of labels should
|
||||
<strong
|
||||
>start with
|
||||
<span x-text="parseInt(startNumber, 10) + 189"
|
||||
>190</span
|
||||
></strong
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="prefix"
|
||||
class="mb-2 block text-sm font-medium text-gray-900"
|
||||
>Prefix</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="prefix"
|
||||
x-model="prefix"
|
||||
value="ASN"
|
||||
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 class="mt-1">
|
||||
<p
|
||||
class="prose prose-sm prose-a:text-blue-600 prose-a:underline hover:prose-a:text-blue-700 max-w-none"
|
||||
>
|
||||
If you change this, <strong>update the prefix</strong> in
|
||||
Paperless-ngx accordingly via
|
||||
<a
|
||||
href="https://docs.paperless-ngx.com/configuration/#PAPERLESS_CONSUMER_ASN_BARCODE_PREFIX"
|
||||
><code>PAPERLESS_CONSUMER_ASN_BARCODE_PREFIX</code></a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="leadingZeros"
|
||||
class="mb-2 block text-sm font-medium text-gray-900"
|
||||
>Number of Leading Zeros</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="leadingZeros"
|
||||
x-model="leadingZeros"
|
||||
value="5"
|
||||
min="0"
|
||||
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>
|
||||
<div class="flex items-start">
|
||||
<div class="flex h-5 items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="borderToggle"
|
||||
x-model="borderToggle"
|
||||
class="focus:ring-3 h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300"
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
for="borderToggle"
|
||||
class="ms-2 text-sm font-medium text-gray-900"
|
||||
>Show Border</label
|
||||
>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click.prevent="generateLabels()"
|
||||
class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 sm:w-auto"
|
||||
>
|
||||
Regenerate Labels
|
||||
</button>
|
||||
<button
|
||||
@click.prevent="printLabels()"
|
||||
class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 sm:w-auto"
|
||||
>
|
||||
Print Labels
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-[210mm] border px-[9mm] py-[13.5mm] print:w-full print:border-0"
|
||||
>
|
||||
<!-- Display QR Code Labels -->
|
||||
<ol class="grid grid-cols-7 gap-x-[2.5mm]">
|
||||
<template x-for="label in labels">
|
||||
<li
|
||||
class="flex h-[10mm] w-[25.4mm] items-center border p-1"
|
||||
:class="{'border-transparent': !borderToggle}"
|
||||
>
|
||||
<img
|
||||
:src="label.qrCodeUrl"
|
||||
alt=""
|
||||
width="100"
|
||||
height="100"
|
||||
class="mr-[2mm] aspect-square h-[8mm] w-[8mm] flex-none"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<div
|
||||
class="flex-grow text-sm"
|
||||
style="font-size: 2mm"
|
||||
x-text="label.text"
|
||||
></div>
|
||||
</li>
|
||||
</template>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<footer class="mt-8 bg-gray-200 py-4 text-center print:hidden">
|
||||
<p>
|
||||
© 2023
|
||||
<a
|
||||
href="https://tobiasmaier.info"
|
||||
class="text-blue-600 underline hover:text-blue-700"
|
||||
>Tobias L. Maier</a
|
||||
>. All rights reserved. Licensed under the
|
||||
<a
|
||||
href="https://www.gnu.org/licenses/agpl-3.0.html"
|
||||
title="GNU Affero General Public License"
|
||||
class="text-blue-600 underline hover:text-blue-700"
|
||||
>AGPL v3.0</a
|
||||
>.
|
||||
<a
|
||||
href="https://github.com/tmaier/asn-qr-code-label-generator"
|
||||
class="text-blue-600 underline hover:text-blue-700"
|
||||
>Contribute via GitHub</a
|
||||
>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
function qrCodeApp() {
|
||||
return {
|
||||
startNumber: 1,
|
||||
prefix: "ASN",
|
||||
leadingZeros: 4,
|
||||
borderToggle: false,
|
||||
labels: [],
|
||||
|
||||
generateLabels() {
|
||||
this.labels = [];
|
||||
let totalLabels = 7 * 27; // 7 columns x 27 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++) {
|
||||
let number = startNumberInt + i;
|
||||
let paddedNumber = number
|
||||
.toString()
|
||||
.padStart(leadingZerosInt + 1, "0");
|
||||
let text = this.prefix + paddedNumber;
|
||||
// See https://developers.google.com/chart/infographics/docs/qr_codes
|
||||
let qrCodeUrl = `https://chart.googleapis.com/chart?cht=qr&chl=${encodeURIComponent(
|
||||
text
|
||||
)}&chs=300x300&chld=L|0`;
|
||||
|
||||
this.labels.push({ qrCodeUrl, text });
|
||||
}
|
||||
},
|
||||
printLabels() {
|
||||
window.print();
|
||||
},
|
||||
init() {
|
||||
this.generateLabels();
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue