oscillatory.net
this repo has no description
Reorganize controls layout and increase UI font sizes
- Vg/Rg/RL inputs in a single horizontal row
- Segments and signal shape panels placed side by side below
- Time scale slider moved to left (segments) column
- Math/computed values section moved to bottom of page below plots
- Bump font sizes across UI (labels 12→14px, cfg-row 13→15px, etc.)
- Page title shortened to "Transmission line visualizer"
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
+20
-17
index.html
+20
-17
index.html
···
8
8
</head>
9
9
<body>
10
10
<div class="wrap">
11
-
<h1>EM propagation on a transmission line (incident and reflected waves)</h1>
11
+
<h1>Transmission line visualizer</h1>
12
12
13
13
<div class="row">
14
14
<div class="panel">
···
21
21
</div>
22
22
</div>
23
23
24
-
<div class="top-layout">
25
-
<div class="cfg-vert">
24
+
<div class="cfg-vert">
25
+
<div class="cfg-inputs-row">
26
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
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
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">
29
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>
30
35
<label><span class="lbl">Segments (N)</span>
31
36
<input id="segCount" type="number" min="1" max="10" step="1" value="1" />
32
37
</label>
···
35
40
</label>
36
41
</div>
37
42
<div class="cfg-extra">
38
-
<label><span class="lbl">Time scale — <span id="secPerTauRead" class="mono">2.5</span> s per τ<sub>d</sub></span>
39
-
<input id="secPerTau" type="range" min="0.5" max="6" step="0.1" value="2.5" />
40
-
</label>
41
43
<label><span class="lbl">Reflection termination tolerance (% of |V<sub>1</sub>|)</span>
42
44
<input id="reflectTol" type="number" min="0" step="0.1" value="1" />
43
45
</label>
···
53
55
</label>
54
56
</div>
55
57
</div>
56
-
<div class="eq-panel">
57
-
<div class="eq-lines">
58
-
<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>
59
-
<div>\[V_1 = V_g \dfrac{Z_0}{R_g + Z_0}\]</div>
60
-
<div>\[V_{2k} = \Gamma_L V_{2k-1},\quad k \ge 1\]</div>
61
-
<div>\[V_{2k+1} = \Gamma_S V_{2k},\quad k \ge 1\]</div>
62
-
</div>
63
-
<div class="eq-title">Computed Values</div>
64
-
<div id="derivedValues" class="calc-values mono"></div>
65
-
<div id="waveValues" class="wave-values mono"></div>
66
-
</div>
67
58
</div>
68
59
69
60
<div class="divider"></div>
···
92
83
<div class="key"><span class="swatch ref"></span> reflected</div>
93
84
<div class="key"><span class="swatch sum"></span> total (incident + reflected)</div>
94
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>
95
98
</div>
96
99
</div>
97
100
</div>
+17
-14
style.css
+17
-14
style.css
···
12
12
}
13
13
html, body { height: 100%; background: var(--bg); color: var(--ink); margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
14
14
.wrap { max-width: 1100px; margin: 0 auto; padding: 18px 14px 28px; }
15
-
h1 { font-size: 18px; margin: 0 0 10px; font-weight: 650; letter-spacing: 0.2px; }
15
+
h1 { font-size: 20px; margin: 0 0 10px; font-weight: 650; letter-spacing: 0.2px; }
16
16
.row { display: grid; grid-template-columns: 1fr; gap: 12px; }
17
17
.panel { background: var(--panel); border: 1px solid #1b2736; border-radius: 14px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
18
18
.controls { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end; }
···
25
25
.pill {
26
26
display: inline-flex; gap: 8px; align-items: center;
27
27
background: #101a28; border: 1px solid #24364e; border-radius: 999px;
28
-
padding: 6px 10px; color: var(--muted); font-size: 12px;
28
+
padding: 6px 10px; color: var(--muted); font-size: 14px;
29
29
}
30
30
.pill b { color: var(--ink); font-weight: 650; }
31
31
.controls .readouts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
32
32
.transport { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
33
-
label { font-size: 12px; color: var(--muted); display: grid; gap: 6px; }
33
+
label { font-size: 14px; color: var(--muted); display: grid; gap: 6px; }
34
34
label > span.lbl { white-space: nowrap; }
35
35
input[type="number"], input[type="range"], select {
36
36
width: 100%;
···
43
43
.cfg { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; margin-top: 10px; }
44
44
.cfg > label { grid-column: span 3; }
45
45
.cfg > label.wide { grid-column: span 6; }
46
-
.top-layout { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 12px; margin-top: 10px; }
47
-
.cfg-vert { display: grid; gap: 8px; align-content: start; }
46
+
.cfg-vert { display: grid; gap: 8px; align-content: start; margin-top: 10px; }
47
+
.cfg-inputs-row { display: flex; gap: 8px; }
48
+
.cfg-inputs-row .cfg-row { flex: 1; }
49
+
.cfg-panels-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
48
50
.cfg-row {
49
51
display: grid;
50
52
grid-template-columns: auto 1fr auto auto;
51
53
gap: 8px;
52
54
align-items: center;
53
-
font-size: 13px;
55
+
font-size: 15px;
54
56
color: var(--muted);
55
57
background: #101a28;
56
58
border: 1px solid #24364e;
···
68
70
border-radius: 10px;
69
71
padding: 8px 10px;
70
72
color: var(--muted);
71
-
font-size: 12px;
73
+
font-size: 14px;
72
74
}
73
75
.eq-panel {
74
76
background: #101a28;
75
77
border: 1px solid #24364e;
76
78
border-radius: 10px;
77
79
padding: 10px;
80
+
margin-top: 10px;
78
81
}
79
-
.eq-title { font-size: 12px; color: var(--ink); font-weight: 650; margin: 2px 0 6px; }
80
-
.eq-lines { color: var(--muted); font-size: 13px; line-height: 1.5; }
81
-
.calc-values { color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 6px; }
82
+
.eq-title { font-size: 14px; color: var(--ink); font-weight: 650; margin: 2px 0 6px; }
83
+
.eq-lines { color: var(--muted); font-size: 15px; line-height: 1.5; }
84
+
.calc-values { color: var(--muted); font-size: 14px; line-height: 1.45; margin-top: 6px; }
82
85
.wave-values {
83
86
margin-top: 6px;
84
87
max-height: 170px;
···
86
89
border-top: 1px solid #24364e;
87
90
padding-top: 6px;
88
91
color: var(--muted);
89
-
font-size: 12px;
92
+
font-size: 13px;
90
93
line-height: 1.35;
91
94
}
92
-
.note { color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: 10px; }
95
+
.note { color: var(--muted); font-size: 14px; line-height: 1.35; margin-top: 10px; }
93
96
canvas { width: 100%; height: auto; display: block; border-radius: 12px; }
94
97
.legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
95
-
.key { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
98
+
.key { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
96
99
.swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); }
97
100
.swatch.ref { background: var(--accent2); }
98
101
.swatch.sum { background: var(--ok); }
99
102
.divider { height: 1px; background: #1b2736; margin: 10px 0; }
100
-
.small { font-size: 12px; color: var(--muted); }
103
+
.small { font-size: 14px; color: var(--muted); }
101
104
input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--accent); }
102
105
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; }
103
106
.seg-z0-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }