| |
| |
| |
| |
| const $ = (id) => document.getElementById(id); |
| const st = { low: 0, high: 1, auto: null }; |
| let U = null; |
|
|
| function setLowHigh(low, high, src = 'api') { |
| low = Math.max(0, Math.min(1, +low)); high = Math.max(0, Math.min(1, +high)); |
| if (!(high > low)) high = Math.min(1, low + 0.001); |
| st.low = low; st.high = high; |
| if (U) U.value.set(low, high); |
| sync(src); |
| return state(); |
| } |
| const setWindow = (width, level) => { st.auto = null; const w = Math.max(0.001, Math.min(1, +width)), l = +level; return setLowHigh(l - w / 2, l + w / 2, 'api'); }; |
| function state() { return { low: +st.low.toFixed(4), high: +st.high.toFixed(4), window: +(st.high - st.low).toFixed(4), level: +((st.high + st.low) / 2).toFixed(4), auto: st.auto }; } |
|
|
| |
| let HIST = null; |
| function histogram() { |
| if (HIST) return HIST; |
| const tex = window.unrollView?.gfx?.ctTexture?.(); const img = tex?.image; |
| if (!img) return null; |
| const W = 512, H = Math.max(1, Math.round(W * (img.height / img.width))); |
| const c = document.createElement('canvas'); c.width = W; c.height = H; |
| const x = c.getContext('2d', { willReadFrequently: true }); x.drawImage(img, 0, 0, W, H); |
| const d = x.getImageData(0, 0, W, H).data, h = new Uint32Array(256); |
| for (let i = 0; i < d.length; i += 4) if (d[i] > 3) h[d[i]]++; |
| return (HIST = h); |
| } |
| function percentiles(h, pl, ph) { |
| let n = 0; for (const v of h) n += v; |
| if (!n) return [0, 1]; |
| const at = (p) => { const k = n * p / 100; let s = 0; for (let i = 0; i < 256; i++) { s += h[i]; if (s >= k) return i / 255; } return 1; }; |
| return [at(pl), at(ph)]; |
| } |
| function auto(pLow, pHigh) { |
| pLow = +(pLow ?? setting('ctAutoLow', 1)); pHigh = +(pHigh ?? setting('ctAutoHigh', 99)); |
| const h = histogram(); if (!h) return null; |
| const [lo, hi] = percentiles(h, pLow, pHigh); |
| st.auto = { pLow, pHigh }; |
| setLowHigh(lo, hi, 'auto'); st.auto = { pLow, pHigh }; |
| return state(); |
| } |
| function reset() { st.auto = null; return setLowHigh(0, 1, 'reset'); } |
| function setting(k, d) { try { return window.unrollView.settings.get(k); } catch { return d; } } |
|
|
| |
| function sync() { |
| const w = $('ctwlWin'), l = $('ctwlLev'); |
| if (w) { w.value = (st.high - st.low).toFixed(3); $('ctwlWinOut').textContent = Math.round((st.high - st.low) * 100) + '%'; } |
| if (l) { l.value = ((st.high + st.low) / 2).toFixed(3); $('ctwlLevOut').textContent = Math.round((st.high + st.low) * 50) + '%'; } |
| $('ctwlAuto')?.setAttribute('aria-pressed', !!st.auto); |
| } |
| function buildGroup(P) { |
| if ($('uiCT')) return; |
| const g = P.group('X-ray contrast', 'ui-ct'); g.id = 'uiCT'; |
| g.insertAdjacentHTML('beforeend', ` |
| <label class="ui-row" for="ctwlWin"><span>Window (contrast range) <output id="ctwlWinOut" class="dim"></output></span><input type="range" id="ctwlWin" min="0.02" max="1" step="0.01" data-action="ct.window" aria-label="X-ray window: the brightness range shown, narrower is more contrast"></label> |
| <label class="ui-row" for="ctwlLev"><span>Level (center brightness) <output id="ctwlLevOut" class="dim"></output></span><input type="range" id="ctwlLev" min="0" max="1" step="0.01" data-action="ct.level" aria-label="X-ray level: the brightness at the middle of the window"></label> |
| <div class="ui-grid"><button type="button" class="icon ui-btn" id="ctwlAuto" data-action="ct.auto" aria-pressed="false" title="Auto contrast: stretch the 1st to 99th percentile of the X-ray brightness (Settings sets the percentiles)"><span class="ui-lbl">Auto contrast</span></button> |
| <button type="button" class="icon ui-btn" id="ctwlReset" data-action="ct.reset" title="Show the full X-ray brightness range"><span class="ui-lbl">Full range</span></button></div>`); |
| P.body.append(g); |
| const onWL = () => { st.auto = null; setWindow($('ctwlWin').value, $('ctwlLev').value); }; |
| $('ctwlWin').addEventListener('input', onWL); $('ctwlLev').addEventListener('input', onWL); |
| $('ctwlAuto').onclick = () => auto(); $('ctwlReset').onclick = () => reset(); |
| P.addAction?.('ct.auto', { id: 'ctwlAuto', label: 'X-ray auto contrast (percentiles from Settings)', run: (a) => auto(...(Array.isArray(a) ? a : [])) }); |
| P.addAction?.('ct.reset', { id: 'ctwlReset', label: 'X-ray full brightness range', run: () => reset() }); |
| sync(); P.measure?.(); |
| } |
|
|
| function init() { |
| const v = window.unrollView; |
| if (!v?.gfx?.ctWindow) return setTimeout(init, 100); |
| U = v.gfx.ctWindow; |
| const api = { setWindow, setLowHigh, auto, reset, state, histogram: () => Array.from(histogram() || []), percentiles: (a, b) => percentiles(histogram(), a, b) }; |
| v.ct = Object.assign(v.ct || {}, api); |
| if (window.unrollPanel) buildGroup(window.unrollPanel); else addEventListener('unroll:panel', (e) => buildGroup(e.detail), { once: true }); |
| |
| const q = new URLSearchParams(location.search); |
| const go = () => { |
| if (q.has('ctwin') || q.has('ctlevel')) setWindow(q.get('ctwin') ?? 1, q.get('ctlevel') ?? 0.5); |
| else if (q.has('ctauto')) { const [a, b] = q.get('ctauto').split(',').map(Number); auto(b ? a : undefined, b || undefined); } |
| else if (setting('ctAuto', false)) auto(); |
| }; |
| const wait = () => (v.gfx.ctTexture()?.image ? go() : setTimeout(wait, 200)); wait(); |
| addEventListener('unroll:settings', (e) => { if (e.detail.ctAuto && !st.auto) auto(); else if (st.auto) auto(); }); |
| } |
| init(); |
|
|
