Update web form for arc-dial fields: unit, left/right labels
This commit is contained in:
+16
-25
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>M1730 Scale Generator — Baumann Works</title>
|
<title>E440 Scale Generator — Baumann Works</title>
|
||||||
<script defer src="https://umami.baumann.gr/script.js" data-website-id="80b6816b-2a2d-4fab-a315-c389542bcd17"></script>
|
<script defer src="https://umami.baumann.gr/script.js" data-website-id="80b6816b-2a2d-4fab-a315-c389542bcd17"></script>
|
||||||
<script defer src="https://umami.baumann.gr/recorder.js" data-website-id="80b6816b-2a2d-4fab-a315-c389542bcd17" data-sample-rate="1" data-mask-level="moderate" data-max-duration="300000"></script>
|
<script defer src="https://umami.baumann.gr/recorder.js" data-website-id="80b6816b-2a2d-4fab-a315-c389542bcd17" data-sample-rate="1" data-mask-level="moderate" data-max-duration="300000"></script>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
@@ -288,7 +288,7 @@
|
|||||||
<img src="data:image/png;base64,{{ logo_b64 }}" alt="Baumann Works">
|
<img src="data:image/png;base64,{{ logo_b64 }}" alt="Baumann Works">
|
||||||
<div class="wordmark">
|
<div class="wordmark">
|
||||||
<span class="wordmark-name">Baumann Works</span>
|
<span class="wordmark-name">Baumann Works</span>
|
||||||
<span class="wordmark-sub">M1730 Scale Generator</span>
|
<span class="wordmark-sub">E440 Scale Generator</span>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -300,20 +300,20 @@
|
|||||||
<div class="row row-2">
|
<div class="row row-2">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label>Unit</label>
|
<label>Unit</label>
|
||||||
<input name="unit" type="text" value="%" required>
|
<input name="unit" type="text" value="uA" required>
|
||||||
<span style="font-family:var(--f-mono);font-size:0.65rem;color:var(--muted)">Markup: cm^2 · H_2O · {1/2} fraction · nests, e.g. {m/s^2}</span>
|
<span style="font-family:var(--f-mono);font-size:0.65rem;color:var(--muted)">Markup: cm^2 · H_2O · {1/2} fraction · nests, e.g. {m/s^2}</span>
|
||||||
<div style="display:flex;align-items:center;gap:0.5rem;margin-top:0.2rem">
|
</div>
|
||||||
<div class="mode-toggle" role="group" aria-label="Unit height">
|
</div>
|
||||||
<button type="button" class="mode-btn active" data-unit-height="normal">Full height</button>
|
<div class="row row-2" style="margin-top:1.25rem">
|
||||||
<button type="button" class="mode-btn" data-unit-height="half"
|
<div class="field">
|
||||||
title="Restrict unit label to the upper half of the panel — use when numeric labels visually crowd the unit">Half height</button>
|
<label>Left label (up to 2 lines)</label>
|
||||||
</div>
|
<textarea name="left_label" rows="2" style="background:var(--white);border:1px solid var(--rule);border-radius:1px;padding:0.5rem 0.7rem;font-family:var(--f-body);font-size:0.925rem;color:var(--ink);width:100%;outline:none;resize:vertical">Text
|
||||||
<input type="hidden" name="half_height_unit" id="half-height-unit" value="0">
|
Left</textarea>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label>Range label</label>
|
<label>Right label (up to 2 lines)</label>
|
||||||
<input name="range_label" type="text" value="5mA" required>
|
<textarea name="right_label" rows="2" style="background:var(--white);border:1px solid var(--rule);border-radius:1px;padding:0.5rem 0.7rem;font-family:var(--f-body);font-size:0.925rem;color:var(--ink);width:100%;outline:none;resize:vertical">Text
|
||||||
|
Right</textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -373,7 +373,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label>Label size (mm)</label>
|
<label>Label size (mm)</label>
|
||||||
<input name="label_size" type="number" step="any" min="0.5" max="25" value="9" required>
|
<input name="label_size" type="number" step="any" min="0.5" max="25" value="5.1126" required>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row row-2" style="margin-top:1.25rem">
|
<div class="row row-2" style="margin-top:1.25rem">
|
||||||
@@ -412,7 +412,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<span class="version-tag">v{{ version }} — <a href="https://git.baumann.gr/adebaumann/M1730-Scale" target="_blank" rel="noopener">Source</a></span>
|
<span class="version-tag">v{{ version }} — <a href="https://git.baumann.gr/adebaumann/E440-Scale" target="_blank" rel="noopener">Source</a></span>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let lastSvg = '';
|
let lastSvg = '';
|
||||||
@@ -511,7 +511,7 @@
|
|||||||
if (!lastSvg) return;
|
if (!lastSvg) return;
|
||||||
const a = Object.assign(document.createElement('a'), {
|
const a = Object.assign(document.createElement('a'), {
|
||||||
href: URL.createObjectURL(new Blob([lastSvg], { type: 'image/svg+xml' })),
|
href: URL.createObjectURL(new Blob([lastSvg], { type: 'image/svg+xml' })),
|
||||||
download: 'M1730-Scale.svg',
|
download: 'E440-Scale.svg',
|
||||||
});
|
});
|
||||||
a.click();
|
a.click();
|
||||||
URL.revokeObjectURL(a.href);
|
URL.revokeObjectURL(a.href);
|
||||||
@@ -519,15 +519,6 @@
|
|||||||
|
|
||||||
document.getElementById('font-select').addEventListener('change', doGenerate);
|
document.getElementById('font-select').addEventListener('change', doGenerate);
|
||||||
|
|
||||||
document.querySelectorAll('[data-unit-height]').forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
document.querySelectorAll('[data-unit-height]').forEach(b => b.classList.remove('active'));
|
|
||||||
btn.classList.add('active');
|
|
||||||
document.getElementById('half-height-unit').value = btn.dataset.unitHeight === 'half' ? '1' : '0';
|
|
||||||
doGenerate();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
doGenerate();
|
doGenerate();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user