add webui

webui/README.md

@@ -0,0 +1,65 @@
+# HPGL Plotter Web UI
+
+Flask web interface for uploading HPGL files, previewing and transforming them (flip, rotate, scale, center), and sending to the plotter. Intended to run on a Raspberry Pi connected to the plotter via USB.
+
+## Setup (Raspberry Pi)
+
+1. From the **project root** (mimaki/), install dependencies:
+
+   If you get **externally-managed-environment** (Python 3.11+ / PEP 668) and don’t want a venv, use:
+   ```bash
+   pip install --break-system-packages -r webui/requirements.txt
+   ```
+   Otherwise:
+   ```bash
+   pip install -r webui/requirements.txt
+   ```
+   Optional – use a venv to avoid touching system Python:
+   ```bash
+   python3 -m venv venv
+   source venv/bin/activate
+   pip install -r webui/requirements.txt
+   ```
+
+2. **Config:** Copy `config.example.ini` to `config.ini` and adjust (port, baudrate, web UI host/port, etc.). `config.ini` is gitignored.
+   ```bash
+   cp config.example.ini config.ini
+   ```
+   Edit `config.ini` to set the plotter port (e.g. `/dev/ttyUSB0`) and optionally web UI port/host.
+
+## Run
+
+From the **project root** (mimaki/):
+
+```bash
+python webui/app.py
+```
+
+Then open http://<raspi-ip>:5000 in a browser (e.g. http://192.168.1.10:5000).
+
+- **Host:** `0.0.0.0` so other devices on the network can connect.
+- **Port:** 5000 (override with `PORT=8080 python webui/app.py` if needed).
+
+For production, run behind gunicorn and optionally a reverse proxy:
+
+```bash
+pip install --break-system-packages gunicorn   # or omit if not using system Python
+gunicorn -w 1 -b 0.0.0.0:5000 "webui.app:app"
+```
+
+## Usage
+
+1. **Upload** – Choose an `.hpgl` or `.plt` file. It is validated and stored in `webui/uploads/`.
+2. **Preview** – The drawing is converted to SVG and shown in the browser.
+3. **Transform** – Flip, Rotate 90° / 180°, Scale + / −, Center. Each action updates the stored program and the preview.
+4. **Print** – Sends the current (transformed) program to the plotter: scale to fit, center, then write HPGL to serial.
+
+## API
+
+- `POST /api/upload` – Upload HPGL file (form field `file`).
+- `GET /api/svg` – Get current program as SVG (query: `width`, `height`).
+- `POST /api/transform` – Body: `{"action": "flip"|"rotate"|"scale"|"centralize", "angle": 90, "factor": 1.25}`.
+- `POST /api/print` – Send current program to plotter.
+- `GET /api/status` – `has_file`, `filename`, `plotter_ready`.
+
+Session is used to keep the current file path; no database.

webui/app.py

@@ -0,0 +1,240 @@
+"""
+Flask web UI for HPGL plotter.
+Run from project root so Command, Program, Plotter, hpgl_svg, config can be imported.
+"""
+import os
+import sys
+import uuid
+from flask import Flask, request, jsonify, session, send_from_directory, render_template
+
+# Run from project root (parent of webui)
+ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+if ROOT not in sys.path:
+    sys.path.insert(0, ROOT)
+
+from Command import Command
+from Program import Program
+from Plotter import Plotter
+from hpgl_svg import program_to_svg
+
+try:
+    from config import webui_secret_key, webui_max_upload_mb
+except ImportError:
+    webui_secret_key = lambda: os.environ.get('SECRET_KEY', 'change-me-in-production')
+    webui_max_upload_mb = lambda: 16
+
+app = Flask(__name__, static_folder='static', template_folder='templates')
+app.secret_key = webui_secret_key()
+app.config['MAX_CONTENT_LENGTH'] = webui_max_upload_mb() * 1024 * 1024
+UPLOAD_DIR = os.path.join(ROOT, 'webui', 'uploads')
+os.makedirs(UPLOAD_DIR, exist_ok=True)
+
+
+def _get_program():
+    path = session.get('upload_path')
+    if not path or not os.path.isfile(path):
+        return None
+    try:
+        return Program.parsefile(path)
+    except Exception:
+        return None
+
+
+def _save_program(program, path=None):
+    path = path or session.get('upload_path')
+    if not path:
+        return None
+    with open(path, 'w') as f:
+        f.write(str(program))
+    return path
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/api/upload', methods=['POST'])
+def upload():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file'}), 400
+    f = request.files['file']
+    if not f.filename or not (f.filename.lower().endswith('.hpgl') or f.filename.lower().endswith('.plt')):
+        return jsonify({'error': 'Need an .hpgl or .plt file'}), 400
+    try:
+        content = f.read().decode('utf-8', errors='replace')
+        Program.parse(content)  # validate
+    except Exception as e:
+        return jsonify({'error': 'Invalid HPGL: {}'.format(str(e))}), 400
+    name = str(uuid.uuid4()) + '.hpgl'
+    path = os.path.join(UPLOAD_DIR, name)
+    with open(path, 'w') as out:
+        out.write(content)
+    session['upload_path'] = path
+    session['upload_filename'] = f.filename
+    return jsonify({
+        'ok': True,
+        'filename': f.filename,
+        'preview_url': '/api/svg'
+    })
+
+
+@app.route('/api/dimensions')
+def dimensions():
+    """Return current program size in plotter units (e.g. 0.025 mm per unit)."""
+    p = _get_program()
+    if p is None:
+        return jsonify({'error': 'No file loaded'}), 404
+    w, h = p.winsize
+    return jsonify({
+        'width': round(w, 1),
+        'height': round(h, 1),
+        'width_mm': round(w * 0.025, 2),
+        'height_mm': round(h * 0.025, 2),
+    })
+
+
+@app.route('/api/svg')
+def get_svg():
+    p = _get_program()
+    if p is None:
+        return jsonify({'error': 'No file loaded'}), 404
+    width = request.args.get('width', 800, type=int)
+    height = request.args.get('height', 600, type=int)
+    show_scale = request.args.get('scale', '1').lower() in ('1', 'true', 'yes')
+    svg = program_to_svg(p, width=width, height=height, show_scale_bar=show_scale)
+    return svg, 200, {'Content-Type': 'image/svg+xml; charset=utf-8'}
+
+
+@app.route('/api/transform', methods=['POST'])
+def transform():
+    p = _get_program()
+    if p is None:
+        return jsonify({'error': 'No file loaded'}), 404
+    data = request.get_json() or {}
+    action = data.get('action')
+    if action == 'flip':
+        p = p.flip()
+    elif action == 'rotate':
+        angle = data.get('angle', 90)
+        p = p.rotate(angle)
+    elif action == 'scale':
+        factor = data.get('factor', 1.5)
+        p = p * factor
+    elif action == 'centralize':
+        p = p - p.center
+    elif action == 'scale_to_bounds':
+        xmin = data.get('xmin')
+        ymin = data.get('ymin')
+        xmax = data.get('xmax')
+        ymax = data.get('ymax')
+        if xmin is not None and ymin is not None and xmax is not None and ymax is not None:
+            if xmax <= xmin or ymax <= ymin:
+                return jsonify({'error': 'Invalid bounds: xmax > xmin and ymax > ymin required.'}), 400
+            p = p.fitin((xmin, ymin, xmax, ymax), (0.5, 0.5))
+        else:
+            try:
+                plt = Plotter()
+                if getattr(plt, 'boundaries', None) is None:
+                    return jsonify({'error': 'Plotter not connected. Connect plotter or send bounds (xmin, ymin, xmax, ymax).'}), 400
+                p = plt.full(p)
+            except (OSError, AttributeError, TypeError):
+                return jsonify({'error': 'Plotter not connected. Connect plotter or send bounds (xmin, ymin, xmax, ymax).'}), 400
+    else:
+        return jsonify({'error': 'Unknown action'}), 400
+    _save_program(p)
+    return jsonify({'ok': True, 'preview_url': '/api/svg'})
+
+
+@app.route('/api/print', methods=['POST'])
+def print_to_plotter():
+    p = _get_program()
+    if p is None:
+        return jsonify({'error': 'No file loaded'}), 404
+    try:
+        plt = Plotter()
+        if getattr(plt, 'ser', None) is None:
+            return jsonify({'error': 'Plotter not connected. Connect plotter and try again.'}), 503
+        p = plt.full(p)
+        p = plt.centralize(p)
+        plt.write(p)
+        return jsonify({'ok': True})
+    except OSError as e:
+        return jsonify({'error': 'Plotter not connected: {}'.format(str(e))}), 503
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+@app.route('/api/status')
+def status():
+    has_file = bool(session.get('upload_path')) and os.path.isfile(session.get('upload_path'))
+    plotter_ready = False
+    try:
+        plt = Plotter()
+        if getattr(plt, 'ser', None) is not None and getattr(plt, 'boundaries', None) is not None:
+            plotter_ready = plt.ready
+    except (OSError, AttributeError, TypeError):
+        pass
+    return jsonify({
+        'has_file': has_file,
+        'filename': session.get('upload_filename'),
+        'plotter_ready': plotter_ready
+    })
+
+
+@app.route('/api/plotter_info')
+def plotter_info():
+    """Return plotter connection and media dimensions for display under the print button."""
+    try:
+        from config import plotter_port, plotter_baudrate
+    except ImportError:
+        plotter_port = lambda: '/dev/ttyUSB0'
+        plotter_baudrate = lambda: 9600
+    port = plotter_port()
+    baudrate = plotter_baudrate()
+    connected = False
+    ready = False
+    boundaries = None
+    winsize_units = None
+    winsize_mm = None
+    try:
+        plt = Plotter()
+        if getattr(plt, 'ser', None) is not None and getattr(plt, 'boundaries', None) is not None:
+            connected = True
+            ready = plt.ready
+            try:
+                boundaries = {
+                    'xmin': plt.xmin,
+                    'ymin': plt.ymin,
+                    'xmax': plt.xmax,
+                    'ymax': plt.ymax,
+                }
+                w, h = plt.winsize
+                winsize_units = {'width': round(w, 1), 'height': round(h, 1)}
+                winsize_mm = {'width': round(w * 0.025, 1), 'height': round(h * 0.025, 1)}
+            except (AttributeError, TypeError):
+                pass
+    except (OSError, AttributeError, TypeError):
+        pass
+    return jsonify({
+        'port': port,
+        'baudrate': baudrate,
+        'connected': connected,
+        'ready': ready,
+        'boundaries': boundaries,
+        'winsize_units': winsize_units,
+        'winsize_mm': winsize_mm,
+    })
+
+
+if __name__ == '__main__':
+    try:
+        from config import webui_host, webui_port
+    except ImportError:
+        webui_host = lambda: '0.0.0.0'
+        webui_port = lambda: 5000
+    app.run(
+        host=webui_host(),
+        port=webui_port(),
+        debug=os.environ.get('FLASK_DEBUG', '0') == '1'
+    )

