Settings improved

- added wave multiplier to settings
- settings layout now uses flex
- added transpose to synthui
- bugfixes

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)

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;
 }

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;

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;

src/website/ui/settings_ui/settings_html.js

@@ -1,7 +1,7 @@
 export const settingsHtml = `
 <h1>Program settings</h1>
-
-<div class='settings_group'>
+<div class='settings_groups_parent'>
+    <div class='settings_group'>
     <h2>Renderer settings</h2>
     <label title='How fast the notes fall (visually)'> Note falling time (milisseconds) </label>
     <p style='display: flex; align-items: center; width: 100%; justify-content: center'>
@@ -24,13 +24,21 @@ export const settingsHtml = `
         </span>
     </p>
     
+    <label title='How vibrant are the waveforms'> Waveform amplifier </label>
+    <p style='display: flex; align-items: center; width: 100%; justify-content: center'>
+        <input type='range' min='1' max='20' value='2' class='settings_slider' id='wave_multiplier_slider'>
+        <span>2</span>
+        </span>
+    </p>
+    
     <button class='seamless_button' id='analyser_toggler' title='Toggle rendering of the waveforms of the channels'>Toggle waveforms rendering</button>
     <br/>
     <button class='seamless_button' id='note_toggler' title='Toggle rendering of the notes when playing a MIDI file'>Toggle notes rendering</button>
     <br/>
     <button class='seamless_button' id='active_note_toggler' title='Toggle notes "lighting up" when they get active'>Toggle drawing active notes</button>
 </div>
 
+
 <div class='settings_group'>
     <h2>Keyboard settings</h2>
     <p title='The channel keyboard sends messages to'>Selected channel:</p>
@@ -40,6 +48,7 @@ export const settingsHtml = `
     <button class='seamless_button' id='mode_selector' title='Toggle the keyboard thee'>Mode: White</button>
 </div>
 
+
 <div class='settings_group'>
     <h2>MIDI Settings</h2>
     <p title='The port to listen on for MIDI messages'>MIDI Input</p>
@@ -55,8 +64,10 @@ export const settingsHtml = `
     </select>
 </div>
 
+
 <div class='settings_group'>
     <h2>Interface Settings</h2>
     <button class='seamless_button' id='toggle_mode_button' title='Toggle the interface theme'>Mode: Dark</button>
 </div>
+</div>
 `;

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");