99 lines
4.6 KiB
HTML
99 lines
4.6 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>
|
||
<nav class="tabs">
|
||
<button type="button" class="tab active" id="tabFile" data-tab="file">File</button>
|
||
<button type="button" class="tab" id="tabText" data-tab="text">Text</button>
|
||
</nav>
|
||
<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">
|
||
<div id="panelFile" class="tab-panel">
|
||
<section class="upload-section">
|
||
<label class="upload-label" for="hpglFolderSelect">Load from folder</label>
|
||
<select id="hpglFolderSelect" class="font-select">
|
||
<option value="">— Select file —</option>
|
||
</select>
|
||
<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>
|
||
</div>
|
||
<div id="panelText" class="tab-panel hidden">
|
||
<section class="text-section">
|
||
<label class="upload-label" for="textInput">Text</label>
|
||
<textarea id="textInput" class="text-input" rows="4" placeholder="Enter text to convert to HPGL"></textarea>
|
||
<label class="upload-label" for="fontSelect">Font</label>
|
||
<select id="fontSelect" class="font-select">
|
||
<option value="">— Select font —</option>
|
||
</select>
|
||
<label class="upload-label" for="textSize">Size (pt)</label>
|
||
<input type="number" id="textSize" class="text-size" value="72" min="8" max="500" step="1">
|
||
<button type="button" class="btn btn-generate" id="btnGenerateHpgl">Generate HPGL</button>
|
||
<button type="button" class="btn btn-export-hpgl" id="btnExportHpgl" disabled>Export HPGL</button>
|
||
<p id="textMessage" class="message"></p>
|
||
</section>
|
||
</div>
|
||
|
||
|
||
<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>
|