B4L/buildfor_life_repair
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Label: large ID below barcode (9pt, same as title), left-align text
Deploy to LXC / deploy (push) Successful in 19s
Details

Browse Source 
- Barcode rendered without embedded text (includetext: false)
- ID rendered as separate HTML text at 9pt bold with letter-spacing
- All label text left-aligned instead of centred
- Barcode height reduced to 5mm to fit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Alexander Grabowski
2026-04-13 09:57:51 +07:00
parent 2f1675af1d
commit a0e32e679e
4 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/server/barcode.ts
+1 -2
View File
@@ -7,8 +7,7 @@ export async function generateBarcodeSvg(text: string): Promise<string> {
text, text,
scale: 2, scale: 2,
height: 8, height: 8,
includetext: true, includetext: false,
textsize: 10,
textxalign: 'center' textxalign: 'center'
}); });
src/routes/(print)/print/batch/+page.svelte
+6 -3
View File
@@ -18,7 +18,7 @@
</svelte:head> </svelte:head>
<div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;"> <div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;"> <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
<a href="/batch-print" style="color: #2563eb; font-size: 14px;">&#8592; Back</a> <a href="/batch-print" style="color: #2563eb; font-size: 14px;">&#8592; Back</a>
<button onclick={() => window.print()} <button onclick={() => window.print()}
style="background: #2563eb; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer;"> style="background: #2563eb; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer;">
@@ -32,7 +32,7 @@
{#each data.labels as label} {#each data.labels as label}
<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;"> <div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: center;"> <div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: left;">
<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;"> <div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
{label.title} {label.title}
</div> </div>
@@ -50,7 +50,10 @@
</div> </div>
{/if} {/if}
<div style="margin-top: 0.5mm;"> <div style="margin-top: 0.5mm;">
<img src={label.barcodeDataUrl} alt={label.shortId} style="height: 6mm; width: auto; max-width: 56mm;" /> <img src={label.barcodeDataUrl} alt={label.shortId} style="height: 5mm; width: auto; max-width: 56mm;" />
</div>
<div style="font-size: 9pt; font-weight: bold; color: #000; letter-spacing: 1.5px; margin-top: 0.3mm;">
{label.shortId}
</div> </div>
</div> </div>
</div> </div>
src/routes/(print)/print/component/[id]/+page.svelte
+7 -4
View File
@@ -19,9 +19,9 @@
</svelte:head> </svelte:head>
<div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;"> <div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;"> <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
<a href="/components/{data.component.id}" style="color: #2563eb; font-size: 14px;">&#8592; Back</a> <a href="/components/{data.component.id}" style="color: #2563eb; font-size: 14px;">&#8592; Back</a>
<div style="display: flex; align-items: center; gap: 12px;"> <div style="display: flex; align-items: flex-start; gap: 12px;">
<label style="font-size: 14px; color: #666;"> <label style="font-size: 14px; color: #666;">
Copies: Copies:
<input type="number" bind:value={copies} min="1" max="20" <input type="number" bind:value={copies} min="1" max="20"
@@ -40,7 +40,7 @@
{#each Array(copies) as _} {#each Array(copies) as _}
<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;"> <div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: center;"> <div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: left;">
<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;"> <div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
{data.component.title} {data.component.title}
</div> </div>
@@ -52,7 +52,10 @@
<div style="font-size: 5pt; color: #666;">P/N: {data.component.partNumber}</div> <div style="font-size: 5pt; color: #666;">P/N: {data.component.partNumber}</div>
{/if} {/if}
<div style="margin-top: 0.5mm;"> <div style="margin-top: 0.5mm;">
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 6mm; width: auto; max-width: 56mm;" /> <img src={data.barcodeDataUrl} alt={data.shortId} style="height: 5mm; width: auto; max-width: 56mm;" />
</div>
<div style="font-size: 9pt; font-weight: bold; color: #000; letter-spacing: 1.5px; margin-top: 0.3mm;">
{data.shortId}
</div> </div>
</div> </div>
</div> </div>
src/routes/(print)/print/device/[id]/+page.svelte
+7 -4
View File
@@ -19,9 +19,9 @@
</svelte:head> </svelte:head>
<div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;"> <div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;"> <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
<a href="/devices/{data.device.id}" style="color: #2563eb; font-size: 14px;">&#8592; Back</a> <a href="/devices/{data.device.id}" style="color: #2563eb; font-size: 14px;">&#8592; Back</a>
<div style="display: flex; align-items: center; gap: 12px;"> <div style="display: flex; align-items: flex-start; gap: 12px;">
<label style="font-size: 14px; color: #666;"> <label style="font-size: 14px; color: #666;">
Copies: Copies:
<input type="number" bind:value={copies} min="1" max="20" <input type="number" bind:value={copies} min="1" max="20"
@@ -40,7 +40,7 @@
{#each Array(copies) as _} {#each Array(copies) as _}
<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;"> <div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: center;"> <div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: left;">
<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;"> <div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
{data.device.title} {data.device.title}
</div> </div>
@@ -58,7 +58,10 @@
</div> </div>
{/if} {/if}
<div style="margin-top: 0.5mm;"> <div style="margin-top: 0.5mm;">
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 6mm; width: auto; max-width: 56mm;" /> <img src={data.barcodeDataUrl} alt={data.shortId} style="height: 5mm; width: auto; max-width: 56mm;" />
</div>
<div style="font-size: 9pt; font-weight: bold; color: #000; letter-spacing: 1.5px; margin-top: 0.3mm;">
{data.shortId}
</div> </div>
</div> </div>
</div> </div>