Basic functionality with WASP printer

index-csv.php

@@ -152,10 +152,20 @@ if ($isPosted && $mode === 'csv') {
     }
 }
 
-// Compute pagination
+// Single-label physical dimensions (as fed by the label printer: 3.7cm wide × 2.5cm tall)
+// Content is rotated 90° so it reads correctly when applied to a spine.
+$single_feed_w_cm = 3.7;
+$single_feed_h_cm = 2.5;
+// After rotation, the visible label area is 2.5cm wide × 3.7cm tall
+$single_label_w_cm = 2.5;
+$single_label_h_cm = 3.7;
+
+$is_single = ($mode === 'single' && !empty($records));
+
+// Compute pagination (CSV/sheet mode only)
 $perPage = $cols * $rows;
 $pages = [];
-if ($records) {
+if ($records && !$is_single) {
     $pages = array_chunk($records, $perPage);
 }
 
@@ -193,10 +203,17 @@ if ($records) {
         --show-outlines: <?= $show_outlines === '1' ? 1 : 0 ?>;
     }
 
+    <?php if ($is_single): ?>
+    @page {
+        size: <?= $single_feed_w_cm ?>cm <?= $single_feed_h_cm ?>cm landscape;
+        margin: 0;
+    }
+    <?php else: ?>
     @page {
         size: var(--page-w) var(--page-h);
         margin: 0; /* we handle margins inside the .sheet via padding */
     }
+    <?php endif; ?>
 
     body {
         font-family: var(--font);
@@ -300,10 +317,78 @@ if ($records) {
 
     .controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
 
+    /* ====== SINGLE LABEL (standalone) ====== */
+    .single-label-wrap {
+        display: flex;
+        justify-content: center;
+        padding: 1rem 0;
+    }
+    .single-label-feed {
+        /* Outer box matches the physical feed size (3.7cm × 2.5cm landscape) */
+        width: <?= $single_feed_w_cm ?>cm;
+        height: <?= $single_feed_h_cm ?>cm;
+        overflow: hidden;
+        background: #fff;
+        border: 1px dashed #999;
+        position: relative;
+    }
+    .single-label {
+        /* Inner content sized as portrait (2.5cm × 3.7cm), then rotated to fit the landscape feed */
+        width: <?= $single_label_w_cm ?>cm;
+        height: <?= $single_label_h_cm ?>cm;
+        box-sizing: border-box;
+        padding: 0.06cm;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        font-size: 0.24cm;
+
+        /* Rotate 90° clockwise and re-center within the feed box */
+        transform: rotate(90deg);
+        transform-origin: center center;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: calc(-<?= $single_label_h_cm ?>cm / 2);
+        margin-left: calc(-<?= $single_label_w_cm ?>cm / 2);
+    }
+    .single-label .label-text {
+        display: grid;
+        gap: 0.04cm;
+        text-align: center;
+        margin: 0;
+        line-height: 1.2;
+        font-size: inherit;
+        word-break: break-word;
+    }
+    .single-label .barcode-block {
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+        margin-top: 0.02cm;
+    }
+    .single-label .barcode-block svg {
+        display: block;
+        height: 0.8cm;
+        width: auto;
+    }
+
     @media print {
-        .pane, .controls, .error, .info, .subtle, h1 { display: none !important; }
+        .pane, .controls, .error, .info, .subtle, h1, .wrap { display: none !important; }
-        body { margin: 0; background: white; }
+        body { margin: 0; padding: 0; background: white; }
         .sheet { border: none; }
+
+        /* Single label: fill the page exactly */
+        .single-label-wrap { display: flex !important; padding: 0; margin: 0; justify-content: start; }
+        .single-label-feed {
+            width: <?= $single_feed_w_cm ?>cm;
+            height: <?= $single_feed_h_cm ?>cm;
+            border: none;
+            margin: 0;
+        }
+
+        /* Sheet mode: show sheets */
+        .sheets { display: grid !important; }
     }
 </style>
 <script>
@@ -448,8 +533,8 @@ function jump(id){ document.getElementById(id)?.scrollIntoView({behavior:'smooth
         </div>
     <?php endif; ?>
 
-    <!-- Preview / Sheets -->
+    <!-- Preview / Sheets (CSV mode) -->
-    <?php if ($records && !$errors): ?>
+    <?php if ($records && !$errors && !$is_single): ?>
         <div class="controls">
             <button onclick="goPrint()">Print</button>
             <span class="info"><?= count($records) ?> label(s), <?= count($pages) ?> sheet(s) @ <?= $cols ?>×<?= $rows ?>.</span>
@@ -486,6 +571,16 @@ function jump(id){ document.getElementById(id)?.scrollIntoView({behavior:'smooth
         </div>
     <?php endif; ?>
 
+    <!-- Single label preview -->
+    <?php if ($is_single && !$errors):
+        $rec = $records[0];
+    ?>
+        <div class="controls">
+            <button onclick="goPrint()">Print Label</button>
+            <span class="info">Single label — <?= $single_label_w_cm ?>cm × <?= $single_label_h_cm ?>cm</span>
+        </div>
+    <?php endif; ?>
+
     <?php if (!$autoloadOk): ?>
         <div class="error">
             Composer autoload not found. Install the barcode library with:<br>
@@ -495,5 +590,26 @@ function jump(id){ document.getElementById(id)?.scrollIntoView({behavior:'smooth
     <?php endif; ?>
 
 </div>
+
+<?php if ($is_single && !$errors):
+    $rec = $records[0];
+?>
+<div class="single-label-wrap">
+    <div class="single-label-feed">
+        <div class="single-label">
+            <div class="label-text">
+                <div class="label-text-line"><?= nl2br(safe($rec['data1'] ?? '')) ?></div>
+                <div class="label-text-line"><?= nl2br(safe($rec['data2'] ?? '')) ?></div>
+                <div class="label-text-line"><?= nl2br(safe($rec['data3'] ?? '')) ?></div>
+                <div class="label-text-line"><?= nl2br(safe($rec['data4'] ?? '')) ?></div>
+            </div>
+            <div class="barcode-block">
+                <?= render_datamatrix_svg((string)($rec['barcode'] ?? '')) ?>
+            </div>
+        </div>
+    </div>
+</div>
+<?php endif; ?>
+
 </body>
 </html>