-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
116 lines (116 loc) · 8.05 KB
/
Copy pathindex.html
File metadata and controls
116 lines (116 loc) · 8.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PPDViewer</title>
<style>
html, body { height: 100%; margin: 0; background: #0b0e13; color: #cfd8e3; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; }
#app { position: fixed; inset: 0; }
#view1 { position: fixed; inset: 0; }
#view2 { position: fixed; bottom: 12px; right: 12px; width: 512px; height: 512px; border: 2px solid rgba(255,255,255,0.2); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
canvas { width: 100% !important; height: 100% !important; }
#inclSliderContainer { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px 8px; backdrop-filter: blur(6px); z-index: 100; }
#inclSlider { width: 40px; height: 200px; -webkit-appearance: slider-vertical; appearance: slider-vertical; }
#inclLabel { font-size: 0.85em; white-space: nowrap; font-weight: 600; }
#inclValue { font-size: 0.75em; min-width: 50px; text-align: center; }
#ui { position: fixed; top: 12px; left: 12px; display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; backdrop-filter: blur(6px); z-index: 100; }
select, button { background: #121826; color: #e5e7eb; border: 1px solid #1f2937; border-radius: 6px; padding: 6px 10px; }
a { color: #93c5fd; text-decoration: none; }
.view-label { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); padding: 2px 8px; border-radius: 4px; font-size: 0.75em; pointer-events: none; z-index: 10; }
</style>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/",
"npyjs": "https://cdn.jsdelivr.net/npm/npyjs@1.6.0/dist/npy.js"
}
}
</script>
</head>
<body>
<div id="app">
<div id="view1"></div>
<div id="view2">
<div class="view-label">PSF Blurred</div>
<div id="view2-controls" style="position:absolute; top:6px; left:6px; right:6px; display:flex; flex-direction:column; gap:4px; background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.08); border-radius:6px; padding:4px 6px; font-size:0.75em;">
<div style="display:flex; align-items:center; gap:6px;">
<label for="blurSize">PSF Blur</label>
<input id="blurSize" type="range" min="0.0" max="8.0" step="0.2" value="0.0" style="flex:1;" />
<span id="blurSizeValue" style="min-width:35px;">0</span>
</div>
<div style="display:flex; align-items:center; gap:6px;">
<label for="posangPSF">Pos angle</label>
<input id="posangPSF" type="range" min="0" max="360" step="1" value="0" style="flex:1;" />
<span id="posangPSFValue">0°</span>
</div>
<div style="display:flex; align-items:center; gap:6px;">
<label for="psfColormapMode">Colormap</label>
<select id="psfColormapMode" style="background:#121826; color:#e5e7eb; border:1px solid #1f2937; border-radius:4px; padding:2px 4px; font-size:0.75em;">
<option value="auto">Auto</option>
<option value="manual">Manual</option>
</select>
</div>
<div id="psfManualControls" style="display:none; gap:4px;">
<div style="display:flex; align-items:center; gap:6px;">
<label for="psfVmin">vmin</label>
<input id="psfVmin" type="range" min="0" max="1" step="0.01" value="0" style="flex:1;" />
<span id="psfVminValue" style="min-width:35px;">0.00</span>
</div>
<div style="display:flex; align-items:center; gap:6px;">
<label for="psfVmax">vmax</label>
<input id="psfVmax" type="range" min="0" max="1" step="0.01" value="1" style="flex:1;" />
<span id="psfVmaxValue" style="min-width:35px;">1.00</span>
</div>
</div>
</div>
<button id="obsCamBtn" style="position:absolute; bottom:6px; right:6px; width:80px; padding:4px 6px; font-size:0.7em; white-space:normal; word-wrap:break-word; overflow-wrap:break-word;">Match obs camera</button>
</div>
<div id="inclSliderContainer">
<label id="inclLabel">Inclination</label>
<input id="inclSlider" type="range" min="-89.99" max="89.99" step="0.5" value="0" disabled />
<span id="inclValue">0°</span>
<button id="lockYZPlaneBtn" style="margin-top:8px; width:100%; font-size:0.75em;">Lock to Y-Z plane</button>
<button id="alignYZBtn" style="margin-top:4px; width:100%; font-size:0.75em;">Align to Y-Z</button>
</div>
</div>
<div id="ui">
<label for="mode">Mode</label>
<select id="mode">
<option value="freq">Frequency slice</option>
<option value="plain">Plain</option>
</select>
<span style="margin-left:12px"></span>
<label for="freqSlider" id="freqLabel" style="margin-left:8px;display:none;">Freq</label>
<input id="freqSlider" type="range" min="0" max="114" step="1" value="57" style="display:none;" />
<span id="freqValue" style="margin-left:4px;display:none;font-size:0.85em;"></span>
<label for="density" style="margin-left:8px;">Density</label>
<input id="density" type="range" min="0" max="50" step="1" value="25.0" />
<span id="densityValue" style="font-size:0.75em;width:42px;text-align:right;">1</span>
<label for="step" style="margin-left:8px;">Step</label>
<input id="step" type="range" min="0.25" max="2.0" step="0.01" value="0.9" />
<label for="logMin" style="margin-left:8px;">log10 min</label>
<input id="logMin" type="number" step="0.1" value="0" style="width:80px;" />
<label for="logMax" style="margin-left:8px;">log10 max</label>
<input id="logMax" type="number" step="0.1" value="8.0" style="width:80px;" />
<label for="bgBrightness" id="bgBrightnessLabel" style="margin-left:8px;display:none;">Disk opacity</label>
<input id="bgBrightness" type="range" min="0.0" max="1.0" step="0.05" value="1.0" style="display:none;" />
<span id="bgBrightnessValue" style="display:none;font-size:0.75em;width:46px;text-align:right;">1.00</span>
<label for="broadeningScale" id="broadeningLabel" style="margin-left:8px;display:none;">Broadening</label>
<input id="broadeningScale" type="range" min="0.5" max="150.0" step="10.0" value="1.0" style="display:none;" />
<label for="bandIntegrate" id="bandIntegrateLabel" style="margin-left:8px;display:none;">Band</label>
<input id="bandIntegrate" type="checkbox" checked style="display:none;" />
<label for="weightGamma" id="weightGammaLabel" style="margin-left:8px;display:none;">Gamma</label>
<input id="weightGamma" type="range" min="0.15" max="2.5" step="0.05" value="1.0" style="display:none;" />
<span id="weightGammaValue" style="display:none;font-size:0.75em;width:50px;text-align:right;">1.00</span>
<label for="showWeight" id="showWeightLabel" style="margin-left:8px;display:none;">Weight</label>
<input id="showWeight" type="checkbox" style="display:none;" />
<label for="minSigmaCh" id="minSigmaChLabel" style="margin-left:8px;display:none;">Turbulence</label>
<input id="minSigmaCh" type="range" min="0.0" max="25.0" step="0.5" value="0.0" style="display:none;" />
<span id="minSigmaChValue" style="display:none;font-size:0.75em;width:54px;text-align:right;">0.00</span>
<button id="toggleAxisBtn" style="margin-left:8px;">Hide Axes</button>
</div>
<script type="module" src="./src/main.js"></script>
</body>
</html>