73 lines
3.1 KiB
HTML
73 lines
3.1 KiB
HTML
<!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>
|