mirror of
https://github.com/got-feedBack/feedBack.git
synced 2026-07-22 21:01:40 +00:00
497 lines
24 KiB
JavaScript
497 lines
24 KiB
JavaScript
(function () {
|
||
'use strict';
|
||
|
||
// ── Constants ─────────────────────────────────────────────────────
|
||
var _TUNER_PT_IN_TUNE_THR = 2;
|
||
var _TUNER_PT_LED_COUNT = 11;
|
||
var _TUNER_PT_CENTS_RANGE = 50;
|
||
|
||
// Display colours
|
||
var _TUNER_PT_LIT = '#ff2200';
|
||
var _TUNER_PT_UNLIT = '#1a0000';
|
||
|
||
var _TUNER_PT_BG = '#0d0000';
|
||
|
||
// ── 8-segment map ─────────────────────────────────────────────────
|
||
// Segments indexed: [a, b, c, d, e, f, g1, g2]
|
||
var _TUNER_PT_SEGMENTS = {
|
||
// a b c d e f g1 g2
|
||
'A': [ true, true, true, false, true, true, true, true ],
|
||
'B': [ false, false, true, true, true, true, true, true ],
|
||
'C': [ true, false, false, true, true, true, false, false ],
|
||
'D': [ false, true, true, true, true, false, true, true ],
|
||
'E': [ true, false, false, true, true, true, true, false ],
|
||
'F': [ true, false, false, false, true, true, true, false ],
|
||
'G': [ true, false, true, true, true, true, false, true ],
|
||
' ': [ false, false, false, false, false, false, false, false ],
|
||
};
|
||
|
||
// Instance counter for unique SVG gradient IDs
|
||
var _ppTinyCount = 0;
|
||
|
||
window['_tunerViz_pp-tiny'] = function (container) {
|
||
'use strict';
|
||
|
||
// ── SVG frame ─────────────────────────────────────────────────
|
||
// Shape: semi-circle (r = W/2) + rectangle (h = W/4)
|
||
// Total height = W/2 + W/4 = 3W/4 → aspect-ratio 4:3
|
||
// viewBox "0 0 100 75" (75 = 3/4 × 100).
|
||
// Semi-circle arc: centre (50,50), r=50, from (0,50) to (100,50)
|
||
// Rectangle: y 50→75, full width, small rounded bottom corners
|
||
// Face inset 4 units on all sides:
|
||
// Semi-circle arc: centre (50,50), r=46, from (4,50) to (96,50)
|
||
// Rectangle: y 50→71 (75−4=71)
|
||
var _gradId = 'ppTinyFrameGrad' + (++_ppTinyCount);
|
||
|
||
var panel = document.createElement('div');
|
||
panel.style.cssText = 'position:relative;width:100%;aspect-ratio:4/3;user-select:none;';
|
||
|
||
// SVG draws the gray frame + dark face shape
|
||
var frameSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||
frameSvg.setAttribute('viewBox', '0 0 100 75');
|
||
frameSvg.setAttribute('preserveAspectRatio', 'none');
|
||
frameSvg.style.cssText = 'position:absolute;left:0;top:0;width:100%;height:100%;display:block;';
|
||
|
||
var _brushId = 'ppTinyBrush' + _ppTinyCount;
|
||
var _bevelBrushId = 'ppTinyBevelBrush' + _ppTinyCount;
|
||
|
||
var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
|
||
|
||
// Main face: metallic gradient with multiple highlight/shadow bands
|
||
var grad = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
|
||
grad.setAttribute('id', _gradId);
|
||
grad.setAttribute('x1', '0.2'); grad.setAttribute('y1', '0');
|
||
grad.setAttribute('x2', '0.8'); grad.setAttribute('y2', '1');
|
||
[['0%','#f2f2f2'],['14%','#d0d0d0'],['30%','#888888'],['46%','#bababa'],['62%','#7e7e7e'],['80%','#c2c2c2'],['100%','#6a6a6a']].forEach(function(s) {
|
||
var stop = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
|
||
stop.setAttribute('offset', s[0]); stop.setAttribute('stop-color', s[1]);
|
||
grad.appendChild(stop);
|
||
});
|
||
defs.appendChild(grad);
|
||
|
||
|
||
function _makeBrushFilter(id, freqX, freqY, seed, contrast, base) {
|
||
var c = contrast || 0.4, b = base !== undefined ? base : 0.25;
|
||
var v = c + ' 0 0 0 ' + b + ' ' + c + ' 0 0 0 ' + b + ' ' + c + ' 0 0 0 ' + b + ' 0 0 0 1 0';
|
||
var f = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
|
||
f.setAttribute('id', id);
|
||
f.setAttribute('color-interpolation-filters', 'sRGB');
|
||
var t = document.createElementNS('http://www.w3.org/2000/svg', 'feTurbulence');
|
||
t.setAttribute('type', 'fractalNoise'); t.setAttribute('baseFrequency', freqX + ' ' + freqY);
|
||
t.setAttribute('numOctaves', '2'); t.setAttribute('seed', seed); t.setAttribute('result', 'noise');
|
||
var cm = document.createElementNS('http://www.w3.org/2000/svg', 'feColorMatrix');
|
||
cm.setAttribute('type', 'matrix'); cm.setAttribute('in', 'noise');
|
||
cm.setAttribute('values', v);
|
||
cm.setAttribute('result', 'grayNoise');
|
||
var bl = document.createElementNS('http://www.w3.org/2000/svg', 'feBlend');
|
||
bl.setAttribute('in', 'SourceGraphic'); bl.setAttribute('in2', 'grayNoise');
|
||
bl.setAttribute('mode', 'soft-light'); bl.setAttribute('result', 'blended');
|
||
var cp = document.createElementNS('http://www.w3.org/2000/svg', 'feComposite');
|
||
cp.setAttribute('in', 'blended'); cp.setAttribute('in2', 'SourceGraphic'); cp.setAttribute('operator', 'in');
|
||
f.appendChild(t); f.appendChild(cm); f.appendChild(bl); f.appendChild(cp);
|
||
return f;
|
||
}
|
||
defs.appendChild(_makeBrushFilter(_brushId, '0.65', '0.015', '3', 0.4, 0.25)); // horizontal grain — main arc face
|
||
defs.appendChild(_makeBrushFilter(_bevelBrushId, '0.45', '0.015', '7', 0.65, 0.08)); // horizontal grain, lower freq, higher contrast — bevel face
|
||
|
||
frameSvg.appendChild(defs);
|
||
|
||
// Main frame — restored with original rounded corners, unchanged
|
||
var framePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||
framePath.setAttribute('d', 'M 0,50 A 50,50 0 0 1 100,50 L 100,73 Q 100,75 98,75 L 2,75 Q 0,75 0,73 Z');
|
||
framePath.setAttribute('fill', 'url(#' + _gradId + ')');
|
||
framePath.setAttribute('filter', 'url(#' + _brushId + ')');
|
||
frameSvg.appendChild(framePath);
|
||
|
||
// Bevel trapezoid — sits on top of the main frame, covers only the bottom strip.
|
||
// Sides meet the corner curves at their t=0.5 midpoints (de Casteljau):
|
||
// Right midpoint: (99.5, 74.5); lower-half bezier: Q 99,75 98,75
|
||
// Left midpoint: (0.5, 74.5); lower-half bezier: Q 1,75 0.5,74.5 (path direction reversed)
|
||
// 45° sides: Δx=Δy=5.5 each ✓ — top edge y=69, x=6 to x=94
|
||
var bevelPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||
bevelPath.setAttribute('d', 'M 6,69 L 94,69 L 99.5,74.5 Q 99,75 98,75 L 2,75 Q 1,75 0.5,74.5 Z');
|
||
bevelPath.setAttribute('fill', '#c0c0c0');
|
||
bevelPath.setAttribute('filter', 'url(#' + _bevelBrushId + ')');
|
||
frameSvg.appendChild(bevelPath);
|
||
|
||
var faceBgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||
faceBgPath.setAttribute('d', 'M 4,50 A 46,46 0 0 1 96,50 L 96,70 Q 96,71 95,71 L 5,71 Q 4,71 4,70 Z');
|
||
faceBgPath.setAttribute('fill', '#080808');
|
||
frameSvg.appendChild(faceBgPath);
|
||
|
||
panel.appendChild(frameSvg);
|
||
|
||
// ── Black panel face (content host) ───────────────────────────
|
||
// Face occupies inset 4 units in viewBox coords:
|
||
// left: 4/100 = 4%, top: 4/75 = 5.333%
|
||
// width: 92/100 = 92%, height: 67/75 = 89.333%
|
||
var face = document.createElement('div');
|
||
face.style.cssText = 'position:absolute;left:4%;top:5.333%;width:92%;height:89.333%;overflow:hidden;';
|
||
panel.appendChild(face);
|
||
|
||
// ── Arc geometry ──────────────────────────────────────────────
|
||
// Face SVG inset: x 4–96, y 4–71 (width=92, height=67 in panel units).
|
||
// Arc centre in panel SVG = (50, 50) → in face-div %:
|
||
// cx = (50−4)/92×100 = 50 %
|
||
// cy = (50−4)/67×100 = 68.657 %
|
||
// Face aspect A = 92/67 ≈ 1.3731.
|
||
// For a physical circle of radius r (% of face-width):
|
||
// x = cx + r·cos(θ) (face-width %)
|
||
// y = cy − r·A·sin(θ) (face-height %; A corrects non-square face)
|
||
// Separator SVG arc (viewBox 0 0 100 100, preserveAspectRatio=none):
|
||
// rx = r (x-units ≡ face-width %), ry = r·A (y-units ≡ face-height %)
|
||
// Radii (r in % of face_width, max=46):
|
||
// LEDs r=40 → top at (50%, 14%)
|
||
// line r=35 → top at (50%, 21%)
|
||
// labels r=30 → top at (50%, 27%)
|
||
|
||
var _ARC_CX = 50;
|
||
var _ARC_CY = 68.657; // % of face height
|
||
var _ARC_ASPECT = 92 / 67; // face width / face height
|
||
var _ARC_R_LEDS = 40;
|
||
var _ARC_R_LINE = 35;
|
||
var _ARC_R_LABELS = 30;
|
||
var _ARC_CENTRE_IDX = Math.floor(_TUNER_PT_LED_COUNT / 2); // 5
|
||
|
||
function _arcPoint(i, r) {
|
||
var angleDeg = 180 - i * (180 / (_TUNER_PT_LED_COUNT - 1));
|
||
var rad = angleDeg * Math.PI / 180;
|
||
return {
|
||
x: _ARC_CX + r * Math.cos(rad),
|
||
y: _ARC_CY - r * _ARC_ASPECT * Math.sin(rad),
|
||
};
|
||
}
|
||
|
||
// ── 1. LED arc ────────────────────────────────────────────────
|
||
var leds = [];
|
||
for (var i = 0; i < _TUNER_PT_LED_COUNT; i++) {
|
||
var pt = _arcPoint(i, _ARC_R_LEDS);
|
||
|
||
var led = document.createElement('div');
|
||
led.style.position = 'absolute';
|
||
led.style.left = pt.x.toFixed(2) + '%';
|
||
led.style.top = pt.y.toFixed(2) + '%';
|
||
led.style.transform = 'translate(-50%, -50%)';
|
||
led.style.width = '5%';
|
||
led.style.aspectRatio = '1 / 1';
|
||
led.style.borderRadius = '50%';
|
||
|
||
var isCentre = (i === _ARC_CENTRE_IDX);
|
||
led.style.background = isCentre
|
||
? 'radial-gradient(circle at 35% 35%, #3a0000, #1a0000)'
|
||
: 'radial-gradient(circle at 35% 35%, #2a2000, #141000)';
|
||
led.style.border = '1px solid ' + (isCentre ? '#400' : '#420');
|
||
led.style.boxShadow = 'none';
|
||
|
||
face.appendChild(led);
|
||
leds.push(led);
|
||
}
|
||
|
||
// ── 2. White separator arc (SVG) ──────────────────────────────
|
||
// Semicircle from (cx−r, cy) to (cx+r, cy) through the top.
|
||
// viewBox "0 0 100 100" fills the square face exactly; rx=ry gives a
|
||
// true circle. sweep=1 (clockwise in SVG y-down space) draws upward.
|
||
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||
svg.setAttribute('viewBox', '0 0 100 100');
|
||
svg.setAttribute('preserveAspectRatio', 'none');
|
||
svg.style.cssText = 'position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible';
|
||
|
||
// SVG viewBox 0 0 100 100, preserveAspectRatio=none:
|
||
// x-unit = 1% face-width, y-unit = 1% face-height.
|
||
// For a physical circle: rx=r, ry=r×A (corrects non-square face).
|
||
var x0Line = _ARC_CX - _ARC_R_LINE;
|
||
var x1Line = _ARC_CX + _ARC_R_LINE;
|
||
var ryLine = (_ARC_R_LINE * _ARC_ASPECT).toFixed(3);
|
||
var arcPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||
arcPath.setAttribute('d',
|
||
'M ' + x0Line + ',' + _ARC_CY.toFixed(3) +
|
||
' A ' + _ARC_R_LINE + ',' + ryLine + ' 0 0 1 ' +
|
||
x1Line + ',' + _ARC_CY.toFixed(3));
|
||
arcPath.setAttribute('stroke', 'rgba(255,255,255,0.65)');
|
||
arcPath.setAttribute('stroke-width', '0.8');
|
||
arcPath.setAttribute('fill', 'none');
|
||
svg.appendChild(arcPath);
|
||
face.appendChild(svg);
|
||
|
||
// ── 3. Range labels ───────────────────────────────────────────
|
||
var labelDefs = [
|
||
{ text: '-50', i: 0 },
|
||
{ text: '0', i: _ARC_CENTRE_IDX },
|
||
{ text: '+50', i: _TUNER_PT_LED_COUNT - 1 },
|
||
];
|
||
labelDefs.forEach(function (d) {
|
||
var pt = _arcPoint(d.i, _ARC_R_LABELS);
|
||
var el = document.createElement('div');
|
||
el.style.position = 'absolute';
|
||
el.style.left = pt.x.toFixed(2) + '%';
|
||
el.style.top = pt.y.toFixed(2) + '%';
|
||
el.style.transform = 'translate(-50%, -50%)';
|
||
el.style.color = '#cccccc';
|
||
el.style.fontSize = '50%';
|
||
el.style.fontWeight = 'bold';
|
||
el.style.fontFamily = 'sans-serif';
|
||
el.style.lineHeight = '1';
|
||
el.textContent = d.text;
|
||
face.appendChild(el);
|
||
});
|
||
|
||
// ── 4. LCD display (letter + # inside one box) ────────────────
|
||
// top=50%, height=35% → bottom=85%, centre=67.5%.
|
||
var displayWrap = document.createElement('div');
|
||
displayWrap.style.cssText = [
|
||
'position:absolute',
|
||
'left:50%',
|
||
'top:50%',
|
||
'transform:translateX(-50%)',
|
||
'width:23%',
|
||
'height:35%',
|
||
'background:' + _TUNER_PT_BG,
|
||
'border-radius:3px',
|
||
'border:1px solid #2a0000',
|
||
'display:flex',
|
||
'flex-direction:row',
|
||
'align-items:center',
|
||
'justify-content:center',
|
||
'padding:4%',
|
||
'box-sizing:border-box',
|
||
'box-shadow:inset 0 0 8px #000'
|
||
].join(';');
|
||
face.appendChild(displayWrap);
|
||
|
||
// Letter digit (8-segment SVG, viewBox 100×200)
|
||
// T=16, G=5, CH=6, mid-gap=3 — thicker segs, uniform 5-unit gaps
|
||
// horiz: (xL+CH,y0),(xR-CH,y0),(xR,y0+T/2),(xR-CH,y1),(xL+CH,y1),(xL,y0+T/2)
|
||
// vert: (x+T/2,y0),(x+T,y0+CH),(x+T,y1-CH),(x+T/2,y1),(x,y1-CH),(x,y0+CH)
|
||
var segSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||
segSvg.setAttribute('viewBox', '0 0 100 200');
|
||
segSvg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
||
segSvg.style.cssText = 'width:55%;aspect-ratio:1/2;flex-shrink:0;overflow:visible;';
|
||
displayWrap.appendChild(segSvg);
|
||
|
||
var segmentEls = {};
|
||
|
||
function _makeSeg(key, points) {
|
||
var el = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
|
||
el.setAttribute('points', points);
|
||
el.setAttribute('fill', _TUNER_PT_UNLIT);
|
||
segSvg.appendChild(el);
|
||
segmentEls[key] = el;
|
||
}
|
||
|
||
_makeSeg('a', '11,5 89,5 95,13 89,21 11,21 5,13');
|
||
_makeSeg('b', '87,26 95,32 95,81 87,87 79,81 79,32');
|
||
_makeSeg('c', '87,113 95,119 95,168 87,174 79,168 79,119');
|
||
_makeSeg('d', '11,179 89,179 95,187 89,195 11,195 5,187');
|
||
_makeSeg('e', '13,113 21,119 21,168 13,174 5,168 5,119');
|
||
_makeSeg('f', '13,26 21,32 21,81 13,87 5,81 5,32');
|
||
_makeSeg('g1', '11,92 42.5,92 48.5,100 42.5,108 11,108 5,100');
|
||
_makeSeg('g2', '57.5,92 89,92 95,100 89,108 57.5,108 51.5,100');
|
||
|
||
// "#" symbol — absolute-positioned bottom-right, viewBox 90×90 (symbol fills it)
|
||
// T=10, s=(90-20)/3=23.3 → bars and gaps evenly distributed
|
||
var sharpSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||
sharpSvg.setAttribute('viewBox', '0 0 90 90');
|
||
sharpSvg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
||
sharpSvg.style.cssText = 'position:absolute;top:54%;right:6%;width:22%;aspect-ratio:1/1;overflow:visible;pointer-events:none;';
|
||
displayWrap.appendChild(sharpSvg);
|
||
|
||
var sharpParts = [];
|
||
function _makeSharpPoly(points) {
|
||
var el = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
|
||
el.setAttribute('points', points);
|
||
el.setAttribute('fill', _TUNER_PT_UNLIT);
|
||
sharpSvg.appendChild(el);
|
||
sharpParts.push(el);
|
||
}
|
||
|
||
// left vert, right vert, top horiz, bottom horiz — all 90 units, T=10, CH=4, s=23.3
|
||
_makeSharpPoly('28.3,0 33.3,4 33.3,86 28.3,90 23.3,86 23.3,4');
|
||
_makeSharpPoly('61.7,0 66.7,4 66.7,86 61.7,90 56.7,86 56.7,4');
|
||
_makeSharpPoly('4,23.3 86,23.3 90,28.3 86,33.3 4,33.3 0,28.3');
|
||
_makeSharpPoly('4,56.7 86,56.7 90,61.7 86,66.7 4,66.7 0,61.7');
|
||
|
||
// "♭" symbol — same position as sharpSvg, shown in place of it for flat notes
|
||
var flatSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||
flatSvg.setAttribute('viewBox', '0 0 90 90');
|
||
flatSvg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
||
flatSvg.style.cssText = 'position:absolute;top:54%;right:6%;width:22%;aspect-ratio:1/1;overflow:visible;pointer-events:none;display:none;';
|
||
displayWrap.appendChild(flatSvg);
|
||
var flatText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||
flatText.setAttribute('x', '45');
|
||
flatText.setAttribute('y', '82');
|
||
flatText.setAttribute('text-anchor', 'middle');
|
||
flatText.setAttribute('font-size', '85');
|
||
flatText.setAttribute('font-family', 'Georgia, serif');
|
||
flatText.setAttribute('fill', _TUNER_PT_UNLIT);
|
||
flatText.textContent = '♭';
|
||
flatSvg.appendChild(flatText);
|
||
|
||
// ── 5. AUTO LED (lit when mode is 'free' or 'auto') ──────────
|
||
// Anchored to the display's right edge (≈69%) at the display's
|
||
// vertical midpoint (54% + 20% = 74%).
|
||
var autoWrap = document.createElement('div');
|
||
autoWrap.style.cssText = 'position:absolute;left:85%;top:92%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:4%;pointer-events:none';
|
||
|
||
var autoLed = document.createElement('div');
|
||
autoLed.style.cssText = [
|
||
'width:6%',
|
||
'aspect-ratio:1/1',
|
||
'border-radius:50%',
|
||
'background:radial-gradient(circle at 35% 35%, #3a0000, #1a0000)',
|
||
'box-shadow:none',
|
||
'border:1px solid #400',
|
||
'flex-shrink:0'
|
||
].join(';');
|
||
|
||
var autoLabel = document.createElement('span');
|
||
autoLabel.style.cssText = 'color:#cccccc;font-size:52%;font-weight:bold;letter-spacing:0.05em;font-family:sans-serif;';
|
||
autoLabel.textContent = 'AUTO';
|
||
|
||
autoWrap.appendChild(autoLed);
|
||
autoWrap.appendChild(autoLabel);
|
||
face.appendChild(autoWrap);
|
||
|
||
// ── Brand label ───────────────────────────────────────────────
|
||
var brandLabel = document.createElement('div');
|
||
brandLabel.style.cssText = [
|
||
'position:absolute',
|
||
'bottom:4%',
|
||
'left:50%',
|
||
'transform:translateX(-50%)',
|
||
'color:#cccccc',
|
||
'font-size:60%',
|
||
'font-weight:bold',
|
||
'letter-spacing:0.1em',
|
||
'font-family:sans-serif',
|
||
'pointer-events:none'
|
||
].join(';');
|
||
brandLabel.textContent = 'PP-Tiny';
|
||
face.appendChild(brandLabel);
|
||
|
||
container.appendChild(panel);
|
||
|
||
// ── Helpers ───────────────────────────────────────────────────
|
||
|
||
function _setLed(index, lit) {
|
||
var led = leds[index];
|
||
var isCentre = (index === _ARC_CENTRE_IDX);
|
||
if (lit) {
|
||
if (isCentre) {
|
||
led.style.background = 'radial-gradient(circle at 35% 35%, #ff6644, #cc1100)';
|
||
led.style.boxShadow = '0 0 5px 2px #ff3300, 0 0 10px 4px #aa1100';
|
||
led.style.border = '1px solid #ff4400';
|
||
} else {
|
||
led.style.background = 'radial-gradient(circle at 35% 35%, #ffee66, #cc9900)';
|
||
led.style.boxShadow = '0 0 5px 2px #ffcc00, 0 0 10px 4px #aa8800';
|
||
led.style.border = '1px solid #ffbb00';
|
||
}
|
||
} else {
|
||
if (isCentre) {
|
||
led.style.background = 'radial-gradient(circle at 35% 35%, #3a0000, #1a0000)';
|
||
led.style.boxShadow = 'none';
|
||
led.style.border = '1px solid #400';
|
||
} else {
|
||
led.style.background = 'radial-gradient(circle at 35% 35%, #2a2000, #141000)';
|
||
led.style.boxShadow = 'none';
|
||
led.style.border = '1px solid #420';
|
||
}
|
||
}
|
||
}
|
||
|
||
function _updateLeds(cents, hasSignal) {
|
||
if (!hasSignal) {
|
||
for (var i = 0; i < _TUNER_PT_LED_COUNT; i++) _setLed(i, false);
|
||
return;
|
||
}
|
||
var c = Math.max(-_TUNER_PT_CENTS_RANGE, Math.min(_TUNER_PT_CENTS_RANGE, cents));
|
||
var targetIdx = _ARC_CENTRE_IDX + Math.round(c / 10);
|
||
targetIdx = Math.max(0, Math.min(_TUNER_PT_LED_COUNT - 1, targetIdx));
|
||
|
||
for (var j = 0; j < _TUNER_PT_LED_COUNT; j++) {
|
||
var lit;
|
||
if (c >= 0) {
|
||
lit = (j >= _ARC_CENTRE_IDX && j <= targetIdx);
|
||
} else {
|
||
lit = (j <= _ARC_CENTRE_IDX && j >= targetIdx);
|
||
}
|
||
_setLed(j, lit);
|
||
}
|
||
}
|
||
|
||
var _segKeys = ['a', 'b', 'c', 'd', 'e', 'f', 'g1', 'g2'];
|
||
|
||
function _setSegment(segEl, lit) {
|
||
segEl.setAttribute('fill', lit ? _TUNER_PT_LIT : _TUNER_PT_UNLIT);
|
||
segEl.style.filter = lit ? 'drop-shadow(0 0 2px #ff4400) drop-shadow(0 0 5px #cc1100)' : 'none';
|
||
}
|
||
|
||
function _renderNote(letter) {
|
||
var map = _TUNER_PT_SEGMENTS[letter ? letter.toUpperCase() : ' '] || _TUNER_PT_SEGMENTS[' '];
|
||
for (var k = 0; k < _segKeys.length; k++) {
|
||
_setSegment(segmentEls[_segKeys[k]], map[k]);
|
||
}
|
||
}
|
||
|
||
function _setSharp(lit) {
|
||
var fill = lit ? _TUNER_PT_LIT : _TUNER_PT_UNLIT;
|
||
var filter = lit ? 'drop-shadow(0 0 2px #ff4400) drop-shadow(0 0 5px #cc1100)' : 'none';
|
||
for (var si = 0; si < sharpParts.length; si++) {
|
||
sharpParts[si].setAttribute('fill', fill);
|
||
sharpParts[si].style.filter = filter;
|
||
}
|
||
}
|
||
function _setFlat(lit) {
|
||
flatSvg.style.display = lit ? '' : 'none';
|
||
if (lit) {
|
||
flatText.setAttribute('fill', _TUNER_PT_LIT);
|
||
flatText.style.filter = 'drop-shadow(0 0 2px #ff4400) drop-shadow(0 0 5px #cc1100)';
|
||
}
|
||
}
|
||
|
||
function _setAuto(mode) {
|
||
var lit = (mode === 'free' || mode === 'auto');
|
||
autoLed.style.background = lit
|
||
? 'radial-gradient(circle at 35% 35%, #ff6644, #cc1100)'
|
||
: 'radial-gradient(circle at 35% 35%, #3a0000, #1a0000)';
|
||
autoLed.style.boxShadow = lit ? '0 0 5px 1px #ff3300, 0 0 10px 2px #aa1100' : 'none';
|
||
autoLed.style.border = lit ? '1px solid #ff2200' : '1px solid #400';
|
||
}
|
||
|
||
// ── Public API ────────────────────────────────────────────────
|
||
function update(note, cents, freq, mode) {
|
||
_setAuto(mode);
|
||
if (note === null) {
|
||
_updateLeds(0, false);
|
||
_renderNote(' ');
|
||
sharpSvg.style.display = '';
|
||
_setSharp(false);
|
||
_setFlat(false);
|
||
return;
|
||
}
|
||
var letter = note[0];
|
||
var acc = note.length > 1 ? note[1] : '';
|
||
_updateLeds(cents, true);
|
||
_renderNote(letter);
|
||
if (acc === '#') {
|
||
sharpSvg.style.display = '';
|
||
_setSharp(true);
|
||
_setFlat(false);
|
||
} else if (acc === 'b') {
|
||
sharpSvg.style.display = 'none';
|
||
_setFlat(true);
|
||
} else {
|
||
sharpSvg.style.display = '';
|
||
_setSharp(false);
|
||
_setFlat(false);
|
||
}
|
||
}
|
||
|
||
function destroy() {
|
||
panel.remove();
|
||
}
|
||
|
||
return { update: update, destroy: destroy };
|
||
};
|
||
|
||
}());
|