this repo has no description
1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width,initial-scale=1" />
6 <title>Transmission line visualizer</title>
7 <link rel="stylesheet" type="text/css" href="style.css" />
8</head>
9<body>
10 <div class="wrap">
11 <h1>Transmission line visualizer</h1>
12
13 <div class="row">
14 <div class="panel">
15 <div class="controls">
16 <div class="readouts">
17 <div class="pill"><span>t / τ<sub>d</sub>:</span> <b class="mono" id="tRead">0.000</b></div>
18 <div class="pill"><span>Γ<sub>L</sub>:</span> <b class="mono" id="gLRead">0.000</b></div>
19 <div class="pill"><span>V<sub>S</sub>:</span> <b class="mono" id="vsRead">0.000 V</b></div>
20 <div class="pill"><span>V<sub>L</sub>:</span> <b class="mono" id="vlRead">0.000 V</b></div>
21 </div>
22 </div>
23
24 <div class="cfg-vert">
25 <div class="cfg-inputs-row">
26 <div class="cfg-row"><span>V<sub>g</sub> =</span><input id="Vg" type="number" step="0.1" value="5.0" /><span>V</span></div>
27 <div class="cfg-row"><span>R<sub>g</sub> =</span><input id="Rg" type="number" step="0.1" value="20.0" /><span>(Ω)</span></div>
28 <div class="cfg-row"><span>R<sub>L</sub> =</span><input id="RL" type="number" step="0.1" value="30.0" /><span>(Ω)</span><button id="RLOpen" type="button" title="Open circuit (R_L = ∞)">∞</button></div>
29 </div>
30 <div class="cfg-panels-row">
31 <div class="cfg-extra">
32 <label><span class="lbl">Time scale — <span id="secPerTauRead" class="mono">2.5</span> s per τ<sub>d</sub></span>
33 <input id="secPerTau" type="range" min="0.5" max="6" step="0.1" value="2.5" />
34 </label>
35 <label><span class="lbl">Segments (N)</span>
36 <input id="segCount" type="number" min="1" max="10" step="1" value="1" />
37 </label>
38 <label><span class="lbl">Z<sub>0</sub> per segment (Ω)</span>
39 <div id="segZ0List" class="seg-z0-list"></div>
40 </label>
41 </div>
42 <div class="cfg-extra">
43 <label><span class="lbl">Reflection termination tolerance (% of |V<sub>1</sub>|)</span>
44 <input id="reflectTol" type="number" min="0" step="0.1" value="1" />
45 </label>
46 <label><span class="lbl">Signal shape</span>
47 <select id="riseMode">
48 <option value="step">Step (instantaneous)</option>
49 <option value="linear">Linear ramp (trapezoidal)</option>
50 <option value="exp">Smooth S-curve (erf)</option>
51 </select>
52 </label>
53 <label><span class="lbl">Rise time constant τ<sub>r</sub> / τ<sub>d</sub></span>
54 <input id="riseTau" type="number" min="0.01" max="5" step="0.01" value="0.1" disabled />
55 </label>
56 </div>
57 </div>
58 </div>
59
60 <div class="divider"></div>
61
62 <div class="transport">
63 <button id="startBtn">Start</button>
64 <button id="pauseBtn">Pause</button>
65 <button id="resetBtn">Reset</button>
66 </div>
67
68 <!-- TDR canvas (above circuit) -->
69 <canvas id="tdr" width="600" height="300" style="width:600px;margin:0 auto;" aria-label="TDR waveform — voltage at detection point vs time"></canvas>
70
71 <div class="divider"></div>
72
73 <!-- Circuit canvas -->
74 <canvas id="circuit" width="1100" height="260" aria-label="Circuit with wavefront highlight"></canvas>
75
76 <div class="divider"></div>
77
78 <!-- Plot canvas (bottom) -->
79 <canvas id="plot" width="1100" height="360" aria-label="Voltage vs z plot with incident and reflected waves"></canvas>
80
81 <div class="legend">
82 <div class="key"><span class="swatch"></span> incident</div>
83 <div class="key"><span class="swatch ref"></span> reflected</div>
84 <div class="key"><span class="swatch sum"></span> total (incident + reflected)</div>
85 <div class="small">Axes: horizontal is position <span class="mono">z</span> (0 → ℓ). Vertical is voltage.</div>
86 </div>
87
88 <div class="eq-panel">
89 <div class="eq-lines">
90 <div>\[\Gamma_L = \dfrac{R_L - Z_0}{R_L + Z_0}, \quad \Gamma_S = \dfrac{R_g - Z_0}{R_g + Z_0}\]</div>
91 <div>\[V_1 = V_g \dfrac{Z_0}{R_g + Z_0}\]</div>
92 <div>\[V_{2k} = \Gamma_L V_{2k-1},\quad k \ge 1\]</div>
93 <div>\[V_{2k+1} = \Gamma_S V_{2k},\quad k \ge 1\]</div>
94 </div>
95 <div class="eq-title">Computed Values</div>
96 <div id="derivedValues" class="calc-values mono"></div>
97 <div id="waveValues" class="wave-values mono"></div>
98 </div>
99 </div>
100 </div>
101 </div>
102
103<script>
104 window.MathJax = {
105 tex: { inlineMath: [['\\(', '\\)'], ['$', '$']] },
106 svg: { fontCache: 'global' }
107 };
108</script>
109<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
110<script src="utils.js"></script>
111<script src="physics.js"></script>
112<script src="render.js"></script>
113<script src="app.js"></script>
114</body>
115</html>