diff --git a/src/spessasynth_lib/sequencer/sequencer.js b/src/spessasynth_lib/sequencer/sequencer.js index d601bc28..11bb1e28 100644 --- a/src/spessasynth_lib/sequencer/sequencer.js +++ b/src/spessasynth_lib/sequencer/sequencer.js @@ -523,11 +523,25 @@ export class Sequencer { } else { - if(savedControllers[info.channel] === undefined) + // Keep in mind midi ports to determine channel!! + const channel = info.channel + (this.midiPortChannelOffsets[this.midiPorts[trackIndex]] || 0); + if(savedControllers[channel] === undefined) { - savedControllers[info.channel] = Array.from(defaultControllerArray); + savedControllers[channel] = Array.from(defaultControllerArray); + } + savedControllers[channel][controllerNumber] = event.messageData[1]; + } + break; + + // midiport: handle it and make sure that the saved controllers table is the same size as synth channels + case messageTypes.midiPort: + this._processEvent(event, trackIndex); + if(this.synth.midiChannels.length > savedControllers.length) + { + while(this.synth.midiChannels.length > savedControllers.length) + { + savedControllers.push(Array.from(defaultControllerArray)); } - savedControllers[info.channel][controllerNumber] = event.messageData[1]; } break; @@ -606,7 +620,7 @@ export class Sequencer { if(this.paused) { // adjust the start time - this.absoluteStartTime = this.now - this.pausedTime; + this.absoluteStartTime = this.now - this.pausedTime / this.playbackRate; this.pausedTime = undefined; } @@ -619,7 +633,7 @@ export class Sequencer { }); this.playbackInterval = setInterval(this._processTick.bind(this)); - this.noteCounterClearInterval = setInterval( () =>this.noteOnsPerS = 0, 100); + setInterval( () =>this.noteOnsPerS = 0, 100); } setTimeTicks(ticks) diff --git a/src/website/css/settings.css b/src/website/css/settings.css index 19769b2c..39b23c3b 100644 --- a/src/website/css/settings.css +++ b/src/website/css/settings.css @@ -41,11 +41,9 @@ overflow: scroll; top: 100%; right: 0; - width: 30em; min-width: 30%; max-width: 100%; min-height: 100%; - max-height: 30rem; z-index: 256; display: block; opacity: 0; @@ -129,9 +127,15 @@ text-shadow: 0 0 5px white; } +.settings_groups_parent{ + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; +} + .settings_group{ border-radius: 10px; border: solid #333 1px; margin: 10px; - padding: 5px; + padding: 10px; } \ No newline at end of file diff --git a/src/website/ui/renderer.js b/src/website/ui/renderer.js index e65ad65e..8754e3f8 100644 --- a/src/website/ui/renderer.js +++ b/src/website/ui/renderer.js @@ -37,6 +37,7 @@ export class Renderer this.lineThickness = ANALYSER_STROKE; this.normalAnalyserFft = CHANNEL_ANALYSER_FFT; this.drumAnalyserFft = DRUMS_ANALYSER_FFT; + this.waveMultiplier = WAVE_MULTIPLIER; // booleans @@ -325,7 +326,7 @@ export class Renderer const relativeX = waveWidth * x; const relativeY = waveHeight * y + waveHeight / 2; const step = waveWidth / waveform.length; - const multiplier = WAVE_MULTIPLIER * waveHeight; + const multiplier = this.waveMultiplier * waveHeight; // draw this.drawingContext.lineWidth = this.lineThickness; diff --git a/src/website/ui/settings_ui/settings.js b/src/website/ui/settings_ui/settings.js index cf899887..fa91d1a0 100644 --- a/src/website/ui/settings_ui/settings.js +++ b/src/website/ui/settings_ui/settings.js @@ -78,7 +78,8 @@ export class Settings document.getElementById("note_toggler"), document.getElementById("active_note_toggler"), document.getElementById("analyser_thickness_slider"), - document.getElementById("analyser_fft_slider")); + document.getElementById("analyser_fft_slider"), + document.getElementById("wave_multiplier_slider")); this._createMidiSettingsHandler(document.getElementById("midi_input_selector"), document.getElementById("midi_output_selector"), @@ -306,9 +307,17 @@ export class Settings * @param activeNote {HTMLButtonElement} * @param analyserSlider {HTMLInputElement} * @param fftSlider {HTMLInputElement} + * @param waveMultiplierSlider {HTMLInputElement} * @private */ - _createRendererHandler(renderer, slider, analyser, note, activeNote, analyserSlider, fftSlider) + _createRendererHandler(renderer, + slider, + analyser, + note, + activeNote, + analyserSlider, + fftSlider, + waveMultiplierSlider) { slider.oninput = () => { renderer.noteFallingTimeMs = slider.value; @@ -327,6 +336,11 @@ export class Settings fftSlider.nextElementSibling.innerText = `${value}`; } + waveMultiplierSlider.oninput = () => { + renderer.waveMultiplier = parseInt(waveMultiplierSlider.value); + waveMultiplierSlider.nextElementSibling.innerText = waveMultiplierSlider.value; + } + analyser.onclick = () => renderer.renderAnalysers = !renderer.renderAnalysers; note.onclick = () => renderer.renderNotes = !renderer.renderNotes; activeNote.onclick = () => renderer.drawActiveNotes = !renderer.drawActiveNotes; diff --git a/src/website/ui/settings_ui/settings_html.js b/src/website/ui/settings_ui/settings_html.js index bf6f5181..ba5d5b98 100644 --- a/src/website/ui/settings_ui/settings_html.js +++ b/src/website/ui/settings_ui/settings_html.js @@ -1,7 +1,7 @@ export const settingsHtml = `

Program settings

- -
+
+

Renderer settings

@@ -24,6 +24,13 @@ export const settingsHtml = `

+ +

+ + 2 + +

+
@@ -31,6 +38,7 @@ export const settingsHtml = `
+

Keyboard settings

Selected channel:

@@ -40,6 +48,7 @@ export const settingsHtml = `
+

MIDI Settings

MIDI Input

@@ -55,8 +64,10 @@ export const settingsHtml = `
+

Interface Settings

+
`; \ No newline at end of file diff --git a/src/website/ui/synthesizer_ui/synthetizer_ui.js b/src/website/ui/synthesizer_ui/synthetizer_ui.js index 7167396c..0910a580 100644 --- a/src/website/ui/synthesizer_ui/synthetizer_ui.js +++ b/src/website/ui/synthesizer_ui/synthetizer_ui.js @@ -394,6 +394,20 @@ export class SynthetizerUI chorus.update(0); controller.appendChild(chorus.div); + // transpose + const transpose = new Meter(this.channelColors[channelNumber % this.channelColors.length], + "Transpose: ", + -36, + 36, `The current level of chorus effect applied to channel ${channelNumber + 1}`, + true, + val => { + val = Math.round(val) + this.synth.midiChannels[channelNumber].transposeChannel(val, true); + transpose.update(val); + }); + transpose.update(0); + controller.appendChild(transpose.div); + // create it here so we can use it in the callback function const presetReset = document.createElement("div");