feat: Vue 3 update (#185)

* fix(style): style the midi dropdowns (#164)

* fix(waveform-editor): redraw waveform on incoming CC change (#166)

* docs(readme): adds video and written documentation (#168)

* docs: add info on iOS/iPadOS (#169)

* Update README.md (#172)

* Update README.md (#173)

* docs: add MIDI input documentation (#180)

* Update README.md (#181)

* Update README.md (#182)

* feat: Vue 3 update (#183)

Huge improvements on how you can route and handle MIDI through genMDM Editor.
And, some new features to control portamento and fine tune when using Mega Drive MIDI Interface.

Automatic reconnection of MIDI devices.
UI updates galore.
Fixed the dials not actually allowing selection of all values.
Fixed values on "rate scale".

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+out
+.gitignore

.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    '@electron-toolkit',
+    '@vue/eslint-config-prettier'
+  ],
+  rules: {
+    'vue/require-default-prop': 'off',
+    'vue/multi-word-component-names': 'off'
+  }
+}

.github/workflows/build-electron.yml

@@ -4,74 +4,61 @@ on:
   workflow_dispatch:
   push:
     tags:
-      - '[0-9]+.[0-9]+.[0-9]+'
-
-env:
-  ELECTRON_CACHE: $HOME/.cache/electron
-  ELECTRON_BUILDER_CACHE: $HOME/.cache/electron-builder
-  USE_HARD_LINKS: false
-  GH_TOKEN: ${{ secrets.GH_TOKEN }}
+      - "[0-9]+.[0-9]+.[0-9]+"
 
 jobs:
-  build-windows:
-    name: Build Windows
-    runs-on: windows-latest
-    env:
-      YARN_GPG: no
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
+  release:
+    runs-on: ${{ matrix.os }}
 
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
+    env:
+      GH_TOKEN: ${{ secrets.GH_TOKEN }}
 
-      - name: Build Windows
-        run: yarn run electron:build -w
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
 
-  build-macOS:
-    name: Build macOS
-    runs-on: macos-latest
-    environment: build
-    env:
-      APPLEID: ${{ secrets.APPLEID }}
-      APPLEIDPASS: ${{ secrets.APPLEIDPASS }}
-      CSC_LINK: ${{ secrets.CSC_LINK }}
-      CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
-      APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
+      - name: Check out Git repository
+        uses: actions/checkout@v3
 
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - name: Install Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: '14.x'
+          node-version: 20
 
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
+      - name: Install Dependencies
+        run: npm install
 
-      - name: Build macOS
-        run: yarn run electron:build -m
+      - name: build-linux
+        if: matrix.os == 'ubuntu-latest'
+        run: npm run build:linux
 
-  build-ubuntu:
-    name: Build Ubuntu
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
+      - name: build-mac
+        if: matrix.os == 'macos-latest'
+        run: npm run build:mac
+        env:
+          APPLEID: ${{ secrets.APPLEID }}
+          APPLEIDPASS: ${{ secrets.APPLEIDPASS }}
+          CSC_LINK: ${{ secrets.CSC_LINK }}
+          CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
 
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
+      - name: build-win
+        if: matrix.os == 'windows-latest'
+        run: npm run build:win
 
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Build ubuntu
-        run: yarn run electron:build -l
+      - name: release
+        uses: softprops/action-gh-release@v1
+        with:
+          draft: true
+          files: |
+            dist/*.exe
+            dist/*.zip
+            dist/*.dmg
+            dist/*.AppImage
+            dist/*.snap
+            dist/*.deb
+            dist/*.rpm
+            dist/*.tar.gz
+            dist/*.yml
+            dist/*.blockmap

.github/workflows/build-web.yml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
   push:
     tags:
-      - '[0-9]+.[0-9]+.[0-9]+'
+      - "[0-9]+.[0-9]+.[0-9]+"
 
 jobs:
   build-and-deploy:
@@ -16,16 +16,16 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '14.x'
+          node-version: "20.x"
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
       - name: Build
-        run: yarn run build
+        run: yarn run build:browser
 
       - name: Deploy
         uses: JamesIves/[email protected]
         with:
           branch: gh-pages # The branch the action should deploy to.
-          folder: dist # The folder the action should deploy.
+          folder: out/renderer # The folder the action should deploy.

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/out
 
 # local env files
 .env.local

README.md

@@ -10,23 +10,124 @@
   </a>
 </p>
 <p align="center">
-genMDM editor is a web-based interface for genMDM, a MIDI controller for the Sega Mega Drive and Genesis.
+genMDM editor is a GUI for <a href="https://catskullelectronics.com/products/genmdm" target="_blank">genMDM</a>, a MIDI controller for the Sega Mega Drive and Genesis.<br>
+Also fully compatible with <a href="https://github.com/rhargreaves/mega-drive-midi-interface" target="_blank">Mega Drive MIDI Interface</a>.
 </p>
 
+<div align="center">
+  <video src="https://user-images.githubusercontent.com/554219/232328348-34175e38-a6a9-43a4-8781-14f210814465.mp4"></video>
+</div>
 
-## Using genMDM Editor
-genMDM editor is a desktop executable, and also works in Chromuim based browsers.
-Those browsers include Google Chrome, Opera, Brave and Microsoft Edge.
+## About genMDM Editor
+
+genMDM Editor is a desktop executable and a webpage.
+
+The webpage works in Firefox (starting at Firefox version 99) and Chromuim based browsers.  
+Chromium based browsers include Google Chrome, Opera, Brave and Microsoft Edge.
+
+Using genMDM on iOS/iPadOS is possible using Web MIDI Browser, found here: [apps.apple.com/app/web-midi-browser](https://apps.apple.com/app/web-midi-browser/id953846217)
 
-1. Download the latest release at [github.com/2xAA/genmdm-editor/releases/latest](https://github.com/2xAA/genmdm-editor/releases/latest) or navigate to [2xaa.github.io/genmdm-editor](https://2xaa.github.io/genmdm-editor).
-2. Select the genMDM or MIDI device connected to genMDM in the MIDI Output dropdown.
+genMDM Editor is compatible with both the genMDM, by little-scale, and the MDMI (Mega Drive MIDI Interface), by Robert Hargreaves.
+This Readme will refer to both interfaces as **"your Sega"**, for convinience.
 
+## Using genMDM Editor
+
+### Quickstart
 Check out the overview video on how to use the editor: [youtu.be/btzQHaF8cU4](https://youtu.be/btzQHaF8cU4)
 
-Docs to follow.
+### Getting genMDM Editor
+
+#### Desktop
+Download the latest desktop release at [genmdm-editor/releases/latest](https://github.com/2xAA/genmdm-editor/releases/latest).
+
+#### Web
+Navigate to [2xaa.github.io/genmdm-editor](https://2xaa.github.io/genmdm-editor).
+
+### Mega Drive MIDI Interface Compatibility
+
+If using MDMI (Mega Drive MIDI Interface), ensure the **"MDMI Compatibility"** option is turned on _after_ connecting the MDMI.
+The option sends a SysEx message to MDMI to invert the operator's Total Levels, as GenMDM does.
+
+With the **"MDMI Compatibility"** option turned on, changing channels in the editor informs MDMI to show the channel's settings on the video output.
+More information: [mega-drive-midi-interface/wiki/UI-Features](https://github.com/rhargreaves/mega-drive-midi-interface/wiki/UI-Features#displaying-current-fm-channel-parameters)
+
+### File Formats
+
+#### `.genm` Format
+
+The genMDM Editor was build around the `.genm` file format, which can hold 128 genMDM instruments.
+Each instrument in the `.genm` file can store every parameter of the genMDM instrument.
+
+The `.genm` format does not include any of the editor settings, the global settings or the DAC Control settings.
+
+More information: [little-scale.blogspot.com/genm-file-format](http://little-scale.blogspot.com/2013/02/genm-file-format-genmdm-instrument.html)
+
+##### `.genm` load/save
+
+Pressing the **"LOAD GENM"** button will open a file browser to choose a `.genm` file to load.
+Loading a `.genm` file will overwrite the current patches in the editor. It will not load anything to the current channel.
+
+Pressing the **"SAVE GENM"** button will open a file browser to choose where to save a `.genm` file containing all the patches in the editor's patch list.
+
+#### Instrument Files
+
+genMDM Editor can import and export `.tfi`, `.dmp` and `.y12` formats using their corresponding **"IMPORT"** and **"EXPORT"** buttons.
+
+The **"IMPORT"** buttons will open a file browser to load an instrument to the current channel - it does not write to the patch slot.
+
+The **"EXPORT"** buttons will open a file browser to save the current channel's parameters to the selected instrument file format - it does not read from the patch slot.
+
+| Format | Information                                                                                                                                                                                         | Pitfalls                                                     |
+| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| `.dmp` | `.dmp` is Deflemask's instrument format. It's a multi-system format, so not all patches can be imported into genMDM Editor - only those which were saved from the Sega Genesis system in Deflemask. | Doesn't hold the stereo configuration option.                |
+| `.tfi` | `.tfi` is TFM Music Maker's instrument format.                                                                                                                                                      | Doesn't hold AM or FM LFO parameters or stereo configuation. |
+| `.y12` | `.y12` is a format for storing YM2612 FM preset data, similar to `.tfi`                                                                                                                             | Doesn't hold AM or FM LFO parameters or stereo configuation. |
+
+#### `.ged` format
+
+This is a format for the genMDM Editor's internal state. It uses [`compress-json`](https://github.com/beenotung/compress-json) to serialise the internal state to a file.
+It contains the entire application state, including patches and editor settings.
+
+### State
+
+Neither genMDM or MDMI save their session state when powered off, but genMDM Editor does.
+
+#### Autosave
+
+genMDM Editor saves your editor state automatically, so if your Sega loses power, crashes, etc., your state can be restored by plugging in your Sega, selecting it in the MIDI Output dropdown and pressing the **"Send State"** button.
+
+#### Load/Save
+
+genMDM Editor's state can be saved to a file at any time by pressing the **"Save State"** button.
+
+The `.ged` files can be loaded back into the editor with the **"Load State"** button. Loading a `.ged` file will overwrite the editor's autosaved state immediately.
+If you want to sync this state to your Sega, press the **"Send State"** button.
+
+### MIDI
+
+#### MIDI CC
+
+The genMDM Editor UI reacts to incoming MIDI CC messages. It is recommended to route all MIDI messages to the Sega through genMDM Editor to keep the UI in sync.
+
+Find genMDM's MIDI CC parameters here:
+[catskullelectronics.com/products/genmdm](https://catskullelectronics.com/products/genmdm?variant=29399089381454)
+
+Find MDMI's MIDI CC parameters here:
+
+- [mega-drive-midi-interface/wiki/Common-MIDI-CCs-&-Events](https://github.com/rhargreaves/mega-drive-midi-interface/wiki/Common-MIDI-CCs-&-Events)
+- [mega-drive-midi-interface/wiki/FM-Parameter-CCs](https://github.com/rhargreaves/mega-drive-midi-interface/wiki/FM-Parameter-CCs)
+
+#### MIDI Note Polyphony
+
+genMDM does not support polyphony, though MDMI does the editor currently does not use this.
+
+If **"Polyphony Enable"** is turned on, the **"MIDI Input"** device selected in the editor will have its notes spread over the output MIDI channels, starting from channel 1 up to the limit set by **"Max Poly. Channels"** (minimum 2, maximum 6).
+
+When **"Polyphony Enable"** is turned on, changes to the instrument are copied automatically over the polyphony channels.
 
 ## Support
-If you have any questions that aren't covered in the linked video, please start a discussion at [github.com/2xAA/genmdm-editor/discussions](https://github.com/2xAA/genmdm-editor/discussions).
+
+If you have any questions that aren't covered in the linked video, please start a discussion at [genmdm-editor/discussions](https://github.com/2xAA/genmdm-editor/discussions).
 
 ## Project development setup
 
@@ -58,25 +159,20 @@ yarn electron:serve
 yarn electron:build
 ```
 
-
 ## Contributing
 
 Contributions, issues and feature requests are welcome!
 
 Feel free to check [issues page](https://github.com/2xAA/genmdm-editor/issues).
 
-
-
 ## Show your support
 
-Give a ⭐️  if this project helped you!
+Give a ⭐️ if this project helped you!
 
 Consider sponsoring me on GitHub: [https://github.com/sponsors/2xAA](https://github.com/sponsors/2xAA).
 
-
-
 ## License
 
-Copyright © 2021 [2xAA](https://github.com/2xAA).
+Copyright © 2023 [2xAA](https://github.com/2xAA).
 
 This project is [MIT](https://github.com/2xAA/genmdm-editor/blob/main/LICENSE) licensed.