123 lines
5.5 KiB
HTML
123 lines
5.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Keyboard SVG Editor</title>
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>Keyboard SVG Editor</h1>
|
||
|
|
<p>WYSIWYG grid editor for manufacturer-ready SVG output.</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="layout">
|
||
|
|
<section class="panel controls">
|
||
|
|
<h2>Layout</h2>
|
||
|
|
<div class="row">
|
||
|
|
<label for="rows">Rows</label>
|
||
|
|
<input id="rows" type="number" min="1" max="30" value="6">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="cols">Columns</label>
|
||
|
|
<input id="cols" type="number" min="1" max="40" value="16">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="pitch">Pitch (mm)</label>
|
||
|
|
<input id="pitch" type="number" min="1" step="0.01" value="19.05">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="inset">Inset (mm)</label>
|
||
|
|
<input id="inset" type="number" min="0" step="0.01" value="0.48">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="radius">Corner (mm)</label>
|
||
|
|
<input id="radius" type="number" min="0" step="0.1" value="1">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="margin">Margin (mm)</label>
|
||
|
|
<input id="margin" type="number" min="0" step="0.1" value="3">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="bg">Board BG</label>
|
||
|
|
<input id="bg" type="color" value="#000000">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="font">Font Family</label>
|
||
|
|
<input id="font" type="text" value="'Roboto Condensed', 'Roboto', Arial Narrow, Arial, Helvetica, sans-serif">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="fontSize">Base Font (mm)</label>
|
||
|
|
<input id="fontSize" type="number" min="1" step="0.1" value="3.8">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<button id="makeGridBtn" type="button">Reset Grid</button>
|
||
|
|
<button id="downloadSvgBtn" type="button">Download SVG</button>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<button id="downloadJsonBtn" type="button">Download JSON</button>
|
||
|
|
<label class="file-label" for="loadJsonInput">Load JSON</label>
|
||
|
|
<input id="loadJsonInput" type="file" accept="application/json">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Selected Key</h2>
|
||
|
|
<div class="row"><small id="selectedHint">Click a key in the preview.</small></div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="keyLabel">Label</label>
|
||
|
|
<input id="keyLabel" type="text" placeholder="e.g. ENTER">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="keyColor">Fill</label>
|
||
|
|
<input id="keyColor" type="color" value="#d0ccc0">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="keyTextColor">Text</label>
|
||
|
|
<input id="keyTextColor" type="color" value="#000000">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="keyW">Width (u)</label>
|
||
|
|
<input id="keyW" type="number" min="0.25" step="0.25" value="1">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="keyH">Height (u)</label>
|
||
|
|
<input id="keyH" type="number" min="0.25" step="0.25" value="1">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="keyFontScale">Font Scale</label>
|
||
|
|
<input id="keyFontScale" type="number" min="0.5" step="0.1" value="1">
|
||
|
|
</div>
|
||
|
|
<div class="row row-full">
|
||
|
|
<label>Legends (3x3 KLE positions)</label>
|
||
|
|
<div class="legend-grid" id="legendGrid">
|
||
|
|
<div class="legend-cell"><small>Top Left</small><input id="legendText0" type="text"><input id="legendSize0" type="number" min="0" max="9" step="1" value="3"></div>
|
||
|
|
<div class="legend-cell"><small>Top Center</small><input id="legendText1" type="text"><input id="legendSize1" type="number" min="0" max="9" step="1" value="3"></div>
|
||
|
|
<div class="legend-cell"><small>Top Right</small><input id="legendText2" type="text"><input id="legendSize2" type="number" min="0" max="9" step="1" value="3"></div>
|
||
|
|
<div class="legend-cell"><small>Mid Left</small><input id="legendText3" type="text"><input id="legendSize3" type="number" min="0" max="9" step="1" value="3"></div>
|
||
|
|
<div class="legend-cell"><small>Mid Center</small><input id="legendText4" type="text"><input id="legendSize4" type="number" min="0" max="9" step="1" value="3"></div>
|
||
|
|
<div class="legend-cell"><small>Mid Right</small><input id="legendText5" type="text"><input id="legendSize5" type="number" min="0" max="9" step="1" value="3"></div>
|
||
|
|
<div class="legend-cell"><small>Bottom Left</small><input id="legendText6" type="text"><input id="legendSize6" type="number" min="0" max="9" step="1" value="3"></div>
|
||
|
|
<div class="legend-cell"><small>Bottom Center</small><input id="legendText7" type="text"><input id="legendSize7" type="number" min="0" max="9" step="1" value="3"></div>
|
||
|
|
<div class="legend-cell"><small>Bottom Right</small><input id="legendText8" type="text"><input id="legendSize8" type="number" min="0" max="9" step="1" value="3"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<label for="keyAlign">KLE Align (`a`)</label>
|
||
|
|
<input id="keyAlign" type="number" min="0" max="7" step="1" value="4">
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<button id="applyKeyBtn" type="button">Apply Key</button>
|
||
|
|
<button id="clearKeyBtn" type="button">Clear Label</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="panel preview">
|
||
|
|
<h2>Preview (this is your exported SVG)</h2>
|
||
|
|
<div id="svgWrap"></div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script src="app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|