feat: add live multi-plane and 3d array views
This commit is contained in:
@@ -44,7 +44,7 @@
|
||||
<div class="workspace-heading">
|
||||
<div>
|
||||
<p class="eyebrow">마이크 배치</p>
|
||||
<h1>Array 평면 편집</h1>
|
||||
<h1>Array 2D 편집 · 3D 검사</h1>
|
||||
</div>
|
||||
<p class="workspace-summary" id="workspace-summary">0.45 × 0.45 m · 12 channels</p>
|
||||
</div>
|
||||
@@ -54,6 +54,10 @@
|
||||
<button class="tool-button is-active" id="select-tool-button" type="button" aria-pressed="true" aria-keyshortcuts="V">선택 <kbd>V</kbd></button>
|
||||
<button class="tool-button" id="add-tool-button" type="button" aria-pressed="false" aria-keyshortcuts="A">추가 <kbd>A</kbd></button>
|
||||
</div>
|
||||
<div class="toolbar-group array-view-toggle" role="group" aria-label="배열 보기 방식">
|
||||
<button class="tool-button is-active" id="array-view-2d-button" type="button" aria-pressed="true">2D 편집</button>
|
||||
<button class="tool-button" id="array-view-3d-button" type="button" aria-pressed="false">3D 검사</button>
|
||||
</div>
|
||||
<div class="toolbar-group" aria-label="실행 취소와 다시 실행">
|
||||
<button class="tool-button" id="undo-button" type="button" aria-keyshortcuts="Control+Z" disabled>실행 취소</button>
|
||||
<button class="tool-button" id="redo-button" type="button" aria-keyshortcuts="Control+Shift+Z" disabled>다시 실행</button>
|
||||
@@ -80,6 +84,7 @@
|
||||
<strong>마이크를 클릭하거나 드래그해 위치를 편집하세요.</strong>
|
||||
<span>추가 도구에서는 빈 공간을 클릭해 새 채널을 만듭니다.</span>
|
||||
</div>
|
||||
<div class="canvas-front-badge" id="canvas-front-badge">+Z FRONT · 화면 바깥쪽</div>
|
||||
<div class="selection-status" id="selection-status" role="status" aria-live="polite">선택된 마이크 없음</div>
|
||||
</div>
|
||||
|
||||
@@ -96,7 +101,7 @@
|
||||
<p class="eyebrow">배열 분석</p>
|
||||
<h2>수신 빔 패턴</h2>
|
||||
</div>
|
||||
<span id="beam-pattern-summary">1 kHz · XZ · +Z 조향</span>
|
||||
<span id="beam-pattern-summary">1 kHz · XZ/YZ/XY 동시</span>
|
||||
</summary>
|
||||
|
||||
<div class="beam-pattern-body">
|
||||
@@ -106,18 +111,30 @@
|
||||
<span>geometry-only</span>
|
||||
</p>
|
||||
|
||||
<div class="beam-pattern-view-switch" role="group" aria-label="빔 패턴 보기 방식">
|
||||
<button class="tool-button is-active" id="beam-pattern-view-cuts-button" type="button" aria-pressed="true">세 평면</button>
|
||||
<button class="tool-button" id="beam-pattern-view-3d-button" type="button" aria-pressed="false">3D 표면</button>
|
||||
</div>
|
||||
|
||||
<div class="beam-pattern-fields">
|
||||
<label class="field">
|
||||
<span>아날로그 주파수 (Hz)</span>
|
||||
<input
|
||||
id="beam-pattern-frequency"
|
||||
type="number"
|
||||
min="1"
|
||||
max="1000000"
|
||||
step="100"
|
||||
value="1000"
|
||||
inputmode="decimal"
|
||||
/>
|
||||
<label class="field beam-frequency-field">
|
||||
<span>아날로그 주파수 · 로그 슬라이더</span>
|
||||
<div class="beam-frequency-control">
|
||||
<input
|
||||
id="beam-pattern-frequency"
|
||||
type="range"
|
||||
min="0"
|
||||
max="6000"
|
||||
step="1"
|
||||
value="3000"
|
||||
aria-valuemin="1"
|
||||
aria-valuemax="1000000"
|
||||
aria-valuenow="1000"
|
||||
aria-valuetext="1.000 kHz"
|
||||
/>
|
||||
<output id="beam-pattern-frequency-value" for="beam-pattern-frequency">1.000 kHz</output>
|
||||
</div>
|
||||
<small>1 Hz–1 MHz · 이동 중 live preview</small>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>음속 (m/s)</span>
|
||||
@@ -131,16 +148,8 @@
|
||||
inputmode="decimal"
|
||||
/>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>360° 절단면</span>
|
||||
<select id="beam-pattern-cut">
|
||||
<option value="xz">XZ · 0° +Z / 90° +X</option>
|
||||
<option value="yz">YZ · 0° +Z / 90° +Y</option>
|
||||
<option value="xy">XY · 0° +X / 90° +Y</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>조향각 (deg)</span>
|
||||
<label class="field" data-beam-mode="cuts">
|
||||
<span>단면별 조향각 (deg)</span>
|
||||
<input
|
||||
id="beam-pattern-steering-angle"
|
||||
type="number"
|
||||
@@ -150,8 +159,9 @@
|
||||
value="0"
|
||||
inputmode="decimal"
|
||||
/>
|
||||
<small>각 XZ/YZ/XY 평면 안에서 독립 조향</small>
|
||||
</label>
|
||||
<label class="field">
|
||||
<label class="field" data-beam-mode="cuts">
|
||||
<span>각도 샘플</span>
|
||||
<select id="beam-pattern-samples">
|
||||
<option value="auto">자동 · 위상 간격 기준</option>
|
||||
@@ -162,6 +172,24 @@
|
||||
<option value="5760">5,760 · 0.0625°</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field" data-beam-mode="surface" hidden>
|
||||
<span>3D 조향 방위각 (deg)</span>
|
||||
<input id="beam-pattern-steering-azimuth" type="number" min="-360" max="360" step="1" value="0" inputmode="decimal" />
|
||||
<small>XY에서 +X→+Y</small>
|
||||
</label>
|
||||
<label class="field" data-beam-mode="surface" hidden>
|
||||
<span>3D 조향 고도각 (deg)</span>
|
||||
<input id="beam-pattern-steering-elevation" type="number" min="-90" max="90" step="1" value="90" inputmode="decimal" />
|
||||
<small>+90°가 +Z FRONT</small>
|
||||
</label>
|
||||
<label class="field" data-beam-mode="surface" hidden>
|
||||
<span>3D 구면 표본</span>
|
||||
<select id="beam-pattern-surface-resolution">
|
||||
<option value="5">5° · 72×37</option>
|
||||
<option value="3" selected>3° · 120×61</option>
|
||||
<option value="2.5">2.5° · 144×73</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>표시 하한 (dB)</span>
|
||||
<select id="beam-pattern-floor">
|
||||
@@ -185,24 +213,44 @@
|
||||
현재 배열의 수신 array factor를 계산하고 있습니다.
|
||||
</p>
|
||||
<p class="beam-pattern-note" id="beam-pattern-model-note">
|
||||
이상적으로 보정된 무지향성 점 마이크의 자유장 평면파 단면입니다. 3D 전체 패턴,
|
||||
근거리, 방·하우징, 마이크 주파수 응답은 포함하지 않습니다. ADC가 없으므로
|
||||
Nyquist 초과 주파수도 접지 않고 원래 파장으로 계산합니다.
|
||||
이상적으로 보정된 무지향성 점 마이크의 자유장 평면파 응답입니다. 세 평면은 각각
|
||||
독립 조향한 great-circle 단면이며 3D 모드는 실제 구면 방향을 계산합니다. 근거리,
|
||||
방·하우징, 마이크 주파수 응답은 포함하지 않습니다. ADC가 없으므로 Nyquist 초과
|
||||
주파수도 접지 않고 원래 파장으로 계산합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<figure class="beam-pattern-figure">
|
||||
<svg
|
||||
id="beam-pattern-plot"
|
||||
viewBox="0 0 520 520"
|
||||
role="img"
|
||||
aria-label="수신 빔 패턴 polar plot"
|
||||
aria-describedby="beam-pattern-status beam-pattern-model-note beam-pattern-peaks"
|
||||
></svg>
|
||||
<figcaption id="beam-pattern-peaks">
|
||||
국소 최대를 계산하고 있습니다.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<div class="beam-pattern-visuals">
|
||||
<div class="beam-pattern-cut-grid" id="beam-pattern-cuts-view">
|
||||
<figure class="beam-pattern-figure" data-cut="xz">
|
||||
<div class="beam-pattern-figure-heading"><strong>XZ</strong><span>0° +Z · 90° +X</span></div>
|
||||
<svg id="beam-pattern-plot-xz" viewBox="0 0 520 520" role="img" aria-label="XZ 수신 빔 패턴 polar plot" aria-describedby="beam-pattern-status beam-pattern-model-note beam-pattern-caption-xz"></svg>
|
||||
<figcaption id="beam-pattern-caption-xz">계산 중…</figcaption>
|
||||
</figure>
|
||||
<figure class="beam-pattern-figure" data-cut="yz">
|
||||
<div class="beam-pattern-figure-heading"><strong>YZ</strong><span>0° +Z · 90° +Y</span></div>
|
||||
<svg id="beam-pattern-plot-yz" viewBox="0 0 520 520" role="img" aria-label="YZ 수신 빔 패턴 polar plot" aria-describedby="beam-pattern-status beam-pattern-model-note beam-pattern-caption-yz"></svg>
|
||||
<figcaption id="beam-pattern-caption-yz">계산 중…</figcaption>
|
||||
</figure>
|
||||
<figure class="beam-pattern-figure" data-cut="xy">
|
||||
<div class="beam-pattern-figure-heading"><strong>XY</strong><span>0° +X · 90° +Y</span></div>
|
||||
<svg id="beam-pattern-plot-xy" viewBox="0 0 520 520" role="img" aria-label="XY 수신 빔 패턴 polar plot" aria-describedby="beam-pattern-status beam-pattern-model-note beam-pattern-caption-xy"></svg>
|
||||
<figcaption id="beam-pattern-caption-xy">계산 중…</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<figure class="beam-pattern-surface-figure" id="beam-pattern-surface-view" hidden>
|
||||
<div class="beam-pattern-figure-heading"><strong>3D 구면 응답</strong><span>drag하여 회전 · +Z FRONT</span></div>
|
||||
<canvas id="beam-pattern-surface" tabindex="0" role="img" aria-label="3D 수신 빔 패턴 표면" aria-describedby="beam-pattern-status beam-pattern-model-note beam-pattern-surface-caption"></canvas>
|
||||
<figcaption id="beam-pattern-surface-caption">3D 표면을 준비하고 있습니다.</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="beam-pattern-diagnostics" id="beam-pattern-peaks" aria-label="평면별 sampled peak 진단">
|
||||
<p data-cut="xz"><strong>XZ</strong><span>계산 중…</span></p>
|
||||
<p data-cut="yz"><strong>YZ</strong><span>계산 중…</span></p>
|
||||
<p data-cut="xy"><strong>XY</strong><span>계산 중…</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user