Add MTS-SysEx exporter #387

package.json

@@ -20,7 +20,7 @@
     "vue": "^3.2.33",
     "vue-router": "^4.1.5",
     "webmidi": "^3.0.21",
-    "xen-dev-utils": "^0.1.2",
+    "xen-dev-utils": "github:xenharmonic-devs/xen-dev-utils#mts-methods",
     "scale-workshop-core": "github:xenharmonic-devs/scale-workshop-core#v0.0.1"
   },
   "devDependencies": {

src/assets/base.css

@@ -231,6 +231,9 @@ ul.btn-group, .btn-dropdown-group ul {
 .control select {
   flex-grow: 1;
 }
+.control input.half {
+  flex-grow: 0.25 !important;
+}
 .control.checkbox-container {
   flex-flow: unset;
 }
@@ -251,7 +254,7 @@ ul.btn-group, .btn-dropdown-group ul {
   }
 }
 
-/* UI element - expandable secion */
+/* UI element - expandable section */
 .section::after {
   content: " ▼";
   font-size: 0.5rem;
@@ -274,3 +277,24 @@ p.section {
   font-weight: bold;
   cursor: pointer;
 }
+
+/* UI element - question mark with tooltip on hover */
+span.info-question {
+  border-radius: 50%;
+  border-width: 2px;
+  border-style: solid;
+  padding-left: 4px;
+  padding-right: 4px;
+  font-size: smaller;
+
+  transition: 0.3s ease;
+}
+span.info-question::after {
+  content: '?';
+}
+span.info-question:hover {
+  background: white;
+  color: black;
+  border-color: white;
+  transition: all 0.3s ease;
+}

src/components/ScaleBuilder.vue

@@ -7,7 +7,8 @@ import { APP_TITLE } from "@/constants";
 import { sanitizeFilename, midiNoteNumberToName } from "@/utils";
 import { exportFile, type ExporterKey } from "@/exporters";
 import Modal from "@/components/ModalDialog.vue";
-import ReaperExportModal from "@/components/modals/ReaperExport.vue";
+import ReaperExportModal from "@/components/modals/export/ReaperExport.vue";
+import MtsSysexExportModal from "@/components/modals/export/MtsSysexExport.vue";
 import ShareUrlModal from "@/components/modals/ShareUrl.vue";
 import EqualTemperamentModal from "@/components/modals/generation/EqualTemperament.vue";
 import HarmonicSeriesModal from "@/components/modals/generation/HarmonicSeries.vue";
@@ -137,6 +138,7 @@ function doExport(exporter: ExporterKey) {
 }
 
 const showReaperExportModal = ref(false);
+const showMtsSysexExportModal = ref(false);
 const showShareUrlModal = ref(false);
 const shareUrlModal = ref<any>(null);
 
@@ -491,6 +493,10 @@ function copyToClipboard() {
         <p><strong>Reaper note name map (.txt)</strong></p>
         <p>Displays custom note names on Reaper's piano roll</p>
       </a>
+      <a href="#" class="btn" @click="showMtsSysexExportModal = true">
+        <p><strong>MTS Sysex Bulk Tuning Dump (.syx)</strong></p>
+        <p>Binary data of a Bulk Tuning Dump SysEx message</p>
+      </a>
       <a
         href="#"
         class="btn"
@@ -532,6 +538,16 @@ function copyToClipboard() {
       :scale="scale"
     />
 
+    <MtsSysexExportModal
+      :show="showMtsSysexExportModal"
+      @confirm="showMtsSysexExportModal = false"
+      @cancel="showMtsSysexExportModal = false"
+      :newline="props.newline"
+      :scaleName="scaleName"
+      :baseMidiNote="baseMidiNote"
+      :scale="scale"
+    />
+
     <RankTwoModal
       :show="showRankTwoModal"
       :centsFractionDigits="centsFractionDigits"

src/components/modals/export/MtsSysexExport.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import MtsSysexExporter from "@/exporters/mts-sysex";
+import { sanitizeFilename } from "@/utils";
+import { ref } from "vue";
+import Modal from "@/components/ModalDialog.vue";
+import type { Scale } from "scale-workshop-core";
+import { clamp } from "xen-dev-utils";
+
+const props = defineProps<{
+  newline: string;
+  scaleName: string;
+  baseMidiNote: number;
+  scale: Scale;
+}>();
+
+const emit = defineEmits(["confirm", "cancel"]);
+
+function clampName(name: string): string {
+  return name.slice(0, 16);
+}
+
+function formatPresetIndex(input: string | number): number {
+  let number =
+    typeof input === "string" ? parseInt(input.replace(/\D/g, "")) : input;
+  if (Number.isNaN(number)) return 0;
+  return clamp(0, 127, number);
+}
+
+// Rarely implemented parameters
+// const deviceId = ref(0);
+// const bank = ref(0); (only for message 0x0804)
+
+const name = ref(clampName(props.scaleName));
+const presetIndex = ref(0);
+
+function doExport() {
+  const params = {
+    newline: props.newline,
+    scale: props.scale,
+    filename: sanitizeFilename(props.scaleName),
+    baseMidiNote: props.baseMidiNote,
+    name: name.value,
+    presetIndex: presetIndex.value,
+  };
+
+  const exporter = new MtsSysexExporter(params);
+  exporter.saveFile();
+
+  emit("confirm");
+}
+</script>
+
+<template>
+  <Modal @confirm="doExport" @cancel="$emit('cancel')">
+    <template #header>
+      <h2>Export MTS Bulk Tuning Dump</h2>
+    </template>
+    <template #body>
+      <div class="control-group">
+        <div class="control">
+          <label for="name">Name (16-character limit)</label>
+          <input
+            class="half"
+            type="text"
+            id="name"
+            v-model="name"
+            @input="name = clampName(name)"
+          />
+        </div>
+        <div class="control">
+          <label for="preset-index">
+            Preset Index&nbsp;
+            <span
+              @click="$event.preventDefault()"
+              class="info-question"
+              title="Refer to your synth's manual for a valid range">
+            </span>
+          </label>
+          <input
+            class="half"
+            type="number"
+            id="preset-index"
+            v-model="presetIndex"
+            @input="presetIndex = formatPresetIndex(presetIndex)"
+          />
+        </div>
+      </div>
+    </template>
+  </Modal>
+</template>

src/exporters/__tests__/mts.spec.ts

@@ -0,0 +1,60 @@
+import { createHash } from "crypto";
+import { describe, it, expect } from "vitest";
+
+import { getTestData } from "./test-data";
+import MtsSysexExporter from "../mts-sysex";
+
+describe("MTS exporter", () => {
+  it("can handle all line types", async () => {
+    const params = getTestData(
+      "MTS Sysex Bulk Tuning Dump exporter unit test v0.0.0"
+    );
+    params.presetIndex = 1;
+
+    const exporter = new MtsSysexExporter(params);
+
+    const scaleData = exporter.getBulkTuningData();
+    expect(createHash("sha256").update(scaleData).digest("base64")).toBe(
+      "Ps5Ddp9lBYZgCn7Y8aSBnhXOcfIm+sh9AcnybiLX4Zg="
+    );
+
+    // Name is padded with spaces
+    const nameData = exporter.getNameData();
+    expect(nameData).toEqual([
+      84, 101, 115, 116, 32, 83, 99, 97, 108, 101, 32, 32, 32, 32, 32, 32,
+    ]);
+
+    const sysExMsg = exporter.buildSysExDump();
+    expect(createHash("sha256").update(sysExMsg).digest("base64")).toBe(
+      "Dx+z9IBMNqBrj7/g4EJ3XQxMPKbtQqmpfjLdoPPrV48="
+    );
+  });
+
+  it("can gracefully handle invalid parameters", async () => {
+    const params = getTestData(
+      "MTS Sysex Bulk Tuning Dump exporter unit test v0.0.0"
+    );
+    params.name = "Super Special Test Scale";
+    params.presetIndex = -1;
+
+    const exporter = new MtsSysexExporter(params);
+
+    const scaleData = exporter.getBulkTuningData();
+    expect(createHash("sha256").update(scaleData).digest("base64")).toBe(
+      "Ps5Ddp9lBYZgCn7Y8aSBnhXOcfIm+sh9AcnybiLX4Zg="
+    );
+
+    // Name is truncated
+    const nameData = exporter.getNameData();
+    expect(nameData).toEqual([
+      83, 117, 112, 101, 114, 32, 83, 112, 101, 99, 105, 97, 108, 32, 84, 101,
+    ]);
+
+    const sysExMsg = exporter.buildSysExDump();
+    expect(createHash("sha256").update(sysExMsg).digest("base64")).toBe(
+      "8TgBDEn+mTm/xar39zeO9NBCcRn6KymbO/ZeMfa8rq0="
+    );
+  });
+
+  return;
+});

src/exporters/base.ts

@@ -17,6 +17,7 @@ export type ExporterParams = {
   centsRoot?: number;
   displayPeriod?: boolean;
   integratePeriod?: boolean;
+  presetIndex?: number;
 };
 
 export class BaseExporter {

src/exporters/index.ts

@@ -8,6 +8,7 @@ import MaxMSPExporter from "@/exporters/max-msp";
 import PureDataExporter from "@/exporters/pure-data";
 import { ScalaSclExporter, ScalaKbmExporter } from "@/exporters/scala";
 import SoniccoutureExporter from "@/exporters/soniccouture";
+import MtsSysexExporter from "@/exporters/mts-sysex";
 
 const EXPORTERS = {
   anamarkv1: AnaMarkV1Exporter,
@@ -22,6 +23,7 @@ const EXPORTERS = {
   sytrus: SytrusExporter,
   mnlgtuns: MnlgtunsExporter,
   mnlgtuno: MnlgtunoExporter,
+  mtsSysex: MtsSysexExporter,
   deflemask: DeflemaskExporter,
 };