Make A4 the default reference pitch

Use the English standard for 69 = A4 by default.
Add configuration to recover the old French behavior 69 = A5.

ref #401

src/App.vue

@@ -110,6 +110,7 @@ const colorScheme = ref<"light" | "dark">("light");
 const centsFractionDigits = ref(3);
 const decimalFractionDigits = ref(5);
 const showVirtualQwerty = ref(false);
+const midiOctaveOffset = ref(-1);
 
 // Special keyboard codes also from local storage.
 const deactivationCode = ref("Backquote");
@@ -751,6 +752,9 @@ onMounted(() => {
   if ("showVirtualQwerty" in storage) {
     showVirtualQwerty.value = storage.getItem("showVirtualQwerty") === "true";
   }
+  if ("midiOctaveOffset" in storage) {
+    midiOctaveOffset.value = parseInt(storage.getItem("midiOctaveOffset")!);
+  }
 
   // Fetch special key map
   if ("deactivationCode" in storage) {
@@ -903,6 +907,9 @@ watch(decimalFractionDigits, (newValue) =>
 watch(showVirtualQwerty, (newValue) =>
   window.localStorage.setItem("showVirtualQwerty", newValue.toString())
 );
+watch(midiOctaveOffset, (newValue) =>
+  window.localStorage.setItem("midiOctaveOffset", newValue.toString())
+);
 // Store keymaps
 watch(deactivationCode, (newValue) =>
   window.localStorage.setItem("deactivationCode", newValue)
@@ -998,6 +1005,7 @@ watch(degreeDownCode, (newValue) =>
     :typingKeyboard="typingKeyboard"
     :keyboardMapping="keyboardMapping"
     :showVirtualQwerty="showVirtualQwerty"
+    :midiOctaveOffset="midiOctaveOffset"
     @update:audioDelay="audioDelay = $event"
     @update:mainVolume="mainVolume = $event"
     @update:scaleName="scaleName = $event"
@@ -1023,6 +1031,7 @@ watch(degreeDownCode, (newValue) =>
     @update:centsFractionDigits="centsFractionDigits = $event"
     @update:decimalFractionDigits="decimalFractionDigits = $event"
     @update:showVirtualQwerty="showVirtualQwerty = $event"
+    @update:midiOctaveOffset="midiOctaveOffset = $event"
     @update:deactivationCode="deactivationCode = $event"
     @update:equaveUpCode="equaveUpCode = $event"
     @update:equaveDownCode="equaveDownCode = $event"

src/components/ScaleBuilder.vue

@@ -48,6 +48,8 @@ const props = defineProps<{
   centsFractionDigits: number;
   decimalFractionDigits: number;
   newline: string;
+
+  midiOctaveOffset: number;
 }>();
 
 const emit = defineEmits([
@@ -369,7 +371,9 @@ function copyToClipboard() {
             step="1"
             v-model="baseMidiNote"
           />
-          <span>{{ midiNoteNumberToName(baseMidiNote) }}</span>
+          <span>{{
+            midiNoteNumberToName(baseMidiNote, props.midiOctaveOffset)
+          }}</span>
         </div>
 
         <!-- This control is for the 3rd field that is found at the top of kbm files -->

src/utils.ts

@@ -33,10 +33,15 @@ const MIDI_NOTE_NAMES = [
   "B",
 ];
 
-// Find MIDI note name from MIDI note number
-export function midiNoteNumberToName(noteNumber: number) {
+/**
+ * Convert an integer MIDI note number to a name such as A4.
+ * @param noteNumber MIDI note number to convert.
+ * @param octaveOffset Defaults to the English standard: 69 = A4. An offset of zero results in the French standard 69 = A5.
+ * @returns String representation of the MIDI note number.
+ */
+export function midiNoteNumberToName(noteNumber: number, octaveOffset = -1) {
   const remainder = mmod(noteNumber, 12);
-  const quotient = (noteNumber - remainder) / 12;
+  const quotient = (noteNumber - remainder) / 12 + octaveOffset;
   return MIDI_NOTE_NAMES[remainder] + quotient.toString();
 }
 

src/views/PreferencesView.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   centsFractionDigits: number;
   decimalFractionDigits: number;
   showVirtualQwerty: boolean;
+  midiOctaveOffset: number;
 }>();
 
 const emit = defineEmits([
@@ -17,6 +18,7 @@ const emit = defineEmits([
   "update:decimalFractionDigits",
   "update:virtualKeyboardMode",
   "update:showVirtualQwerty",
+  "update:midiOctaveOffset",
 ]);
 
 const newline = computed({
@@ -39,6 +41,10 @@ const showVirtualQwerty = computed({
   get: () => props.showVirtualQwerty,
   set: (newValue: boolean) => emit("update:showVirtualQwerty", newValue),
 });
+const midiOctaveOffset = computed({
+  get: () => props.midiOctaveOffset,
+  set: (newValue: number) => emit("update:midiOctaveOffset", newValue),
+});
 </script>
 
 <template>
@@ -98,6 +104,16 @@ const showVirtualQwerty = computed({
               <label for="scheme-dark"> Dark </label>
             </span>
           </div>
+          <div class="control">
+            <label for="midiOctaveOffset">MIDI octave offset</label>
+            <input
+              id="midiOctaveOffset"
+              type="number"
+              class="control"
+              step="1"
+              v-model="midiOctaveOffset"
+            />
+          </div>
         </div>
       </div>
       <div class="column">

src/views/ScaleView.vue

@@ -14,6 +14,8 @@ defineProps<{
   centsFractionDigits: number;
   decimalFractionDigits: number;
   newline: string;
+
+  midiOctaveOffset: number;
 }>();
 
 defineEmits([
@@ -38,6 +40,7 @@ defineEmits([
       :centsFractionDigits="centsFractionDigits"
       :decimalFractionDigits="decimalFractionDigits"
       :newline="newline"
+      :midiOctaveOffset="midiOctaveOffset"
       @update:scaleName="$emit('update:scaleName', $event)"
       @update:scaleLines="$emit('update:scaleLines', $event)"
       @update:scale="$emit('update:scale', $event)"