Initial P-Touch web editor
This commit is contained in:
Mikei386
@@ -0,0 +1,150 @@
|
||||
<!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>
|
||||
<label>
|
||||
Laenge
|
||||
<input id="lengthMm" type="number" min="10" max="500" step="1" value="70">
|
||||
</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>
|
||||
</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>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>P-Touch Mobile</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='mobile.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<main class="mobile-shell">
|
||||
<header>
|
||||
<div>
|
||||
<h1>P-Touch Mobile</h1>
|
||||
<p>PT-P700</p>
|
||||
</div>
|
||||
<a href="{{ url_for('index') }}">Editor</a>
|
||||
</header>
|
||||
|
||||
<section class="card">
|
||||
<label>
|
||||
Text
|
||||
<textarea id="mobileText" rows="5" autofocus placeholder="Etikettentext"></textarea>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section class="card settings">
|
||||
<label>
|
||||
Band
|
||||
<div class="input-action">
|
||||
<select id="mobileTape">
|
||||
{% for width in tape_widths %}
|
||||
<option value="{{ width }}" {% if width == 24 %}selected{% endif %}>{{ width }} mm</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button id="mobileDetect" type="button">Erkennen</button>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="grid-2">
|
||||
<label>
|
||||
Laenge
|
||||
<input id="mobileLength" type="number" min="20" max="300" step="1" value="70">
|
||||
</label>
|
||||
<label>
|
||||
Rand
|
||||
<input id="mobileMargin" type="number" min="0" max="20" step="0.5" value="2">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid-2">
|
||||
<label>
|
||||
Schrift
|
||||
<input id="mobileFont" type="number" min="2" max="24" step="0.5" value="6">
|
||||
</label>
|
||||
<label>
|
||||
Kopien
|
||||
<input id="mobileCopies" type="number" min="1" max="20" step="1" value="1">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
Ausrichtung
|
||||
<select id="mobileAlign">
|
||||
<option value="left">Links</option>
|
||||
<option value="center" selected>Mitte</option>
|
||||
<option value="right">Rechts</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div class="check-row">
|
||||
<label><input id="mobileBold" type="checkbox" checked> Fett</label>
|
||||
<label><input id="mobileFrame" type="checkbox"> Rahmen</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="preview">
|
||||
<img id="mobilePreview" alt="Vorschau">
|
||||
</div>
|
||||
<p id="mobileMessage" class="message"></p>
|
||||
</section>
|
||||
|
||||
<nav class="bottom-actions">
|
||||
<button id="mobilePreviewBtn" type="button">Vorschau</button>
|
||||
<button id="mobilePrintBtn" type="button" class="primary">Drucken</button>
|
||||
</nav>
|
||||
</main>
|
||||
|
||||
<script src="{{ url_for('static', filename='mobile.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user