diff --git a/src/main.js b/src/main.js index 281435f..a601d85 100644 --- a/src/main.js +++ b/src/main.js @@ -7034,7 +7034,7 @@ function nodeEditor() { console.log(`Starting oscilloscope visualization for node ${drawflowNodeId} (backend ID: ${backendNodeId})`); // Wait for DOM to update before starting visualization setTimeout(() => { - startOscilloscopeVisualization(drawflowNodeId, currentTrackId, backendNodeId); + startOscilloscopeVisualization(drawflowNodeId, currentTrackId, backendNodeId, editor); }, 100); } } @@ -8131,7 +8131,7 @@ function nodeEditor() { // For Oscilloscope nodes, start the visualization if (nodeType === 'Oscilloscope' && serializedNode.id && trackId) { - startOscilloscopeVisualization(drawflowId, trackId, serializedNode.id); + startOscilloscopeVisualization(drawflowId, trackId, serializedNode.id, editor); } resolve(); @@ -9206,7 +9206,7 @@ const oscilloscopeIntervals = new Map(); const oscilloscopeTimeScales = new Map(); // Start oscilloscope visualization for a node -function startOscilloscopeVisualization(nodeId, trackId, backendNodeId) { +function startOscilloscopeVisualization(nodeId, trackId, backendNodeId, editorRef) { // Clear any existing interval for this node stopOscilloscopeVisualization(nodeId); @@ -9266,17 +9266,17 @@ function startOscilloscopeVisualization(nodeId, trackId, backendNodeId) { ctx.lineTo(width, height / 2); ctx.stroke(); - // Draw waveform - if (data && data.length > 0) { + // Draw audio waveform + if (data && data.audio && data.audio.length > 0) { ctx.strokeStyle = '#4CAF50'; ctx.lineWidth = 2; ctx.beginPath(); - const xStep = width / data.length; - for (let i = 0; i < data.length; i++) { + const xStep = width / data.audio.length; + for (let i = 0; i < data.audio.length; i++) { const x = i * xStep; // Map sample value from [-1, 1] to canvas height - const y = height / 2 - (data[i] * height / 2); + const y = height / 2 - (data.audio[i] * height / 2); if (i === 0) { ctx.moveTo(x, y); @@ -9286,6 +9286,34 @@ function startOscilloscopeVisualization(nodeId, trackId, backendNodeId) { } ctx.stroke(); } + + // Draw CV trace in orange if present and CV input is connected + if (data && data.cv && data.cv.length > 0 && editorRef) { + // Check if CV input (port index 2 = input_3 in drawflow) is connected + const node = editorRef.getNodeFromId(nodeId); + const cvInput = node?.inputs?.input_3; + const isCvConnected = cvInput && cvInput.connections && cvInput.connections.length > 0; + + if (isCvConnected) { + ctx.strokeStyle = '#FF9800'; // Orange color + ctx.lineWidth = 2; + ctx.beginPath(); + + const xStep = width / data.cv.length; + for (let i = 0; i < data.cv.length; i++) { + const x = i * xStep; + // Map CV value from [-1, 1] to canvas height + const y = height / 2 - (data.cv[i] * height / 2); + + if (i === 0) { + ctx.moveTo(x, y); + } else { + ctx.lineTo(x, y); + } + } + ctx.stroke(); + } + } } catch (error) { console.error('Failed to update oscilloscope:', error); } diff --git a/src/nodeTypes.js b/src/nodeTypes.js index bcb6bc4..6f5ef83 100644 --- a/src/nodeTypes.js +++ b/src/nodeTypes.js @@ -311,7 +311,8 @@ export const nodeTypes = { description: 'Visual audio signal monitor (pass-through)', inputs: [ { name: 'Audio In', type: SignalType.AUDIO, index: 0 }, - { name: 'V/oct', type: SignalType.CV, index: 1 } + { name: 'V/oct', type: SignalType.CV, index: 1 }, + { name: 'CV In', type: SignalType.CV, index: 2 } ], outputs: [ { name: 'Audio Out', type: SignalType.AUDIO, index: 0 }