@@ -73,7 +73,7 @@ async def lifespan(app: FastAPI): # noqa: ARG001
app = FastAPI (
app = FastAPI (
title = " Fichero Printer API " ,
title = " Fichero Printer API " ,
description = " REST API for the Fichero D11s (AiYin) thermal label printer. " ,
description = " REST API for the Fichero D11s (AiYin) thermal label printer. " ,
version = " 0.1.9 " ,
version = " 0.1.13 " ,
lifespan = lifespan ,
lifespan = lifespan ,
docs_url = None ,
docs_url = None ,
redoc_url = None ,
redoc_url = None ,
@@ -96,324 +96,498 @@ def _ui_html() -> str:
default_address = _DEFAULT_ADDRESS or " "
default_address = _DEFAULT_ADDRESS or " "
default_transport = " classic " if _DEFAULT_CLASSIC else " ble "
default_transport = " classic " if _DEFAULT_CLASSIC else " ble "
return f """ <!doctype html>
return f """ <!doctype html>
<html lang= " en " >
<html lang= " en " data-theme= " dark "
<head>
<head>
<meta charset= " utf-8 " >
<meta charset= " utf-8 " >
<meta name= " viewport " content= " width=device-width, initial-scale=1 " >
<meta name= " viewport " content= " width=device-width, initial-scale=1 " >
<title>Fichero Printer</title>
<title>Fichero Printer</title>
<style>
<style>
*, *::before, *::after {{ box-sizing: border-box; margin: 0; padding: 0; }}
:root {{
:root {{
--bg : #f4efe6 ;
--s0 : #161819 ;
--panel: #fffaf2 ;
--s1: #1c1e20 ;
--line: #d8cdbd ;
--s2: #232628 ;
--ink : #2d241d ;
--s3 : #2a2d30 ;
--muted: #6c6258 ;
--ink: #e4e7eb ;
--accent: #b55e33 ;
--muted: #949ba4 ;
--accent-2: #245b4b ;
--dim: #5d6670 ;
--brand: #07addf;
--brand-h: #0699c7;
--brand-glow: rgba(7,173,223,.18);
--ok: #6bb88a;
--warn: #d4a24c;
--err: #d45454;
--border: rgba(228,231,235,.08);
--border-e: rgba(228,231,235,.14);
--ctrl-bg: #141617;
--ctrl-border: rgba(228,231,235,.10);
--r: 10px;
--r-lg: 14px;
}}
}}
* {{ box-sizing: border-box; }}
html {{ height: 100%; }}
body {{
body {{
margin: 0 ;
min-height: 100dvh ;
font-family: " Noto Sans "
font-family: " Inter " , ui-sans-serif , system-ui, sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--ink);
color: var(--ink);
background:
background-color: var(--s0);
radial-gradient(circle at top left, #fff8ed 0, transparent 35%),
background-image:
linear -gradient(180deg, #efe4d3 0%, var(--bg) 100 %);
radial -gradient(ellipse at 10% 90%, rgba(7,173,223,.07) 0%, transparent 55 %),
radial-gradient(ellipse at 90% 5%, rgba(7,173,223,.04) 0%, transparent 55%);
background-attachment: fixed;
}}
}}
/* ── Header ─────────────────────────────────────── */
header {{
position: sticky;
top: 0;
z-index: 100;
padding: 10px 20px;
display: flex;
align-items: center;
gap: 12px;
background: rgba(22,24,25,.82);
backdrop-filter: blur(16px) saturate(1.5);
-webkit-backdrop-filter: blur(16px) saturate(1.5);
border-bottom: 1px solid var(--border);
}}
.brand {{ font-size: 1.05rem; font-weight: 700; letter-spacing: -.025em; }}
.brand em {{ color: var(--brand); font-style: normal; }}
.header-right {{ margin-left: auto; display: flex; align-items: center; gap: 8px; }}
.status-pill {{
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 99px;
font-size: .78rem;
font-weight: 600;
background: var(--s2);
border: 1px solid var(--border-e);
color: var(--muted);
transition: .25s;
cursor: default;
white-space: nowrap;
}}
.status-pill .dot {{
width: 7px; height: 7px;
border-radius: 50%;
background: var(--dim);
transition: .25s;
}}
.status-pill.ok {{ color: var(--ok); border-color: rgba(107,184,138,.3); }}
.status-pill.ok .dot {{ background: var(--ok); box-shadow: 0 0 6px var(--ok); }}
.status-pill.err {{ color: var(--err); border-color: rgba(212,84,84,.3); }}
.status-pill.err .dot {{ background: var(--err); box-shadow: 0 0 6px var(--err); }}
/* ── Layout ─────────────────────────────────────── */
main {{
main {{
max-width: 98 0px;
max-width: 100 0px;
margin: 0 auto;
margin: 0 auto;
padding: 24px 16px 4 0px;
padding: 24px 16px 6 0px;
}}
.hero {{
margin-bottom: 20px;
padding: 24px;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(255, 250, 242, 0.92);
backdrop-filter: blur(4px);
}}
h1, h2 {{ margin: 0 0 12px; }}
.muted {{ color: var(--muted); }}
.grid {{
display: grid;
display: grid;
gap: 16px;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(28 0px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(29 0px, 1fr));
}}
}}
main > .full {{ grid-column: 1 / -1; }}
/* ── Cards ──────────────────────────────────────── */
.card {{
.card {{
padding: 18 px;
padding: 20 px;
border: 1px solid var(--line );
background: var(--s1 );
border-radius : 16 px;
border: 1px solid var(--border) ;
background : var(--panel );
border-radius : var(--r-lg );
box-shadow: 0 8px 24 px rgba(45, 36, 29, 0.06 );
box-shadow: 0 8px 3 2px rgba(0,0,0,.3 );
}}
}}
.card-title {{
font-size: .7rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--dim);
margin-bottom: 14px;
}}
/* ── Form ───────────────────────────────────────── */
label {{
label {{
display: block;
display: block;
margin: 10px 0 6px ;
font-size: .8rem ;
font-size: 0.92rem;
font-weight: 600;
font-weight: 600;
color: var(--muted);
margin: 12px 0 5px;
}}
}}
input, select, textarea, button {{
label:first-child {{ margin-top: 0; }}
input, select, textarea {{
width: 100%;
width: 100%;
border-radius: 10 px;
padding: 8px 11 px;
border: 1px solid var(--line );
border-radius: var(--r );
padding : 10 px 12px ;
border : 1px solid var(--ctrl-border) ;
background: var(--ctrl-bg);
color: var(--ink);
font: inherit;
font: inherit;
transition: border-color .15s, box-shadow .15s;
outline: none;
}}
}}
textarea {{ min-height: 110px; resize: vertical; }}
input:focus, select:focus, textarea:focus {{
.row {{
border-color: var(--brand);
display: grid ;
box-shadow: 0 0 0 3px rgba(7,173,223,.2) ;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}}
}}
.inline {{
textarea {{ min-height: 90px; resize: vertical; }}
display: flex;
.two-col {{ display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }}
gap: 10px;
.check-row {{ display: flex; align-items: center; gap: 8px; margin-top: 14px; }}
.check-row input[type=checkbox] {{ width: 15px; height: 15px; accent-color: var(--brand); }}
.check-row label {{ margin: 0; font-size: .85rem; color: var(--ink); }}
/* ── Buttons ────────────────────────────────────── */
.btn {{
display: inline-flex;
align-items: center;
align-items: center;
margin-top: 12px ;
justify-content: center ;
}}
gap: 6px;
.inline input[type= " checkbox " ] {{ width: auto; }}
padding: 8px 16px;
button {{
border-radius: var(--r);
cursor: pointer;
font-weight: 700;
color: #fff;
background: var(--accent);
border: none;
border: none;
font: inherit;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
transition: background .15s, box-shadow .15s, opacity .15s;
}}
}}
button.alt {{ background: var(--accent-2) ; }}
.btn:disabled {{ opacity: .5; cursor: not-allowed ; }}
.btn-primary {{
background: var(--brand);
color: #fff;
}}
.btn-primary:not(:disabled):hover {{
background: var(--brand-h);
box-shadow: 0 0 0 3px var(--brand-glow);
}}
.btn-secondary {{
background: var(--s3);
color: var(--ink);
border: 1px solid var(--border-e);
}}
.btn-secondary:not(:disabled):hover {{
background: var(--s3);
border-color: var(--brand);
}}
.btn-group {{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }}
.btn-group .btn {{ flex: 1; min-width: 110px; }}
/* ── Address row ────────────────────────────────── */
.addr-row {{ display: flex; gap: 8px; }}
.addr-row input {{ flex: 1; min-width: 0; }}
.addr-row .btn {{ padding: 8px 12px; white-space: nowrap; flex-shrink: 0; }}
/* ── Output / pre ───────────────────────────────── */
pre {{
pre {{
background: var(--s0);
border: 1px solid var(--border);
border-radius: var(--r);
color: var(--muted);
font-family: " JetBrains Mono " , " Fira Code " , ui-monospace, monospace;
font-size: .78rem;
line-height: 1.6;
padding: 14px;
min-height: 130px;
overflow: auto;
overflow: auto;
margin: 0 ;
white-space: pre-wrap ;
padding: 12px ;
word-break: break-all ;
border-radius: 12px;
background: #241f1a;
color: #f7efe4;
min-height: 140px;
}}
}}
.actions {{
pre.ok {{ color: var(--ok); border-color: rgba(107,184,138,.2); }}
display: flex;
pre.err {{ color: var(--err); border-color: rgba(212,84,84,.2); }}
gap: 10px;
flex-wrap: wrap;
/* ── Spinner ────────────────────────────────────── */
margin-top: 12px;
@keyframes spin {{ to {{ transform: rotate(360deg); }} }}
.spinner {{
display: inline-block;
width: 13px; height: 13px;
border: 2px solid rgba(255,255,255,.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin .65s linear infinite;
}}
}}
.actions button {{
width: auto;
/* ── Footer ─────────────────────────────────────── */
min-width: 140px;
footer {{
text-align: center;
padding: 16px;
font-size: .72rem;
color: var(--dim);
}}
}}
@media (max-width: 640px) {{
footer a {{ color: var(--dim); text-decoration: none; }}
.row {{ grid-template-columns: 1fr ; }}
footer a:hover {{ color: var(--brand) ; }}
.actions button {{ width: 100%; }}
@media (max-width: 520px) {{
.two-col {{ grid-template-columns: 1fr; }}
.btn-group .btn {{ min-width: 0; }}
}}
}}
</style>
</style>
</head>
</head>
<body>
<body>
<main>
<section class= " hero " >
<h1>Fichero Printer</h1>
<p class= " muted " >Home Assistant print console for status, text labels, and image uploads.</p>
<p class= " muted " >API docs remain available at <a href= " docs " >/docs</a>.</p>
</section>
<section class= " grid "
<header >
<div class= " car d" >
<span class= " bran d" >Fichero<em>Printer</em></span>
<h2>Connection</h2 >
<div class= " header-right "
<label for= " address " >Printer address</label >
<span class= " status-pill " id= " status-pill "
<div style= " display:flex;gap:8px;align-items:center "
<span class= " dot " ></span >
<input id= " address " value= " { default_address } " placeholder= " C9:48:8A:69:D5:C0 " style= " flex:1;width:auto "
<span id= " status-text " >Unknown</span >
<button type= " button " id= " scan-btn " class= " alt " style= " width:auto;white-space:nowrap " onclick= " scanAddress() " >🔌 Scan</butto n>
</spa n>
</div >
<button class= " btn btn-secondary " style= " padding:6px 10px;font-size:.78rem " onclick= " refreshStatus() " >↻</button >
</div>
</header>
<div class= " row "
<main >
<div>
<label for= " transport " >Transport</label>
<select id= " transport " >
<option value= " ble " { " selected " if default_transport == " ble " else " " } >BLE</option>
<option value= " classic " { " selected " if default_transport == " classic " else " " } >Classic</option>
</select>
</div>
<div>
<label for= " channel " >RFCOMM channel</label>
<input id= " channel " type= " number " min= " 1 " max= " 30 " value= " { _DEFAULT_CHANNEL } " >
</div>
</div>
<div class= " actions "
<!-- Connection card -- >
<button type= " button " class= " alt " onclick= " runGet( ' status ' ) " >Get Status</button >
<div class= " card "
<button type= " button " class= " alt " onclick= " runGet( ' info ' ) " >Get Info</button >
<p class= " card-title " >Connection</p >
</div>
</div>
<div class= " card "
<label for= " address " >Bluetooth address</label >
<h2>Output</h2 >
<div class= " addr-row "
<pre id= " output " >Ready.</pre >
<input id= " address " value= " { default_address } " placeholder= " AA:BB:CC:DD:EE:FF "
</div >
<button class= " btn btn-secondary " id= " scan-btn " onclick= " scanAddress() "
<span id= " scan-icon " >⟳</span> Scan
</button>
</div>
<div class= " card " >
<div class= " two-col " >
<h2>Print Text</h2 >
<div >
<label for= " tex t " >Tex t</label>
<label for= " transpor t " >Transpor t</label>
<textarea id= " text " placeholder= " Hello from Home Assistant " ></textarea >
<select id= " transport "
<div class= " row "
<option value= " ble " { " selected " if default_transport == " ble " else " " } >BLE</option >
<div >
<option value= " classic " { " selected " if default_transport == " classic " else " " } >Classic BT</option >
<label for= " text_density " >Density</label>
<select id= " text_density " >
<option value= " 0 " >0</option>
<option value= " 1 " >1</option>
<option value= " 2 " selected>2</option>
</select>
</div>
<div>
<label for= " text_copies " >Copies</label>
<input id= " text_copies " type= " number " min= " 1 " max= " 99 " value= " 1 " >
</div>
</div>
<div class= " row " >
<div>
<label for= " text_font_size " >Font size</label>
<input id= " text_font_size " type= " number " min= " 6 " max= " 200 " value= " 30 " >
</div>
<div>
<label for= " text_label_length " >Label length (mm)</label>
<input id= " text_label_length " type= " number " min= " 5 " max= " 500 " value= " 30 " >
</div>
</div>
<label for= " text_paper " >Paper</label>
<select id= " text_paper " >
<option value= " gap " selected>gap</option>
<option value= " black " >black</option>
<option value= " continuous " >continuous</option>
</select>
</select>
<div class= " actions " >
<button type= " button " onclick= " printText() " >Print Text</button>
</div>
</div>
</div>
<div>
<label for= " channel " >RFCOMM channel</label>
<input id= " channel " type= " number " min= " 1 " max= " 30 " value= " { _DEFAULT_CHANNEL } " >
</div>
</div>
<div class= " card " >
<div class= " btn-group " >
<h2>Print Image</h2 >
<button class= " btn btn-secondary " onclick= " runGet( ' status ' ) " >Status</button >
<label for= " image_file " >Image file</label >
<button class= " btn btn-secondary " onclick= " runGet( ' info ' ) " >Device info</button >
<input id= " image_file " type= " file " accept= " image/* "
</div >
<div class= " row "
</div >
<div>
<label for= " image_density " >Density</label >
<!-- Output card -- >
<select id= " image_density " >
<div class= " card " >
<option value= " 0 " >0</option >
<p class= " card-title " >Response</p >
<option value= " 1 " >1</option >
<pre id= " output " >Waiting for a command…</pre >
<option value= " 2 " selected>2</option >
</div >
</select>
</div >
<!-- Print text card -- >
<div>
<div class= " card "
<label for= " image_copies " >Copies</label >
<p class= " card-title " >Print text</p >
<input id= " image_copies " type= " number " min= " 1 " max= " 99 " value= " 1 " >
</div >
<label for= " text " >Text</label >
</div >
<textarea id= " text " placeholder= " Hello from Home Assistant " ></textarea >
<div class= " row " >
<div>
<div class= " two-col "
<label for= " image_label_length " >Label length (mm)</label >
<div >
<input id= " image_label_length " type= " number " min= " 5 " max= " 500 " value= " 30 "
<label for= " text_density " >Density</label >
</div >
<select id= " text_density "
<div class= " inline "
<option value= " 0 " >0 – >
<input id= " image_dither " type= " checkbox " checked >
<option value= " 1 " >1 – >
<label for= " image_dither " >Enable dithering</label >
<option value= " 2 " selected>2 – >
</div >
</select >
</div>
</div>
<label for= " image_paper " >Paper</label >
<div >
<label for= " text_copies " >Copies</label>
<input id= " text_copies " type= " number " min= " 1 " max= " 99 " value= " 1 " >
</div>
</div>
<div class= " two-col " >
<div>
<label for= " text_font_size " >Font size (pt)</label>
<input id= " text_font_size " type= " number " min= " 6 " max= " 200 " value= " 30 " >
</div>
<div>
<label for= " text_label_length " >Label length (mm)</label>
<input id= " text_label_length " type= " number " min= " 5 " max= " 500 " value= " 30 " >
</div>
</div>
<label for= " text_paper " >Paper type</label>
<select id= " text_paper " >
<option value= " gap " selected>Gap / label</option>
<option value= " black " >Black mark</option>
<option value= " continuous " >Continuous</option>
</select>
<div class= " btn-group " >
<button class= " btn btn-primary " onclick= " printText() " >🖨 Print text</button>
</div>
</div>
<!-- Print image card -->
<div class= " card " >
<p class= " card-title " >Print image</p>
<label for= " image_file " >Image file (PNG / JPEG / BMP / WEBP)</label>
<input id= " image_file " type= " file " accept= " image/* " >
<div class= " two-col " >
<div>
<label for= " image_density " >Density</label>
<select id= " image_density " >
<option value= " 0 " >0 –
<option value= " 1 " >1 –
<option value= " 2 " selected>2 –
</select>
</div>
<div>
<label for= " image_copies " >Copies</label>
<input id= " image_copies " type= " number " min= " 1 " max= " 99 " value= " 1 " >
</div>
</div>
<div class= " two-col " >
<div>
<label for= " image_label_length " >Label length (mm)</label>
<input id= " image_label_length " type= " number " min= " 5 " max= " 500 " value= " 30 " >
</div>
<div>
<label for= " image_paper " >Paper type</label>
<select id= " image_paper " >
<select id= " image_paper " >
<option value= " gap " selected>g ap</option>
<option value= " gap " selected>G ap / label </option>
<option value= " black " >b lack</option>
<option value= " black " >B lack mark </option>
<option value= " continuous " >c ontinuous</option>
<option value= " continuous " >C ontinuous</option>
</select>
</select>
<div class= " actions " >
<button type= " button " onclick= " printImage() " >Print Image</button>
</div>
</div>
</div>
</section >
</div >
</main>
<script >
<div class= " check-row "
function commonParams() {{
<input id= " image_dither " type= " checkbox " checked>
const address = document.getElementById( " address " ).value.trim();
<label for= " image_dither " >Floyd-Steinberg dithering</label>
const classic = document.getElementById( " transport " ).value === " classic " ;
</div>
const channel = document.getElementById( " channel " ).value;
const params = new URLSearchParams();
if (address) params.set( " address " , address);
params.set( " classic " , String(classic));
params.set( " channel " , channel);
return params;
}}
async function showResponse(response) {{
<div class= " btn-group " >
const output = document.getElementById( " output " );
<button class= " btn btn-primary " onclick= " printImage() " >🖨 Print image</button>
let data;
</div>
try {{
</div>
data = await response.json();
}} catch {{
</main>
data = {{ detail: await response.text() }} ;
<footer>
Fichero Printer REST API ·
<a href= " docs " >Swagger UI</a>
</footer>
<script>
// ── Helpers ──────────────────────────────────────────
function commonParams() {{
const address = document.getElementById( " address " ).value.trim();
const classic = document.getElementById( " transport " ).value === " classic " ;
const channel = document.getElementById( " channel " ).value;
const p = new URLSearchParams();
if (address) p.set( " address " , address);
p.set( " classic " , String(classic));
p.set( " channel " , channel);
return p;
}}
function setOutput(obj, isOk) {{
const pre = document.getElementById( " output " );
pre.textContent = JSON.stringify(obj, null, 2);
pre.className = isOk ? " ok " : " err " ;
}}
async function showResponse(response) {{
let data;
try {{ data = await response.json(); }} catch {{ data = {{ detail: await response.text() }} ; }}
setOutput( {{ status: response.status, ok: response.ok, data }} , response.ok);
}}
// ── Status pill ──────────────────────────────────────
async function refreshStatus() {{
try {{
const r = await fetch( " status? " + commonParams().toString());
const d = await r.json();
const pill = document.getElementById( " status-pill " );
const txt = document.getElementById( " status-text " );
if (r.ok && d.ok) {{
pill.className = " status-pill ok " ;
txt.textContent = d.no_paper ? " No paper " : d.charging ? " Charging " : " Ready " ;
}} else {{
pill.className = " status-pill err " ;
txt.textContent = r.ok ? " Not ready " : " Not found " ;
}}
}}
output.textContent = JSON.stringify( {{ status: response.status, ok: response.ok, data }} , null, 2);
}} catch {{ /* ignore */ }}
}}
}}
async function runGet(path) {{
// auto-refresh status on load
const response = await fetch(`$ {{ path }} ?$ {{ commonParams().toString() }} ` );
window.addEventListener( " DOMContentLoaded " , refreshStatus );
await showResponse(response);
}}
async function scanAddress() {{
// ── Scan ─────────────────────────────────────────────
const btn = document.getElementById( " scan-btn " );
async function scanAddress() {{
const output = document.getElementById( " output " );
const btn = document.getElementById( " scan-btn " );
btn.disabled = true ;
const icon = document.getElementById( " scan-icon " ) ;
btn.textContent = " Scanning… "
btn.disabled = true ;
output.textContent = " S canning for pr int er (up to 8 s)… " ;
icon.outerHTML = ' <span id= " s can-icon " class= " sp inn er" ></span> ' ;
try {{
setOutput( {{ message: " Scanning for printer (up to 8 s)… " }} , true);
const response = await fetch( " scan " );
try {{
const data = await response.json( );
const r = await fetch( " scan "
if (response.ok && data.address) {{
const d = await r.json();
document.getElementById( " address " ).value = data .address;
if (r.ok && d .address) {{
output.textContent = JSON.stringify( {{ status: response.status, ok: true, data }} , null, 2) ;
document.getElementById( " address " ).value = d.address ;
}} else {{
output.textContent = JSON.stringify( {{ status: response.status, ok: false, data }} , null, 2);
}}
}} catch (e) {{
output.textContent = " Scan failed: " + e;
}} finally {{
btn.disabled = false;
btn.innerHTML = " 🔌 Scan " ;
}}
}}
setOutput( {{ status: r.status, ok: r.ok, data: d }} , r.ok);
}} catch (e) {{
setOutput( {{ error: String(e) }} , false);
}} finally {{
btn.disabled = false;
document.getElementById( " scan-icon " ).outerHTML = ' <span id= " scan-icon " >⟳</span> ' ;
}}
}}
}}
async function printText( ) {{
async function runGet(path ) {{
const form = new FormData( );
setOutput( {{ message: " Loading… " }} , true );
form.set( " text " , document.getElementById( " text " ).value );
const r = await fetch(path + " ? " + commonParams().toString() );
form.set( " density " , document.getElementById( " text_density " ).value );
await showResponse(r );
form.set( " copies " , document.getElementById( " text_copies " ).value);
}}
form.set( " font_size " , document.getElementById( " text_font_size " ).value);
form.set( " label_length " , document.getElementById( " text_label_length " ).value);
form.set( " paper " , document.getElementById( " text_paper " ).value);
form.set( " address " , document.getElementById( " address " ).value.trim());
form.set( " classic " , String(document.getElementById( " transport " ).value === " classic " ));
form.set( " channel " , document.getElementById( " channel " ).value);
const response = await fetch( " print/text " , {{ method: " POST " , body: form }} );
await showResponse(response);
}}
async function printImage() {{
// ── Print text ───────────────────────────────────────
const fileInput = document.getElementById( " image_file " );
async function printText() {{
if (!fileInput.files.length) {{
const form = new FormData();
document.getElementById( " output " ).textContent = " Select an image file first. "
form.set( " text " , document.getElementById(" text " ).value) ;
return ;
form.set( " density " , document.getElementById( " text_density " ).value) ;
}}
form.set( " copies " , document.getElementById( " text_copies " ).value);
const form = new FormData( );
form.set( " font_size " , document.getElementById( " text_font_size " ).value );
form.set( " file " , fileInput.files[0] );
form.set( " label_length " , document.getElementById( " text_label_length " ).value );
form.set( " density " , document.getElementById(" image_density " ).value);
form.set( " paper " , document.getElementById(" text_paper " ).value);
form.set( " copie s" , document.getElementById( " image_copie s" ).value);
form.set( " addres s" , document.getElementById( " addres s" ).value.trim() );
form.set( " label_length " , document.getElementById( " image_label_length " ).value );
form.set( " c lassic " , String( document.getElementById(" transport " ).value === " classic " ) );
form.set( " paper " , document.getElementById( " image_paper " ).value);
form.set( " channel " , document.getElementById( " channel " ).value);
form.set( " dither " , String(document.getElementById( " image_dither " ).checked) );
setOutput( {{ message: " Sending to printer… " }} , true );
form.set( " address " , document.getElementById( " address " ).value.trim() );
const r = await fetch( " print/text " , {{ method: " POST " , body: form }}
form.set( " classic " , String(document.getElementById( " transport " ).value === " classic " ) );
await showResponse(r );
form.set( " channel " , document.getElementById( " channel " ).value );
if (r.ok) refreshStatus( );
const response = await fetch( " print/image " , {{ method: " POST " , body: form }} );
}}
await showResponse(response);
}}
// ── Print image ──────────────────────────────────────
</script>
async function printImage() {{
const fi = document.getElementById( " image_file " );
if (!fi.files.length) {{ setOutput( {{ error: " Select an image file first. " }} , false); return; }}
const form = new FormData();
form.set( " file " , fi.files[0]);
form.set( " density " , document.getElementById( " image_density " ).value);
form.set( " copies " , document.getElementById( " image_copies " ).value);
form.set( " label_length " , document.getElementById( " image_label_length " ).value);
form.set( " paper " , document.getElementById( " image_paper " ).value);
form.set( " dither " , String(document.getElementById( " image_dither " ).checked));
form.set( " address " , document.getElementById( " address " ).value.trim());
form.set( " classic " , String(document.getElementById( " transport " ).value === " classic " ));
form.set( " channel " , document.getElementById( " channel " ).value);
setOutput( {{ message: " Sending to printer… " }} , true);
const r = await fetch( " print/image " , {{ method: " POST " , body: form }} );
await showResponse(r);
if (r.ok) refreshStatus();
}}
</script>
</body>
</body>
</html> """
</html> """
