velocity keys

src/core/MainView.jsx

@@ -13,7 +13,10 @@ import { AppServices } from './AppServices'
 import MIDIEmitter from './MIDIEmitter'
 import { tw } from 'twind'
 import { StatusBar } from './StatusBar'
-import { switchOutputChannel, OutputChannelSwitcher } from './switchOutputChannel'
+import {
+  switchOutputChannel,
+  OutputChannelSwitcher,
+} from './switchOutputChannel'
 import { showInformationMessage } from './showInformationMessage'
 
 export class MainView extends React.Component {
@@ -59,10 +62,27 @@ export class MainView extends React.Component {
       }
     }
     if (e.ctrlKey) {
+      const updateVelocity = (delta) => {
+        const velocity = Math.round(
+          Math.max(0, Math.min(127, this.store.noteVelocity + delta * 8))
+        )
+        this.store.noteVelocity = velocity
+        showInformationMessage('Velocity: ' + velocity)
+      }
       if (e.keyCode >= 0x30 && e.keyCode <= 0x39) {
         switchOutputChannel(e.keyCode === 0x30 ? 10 : e.keyCode - 0x30)
         e.preventDefault()
         return
+      } else if (e.keyCode === 189) {
+        // Ctrl + -
+        updateVelocity(-1)
+        e.preventDefault()
+        return
+      } else if (e.keyCode === 187) {
+        // Ctrl + =
+        updateVelocity(1)
+        e.preventDefault()
+        return
       }
     }
     if (e.metaKey || e.ctrlKey) return

src/core/showInformationMessage.tsx

@@ -1,17 +1,25 @@
-import { tw } from "twind"
+import { tw } from 'twind'
 
-export function showInformationMessage (text: string) {
+let clearLastMessage = () => {}
+
+export function showInformationMessage(text: string) {
+  let cleared = false
+  clearLastMessage()
   const message = document.createElement('div')
-  message.className = tw`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none bg-black text-white text-xl p-4`
+  message.className = tw`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none bg-black text-white text-4xl p-4`
   message.style.opacity = '1'
   message.style.zIndex = '999'
   message.style.transition = 'opacity 0.5s ease-in-out'
   message.innerText = text
   document.body.appendChild(message)
+  const clear = () => {
+    if (cleared) return
+    cleared = true
+    message.remove()
+  }
+  clearLastMessage = clear
   setTimeout(() => {
     message.style.opacity = '0'
-    setTimeout(() => {
-      document.body.removeChild(message)
-    }, 500)
+    setTimeout(clear, 500)
   }, 1000)
-}
+}

src/midi-keybindings/index.ts

@@ -1,6 +1,7 @@
-import { MIDI, createFeature, useConfiguration } from '../core'
+import { MIDI, Store, createFeature, useConfiguration } from '../core'
 import { observable } from 'mobx'
 import { KeyboardEvent, useEffect } from 'react'
+import { showInformationMessage } from '../core/showInformationMessage'
 
 const state = observable({
   keyCodes: observable.map<number, { altKey: boolean }>({}),
@@ -25,6 +26,12 @@ let pedalMidiChannel = 1
 let chromaticMode = false
 let currentPedal: { up: () => void } | null = null
 
+function notifyTranspose(store: Store) {
+  showInformationMessage(
+    `Octave: ${store.octave}, Transpose: ${store.transpose}`
+  )
+}
+
 export default createFeature({
   name: 'midi-keybindings',
   category: 'addons',
@@ -52,18 +59,22 @@ export default createFeature({
     }
     if (keyCode === 37) {
       store.setTranspose(store.transpose - 1)
+      notifyTranspose(store)
       return
     }
     if (keyCode === 38) {
       store.setOctave(store.octave + 1)
+      notifyTranspose(store)
       return
     }
     if (keyCode === 39) {
       store.setTranspose(store.transpose + 1)
+      notifyTranspose(store)
       return
     }
     if (keyCode === 40) {
       store.setOctave(store.octave - 1)
+      notifyTranspose(store)
       return
     }
     state.keyCodes.set(keyCode, { altKey: event.altKey })