183 lines
6.9 KiB
HTML
183 lines
6.9 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>P-Touch Web Editor</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<strong>P-Touch Web</strong>
|
|
<span>PT-P700 · <a href="{{ url_for('mobile') }}">Mobile</a></span>
|
|
</div>
|
|
<div class="toolbar" aria-label="Werkzeuge">
|
|
<button data-tool="text" title="Textfeld">Text</button>
|
|
<button data-tool="frame" title="Rahmen">Rahmen</button>
|
|
<button data-tool="rect" title="Form">Form</button>
|
|
<button data-tool="line" title="Linie">Linie</button>
|
|
<button data-tool="table" title="Tabelle">Tabelle</button>
|
|
<button data-tool="qr" title="QR-Code">QR</button>
|
|
<button data-tool="barcode" title="Barcode">Barcode</button>
|
|
<button data-tool="symbol" title="Symbol">Symbol</button>
|
|
<label class="file-button" title="Bild">
|
|
Bild
|
|
<input id="imageInput" type="file" accept="image/*">
|
|
</label>
|
|
</div>
|
|
<div class="zoom-group">
|
|
<button id="zoomOut">-</button>
|
|
<span id="zoomLabel">150%</span>
|
|
<button id="zoomIn">+</button>
|
|
</div>
|
|
<div class="print-actions">
|
|
<button id="previewBtn">Vorschau</button>
|
|
<button id="printBtn" class="primary">Drucken</button>
|
|
</div>
|
|
</header>
|
|
|
|
<aside class="sidebar left-panel">
|
|
<section>
|
|
<h2>Druckmedium</h2>
|
|
<label>
|
|
Bandbreite
|
|
<div class="input-action">
|
|
<select id="tapeWidth">
|
|
{% for width in tape_widths %}
|
|
<option value="{{ width }}" {% if width == 24 %}selected{% endif %}>{{ width }} mm</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button id="detectTape" type="button">Erkennen</button>
|
|
</div>
|
|
</label>
|
|
<div id="tapeInfo" class="tape-info" hidden>
|
|
<div>
|
|
<span>Band</span>
|
|
<strong id="tapeInfoType">-</strong>
|
|
</div>
|
|
<div>
|
|
<span>Druckbreite</span>
|
|
<strong id="tapePrintableWidth">-</strong>
|
|
</div>
|
|
<div>
|
|
<span>Hintergrund</span>
|
|
<strong><i id="tapeBgSwatch"></i><span id="tapeBgText">-</span></strong>
|
|
</div>
|
|
<div>
|
|
<span>Schrift</span>
|
|
<strong><i id="tapeTextSwatch"></i><span id="tapeTextText">-</span></strong>
|
|
</div>
|
|
</div>
|
|
<label>
|
|
Laenge
|
|
<input id="lengthMm" type="number" min="10" max="500" step="1" value="70">
|
|
</label>
|
|
<label class="check-row">
|
|
<input id="autoLength" type="checkbox" checked>
|
|
Laenge automatisch begrenzen
|
|
</label>
|
|
<label>
|
|
Rand
|
|
<input id="marginMm" type="number" min="0" max="20" step="0.5" value="2">
|
|
</label>
|
|
<div class="radio-row">
|
|
<label><input type="radio" name="orientation" value="landscape" checked> Querformat</label>
|
|
<label><input type="radio" name="orientation" value="portrait"> Hochformat</label>
|
|
</div>
|
|
<label>
|
|
Kopien
|
|
<input id="copies" type="number" min="1" max="20" step="1" value="1">
|
|
</label>
|
|
<label>
|
|
Schnitt
|
|
<select id="cutMode">
|
|
<option value="auto">Normal / einzelne Etiketten</option>
|
|
<option value="chain">Kettendruck / Streifen</option>
|
|
<option value="cutmark">Schnittmarke drucken</option>
|
|
<option value="cutmark-chain">Streifen + Schnittmarke</option>
|
|
</select>
|
|
</label>
|
|
<p class="field-note">PT-P700: Halbschnitt wird laut Brother nicht unterstuetzt. Fuer mehrere zusammenhaengende Labels Kettendruck / Streifen nutzen.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Layout</h2>
|
|
<button id="saveLayout">Speichern</button>
|
|
<button id="loadLayout">Laden</button>
|
|
<button id="clearLayout">Leeren</button>
|
|
<button id="exportJson">JSON</button>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Status</h2>
|
|
<p>Druck: {{ 'aktiv' if print_enabled else 'Testmodus' }}</p>
|
|
<code>{{ default_command }}</code>
|
|
</section>
|
|
</aside>
|
|
|
|
<main class="workspace">
|
|
<div class="ruler ruler-x" id="rulerX"></div>
|
|
<div class="ruler ruler-y" id="rulerY"></div>
|
|
<div class="stage-wrap">
|
|
<canvas id="labelCanvas" width="900" height="260"></canvas>
|
|
</div>
|
|
<div id="message" class="message-line"></div>
|
|
</main>
|
|
|
|
<aside class="sidebar right-panel">
|
|
<section id="noSelection">
|
|
<h2>Keine Auswahl</h2>
|
|
<p>Objekt auswaehlen oder ueber die Werkzeugleiste hinzufuegen.</p>
|
|
</section>
|
|
|
|
<section id="objectProps" hidden>
|
|
<h2>Objekt</h2>
|
|
<label>
|
|
Inhalt
|
|
<textarea id="propText" rows="4"></textarea>
|
|
</label>
|
|
<div class="grid-2">
|
|
<label>X <input id="propX" type="number" step="0.5"></label>
|
|
<label>Y <input id="propY" type="number" step="0.5"></label>
|
|
<label>B <input id="propW" type="number" step="0.5"></label>
|
|
<label>H <input id="propH" type="number" step="0.5"></label>
|
|
</div>
|
|
<div class="grid-2">
|
|
<label>Schrift <input id="propFont" type="number" min="1" max="30" step="0.5"></label>
|
|
<label>Linie <input id="propLine" type="number" min="0.1" max="5" step="0.1"></label>
|
|
</div>
|
|
<label>
|
|
Ausrichtung
|
|
<select id="propAlign">
|
|
<option value="left">Links</option>
|
|
<option value="center">Mitte</option>
|
|
<option value="right">Rechts</option>
|
|
</select>
|
|
</label>
|
|
<div class="check-row">
|
|
<label><input id="propBold" type="checkbox"> Fett</label>
|
|
<label><input id="propFill" type="checkbox"> Fuellung</label>
|
|
</div>
|
|
<div class="grid-2">
|
|
<label>Zeilen <input id="propRows" type="number" min="1" max="20" step="1"></label>
|
|
<label>Spalten <input id="propCols" type="number" min="1" max="20" step="1"></label>
|
|
</div>
|
|
<button id="duplicateObj">Duplizieren</button>
|
|
<button id="deleteObj" class="danger">Loeschen</button>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Vorschau</h2>
|
|
<div class="preview-box">
|
|
<img id="previewImage" alt="Etikettenvorschau">
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='editor.js') }}"></script>
|
|
</body>
|
|
</html>
|