From 7e7e3b3414b28e3d23401f5a500406cdb2dc1dd9 Mon Sep 17 00:00:00 2001
From: ChristofK <christof.kudla@kudla.info>
Date: Wed, 16 Jul 2025 18:40:02 +0200
Subject: [PATCH 1/2] Add layout adjustment options: vertical/horizontal
 offset, label height, and scale.

This commit adds several new customization options to improve label alignment and output quality when printing QR code labels:

- Introduced vertical and horizontal offset inputs to shift the entire label grid for fine alignment.
- Added label height input to adjust the height of each individual label in millimeters.
- Added content scale input to resize the entire label content (QR code and text).

Also updated the UI to include explanatory text for each of these parameters, and added a summary paragraph to the main instructions describing how each setting affects the layout.
---
 index.html | 108 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 95 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 2bfaea1..f638852 100644
--- a/index.html
+++ b/index.html
@@ -67,6 +67,16 @@
           by clicking the "Print Labels" button.
         </p>
 
+        <p>
+          To fine-tune the label alignment for your specific printer or label sheet, you can adjust the following parameters: 
+          <strong>Vertical Offset</strong> moves the entire label grid up or down on the page, while 
+          <strong>Horizontal Offset</strong> shifts it left or right. 
+          <strong>Label Height</strong> controls the height of each individual label, and 
+          <strong>Content Scale</strong> resizes the text and QR code inside each label. 
+          The <strong>Show Border</strong> option adds a visible border around each label, which can help with calibration and print alignment.
+          Use these settings to ensure the labels are printed accurately on your sheet.
+        </p>
+
         <p>
           One <strong>known limitation of this tool</strong> is that it
           <strong>only works on Google Chrome and possibly Firefox</strong>.
@@ -153,6 +163,18 @@
               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>
+          <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"
+              >
+                The following parameters are useful for debugging or to calibrate the print out.
+              </p>
+            </div>
+          
+          </div>
           <div>
             <div class="flex items-start">
               <div class="flex h-5 items-center">
@@ -169,14 +191,54 @@
                 >Show Border</label
               >
             </div>
-            <div class="mt-1">
+
+          </div>
+          
+          <div>
+            <label for="verticalOffset" class="block text-sm font-medium">Vertical Offset (mm)</label>
+            <input type="number" id="verticalOffset" x-model="verticalOffset" step="0.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"
               >
-                This may be useful for debugging or to calibrate the print out.
+                Adjusts the vertical position of the entire label sheet on the page. Use this if the labels are printing too high or too low. 
               </p>
             </div>
           </div>
+          <div>
+            <label for="horizontalOffset" class="block text-sm font-medium">Horizontal Offset (mm)</label>
+            <input type="number" id="horizontalOffset" x-model="horizontalOffset" step="0.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"
+              >
+                Adjusts the horizontal position of the entire label sheet on the page. Use this if the labels are printing too far to the left or right.
+              </p>
+            </div>
+          </div>
+          <div>
+            <label for="labelHeight" class="block text-sm font-medium">Label Height (mm)</label>
+            <input type="number" id="labelHeight" x-model="labelHeight" step="0.01" min="8" max="12" 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"
+              >
+                Sets the height of each individual label in millimeters. Adjust this if the labels don't align vertically with the label sheet. 
+              </p>
+            </div>
+          </div>
+          <div>
+            <label for="scale" class="block text-sm font-medium">Content Scale (%)</label>
+            <input type="number" id="scale" x-model="scale" min="50" max="100" step="0.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"
+              >
+                Scales the entire content inside each label. Use this if the text or QR code is too large or too small. 
+              </p>
+            </div>
+          </div>
+
         </div>
         <button
           @click.prevent="generateLabels()"
@@ -193,23 +255,39 @@
       </form>
     </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"
-    >
+      <div
+          class="container mx-auto w-[210mm] print:w-full print:max-w-full print:border-0"
+          :style="`
+            padding-top: calc(13.5mm + ${verticalOffset}mm);
+            padding-left: calc(8.45mm + ${horizontalOffset}mm);
+            padding-right: 8.45mm;
+            padding-bottom: 13.5mm;
+          `"
+        >
       <!-- Display QR Code Labels -->
-      <ol class="grid grid-cols-7 gap-x-[2.55mm]">
+      <ol
+          class="grid grid-cols-7 gap-x-[2.55mm]"
+          :style="`transform: translateX(${horizontalOffset}mm)`"
+        >
         <template x-for="label in labels">
-          <li class="h-[10mm] w-[25.4mm]">
+          <li
+            :style="`height: ${labelHeight}mm; width: 25.4mm;`"
+          >
             <div
-              class="flex 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="flex items-center justify-center border-[0.5mm]"
+              :style="`
+                height: ${labelHeight - 0.5}mm;
+                width: 24.4mm;
+                transform: scale(${scale / 100});
+                transform-origin: center;
+              `"
+              :class="{'border-transparent': !borderToggle}"
             >
               <img
                 :src="label.qrCodeUrl"
-                alt=""
-                width="100"
-                height="100"
-                class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
+                alt="QR Code"
+                class="aspect-square flex-none"
+                :style="`height: ${labelHeight - 1}mm; width: ${labelHeight - 1}mm;`"
                 referrerpolicy="no-referrer"
               />
               <div
@@ -257,6 +335,10 @@
           startNumber: 1,
           prefix: "ASN",
           leadingZeros: 4,
+          verticalOffset: 0,
+          horizontalOffset: 0,
+          labelHeight: 10,
+          scale: 100,          
           borderToggle: false,
           labels: [],
 

From c4847590add169603fbc6a0a14de7cede84466bd Mon Sep 17 00:00:00 2001
From: ChristofK <christof.kudla@kudla.info>
Date: Wed, 16 Jul 2025 18:45:30 +0200
Subject: [PATCH 2/2] Add features and layout customization options and update
 README documentation

This commit adds several new layout customization features to the QR code label generator:

- Added support for vertical and horizontal offset in mm to shift the entire label grid
- Added adjustable label height (in mm) for better compatibility with various printers
- Added content scale (%), allowing QR code and text size to be fine-tuned
- Introduced a "Show Border" toggle to display label borders for alignment and calibration

These options allow precise tuning of the print layout for Avery L4731REV-25 sheets, improving print accuracy across different printers and paper feeds.

The README file was also updated to reflect the new functionality under the "Features" section, and the overall project description was improved for clarity.
---
 README.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/README.md b/README.md
index 1e7339a..c3c8aac 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,18 @@ 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))
 
+### Features
+
+- Generate up to 189 QR code labels in a batch
+- Customize start number, prefix, and number formatting
+- Adjustable layout options for precise printer alignment:
+  - Vertical Offset (mm): shifts the label grid up or down
+  - Horizontal Offset (mm): shifts the label grid left or right
+  - Label Height (mm): controls the vertical size of each label
+  - Content Scale (%): scales QR code and text inside each label
+  - Show Border: toggles visible borders to help with calibration
+- Print-ready formatting for A4 label sheets
+
 ### Limitations
 
 The application currently has the following limitations: