Docs, screenshots and fixes.

README.md

@@ -1,7 +1,49 @@
-# Tauri + Vanilla TS
+# Ploopy Headphones Toolbox
 
-This template should help get you started developing with Tauri in vanilla HTML, CSS and Typescript.
+Ploopy Headphones Toolbox is an application for configuring the filtering applied by the Ploopy Headphones DAC without having to rebuild the firmware.
 
-## Recommended IDE Setup
+![Screenshot Ploopy Headphones Toolbox.](screenshot.png)
 
-- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
+To use this tool you will need to be running a firmware image build from the [headphones-toolbox branch](https://github.com/george-norton/headphones/tree/headphones-toolbox), prebuild binaries are available [here]().
+
+## Quickstart guide
+
+Grab a firmware image from [here]() and flash it onto your DAC.
+Grab a build of Ploopy Headphones Toolbox from [here]() and install it on your PC.
+If you are a Linux user you will need to set a udev rule to allow users to access the USB device. As root, run:
+```
+echo 'SUBSYSTEM=="usb", ATTRS{idVendor}=="2e8a", ATTRS{idProduct}=="fedd", MODE="666"' > /etc/udev/rules.d/100-ploopy-headphones.rules`
+udevadm control --reload-rules && udevadm trigger
+```
+Run the application, it should detect your device. Click the + button to add a configuration, when you modify the filters the frequency response graph and the filters running on the device will change in real time. If you start playing some music, then change the filters you can hear the result instantly. **_WARNING:_ Keep the volume low, and be cautious making changes as filers can cause the sound to become very loud.**
+If you come up with a config you like, click the save button in the top right to persist the configuration to flash memory.
+
+## Current development status
+
+The application is currently in Alpha status. It is not feature complete, but it does implement quite a bit of useful stuff.
+
+Missing functionality:
+- Cannot read the configuration back from the device.
+- Cannot report the supported API versions.
+- Cannot confugure the PCM3060 filters.
+- Cannot factory reset a device.
+- Not many errors are reported to the user.
+
+Implemented functionality:
+- Device discovery.
+- Microsoft OS descriptor 2.0 support, auto loads the winusb driver so we can configure the device.
+- Reboot device into bootloader (on Windows this reqires that you are already running a toolbox firmware).
+- Set a new device configuration.
+- Save the configuration to flash.
+- Load configs from flash.
+
+## Developer guide
+
+The application is build using [Tauri](https://tauri.app/), [Quasar](https://quasar.dev/) and a little [Rust](https://www.rust-lang.org/). These were picked for consistency with QMK who are using the same combination for their upcoming xap client application. The user interface itself is build with standard web technologies (vue3, quasar, html. typescript).
+
+To build the application from scratch in developer mode you will need to install nodejs and yarn, then run:
+```
+yarn install
+yarn tauri dev
+```
+Once started the application will automatically update when you change the code.

package.json

@@ -15,7 +15,6 @@
     "@tauri-apps/api": "^1.3.0",
     "@vitejs/plugin-vue": "^4.2.1",
     "chart.js": "^4.3.0",
-    "fft-js": "^0.0.12",
     "lodash.debounce": "^4.0.8",
     "quasar": "^2.11.10",
     "sass": "^1.62.1",

src-tauri/src/main.rs

@@ -209,7 +209,7 @@ async fn write_config(config: &str, connection_state: State<'_, Mutex<Connection
 }
 
 #[tauri::command]
-async fn save_config(config: &str, connection_state: State<'_, Mutex<ConnectionState>>) -> Result<bool, ()> {
+async fn save_config(connection_state: State<'_, Mutex<ConnectionState>>) -> Result<bool, ()> {
     let connection = connection_state.lock().unwrap();
     match &connection.connected {
         Some(device) => {

src/App.vue

@@ -13,6 +13,8 @@ import { ref, reactive } from 'vue'
 import { exportFile, getCssVar } from 'quasar'
 import { invoke } from '@tauri-apps/api'
 import { resolveResource } from '@tauri-apps/api/path'
+import { getVersion } from '@tauri-apps/api/app';
+import debounce from 'lodash.debounce'
 
 var idSequence = 0
 var deviceNames = { "none": "No device detected" }
@@ -35,6 +37,11 @@ export default {
     device() {
       this.openDevice()
     },
+    connected() {
+      if (this.connected) {
+        this.saveState()
+      }
+    },
     tabs: {
       handler() {
         this.saveState()
@@ -124,7 +131,8 @@ export default {
       var config = {
         "currentConfiguration": this.tab,
         "configurations": this.tabs,
-        "deviceNames": deviceNames
+        "deviceNames": deviceNames,
+        "version": await getVersion()
       }
       try {
         await createDir("", { dir: BaseDirectory.AppData, recursive: true });
@@ -161,8 +169,10 @@ export default {
           console.error(error);
         });
     },
-    exportConfiguration() {
-      const config = JSON.stringify(this.tabs[this.tab], null, 4)
+    async exportConfiguration() {
+      const exportData = this.tabs[this.tab];
+      exportData.version = await getVersion();
+      const config = JSON.stringify(exportData, null, 4)
       exportFile(this.tabs[this.tab].name + ".json", config)
     },
     importConfiguration() {
@@ -350,8 +360,7 @@ export default {
         </q-tabs>
         <q-tab-panels v-model="tab" animated class="bg-grey-1">
           <q-tab-panel v-for="t in tabs" :name="t.id" class="column q-gutter-md q-ma-none bg-grey-1">
-            <PreProcessingCardVue v-model:preamp="t.preprocessing.preamp"
-              v-model:reverseStereo="t.preprocessing.reverseStereo" />
+            <PreProcessingCardVue v-model:preamp="t.preprocessing.preamp" v-model:reverseStereo="t.preprocessing.reverseStereo" />
             <FilterCardVue v-model:filters="t.filters" />
             <CodecCardVue />
           </q-tab-panel>

src/components/Graph.vue

@@ -80,14 +80,14 @@ export default {
             }
           ]
         }
-      }, 25),
+      }, 50),
       deep: true
     }
   },
   props: {
     filters: {
-      type: Array,
-      default: []
+      type: Object,
+      default: undefined
     }
   },
   data() {

yarn.lock

@@ -310,11 +310,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-bit-twiddle@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bit-twiddle/-/bit-twiddle-1.0.2.tgz#0c6c1fabe2b23d17173d9a61b7b7093eb9e1769e"
-  integrity sha512-B9UhK0DKFZhoTFcfvAzhqsjStvGJp9vYWf3+6SNTtdSQnvIgfkHbgHrg/e4+TH71N2GDu8tpmCVoyfrL1d7ntA==
-
 braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -344,13 +339,6 @@ chart.js@^4.3.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-commander@~2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.7.1.tgz#5d419a2bbed2c32ee3e4dca9bb45ab83ecc3065a"
-  integrity sha512-5qK/Wsc2fnRCiizV1JlHavWrSGAXQI7AusK423F8zJLwIGq8lmtO5GmO8PVMrtDUJMwTXOFBzSN6OCRD8CEMWw==
-  dependencies:
-    graceful-readlink ">= 1.0.0"
-
 csstype@^3.1.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
@@ -389,14 +377,6 @@ estree-walker@^2.0.2:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
-fft-js@^0.0.12:
-  version "0.0.12"
-  resolved "https://registry.yarnpkg.com/fft-js/-/fft-js-0.0.12.tgz#cb7b413efb1a55fab784cdd804ecf7ea7f25b8da"
-  integrity sha512-nLOa0/SYYnN2NPcLrI81UNSPxyg3q0sGiltfe9G1okg0nxs5CqAwtmaqPQdGcOryeGURaCoQx8Y4AUkhGTh7IQ==
-  dependencies:
-    bit-twiddle "~1.0.2"
-    commander "~2.7.1"
-
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -416,11 +396,6 @@ glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-"graceful-readlink@>= 1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
-  integrity sha512-8tLu60LgxF6XpdbK8OW3FA+IfTNBn1ZHGHKF4KQbEeSkajYw5PlYJcKluntgegDPTg8UkHjpet1T82vk6TQ68w==
-
 immutable@^4.0.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.0.tgz#eb1738f14ffb39fd068b1dbe1296117484dd34be"