add force full velocity to keyboard

Author: spessasus

src/website/changelog.ts

@@ -5,5 +5,6 @@ export const WHATS_NEW: string[] = [
     `Adjustable sample rate!`,
     `Switching between Chrome and Worklet mode!`,
     `Added support for poly/mono mode!`,
-    `Fixed visual desync!`
+    `Fixed visual desync!`,
+    `Added a new option to the keyboard!`
 ] as const;

src/website/js/locale/locale_files/locale_en/settings/keyboard_settings.ts

@@ -27,5 +27,11 @@ export const keyboardSettingsLocale = {
     show: {
         title: "Show",
         description: "Show/hide MIDI keyboard"
+    },
+
+    forceMaxVelocity: {
+        title: "Force full color",
+        description:
+            "Force full color intensity, regardless of the MIDI note-on velocity"
     }
 };

src/website/js/locale/locale_files/locale_pl/settings/keyboard_settings.ts

@@ -27,5 +27,10 @@ export const keyboardSettingsLocale = {
     show: {
         title: "Pokaż",
         description: "Pokaż/ukryj pianino"
+    },
+
+    forceMaxVelocity: {
+        title: "Wymuś pełny kolor",
+        description: "Wymuś pełen kolor klawiszy podczas nacisku"
     }
 };

src/website/js/midi_keyboard/midi_keyboard.ts

@@ -19,6 +19,7 @@ export class MIDIKeyboard {
     public onNotePressed?: (midiNote: number, velocity: number) => unknown;
     public channel = 0;
     public mode: InterfaceMode = "light";
+    public forceMaxVelocity = false;
     protected mouseHeld = false;
     protected pressedKeys = new Set<number>();
     protected sizeChangeAnimationId = -1;
@@ -307,7 +308,7 @@ export class MIDIKeyboard {
         key.classList.add("pressed");
 
         const isSharp = key.classList.contains("sharp_key");
-        const brightness = velocity / 127;
+        const brightness = this.forceMaxVelocity ? 1 : velocity / 127;
         const rgbaValues = this.channelColors[channel % 16]
             .match(/\d+(\.\d+)?/g)
             ?.map((element) => Number.parseFloat(element));

src/website/js/settings_ui/handlers/keyboard_handler.ts

@@ -239,4 +239,11 @@ export function _createKeyboardHandler(this: SpessaSynthSettings) {
         this.midiKeyboard.shown = !this.midiKeyboard.shown;
         this.saveSettings();
     });
+
+    // Keyboard max velocity
+    keyboardControls.maxVelocitySelector.addEventListener("click", () => {
+        this.midiKeyboard.forceMaxVelocity =
+            !this.midiKeyboard.forceMaxVelocity;
+        this.saveSettings();
+    });
 }

src/website/js/settings_ui/saving/load_settings.ts

@@ -150,6 +150,11 @@ export async function _loadSettings(this: SpessaSynthSettings): Promise<void> {
         this.htmlControls.keyboard.showSelector.checked = false;
     }
 
+    // Keyboard force max velocity
+    if (!keyboardValues.forceMaxVelocity) {
+        keyboard.forceMaxVelocity = true;
+        this.htmlControls.keyboard.maxVelocitySelector.checked = true;
+    }
     // Interface
     this.locale.changeGlobalLocale(savedSettings.interface.language, true);
 

src/website/js/settings_ui/saving/serialize_settings.ts

@@ -38,7 +38,9 @@ export function _serializeSettings(this: SpessaSynthSettings): SavedSettings {
             autoRange:
                 this.htmlControls.keyboard.sizeSelector.value ===
                 USE_MIDI_RANGE,
-            show: this.htmlControls.keyboard.showSelector.checked
+            show: this.htmlControls.keyboard.showSelector.checked,
+            forceMaxVelocity:
+                this.htmlControls.keyboard.maxVelocitySelector.checked
         },
 
         midi: {

src/website/js/settings_ui/settings.ts

@@ -332,7 +332,10 @@ export class SpessaSynthSettings {
                     "#keyboard_size_selector"
                 )!,
                 showSelector:
-                    document.querySelector<HTMLInputElement>("#keyboard_show")!
+                    document.querySelector<HTMLInputElement>("#keyboard_show")!,
+                maxVelocitySelector: document.querySelector<HTMLInputElement>(
+                    "#keyboard_force_max_velocity"
+                )!
             },
 
             midi: {

src/website/js/settings_ui/settings_html.ts

@@ -130,6 +130,14 @@ export const settingsHtml = `
                 <span class='switch_slider'></span>
             </label>
         </div>
+        
+        <div class='switch_label'>
+            <label translate-path-title='locale.settings.keyboardSettings.forceMaxVelocity'></label>
+            <label class='switch'>
+                <input type='checkbox' checked id='keyboard_force_max_velocity'>
+                <span class='switch_slider'></span>
+            </label>
+        </div>
     </div>
     
     

src/website/server/saved_settings.ts

@@ -20,6 +20,7 @@ export interface SavedSettings {
         selectedChannel: number;
         autoRange: boolean;
         show: boolean;
+        forceMaxVelocity: boolean;
     };
     renderer: {
         renderNotes: boolean;
@@ -56,6 +57,7 @@ export const DEFAULT_SAVED_SETTINGS: SavedSettings = {
         mode: "light",
         selectedChannel: 0,
         show: true,
+        forceMaxVelocity: false,
         autoRange: false,
         keyRange: {
             max: 127,