Add Path Navigator webapp for visualizing chord paths
This commit is contained in:
parent
3e0f2bc906
commit
27d34fdafc
1
webapp/output
Symbolic link
1
webapp/output
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../output
|
||||
527
webapp/path_navigator.html
Normal file
527
webapp/path_navigator.html
Normal file
|
|
@ -0,0 +1,527 @@
|
|||
<!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://d3js.org/d3.v7.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background: #1a1a2e;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
background: #16213e;
|
||||
color: #eee;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.controls button:hover {
|
||||
background: #0f3460;
|
||||
}
|
||||
|
||||
.controls button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.index-display {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#graph-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 8px;
|
||||
background: #16213e;
|
||||
}
|
||||
|
||||
.chord-info {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.chord-panel {
|
||||
background: #16213e;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.chord-panel h3 {
|
||||
margin-top: 0;
|
||||
color: #e94560;
|
||||
}
|
||||
|
||||
.chord-panel.current {
|
||||
border: 2px solid #e94560;
|
||||
}
|
||||
|
||||
.chord-panel.prev, .chord-panel.next {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.pitch-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pitch-list li {
|
||||
padding: 5px 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-input input {
|
||||
padding: 10px;
|
||||
background: #16213e;
|
||||
color: #eee;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.node circle {
|
||||
stroke: #fff;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.node.current circle {
|
||||
stroke: #e94560;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.link {
|
||||
stroke: #4a5568;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.link-label {
|
||||
fill: #a0aec0;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
fill: #eee;
|
||||
font-size: 11px;
|
||||
font-family: monospace;
|
||||
text-anchor: middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Path Navigator</h1>
|
||||
|
||||
<div class="file-input">
|
||||
<input type="file" id="fileInput" accept=".json">
|
||||
<span style="margin-left: 10px;">(default: output/output_chords.json)</span>
|
||||
</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 simulation = null;
|
||||
|
||||
// D3 setup
|
||||
const width = 1100;
|
||||
const height = 500;
|
||||
|
||||
const svg = d3.select("#graph-container")
|
||||
.append("svg")
|
||||
.attr("viewBox", `0 0 ${width} ${height}`);
|
||||
|
||||
const g = svg.append("g");
|
||||
|
||||
// Zoom behavior
|
||||
const zoom = d3.zoom()
|
||||
.scaleExtent([0.5, 4])
|
||||
.on("zoom", (event) => {
|
||||
g.attr("transform", event.transform);
|
||||
});
|
||||
|
||||
svg.call(zoom);
|
||||
|
||||
// Load default file
|
||||
async function loadDefaultFile() {
|
||||
try {
|
||||
const response = await fetch("output/output_chords.json");
|
||||
if (!response.ok) throw new Error("File not found");
|
||||
const data = await response.json();
|
||||
loadChords(data.chords);
|
||||
} catch (e) {
|
||||
console.log("No default file, waiting for user upload");
|
||||
}
|
||||
}
|
||||
|
||||
// File input handler
|
||||
document.getElementById("fileInput").addEventListener("change", async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.target.result);
|
||||
loadChords(data.chords || data);
|
||||
} catch (err) {
|
||||
alert("Invalid JSON file");
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
});
|
||||
|
||||
function loadChords(chordData) {
|
||||
chords = chordData;
|
||||
currentIndex = 0;
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
// Compute edge between two pitches if they differ by ±1 in exactly one non-dim-0 dimension
|
||||
function getEdgeInfo(pitch1, pitch2) {
|
||||
const hs1 = pitch1.hs_array;
|
||||
const hs2 = pitch2.hs_array;
|
||||
|
||||
let diffCount = 0;
|
||||
let diffDim = -1;
|
||||
|
||||
for (let i = 1; i < hs1.length; i++) { // Skip dimension 0 (prime 2)
|
||||
const diff = hs2[i] - hs1[i];
|
||||
if (Math.abs(diff) === 1) {
|
||||
diffCount++;
|
||||
diffDim = i;
|
||||
} else if (diff !== 0) {
|
||||
return null; // Difference > 1 in this dimension
|
||||
}
|
||||
}
|
||||
|
||||
// Must differ by exactly ±1 in exactly one dimension
|
||||
if (diffCount !== 1) return null;
|
||||
|
||||
// Check dimension 0 (prime 2) - must be same
|
||||
if (hs1[0] !== hs2[0]) return null;
|
||||
|
||||
// Calculate ratio
|
||||
const ratio = parseFraction(pitch1.fraction) / parseFraction(pitch2.fraction);
|
||||
|
||||
return {
|
||||
dim: diffDim,
|
||||
ratio: ratio
|
||||
};
|
||||
}
|
||||
|
||||
function parseFraction(frac) {
|
||||
if (typeof frac === 'number') return frac;
|
||||
const parts = frac.split('/');
|
||||
if (parts.length === 1) return parseFloat(parts[0]);
|
||||
return parseInt(parts[0]) / parseInt(parts[1]);
|
||||
}
|
||||
|
||||
function formatRatio(ratio) {
|
||||
// Simplify ratio to simple intervals
|
||||
const tolerance = 0.01;
|
||||
|
||||
// Common ratios
|
||||
const commonRatios = [
|
||||
{ r: 2, label: "2/1" },
|
||||
{ r: 3/2, label: "3/2" },
|
||||
{ r: 4/3, label: "4/3" },
|
||||
{ r: 5/4, label: "5/4" },
|
||||
{ r: 6/5, label: "6/5" },
|
||||
{ r: 5/3, label: "5/3" },
|
||||
{ r: 8/5, label: "8/5" },
|
||||
{ r: 7/4, label: "7/4" },
|
||||
{ r: 7/5, label: "7/5" },
|
||||
{ r: 7/6, label: "7/6" },
|
||||
{ r: 9/8, label: "9/8" },
|
||||
{ r: 10/9, label: "10/9" },
|
||||
{ r: 16/15, label: "16/15" },
|
||||
{ r: 15/14, label: "15/14" },
|
||||
{ r: 9/7, label: "9/7" },
|
||||
{ r: 10/7, label: "10/7" },
|
||||
{ r: 1, label: "1/1" },
|
||||
];
|
||||
|
||||
// Check both ratio and its inverse
|
||||
for (const {r, label} of commonRatios) {
|
||||
if (Math.abs(ratio - r) < tolerance || Math.abs(ratio - 1/r) < tolerance) {
|
||||
return ratio < 1 ? label : reverseRatio(label);
|
||||
}
|
||||
}
|
||||
|
||||
// Default: show simplified fraction
|
||||
return ratio < 1 ? simplifyRatio(ratio) : simplifyRatio(1/ratio);
|
||||
}
|
||||
|
||||
function reverseRatio(ratio) {
|
||||
const parts = ratio.split('/');
|
||||
if (parts.length !== 2) return ratio;
|
||||
return parts[1] + "/" + parts[0];
|
||||
}
|
||||
|
||||
function simplifyRatio(ratio) {
|
||||
// Simple fraction simplification
|
||||
for (let d = 2; d <= 16; d++) {
|
||||
for (let n = 1; n < d; n++) {
|
||||
if (Math.abs(ratio - n/d) < 0.01) {
|
||||
return n + "/" + d;
|
||||
}
|
||||
}
|
||||
}
|
||||
return ratio.toFixed(2);
|
||||
}
|
||||
|
||||
function buildGraph(chord) {
|
||||
const nodes = chord.map((pitch, i) => ({
|
||||
id: i,
|
||||
pitch: pitch,
|
||||
label: pitch.fraction,
|
||||
hs: pitch.hs_array
|
||||
}));
|
||||
|
||||
const links = [];
|
||||
const labelSet = new Set();
|
||||
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
for (let j = i + 1; j < nodes.length; j++) {
|
||||
const edgeInfo = getEdgeInfo(nodes[i].pitch, nodes[j].pitch);
|
||||
if (edgeInfo) {
|
||||
const label = formatRatio(edgeInfo.ratio);
|
||||
links.push({
|
||||
source: i,
|
||||
target: j,
|
||||
label: label
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { nodes, links };
|
||||
}
|
||||
|
||||
function renderGraph(chord) {
|
||||
const { nodes, links } = buildGraph(chord);
|
||||
|
||||
// Clear previous
|
||||
g.selectAll("*").remove();
|
||||
|
||||
if (nodes.length === 0) {
|
||||
g.append("text")
|
||||
.attr("x", width / 2)
|
||||
.attr("y", height / 2)
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("fill", "#888")
|
||||
.text("No chord data");
|
||||
return;
|
||||
}
|
||||
|
||||
// Force simulation
|
||||
simulation = d3.forceSimulation(nodes)
|
||||
.force("link", d3.forceLink(links).id(d => d.id).distance(100))
|
||||
.force("charge", d3.forceManyBody().strength(-300))
|
||||
.force("center", d3.forceCenter(width / 2, height / 2))
|
||||
.force("collision", d3.forceCollide().radius(40));
|
||||
|
||||
// Draw links
|
||||
const link = g.selectAll(".link")
|
||||
.data(links)
|
||||
.enter()
|
||||
.append("line")
|
||||
.attr("class", "link");
|
||||
|
||||
// Draw link labels
|
||||
const linkLabel = g.selectAll(".link-label")
|
||||
.data(links)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("class", "link-label")
|
||||
.attr("text-anchor", "middle")
|
||||
.text(d => d.label);
|
||||
|
||||
// Draw nodes
|
||||
const node = g.selectAll(".node")
|
||||
.data(nodes)
|
||||
.enter()
|
||||
.append("g")
|
||||
.attr("class", "node")
|
||||
.call(d3.drag()
|
||||
.on("start", dragstarted)
|
||||
.on("drag", dragged)
|
||||
.on("end", dragended));
|
||||
|
||||
node.append("circle")
|
||||
.attr("r", 20)
|
||||
.attr("fill", (d, i) => d3.schemeCategory10[i % 10]);
|
||||
|
||||
node.append("text")
|
||||
.attr("class", "node-label")
|
||||
.attr("dy", 4)
|
||||
.text(d => d.label);
|
||||
|
||||
// Update positions on tick
|
||||
simulation.on("tick", () => {
|
||||
link
|
||||
.attr("x1", d => d.source.x)
|
||||
.attr("y1", d => d.source.y)
|
||||
.attr("x2", d => d.target.x)
|
||||
.attr("y2", d => d.target.y);
|
||||
|
||||
linkLabel
|
||||
.attr("x", d => (d.source.x + d.target.x) / 2)
|
||||
.attr("y", d => (d.source.y + d.target.y) / 2 - 10);
|
||||
|
||||
node.attr("transform", d => `translate(${d.x},${d.y})`);
|
||||
});
|
||||
|
||||
function dragstarted(event, d) {
|
||||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||||
d.fx = d.x;
|
||||
d.fy = d.y;
|
||||
}
|
||||
|
||||
function dragged(event, d) {
|
||||
d.fx = event.x;
|
||||
d.fy = event.y;
|
||||
}
|
||||
|
||||
function dragended(event, d) {
|
||||
if (!event.active) simulation.alphaTarget(0);
|
||||
d.fx = null;
|
||||
d.fy = null;
|
||||
}
|
||||
}
|
||||
|
||||
function updateChordPanel(elementId, chord) {
|
||||
const ul = document.getElementById(elementId);
|
||||
ul.innerHTML = "";
|
||||
|
||||
if (!chord || chord.length === 0) {
|
||||
ul.innerHTML = "<li>(none)</li>";
|
||||
return;
|
||||
}
|
||||
|
||||
chord.forEach(pitch => {
|
||||
const li = document.createElement("li");
|
||||
li.textContent = `${pitch.fraction} (${pitch.hs_array.join(", ")})`;
|
||||
ul.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function updateDisplay() {
|
||||
document.getElementById("currentIndex").textContent = currentIndex;
|
||||
document.getElementById("totalSteps").textContent = chords.length - 1;
|
||||
|
||||
document.getElementById("prevBtn").disabled = currentIndex === 0;
|
||||
document.getElementById("nextBtn").disabled = currentIndex >= chords.length - 1;
|
||||
|
||||
// Update chord panels
|
||||
const prevChord = currentIndex > 0 ? chords[currentIndex - 1] : null;
|
||||
const currentChord = chords[currentIndex];
|
||||
const nextChord = currentIndex < chords.length - 1 ? chords[currentIndex + 1] : null;
|
||||
|
||||
updateChordPanel("prevPitches", prevChord);
|
||||
updateChordPanel("currentPitches", currentChord);
|
||||
updateChordPanel("nextPitches", nextChord);
|
||||
|
||||
// Render graph
|
||||
renderGraph(currentChord);
|
||||
}
|
||||
|
||||
// Navigation
|
||||
document.getElementById("prevBtn").addEventListener("click", () => {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex--;
|
||||
updateDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("nextBtn").addEventListener("click", () => {
|
||||
if (currentIndex < chords.length - 1) {
|
||||
currentIndex++;
|
||||
updateDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
// Keyboard navigation
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "ArrowLeft") {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex--;
|
||||
updateDisplay();
|
||||
}
|
||||
} else if (e.key === "ArrowRight") {
|
||||
if (currentIndex < chords.length - 1) {
|
||||
currentIndex++;
|
||||
updateDisplay();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
loadDefaultFile();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue