From c33d36a201641a94a7600aec067ffb2b77f2203a Mon Sep 17 00:00:00 2001 From: spessasus Date: Tue, 2 Apr 2024 16:25:04 +0200 Subject: [PATCH] Fix dark mode and disconnect analysers when unnecessary --- .../synthetizer/synthetizer.js | 34 ++++++------ src/website/ui/renderer.js | 54 +++++++++++++++---- src/website/ui/settings_ui/settings.js | 4 +- 3 files changed, 64 insertions(+), 28 deletions(-) diff --git a/src/spessasynth_lib/synthetizer/synthetizer.js b/src/spessasynth_lib/synthetizer/synthetizer.js index 4c51d6cb..d6b5b9d4 100644 --- a/src/spessasynth_lib/synthetizer/synthetizer.js +++ b/src/spessasynth_lib/synthetizer/synthetizer.js @@ -314,23 +314,23 @@ export class Synthetizer { { // reset ch.resetControllers(); - ch.bank = 0; - if((ch.channelNumber - 1) % 16 === DEFAULT_PERCUSSION) { - ch.setPreset(this.percussionPreset); - ch.percussionChannel = true; - this.eventHandler.callEvent("drumchange",{ - channel: ch.channelNumber - 1, - isDrumChannel: true - }); - } - else - { - ch.percussionChannel = false; - ch.setPreset(this.defaultPreset); - this.eventHandler.callEvent("drumchange",{ - channel: ch.channelNumber - 1, - isDrumChannel: false - }); + if(!ch.lockPreset) { + ch.bank = 0; + if ((ch.channelNumber - 1) % 16 === DEFAULT_PERCUSSION) { + ch.setPreset(this.percussionPreset); + ch.percussionChannel = true; + this.eventHandler.callEvent("drumchange", { + channel: ch.channelNumber - 1, + isDrumChannel: true + }); + } else { + ch.percussionChannel = false; + ch.setPreset(this.defaultPreset); + this.eventHandler.callEvent("drumchange", { + channel: ch.channelNumber - 1, + isDrumChannel: false + }); + } } // call all the event listeners diff --git a/src/website/ui/renderer.js b/src/website/ui/renderer.js index 987f58b7..d6b2c40f 100644 --- a/src/website/ui/renderer.js +++ b/src/website/ui/renderer.js @@ -1,5 +1,5 @@ import {Synthetizer} from "../../spessasynth_lib/synthetizer/synthetizer.js"; -import { calculateRGB } from '../../spessasynth_lib/utils/other.js'; +import { calculateRGB, consoleColors } from '../../spessasynth_lib/utils/other.js' import { Sequencer } from '../../spessasynth_lib/sequencer/sequencer.js'; /** @@ -47,7 +47,7 @@ export class Renderer // booleans - this.renderBool = true; + this._renderBool = true; this.renderAnalysers = true; this.renderNotes = true; this.drawActiveNotes = true; @@ -90,6 +90,7 @@ export class Renderer * @type {AnalyserNode[]} */ this.channelAnalysers = []; + this.createChannelAnalysers(synth); this.connectChannelAnalysers(synth); } @@ -99,10 +100,9 @@ export class Renderer } /** - * Connect the 16 channels to their respective analysers * @param synth {Synthetizer} */ - connectChannelAnalysers(synth) + createChannelAnalysers(synth) { // disconnect the analysers from earlier for(const analyser of this.channelAnalysers) @@ -111,17 +111,14 @@ export class Renderer this.channelAnalysers.splice(0, 1); } this.channelAnalysers = []; - for(const channel of synth.midiChannels) + for(let i = 0; i < synth.midiChannels.length; i++) { // create the analyser - const analyser = new AnalyserNode(channel.ctx, { + const analyser = new AnalyserNode(synth.context, { fftSize: this.normalAnalyserFft }); - // connect the channel's output to the analyser - channel.gainController.connect(analyser); this.channelAnalysers.push(analyser); } - // connect more channels to the same analysers on add synth.eventHandler.addEvent("newchannel", "renderer-new-channel", channel => { const targetAnalyser = this.channelAnalysers[(synth.midiChannels.length - 1) % this.channelAnalysers.length]; @@ -129,6 +126,27 @@ export class Renderer }) } + /** + * Connect the 16 channels to their respective analysers + * @param synth {Synthetizer} + */ + connectChannelAnalysers(synth) + { + for(let i = 0; i < synth.midiChannels.length; i++) + { + // connect the channel's output to the analyser + synth.midiChannels[i].gainController.connect(this.channelAnalysers[i % this.channelAnalysers.length]); + } + } + + disconnectChannelAnalysers() + { + for (const channelAnalyser of this.channelAnalysers) { + channelAnalyser.disconnect(); + } + console.log("%cAnalysers disconnected!", consoleColors.recognized); + } + /** * @param noteTimes {NoteTimes} * @param sequencer {Sequencer} @@ -253,6 +271,24 @@ export class Renderer } } + get renderBool() + { + return this._renderBool; + } + + set renderBool(value) + { + this._renderBool = value; + if(value === true) + { + this.connectChannelAnalysers(this.synth); + } + else + { + this.disconnectChannelAnalysers(); + } + } + renderWaveforms() { this.channelAnalysers.forEach((analyser, i) => { diff --git a/src/website/ui/settings_ui/settings.js b/src/website/ui/settings_ui/settings.js index 9f1d0265..d7c89c12 100644 --- a/src/website/ui/settings_ui/settings.js +++ b/src/website/ui/settings_ui/settings.js @@ -132,8 +132,8 @@ export class Settings // rest // things get hacky here: change the global (*) --font-color to black: - document.styleSheets[0].cssRules[0].style.setProperty("--font-color", this.mode === "dark" ? "#eee" : "#333"); - document.styleSheets[0].cssRules[0].style.setProperty("--top-buttons-color", this.mode === "dark" ? "#222" : "linear-gradient(270deg, #ddd, #fff)"); + document.styleSheets[0].cssRules[5].style.setProperty("--font-color", this.mode === "dark" ? "#eee" : "#333"); + document.styleSheets[0].cssRules[5].style.setProperty("--top-buttons-color", this.mode === "dark" ? "#222" : "linear-gradient(270deg, #ddd, #fff)"); document.body.style.background = this.mode === "dark" ? "black" : "white"; } }