921 lines
33 KiB
HTML
921 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Path Navigator</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
|
|
<script>
|
|
// Register minimal "xforce" layout - force-directed in x only, y stays fixed, with bounds
|
|
(function(){
|
|
const XForceLayout = function(options){
|
|
this.options = Object.assign({
|
|
name: 'xforce',
|
|
nodes: undefined,
|
|
edges: undefined,
|
|
linkDistance: 80,
|
|
linkStrength: 0.1,
|
|
charge: -30,
|
|
collisionDistance: 20,
|
|
damping: 0.6,
|
|
iterations: 300,
|
|
stepDelay: 0,
|
|
// bounds for each chord: { prev: {min, max}, current: {min, max}, next: {min, max} }
|
|
bounds: {},
|
|
}, options);
|
|
this.cy = options.cy;
|
|
};
|
|
|
|
XForceLayout.prototype.run = function(){
|
|
const cy = this.cy;
|
|
const opts = this.options;
|
|
const nodes = (opts.nodes || cy.nodes());
|
|
const edges = (opts.edges || cy.edges());
|
|
if(!nodes.length){ this.trigger('stop'); return; }
|
|
|
|
const state = new Map();
|
|
nodes.forEach(n => {
|
|
const chordLabel = n.data('chordLabel');
|
|
const bounds = opts.bounds[chordLabel] || { min: 0, max: graphWidth };
|
|
state.set(n.id(), {
|
|
x: n.position('x'),
|
|
y: n.position('y'),
|
|
vx: 0,
|
|
fx: 0,
|
|
bounds: bounds,
|
|
});
|
|
});
|
|
|
|
const edgeList = edges.map(e => ({ s: e.source().id(), t: e.target().id() }));
|
|
|
|
const iter = (i) => {
|
|
state.forEach(s => s.fx = 0);
|
|
|
|
edgeList.forEach(({s,t})=>{
|
|
const a = state.get(s), b = state.get(t);
|
|
if(!a || !b) return;
|
|
const dx = b.x - a.x;
|
|
const dist = Math.abs(dx) || 0.0001;
|
|
const dir = dx / dist;
|
|
const spring = opts.linkStrength * (dist - opts.linkDistance);
|
|
a.fx += spring * dir;
|
|
b.fx -= spring * dir;
|
|
});
|
|
|
|
const arr = Array.from(state.values());
|
|
for(let u=0; u<arr.length; u++){
|
|
for(let v=u+1; v<arr.length; v++){
|
|
const A = arr[u], B = arr[v];
|
|
const dx = B.x - A.x;
|
|
let dist = Math.abs(dx) || 0.0001;
|
|
const dir = dx / dist;
|
|
const force = opts.charge / (dist*dist);
|
|
A.fx -= force * dir;
|
|
B.fx += force * dir;
|
|
}
|
|
}
|
|
|
|
// Boundary forces - push nodes back into their thirds
|
|
const ids = Array.from(state.keys());
|
|
for(let i1=0;i1<ids.length;i1++){
|
|
const idA = ids[i1];
|
|
const A = state.get(idA);
|
|
const b = A.bounds;
|
|
const margin = 30;
|
|
|
|
// Strong boundary force
|
|
if(A.x < b.min + margin){
|
|
A.fx += (b.min + margin - A.x) * 0.8;
|
|
}
|
|
if(A.x > b.max - margin){
|
|
A.fx -= (A.x - (b.max - margin)) * 0.8;
|
|
}
|
|
}
|
|
|
|
state.forEach(s => {
|
|
s.vx = (s.vx + s.fx) * opts.damping;
|
|
s.x += s.vx;
|
|
|
|
// HARD boundary clamp - absolute enforcement
|
|
s.x = Math.max(s.bounds.min, Math.min(s.bounds.max, s.x));
|
|
});
|
|
|
|
cy.batch(()=>{
|
|
state.forEach((s, id) => {
|
|
const n = cy.getElementById(id);
|
|
if(n) n.position({ x: s.x, y: s.y });
|
|
});
|
|
});
|
|
|
|
if(i < opts.iterations - 1){
|
|
if(opts.stepDelay > 0){
|
|
setTimeout(()=> iter(i+1), opts.stepDelay);
|
|
} else {
|
|
iter(i+1);
|
|
}
|
|
} else {
|
|
this.trigger('stop');
|
|
}
|
|
};
|
|
|
|
iter(0);
|
|
};
|
|
|
|
XForceLayout.prototype.stop = function(){};
|
|
XForceLayout.prototype.on = function(){};
|
|
XForceLayout.prototype.once = function(){};
|
|
XForceLayout.prototype.trigger = function(name){};
|
|
|
|
cytoscape('layout', 'xforce', XForceLayout);
|
|
})();
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #000000;
|
|
color: #cccccc;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
font-weight: 300;
|
|
letter-spacing: 2px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.controls button {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
background: #0a0a0a;
|
|
color: #888888;
|
|
border: 1px solid #222222;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.controls button:hover {
|
|
background: #151515;
|
|
color: #ffffff;
|
|
border-color: #444444;
|
|
}
|
|
|
|
.controls button:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.index-display {
|
|
font-size: 14px;
|
|
color: #666666;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
#graph-container {
|
|
width: 100%;
|
|
height: 450px;
|
|
border: 1px solid #1a1a1a;
|
|
border-radius: 4px;
|
|
background: #050505;
|
|
position: relative;
|
|
}
|
|
|
|
.chord-info {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.chord-panel {
|
|
background: #0a0a0a;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
min-width: 200px;
|
|
border: 1px solid #1a1a1a;
|
|
}
|
|
|
|
.chord-panel h3 {
|
|
margin-top: 0;
|
|
color: #666666;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.chord-panel.current {
|
|
border: 1px solid #333333;
|
|
}
|
|
|
|
.chord-panel.current h3 {
|
|
color: #00d4ff;
|
|
}
|
|
|
|
.chord-panel.prev, .chord-panel.next {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.pitch-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pitch-list li {
|
|
padding: 4px 0;
|
|
color: #888888;
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
|
}
|
|
|
|
.file-input {
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.file-input input {
|
|
padding: 8px;
|
|
background: #0a0a0a;
|
|
color: #888888;
|
|
border: 1px solid #222222;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.file-select {
|
|
padding: 8px;
|
|
background: #0a0a0a;
|
|
color: #888888;
|
|
border: 1px solid #222222;
|
|
border-radius: 4px;
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Path Navigator</h1>
|
|
|
|
<div class="file-input">
|
|
<span>File:</span>
|
|
<input type="text" id="filepathInput" value="output/output_chords.json" style="width: 250px;">
|
|
<button id="loadFileBtn">Load</button>
|
|
<span style="margin-left: 20px;">Fundamental (Hz):</span>
|
|
<input type="number" id="fundamentalInput" value="110" style="width: 60px;">
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button id="prevBtn" disabled>← Previous</button>
|
|
<span class="index-display">Index: <span id="currentIndex">0</span> / <span id="totalSteps">0</span></span>
|
|
<button id="nextBtn" disabled>Next →</button>
|
|
</div>
|
|
|
|
<div id="graph-container"></div>
|
|
|
|
<div class="chord-info">
|
|
<div class="chord-panel prev">
|
|
<h3>Previous</h3>
|
|
<ul class="pitch-list" id="prevPitches"></ul>
|
|
</div>
|
|
<div class="chord-panel current">
|
|
<h3>Current</h3>
|
|
<ul class="pitch-list" id="currentPitches"></ul>
|
|
</div>
|
|
<div class="chord-panel next">
|
|
<h3>Next</h3>
|
|
<ul class="pitch-list" id="nextPitches"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Global state
|
|
let chords = [];
|
|
let currentIndex = 0;
|
|
let totalSteps = 0;
|
|
let hasPrev = false;
|
|
let hasNext = false;
|
|
let allGraphsData = null;
|
|
|
|
// Cytoscape instance
|
|
let cy = null;
|
|
|
|
// Graph dimensions - will expand based on number of chords
|
|
let graphWidth = 1100;
|
|
const graphHeight = 450;
|
|
let chordSpacing = 350;
|
|
|
|
// Voice colors - sleek pastel scheme
|
|
const voiceColors = ['#7eb5a6', '#c5a3ff', '#ffb3b3', '#ffd700'];
|
|
|
|
// Create Cytoscape instance for all chords
|
|
function initCytoscapeAll(totalChords) {
|
|
// Calculate canvas width based on number of chords
|
|
graphWidth = Math.max(1100, totalChords * chordSpacing + 400);
|
|
|
|
cy = cytoscape({
|
|
container: document.getElementById('graph-container'),
|
|
style: [
|
|
{
|
|
selector: 'node',
|
|
style: {
|
|
'background-color': 'data(color)',
|
|
'width': 32,
|
|
'height': 32,
|
|
'label': 'data(cents)',
|
|
'text-valign': 'center',
|
|
'text-halign': 'center',
|
|
'color': '#000000',
|
|
'font-size': '10px',
|
|
'font-family': 'monospace',
|
|
'font-weight': 'bold',
|
|
'text-outline-width': 0,
|
|
'border-width': 0,
|
|
}
|
|
},
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'width': 1.5,
|
|
'line-color': '#555555',
|
|
'curve-style': 'straight',
|
|
'target-arrow-shape': 'none',
|
|
'label': 'data(ratio)',
|
|
'font-size': '12px',
|
|
'color': '#ffffff',
|
|
'text-rotation': 'autorotate',
|
|
'text-margin-y': -10,
|
|
'text-background-color': '#000000',
|
|
'text-background-opacity': 0.8,
|
|
'text-background-padding': '2px',
|
|
}
|
|
},
|
|
{
|
|
selector: ':selected',
|
|
style: {
|
|
'border-width': 2,
|
|
'border-color': '#00d4ff',
|
|
}
|
|
}
|
|
],
|
|
layout: {
|
|
name: 'preset',
|
|
},
|
|
minZoom: 0.3,
|
|
maxZoom: 3,
|
|
zoomingEnabled: true,
|
|
panningEnabled: true,
|
|
wheelSensitivity: 0.2, // Reduce wheel zoom sensitivity
|
|
autounselectify: true,
|
|
boxSelectionEnabled: false,
|
|
});
|
|
|
|
// Lock y on drag - only allow x movement
|
|
let isDragging = false;
|
|
let grabPosition = null;
|
|
|
|
cy.on('grab', 'node', function(evt) {
|
|
console.log('GRAB event');
|
|
const node = evt.target;
|
|
grabPosition = node.position('y');
|
|
node.data('originalY', grabPosition);
|
|
});
|
|
|
|
cy.on('drag', 'node', function(evt) {
|
|
const node = evt.target;
|
|
const originalY = node.data('originalY');
|
|
|
|
// Only mark as dragging if it actually moved from grab position
|
|
if (grabPosition !== null && Math.abs(node.position('y') - grabPosition) > 1) {
|
|
isDragging = true;
|
|
}
|
|
|
|
if (originalY !== undefined) {
|
|
node.position('y', originalY);
|
|
}
|
|
});
|
|
|
|
cy.on('dragfree', 'node', function(evt) {
|
|
console.log('DRAGFREE event');
|
|
isDragging = false;
|
|
grabPosition = null;
|
|
});
|
|
|
|
// Click to play - send OSC
|
|
cy.on('tap', 'node', function(evt) {
|
|
console.log('TAP event fired', isDragging);
|
|
|
|
const node = evt.target;
|
|
console.log('Node data:', node.data());
|
|
|
|
if (isDragging) {
|
|
console.log('Was dragging, skipping');
|
|
return;
|
|
}
|
|
|
|
const chordIndex = node.data('chordIndex');
|
|
const localId = node.data('localId');
|
|
|
|
// Check if Shift key is held - send to siren, otherwise send to SuperCollider
|
|
const isShift = evt.originalEvent && evt.originalEvent.shiftKey;
|
|
const endpoint = isShift ? '/api/play-siren' : '/api/play-freq';
|
|
const destination = isShift ? 'siren' : 'SuperCollider';
|
|
|
|
console.log('Sending play request to', destination, ':', chordIndex, localId);
|
|
|
|
fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
chordIndex: chordIndex,
|
|
nodeIndex: localId
|
|
})
|
|
}).then(r => r.json()).then(data => {
|
|
console.log('Playing on', destination + ':', data.frequency.toFixed(2), 'Hz on voice', data.voice);
|
|
}).catch(err => {
|
|
console.log('Error playing freq:', err);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Render ALL chords at once for continuous canvas
|
|
function renderAllChords() {
|
|
if (!allGraphsData || !cy) return;
|
|
|
|
// Clear previous elements
|
|
cy.elements().remove();
|
|
|
|
// Calculate graph dimensions
|
|
const totalChords = allGraphsData.graphs.length;
|
|
graphWidth = Math.max(1100, totalChords * chordSpacing + 400);
|
|
|
|
// Collect all cents for global scale
|
|
let allCents = [];
|
|
allGraphsData.graphs.forEach(g => {
|
|
if (g.nodes) {
|
|
allCents = allCents.concat(g.nodes.map(n => n.cents));
|
|
}
|
|
});
|
|
const globalMinCents = Math.min(...allCents);
|
|
const globalMaxCents = Math.max(...allCents);
|
|
const globalCentsRange = globalMaxCents - globalMinCents || 1;
|
|
const ySpread = graphHeight * 0.8;
|
|
const yBase = graphHeight * 0.1;
|
|
|
|
// Build elements array for all chords
|
|
let elements = [];
|
|
|
|
allGraphsData.graphs.forEach((graph, chordIdx) => {
|
|
if (!graph || !graph.nodes) return;
|
|
|
|
const nodes = graph.nodes;
|
|
const edges = graph.edges || [];
|
|
const xBase = 100 + chordIdx * chordSpacing;
|
|
const idMap = {};
|
|
|
|
// Create unique IDs per chord to avoid collisions
|
|
const chordPrefix = `c${chordIdx}_`;
|
|
|
|
nodes.forEach((n, i) => {
|
|
const nodeId = chordPrefix + n.id;
|
|
idMap[n.id] = nodeId;
|
|
|
|
// Spread nodes within each chord
|
|
const x = xBase + (chordSpacing * 0.15) * (i / (nodes.length - 1 || 1));
|
|
const y = yBase + ySpread - ((n.cents - globalMinCents) / globalCentsRange) * ySpread;
|
|
|
|
elements.push({
|
|
group: 'nodes',
|
|
data: {
|
|
id: nodeId,
|
|
localId: n.id,
|
|
cents: n.cents,
|
|
chordIndex: chordIdx,
|
|
chordLabel: `c${chordIdx}`,
|
|
color: voiceColors[n.id % voiceColors.length],
|
|
},
|
|
position: { x: x, y: y },
|
|
});
|
|
});
|
|
|
|
// Add edges within chord
|
|
edges.forEach(e => {
|
|
elements.push({
|
|
group: 'edges',
|
|
data: {
|
|
source: idMap[e.source],
|
|
target: idMap[e.target],
|
|
ratio: e.ratio,
|
|
},
|
|
});
|
|
});
|
|
});
|
|
|
|
if (elements.length === 0) return;
|
|
|
|
// Add all elements
|
|
cy.add(elements);
|
|
console.log('Added', elements.length, 'elements');
|
|
|
|
// Build bounds for each chord - with gaps between them
|
|
const bounds = {};
|
|
const gap = 50; // gap between chord regions
|
|
allGraphsData.graphs.forEach((graph, idx) => {
|
|
const chordLabel = `c${idx}`;
|
|
const chordMin = 100 + idx * (chordSpacing + gap);
|
|
bounds[chordLabel] = {
|
|
min: chordMin,
|
|
max: chordMin + chordSpacing
|
|
};
|
|
});
|
|
|
|
// Run xforce layout to optimize x positions while keeping y fixed
|
|
cy.layout({
|
|
name: 'xforce',
|
|
linkDistance: 60,
|
|
linkStrength: 0.1,
|
|
charge: -60,
|
|
collisionDistance: 35,
|
|
damping: 0.7,
|
|
iterations: 250,
|
|
bounds: bounds,
|
|
}).run();
|
|
|
|
// Set canvas size
|
|
cy.style().json()[0].value = graphWidth;
|
|
|
|
// Fit to show initial position centered
|
|
panToIndex(currentIndex);
|
|
}
|
|
|
|
// Pan to show a specific chord index centered
|
|
function panToIndex(index) {
|
|
if (!cy) return;
|
|
|
|
const gap = 50;
|
|
const targetX = 100 + index * (chordSpacing + gap) + chordSpacing / 2;
|
|
const centerX = 550; // Half of default viewport
|
|
const panX = centerX - targetX;
|
|
|
|
cy.animate({
|
|
pan: { x: panX, y: 0 },
|
|
duration: 350,
|
|
easing: 'ease-out'
|
|
});
|
|
}
|
|
|
|
// Load from Flask API - get chords and compute graphs client-side
|
|
async function loadAllGraphs() {
|
|
try {
|
|
const response = await fetch("/api/chords");
|
|
if (!response.ok) throw new Error("API not available");
|
|
const data = await response.json();
|
|
|
|
// Compute graphs from raw chord data client-side
|
|
const graphs = data.chords.map((chord, index) => {
|
|
return calculateGraph(chord, index);
|
|
});
|
|
|
|
allGraphsData = {
|
|
total: data.total,
|
|
graphs: graphs
|
|
};
|
|
|
|
totalSteps = allGraphsData.total - 1;
|
|
|
|
// Initialize Cytoscape with total chord count
|
|
initCytoscapeAll(allGraphsData.total);
|
|
|
|
// Render all chords
|
|
renderAllChords();
|
|
|
|
// Update UI
|
|
updateUI();
|
|
|
|
} catch (e) {
|
|
console.log("Error loading chords:", e);
|
|
}
|
|
}
|
|
|
|
// Compute graph (nodes + edges) from raw chord data - client-side version
|
|
function calculateGraph(chord, index) {
|
|
if (!chord) return { nodes: [], edges: [] };
|
|
|
|
const nodes = [];
|
|
const dims = [2, 3, 5, 7];
|
|
|
|
// Calculate cents for each pitch
|
|
for (let i = 0; i < chord.length; i++) {
|
|
const pitch = chord[i];
|
|
const fraction = parseFraction(pitch.fraction || "1");
|
|
const cents = fraction > 0 ? 1200 * Math.log2(fraction) : 0;
|
|
|
|
nodes.push({
|
|
id: i,
|
|
cents: Math.round(cents),
|
|
fraction: pitch.fraction || "1",
|
|
hs_array: pitch.hs_array || []
|
|
});
|
|
}
|
|
|
|
// Find edges: differ by ±1 in exactly one dimension (ignoring dim 0)
|
|
const edges = [];
|
|
for (let i = 0; i < chord.length; i++) {
|
|
for (let j = i + 1; j < chord.length; j++) {
|
|
const hs1 = chord[i].hs_array || [];
|
|
const hs2 = chord[j].hs_array || [];
|
|
|
|
if (!hs1.length || !hs2.length) continue;
|
|
|
|
// Count differences in dims 1, 2, 3
|
|
let diffCount = 0;
|
|
let diffDim = -1;
|
|
|
|
for (let d = 1; d < hs1.length; d++) {
|
|
const diff = hs2[d] - hs1[d];
|
|
if (Math.abs(diff) === 1) {
|
|
diffCount++;
|
|
diffDim = d;
|
|
} else if (diff !== 0) {
|
|
break; // diff > 1 in this dimension
|
|
}
|
|
}
|
|
|
|
// Check if exactly one dimension differs
|
|
if (diffCount === 1 && diffDim > 0) {
|
|
// Calculate frequency ratio
|
|
const diffHs = [];
|
|
for (let d = 0; d < hs1.length; d++) {
|
|
diffHs.push(hs1[d] - hs2[d]);
|
|
}
|
|
|
|
let numerator = 1;
|
|
let denominator = 1;
|
|
for (let dIdx = 0; dIdx < dims.length; dIdx++) {
|
|
const exp = diffHs[dIdx];
|
|
if (exp > 0) {
|
|
numerator *= Math.pow(dims[dIdx], exp);
|
|
} else if (exp < 0) {
|
|
denominator *= Math.pow(dims[dIdx], -exp);
|
|
}
|
|
}
|
|
|
|
const ratio = denominator > 1 ? `${numerator}/${denominator}` : `${numerator}`;
|
|
|
|
edges.push({
|
|
source: i,
|
|
target: j,
|
|
ratio: ratio,
|
|
dim: diffDim
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return { nodes, edges, index };
|
|
}
|
|
|
|
// Parse fraction string to number
|
|
function parseFraction(fracStr) {
|
|
if (typeof fracStr === 'number') return fracStr;
|
|
if (!fracStr) return 1;
|
|
|
|
if (fracStr.includes('/')) {
|
|
const [num, den] = fracStr.split('/').map(Number);
|
|
return num / den;
|
|
}
|
|
return Number(fracStr);
|
|
}
|
|
|
|
// Update UI elements
|
|
function updateUI() {
|
|
hasPrev = currentIndex > 0;
|
|
hasNext = currentIndex < totalSteps;
|
|
|
|
document.getElementById("currentIndex").textContent = currentIndex;
|
|
document.getElementById("totalSteps").textContent = totalSteps;
|
|
document.getElementById("prevBtn").disabled = !hasPrev;
|
|
document.getElementById("nextBtn").disabled = !hasNext;
|
|
|
|
// Update chord panels - get data from allGraphsData
|
|
if (allGraphsData && allGraphsData.graphs) {
|
|
const prevIdx = currentIndex - 1;
|
|
const currIdx = currentIndex;
|
|
const nextIdx = currentIndex + 1;
|
|
|
|
updateChordPanel("prevPitches", prevIdx >= 0 ? allGraphsData.graphs[prevIdx]?.nodes : null);
|
|
updateChordPanel("currentPitches", allGraphsData.graphs[currIdx]?.nodes);
|
|
updateChordPanel("nextPitches", nextIdx < allGraphsData.total ? allGraphsData.graphs[nextIdx]?.nodes : null);
|
|
}
|
|
}
|
|
|
|
// Fundamental input - auto-send on Enter, Up/Down arrows, or input change
|
|
document.getElementById("fundamentalInput").addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
setFundamental();
|
|
} else if (e.key === "ArrowUp") {
|
|
e.preventDefault();
|
|
const input = document.getElementById("fundamentalInput");
|
|
input.value = parseFloat(input.value || 110) + 1;
|
|
setFundamental();
|
|
} else if (e.key === "ArrowDown") {
|
|
e.preventDefault();
|
|
const input = document.getElementById("fundamentalInput");
|
|
input.value = parseFloat(input.value || 110) - 1;
|
|
setFundamental();
|
|
}
|
|
});
|
|
|
|
// Also trigger on input change (for the spinner buttons)
|
|
document.getElementById("fundamentalInput").addEventListener("input", () => {
|
|
setFundamental();
|
|
});
|
|
|
|
// File input handler
|
|
document.getElementById("loadFileBtn").addEventListener("click", async () => {
|
|
const filepath = document.getElementById("filepathInput").value;
|
|
if (!filepath) return;
|
|
|
|
try {
|
|
const response = await fetch("/api/load-file", {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/json"},
|
|
body: JSON.stringify({ filepath: filepath })
|
|
});
|
|
const data = await response.json();
|
|
if (data.error) {
|
|
alert(data.error);
|
|
} else {
|
|
loadAllGraphs();
|
|
}
|
|
} catch (err) {
|
|
alert("Error loading file: " + err);
|
|
}
|
|
});
|
|
|
|
// Also allow Enter key in filepath input
|
|
document.getElementById("filepathInput").addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") {
|
|
document.getElementById("loadFileBtn").click();
|
|
}
|
|
});
|
|
|
|
function updateChordPanel(elementId, data) {
|
|
const container = document.getElementById(elementId);
|
|
container.innerHTML = "";
|
|
|
|
if (!data || (Array.isArray(data) && data.length === 0)) {
|
|
container.innerHTML = "<div>(none)</div>";
|
|
return;
|
|
}
|
|
|
|
const items = Array.isArray(data) ? data : (data.nodes || []);
|
|
|
|
if (items.length === 0) return;
|
|
|
|
// Determine number of columns from first node's hs_array
|
|
const cols = items[0].hs_array ? items[0].hs_array.length : 0;
|
|
if (cols === 0) return;
|
|
|
|
// Create table - let it size based on content
|
|
const table = document.createElement("table");
|
|
table.style.fontFamily = "monospace";
|
|
table.style.fontSize = "10px";
|
|
table.style.borderCollapse = "collapse";
|
|
table.style.tableLayout = "auto";
|
|
table.style.lineHeight = "1.2";
|
|
table.style.margin = "0 auto";
|
|
|
|
// Header row - split into separate cells to match row structure
|
|
const headerRow = document.createElement("tr");
|
|
const headerParts = ["2", "3", "5", "7"];
|
|
headerParts.forEach((part, idx) => {
|
|
const th = document.createElement("th");
|
|
th.textContent = part;
|
|
th.style.padding = "0px 4px";
|
|
th.style.textAlign = idx === 0 ? "left" : "right";
|
|
th.style.borderBottom = "1px solid #444";
|
|
th.style.paddingBottom = "1px";
|
|
th.style.fontWeight = "normal";
|
|
th.style.color = "#666";
|
|
th.style.whiteSpace = "nowrap";
|
|
th.style.width = "28px";
|
|
headerRow.appendChild(th);
|
|
});
|
|
table.appendChild(headerRow);
|
|
|
|
// Data rows (all nodes)
|
|
items.forEach((item) => {
|
|
const row = document.createElement("tr");
|
|
const hs = item.hs_array || [];
|
|
|
|
hs.forEach((val, j) => {
|
|
const td = document.createElement("td");
|
|
td.textContent = val;
|
|
td.style.padding = "0px 4px";
|
|
td.style.textAlign = "right";
|
|
td.style.color = "#888";
|
|
td.style.whiteSpace = "nowrap";
|
|
td.style.width = "28px";
|
|
if (j === 0) {
|
|
td.style.textAlign = "left";
|
|
}
|
|
row.appendChild(td);
|
|
});
|
|
|
|
table.appendChild(row);
|
|
});
|
|
|
|
container.appendChild(table);
|
|
}
|
|
|
|
// Navigation with pan animation
|
|
async function navigate(direction) {
|
|
if (direction === 'prev' && currentIndex > 0) {
|
|
currentIndex--;
|
|
} else if (direction === 'next' && currentIndex < totalSteps) {
|
|
currentIndex++;
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
// Pan to new chord position
|
|
panToIndex(currentIndex);
|
|
|
|
// Update UI
|
|
updateUI();
|
|
}
|
|
|
|
// Navigation
|
|
document.getElementById("prevBtn").addEventListener("click", () => {
|
|
navigate('prev');
|
|
});
|
|
|
|
document.getElementById("nextBtn").addEventListener("click", () => {
|
|
navigate('next');
|
|
});
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "ArrowLeft") {
|
|
navigate('prev');
|
|
} else if (e.key === "ArrowRight") {
|
|
navigate('next');
|
|
} else if (e.key === "+" || e.key === "=") {
|
|
// Zoom in
|
|
if (cy) {
|
|
const zoom = cy.zoom();
|
|
cy.zoom({ zoomLevel: Math.min(3, zoom * 1.1), renderedPosition: { x: cy.width()/2, y: cy.height()/2 } });
|
|
}
|
|
} else if (e.key === "-") {
|
|
// Zoom out
|
|
if (cy) {
|
|
const zoom = cy.zoom();
|
|
cy.zoom({ zoomLevel: Math.max(0.3, zoom / 1.1), renderedPosition: { x: cy.width()/2, y: cy.height()/2 } });
|
|
}
|
|
} else if (e.key === "k") {
|
|
// Soft kill - send 20 Hz to stop voices gently
|
|
fetch('/api/kill-siren', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ soft: true })
|
|
}).then(r => r.json()).then(data => {
|
|
console.log('Soft kill sent (20 Hz)');
|
|
}).catch(err => {
|
|
console.log('Error sending kill:', err);
|
|
});
|
|
} else if (e.key === "K") {
|
|
// Hard kill - send 0 Hz to stop voices immediately
|
|
fetch('/api/kill-siren', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ soft: false })
|
|
}).then(r => r.json()).then(data => {
|
|
console.log('Hard kill sent (0 Hz)');
|
|
}).catch(err => {
|
|
console.log('Error sending kill:', err);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
loadAllGraphs();
|
|
</script>
|
|
</body>
|
|
</html>
|