From 5709b89a317817061eb40c0e813d93c48206cd23 Mon Sep 17 00:00:00 2001
From: Ferdinand Malcher <ferdinand@malcher.media>
Date: Mon, 21 Oct 2024 16:08:26 +0200
Subject: [PATCH] WIP set/get FX Params

---
 .../mixer-connection/src/lib/facade/fx-bus.ts | 26 ++++++++++++++++-
 .../fx-settings/fx-settings.component.html    | 29 +++++++++++++++++--
 .../fx-settings/fx-settings.component.scss    |  3 ++
 .../fx-settings/fx-settings.component.ts      |  7 ++++-
 4 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 packages/testbed/src/app/pages/fx-settings/fx-settings.component.scss

diff --git a/packages/mixer-connection/src/lib/facade/fx-bus.ts b/packages/mixer-connection/src/lib/facade/fx-bus.ts
index b1d3ec5..f13fc1a 100644
--- a/packages/mixer-connection/src/lib/facade/fx-bus.ts
+++ b/packages/mixer-connection/src/lib/facade/fx-bus.ts
@@ -1,7 +1,8 @@
 import { MixerConnection } from '../mixer-connection';
 import { MixerStore } from '../state/mixer-store';
-import { select, selectFxBpm, selectFxType } from '../state/state-selectors';
+import { select, selectFxBpm, selectFxType, selectRawValue } from '../state/state-selectors';
 import { clamp } from '../utils';
+import { joinStatePath } from '../utils/state-utils';
 import { FxChannel } from './fx-channel';
 
 /**
@@ -73,4 +74,27 @@ export class FxBus {
 
     this.conn.sendMessage(`SETD^f.${this.bus - 1}.bpm^${value}`);
   }
+
+  private assertFxParamInRange(param: number) {
+    if (param < 1 || param > 6) {
+      throw new Error('FX Parameter must be between 1 and 6.');
+    }
+  }
+
+  private makeFxParamPath(param: number) {
+    return `f.${this.bus - 1}.par${param}`;
+  }
+
+  getParam(param: number) {
+    this.assertFxParamInRange(param);
+    return this.store.state$.pipe(selectRawValue<number>(this.makeFxParamPath(param)));
+  }
+
+  setParam(param: number, value: number) {
+    this.assertFxParamInRange(param);
+
+    value = clamp(value, 0, 1);
+    const command = `SETD^${this.makeFxParamPath(param)}^${value}`;
+    this.conn.sendMessage(command);
+  }
 }
diff --git a/packages/testbed/src/app/pages/fx-settings/fx-settings.component.html b/packages/testbed/src/app/pages/fx-settings/fx-settings.component.html
index 4582e3b..0b4f7ad 100644
--- a/packages/testbed/src/app/pages/fx-settings/fx-settings.component.html
+++ b/packages/testbed/src/app/pages/fx-settings/fx-settings.component.html
@@ -1,16 +1,41 @@
 @for (bus of buses; track bus) {
-<div class="mb-5">
+<div class="mb-4">
   <h2>
     {{ bus.label }}
     <span class="small text-muted"
       >{{ withFxType(bus.fx.fxType$) | async }} ({{ bus.fx.fxType$ | async }})</span
     >
   </h2>
-  <div>
+  <!-- BPM -->
+  <div class="mb-4">
+    <h3>BPM</h3>
     @for (v of [1, 20, 60, 80, 100, 220, 400, 1000]; track v) {
     <button class="btn btn-success btn-sm me-2" (click)="bus.fx.setBpm(v)">{{ v }} BPM</button>
     }
     <strong>{{ bus.fx.bpm$ | async }} BPM</strong>
   </div>
+
+  <!-- Params -->
+  <div class="mb-4">
+    <h3>Params</h3>
+
+    @for (param of [1,2,3,4,5,6]; track $index) {
+    <div class="mb-1">
+      @let paramValue = bus.fx.getParam(param) | async;
+      <strong class="me-2">{{ param }}</strong>
+      <input
+        type="range"
+        min="0"
+        max="1"
+        step="0.0001"
+        (input)="setFxParam(bus.fx, param, paramValueInput.value)"
+        [value]="paramValue"
+        #paramValueInput
+      />
+      <span class="ms-4">{{ paramValue }}</span>
+    </div>
+    }
+  </div>
+  <hr />
 </div>
 }
diff --git a/packages/testbed/src/app/pages/fx-settings/fx-settings.component.scss b/packages/testbed/src/app/pages/fx-settings/fx-settings.component.scss
new file mode 100644
index 0000000..5cb0aa5
--- /dev/null
+++ b/packages/testbed/src/app/pages/fx-settings/fx-settings.component.scss
@@ -0,0 +1,3 @@
+input {
+  width: 50%;
+}
diff --git a/packages/testbed/src/app/pages/fx-settings/fx-settings.component.ts b/packages/testbed/src/app/pages/fx-settings/fx-settings.component.ts
index 2874526..281264b 100644
--- a/packages/testbed/src/app/pages/fx-settings/fx-settings.component.ts
+++ b/packages/testbed/src/app/pages/fx-settings/fx-settings.component.ts
@@ -1,7 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
 import { map, Observable } from 'rxjs';
-import { FxType, fxTypeToString } from 'soundcraft-ui-connection';
+import { FxBus, FxType, fxTypeToString } from 'soundcraft-ui-connection';
 
 import { ConnectionService } from '../../connection.service';
 
@@ -10,6 +10,7 @@ import { ConnectionService } from '../../connection.service';
   templateUrl: './fx-settings.component.html',
   standalone: true,
   imports: [AsyncPipe],
+  styleUrl: './fx-settings.component.scss',
 })
 export class FxSettingsComponent {
   cs = inject(ConnectionService);
@@ -24,4 +25,8 @@ export class FxSettingsComponent {
   withFxType(fxType$: Observable<FxType>): Observable<string> {
     return fxType$.pipe(map(v => fxTypeToString(v)));
   }
+
+  setFxParam(bus: FxBus, param: number, value: string) {
+    bus.setParam(param, Number(value));
+  }
 }