webui/requirements.txt

@@ -0,0 +1,2 @@
+Flask>=2.0
+pyserial>=3.5

webui/static/app.js

@@ -0,0 +1,253 @@
+(function () {
+  const fileInput = document.getElementById('fileInput');
+  const preview = document.getElementById('preview');
+  const previewPlaceholder = document.getElementById('previewPlaceholder');
+  const statusFile = document.getElementById('statusFile');
+  const statusPlotter = document.getElementById('statusPlotter');
+  const printMessage = document.getElementById('printMessage');
+  const scaleDims = document.getElementById('scaleDims');
+  const plotterInfo = {
+    port: document.getElementById('plotterPort'),
+    baud: document.getElementById('plotterBaud'),
+    winsizeUnits: document.getElementById('plotterWinsizeUnits'),
+    winsizeMm: document.getElementById('plotterWinsizeMm'),
+    bounds: document.getElementById('plotterBounds')
+  };
+  const buttons = {
+    flip: document.getElementById('btnFlip'),
+    rotate90: document.getElementById('btnRotate90'),
+    rotate180: document.getElementById('btnRotate180'),
+    scaleUp: document.getElementById('btnScaleUp'),
+    scaleDown: document.getElementById('btnScaleDown'),
+    centralize: document.getElementById('btnCentralize'),
+    scaleToBounds: document.getElementById('btnScaleToBounds'),
+    print: document.getElementById('btnPrint'),
+    checkPlotter: document.getElementById('btnCheckPlotter')
+  };
+
+  function setMessage(el, text, type) {
+    el.textContent = text || '';
+    el.className = 'message' + (type ? ' ' + type : '');
+  }
+
+  function updatePreview() {
+    const w = Math.min(800, window.innerWidth - 80);
+    const h = Math.min(600, window.innerHeight - 120);
+    preview.src = '/api/svg?width=' + w + '&height=' + h + '&scale=1&_=' + Date.now();
+  }
+
+  function updateDimensions() {
+    if (!scaleDims) return;
+    fetch('/api/dimensions')
+      .then(function (r) {
+        if (!r.ok) throw new Error();
+        return r.json();
+      })
+      .then(function (d) {
+        scaleDims.innerHTML = d.width + ' × ' + d.height + ' <span class="unit">(≈ ' + d.width_mm + ' × ' + d.height_mm + ' mm)</span>';
+      })
+      .catch(function () {
+        scaleDims.innerHTML = '— × — <span class="unit">(≈ — × — mm)</span>';
+      });
+  }
+
+  function updatePlotterInfo() {
+    if (!plotterInfo.port) return;
+    fetch('/api/plotter_info')
+      .then(function (r) { return r.ok ? r.json() : Promise.reject(); })
+      .then(function (d) {
+        plotterInfo.port.textContent = d.port || '—';
+        plotterInfo.baud.textContent = d.baudrate ? d.baudrate + ' baud' : '—';
+        if (d.winsize_units) {
+          plotterInfo.winsizeUnits.textContent = d.winsize_units.width + ' × ' + d.winsize_units.height;
+        } else {
+          plotterInfo.winsizeUnits.textContent = '— × —';
+        }
+        if (d.winsize_mm) {
+          plotterInfo.winsizeMm.textContent = d.winsize_mm.width + ' × ' + d.winsize_mm.height + ' mm';
+        } else {
+          plotterInfo.winsizeMm.textContent = '— × —';
+        }
+        if (d.boundaries) {
+          var b = d.boundaries;
+          plotterInfo.bounds.textContent = b.xmin + ',' + b.ymin + ' … ' + b.xmax + ',' + b.ymax;
+        } else {
+          plotterInfo.bounds.textContent = '—';
+        }
+      })
+      .catch(function () {
+        plotterInfo.port.textContent = '—';
+        plotterInfo.baud.textContent = '—';
+        plotterInfo.winsizeUnits.textContent = '— × —';
+        plotterInfo.winsizeMm.textContent = '— × —';
+        plotterInfo.bounds.textContent = '—';
+      });
+  }
+
+  function setLoaded(loaded) {
+    if (loaded) {
+      preview.classList.add('loaded');
+      previewPlaceholder.classList.add('hidden');
+      Object.keys(buttons).forEach(function (k) {
+        var b = buttons[k];
+        if (b) b.disabled = false;
+      });
+    } else {
+      preview.classList.remove('loaded');
+      previewPlaceholder.classList.remove('hidden');
+      preview.src = '';
+      Object.keys(buttons).forEach(function (k) {
+        var b = buttons[k];
+        if (b) b.disabled = true;
+      });
+    }
+  }
+
+  function refreshStatus() {
+    fetch('/api/status')
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        statusFile.textContent = data.has_file ? (data.filename || 'File loaded') : 'No file';
+        statusPlotter.textContent = 'Plotter: ' + (data.plotter_ready ? 'Ready' : 'Not connected');
+        statusPlotter.classList.toggle('ready', data.plotter_ready);
+        statusPlotter.classList.toggle('not-ready', !data.plotter_ready);
+        updatePlotterInfo();
+        if (data.has_file) {
+          setLoaded(true);
+          updatePreview();
+          updateDimensions();
+        } else {
+          setLoaded(false);
+          if (scaleDims) scaleDims.innerHTML = '— × — <span class="unit">(≈ — × — mm)</span>';
+        }
+      })
+      .catch(function () {
+        statusFile.textContent = 'No file';
+        statusPlotter.textContent = 'Plotter: —';
+        setLoaded(false);
+        if (scaleDims) scaleDims.innerHTML = '— × — <span class="unit">(≈ — × — mm)</span>';
+      });
+  }
+
+  fileInput.addEventListener('change', function () {
+    const file = this.files && this.files[0];
+    if (!file) return;
+    preview.src = '';
+    preview.classList.remove('loaded');
+    previewPlaceholder.classList.remove('hidden');
+    previewPlaceholder.textContent = 'Loading…';
+    setMessage(printMessage, '');
+    const form = new FormData();
+    form.append('file', file);
+    fetch('/api/upload', {
+      method: 'POST',
+      body: form
+    })
+      .then(function (r) {
+        if (!r.ok) return r.json().then(function (d) { throw new Error(d.error || 'Upload failed'); });
+        return r.json();
+      })
+      .then(function () {
+        previewPlaceholder.textContent = 'Upload an HPGL file to preview';
+        refreshStatus();
+      })
+      .catch(function (e) {
+        previewPlaceholder.textContent = 'Upload an HPGL file to preview';
+        setMessage(printMessage, e.message || 'Upload failed', 'error');
+        refreshStatus();
+      });
+  });
+
+  function transform(action, payload) {
+    setMessage(printMessage, '');
+    var body = payload || { action: action };
+    fetch('/api/transform', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    })
+      .then(function (r) {
+        if (!r.ok) return r.json().then(function (d) { throw new Error(d.error || 'Transform failed'); });
+        return r.json();
+      })
+      .then(function () {
+        updatePreview();
+        updateDimensions();
+      })
+      .catch(function (e) {
+        setMessage(printMessage, e.message || 'Transform failed', 'error');
+      });
+  }
+
+  buttons.flip.addEventListener('click', function () { transform('flip'); });
+  buttons.rotate90.addEventListener('click', function () { transform('rotate', { action: 'rotate', angle: 90 }); });
+  buttons.rotate180.addEventListener('click', function () { transform('rotate', { action: 'rotate', angle: 180 }); });
+  buttons.scaleUp.addEventListener('click', function () { transform('scale', { action: 'scale', factor: 1.25 }); });
+  buttons.scaleDown.addEventListener('click', function () { transform('scale', { action: 'scale', factor: 0.8 }); });
+  buttons.centralize.addEventListener('click', function () { transform('centralize'); });
+  if (buttons.scaleToBounds) {
+    buttons.scaleToBounds.addEventListener('click', function () {
+      setMessage(printMessage, '');
+      fetch('/api/status')
+        .then(function (r) { return r.json(); })
+        .then(function (data) {
+          if (!data.plotter_ready) {
+            setMessage(printMessage, 'Plotter not connected.', 'error');
+            return;
+          }
+          transform('scale_to_bounds', { action: 'scale_to_bounds' });
+        })
+        .catch(function () {
+          setMessage(printMessage, 'Plotter not connected.', 'error');
+        });
+    });
+  }
+
+  buttons.print.addEventListener('click', function () {
+    setMessage(printMessage, 'Sending to plotter…');
+    fetch('/api/print', { method: 'POST' })
+      .then(function (r) {
+        return r.json().then(function (data) {
+          if (!r.ok) throw new Error(data.error || 'Print failed');
+          return data;
+        });
+      })
+      .then(function () {
+        setMessage(printMessage, 'Sent to plotter.', 'success');
+      })
+      .catch(function (e) {
+        setMessage(printMessage, e.message || 'Print failed', 'error');
+      });
+  });
+
+  if (buttons.checkPlotter) {
+    buttons.checkPlotter.addEventListener('click', function () {
+      setMessage(printMessage, 'Checking plotter…');
+      fetch('/api/status')
+        .then(function (r) { return r.json(); })
+        .then(function (data) {
+          statusFile.textContent = data.has_file ? (data.filename || 'File loaded') : 'No file';
+          statusPlotter.textContent = 'Plotter: ' + (data.plotter_ready ? 'Ready' : 'Not connected');
+          statusPlotter.classList.toggle('ready', data.plotter_ready);
+          statusPlotter.classList.toggle('not-ready', !data.plotter_ready);
+          updatePlotterInfo();
+          setMessage(printMessage, data.plotter_ready ? 'Plotter: Ready' : 'Plotter: Not connected', data.plotter_ready ? 'success' : 'error');
+        })
+        .catch(function () {
+          statusPlotter.textContent = 'Plotter: —';
+          statusPlotter.classList.remove('ready');
+          statusPlotter.classList.add('not-ready');
+          updatePlotterInfo();
+          setMessage(printMessage, 'Plotter: Not connected', 'error');
+        });
+    });
+  }
+
+  preview.addEventListener('load', function () {
+    previewPlaceholder.classList.add('hidden');
+  });
+
+  refreshStatus();
+  updatePlotterInfo();
+  setInterval(updatePlotterInfo, 10000);
+})();

webui/static/style.css

@@ -0,0 +1,305 @@
+:root {
+  --bg: #ffffff;
+  --surface: #f5f5f6;
+  --border: #d1d5db;
+  --text: #1f2937;
+  --muted: #6b7280;
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
+  --danger: #dc2626;
+  --success: #16a34a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+}
+
+.app {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.status {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.875rem;
+  color: var(--muted);
+}
+
+.status-plotter.ready {
+  color: var(--success);
+}
+
+.status-plotter.not-ready {
+  color: var(--danger);
+}
+
+.main {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 1.5rem;
+  flex: 1;
+}
+
+@media (max-width: 700px) {
+  .main {
+    grid-template-columns: 1fr;
+  }
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.upload-section {
+  padding: 1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.upload-label {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.file-input {
+  display: block;
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.file-input::file-selector-button {
+  margin-right: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: var(--accent);
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.hint {
+  margin: 0.5rem 0 0;
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.transform-section h2,
+.print-section h2,
+.scale-section h2 {
+  margin: 0 0 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.scale-section {
+  padding: 1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 0.875rem;
+}
+
+.scale-section .dims {
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+.scale-section .unit {
+  color: var(--muted);
+  font-size: 0.8em;
+}
+
+.transform-section {
+  padding: 1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.btn-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.btn {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.btn:hover:not(:disabled) {
+  background: var(--border);
+  border-color: var(--accent);
+  color: var(--text);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-print {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+  background: var(--accent);
+  border: none;
+  color: #fff;
+}
+
+.plotter-info {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.8125rem;
+  color: var(--text);
+}
+
+.plotter-info-row {
+  margin: 0.25rem 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.plotter-info-row strong {
+  color: var(--muted);
+  font-weight: 500;
+}
+
+.btn-print:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.btn-check-plotter {
+  width: 100%;
+  margin-top: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.btn-check-plotter:hover {
+  background: var(--border);
+  border-color: var(--accent);
+}
+
+.print-section {
+  padding: 1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.message {
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  min-height: 1.25rem;
+}
+
+.message.error {
+  color: var(--danger);
+}
+
+.message.success {
+  color: var(--success);
+}
+
+.preview-section {
+  min-height: 400px;
+  background: #fafafa;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview {
+  max-width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+  display: none;
+}
+
+.preview.loaded {
+  display: block;
+}
+
+.preview-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+
+.preview-placeholder.hidden {
+  display: none;
+}

webui/templates/index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HPGL Plotter</title>
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+  <div class="app">
+    <header class="header">
+      <h1>HPGL Plotter</h1>
+      <div class="status" id="status">
+        <span class="status-file" id="statusFile">No file</span>
+        <span class="status-plotter" id="statusPlotter">Plotter: —</span>
+      </div>
+    </header>
+
+    <main class="main">
+      <aside class="sidebar">
+        <section class="upload-section">
+          <label class="upload-label" for="fileInput">Upload HPGL</label>
+          <input type="file" id="fileInput" accept=".hpgl,.plt" class="file-input">
+          <p class="hint">.hpgl or .plt files only</p>
+        </section>
+
+        <section class="scale-section">
+          <h2>Size (plotter units)</h2>
+          <p id="scaleDims" class="dims">— × — <span class="unit">(≈ — × — mm)</span></p>
+        </section>
+
+        <section class="transform-section">
+          <h2>Transform</h2>
+          <div class="btn-group">
+            <button type="button" class="btn" id="btnFlip" disabled>Flip</button>
+            <button type="button" class="btn" id="btnRotate90" disabled>Rotate 90°</button>
+            <button type="button" class="btn" id="btnRotate180" disabled>Rotate 180°</button>
+            <button type="button" class="btn" id="btnScaleUp" disabled>Scale +</button>
+            <button type="button" class="btn" id="btnScaleDown" disabled>Scale −</button>
+            <button type="button" class="btn" id="btnCentralize" disabled>Center</button>
+            <button type="button" class="btn" id="btnScaleToBounds" disabled>Scale to bounds</button>
+          </div>
+        </section>
+
+        <section class="print-section">
+          <button type="button" class="btn btn-print" id="btnPrint" disabled>Print to plotter</button>
+          <button type="button" class="btn btn-check-plotter" id="btnCheckPlotter">Check plotter</button>
+          <p id="printMessage" class="message"></p>
+          <div class="plotter-info" id="plotterInfo">
+            <p class="plotter-info-row"><strong>Port</strong> <span id="plotterPort">—</span></p>
+            <p class="plotter-info-row"><strong>Baudrate</strong> <span id="plotterBaud">—</span></p>
+            <p class="plotter-info-row"><strong>Media (units)</strong> <span id="plotterWinsizeUnits">— × —</span></p>
+            <p class="plotter-info-row"><strong>Media (mm)</strong> <span id="plotterWinsizeMm">— × —</span></p>
+            <p class="plotter-info-row"><strong>Bounds</strong> <span id="plotterBounds">—</span></p>
+          </div>
+        </section>
+      </aside>
+
+      <section class="preview-section">
+        <div class="preview-wrap">
+          <img id="preview" class="preview" alt="HPGL preview" src="" />
+          <div id="previewPlaceholder" class="preview-placeholder">
+            Upload an HPGL file to preview
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>