Feature/camilla dsp websocket test

package.json

@@ -39,6 +39,7 @@
     "@types/lodash-es": "^4.17.12",
     "bootstrap": "^5.3.6",
     "bootstrap-icons": "^1.13.1",
+    "capacitor-zeroconf": "github:byrdsandbytes/capacitor-zeroconf",
     "immer": "^10.1.1",
     "ionicons": "^7.0.0",
     "lodash-es": "^4.17.21",

src/app/app-routing.module.ts

@@ -66,6 +66,18 @@ const routes: Routes = [
     path: 'settings',
     loadChildren: () => import('./pages/settings/settings.module').then(m => m.SettingsPageModule)
   },
+  {
+    path: 'zeroconf',
+    loadChildren: () => import('./pages/zeroconf/zeroconf.module').then( m => m.ZeroconfPageModule)
+  },
+  {
+    path: 'setup-server',
+    loadChildren: () => import('./pages/setup/setup-server/setup-server.module').then( m => m.SetupServerPageModule)
+  },
+  {
+    path: 'camilla-dsp',
+    loadChildren: () => import('./pages/camilla-dsp/camilla-dsp.module').then( m => m.CamillaDspPageModule)
+  },
 
 
 ];

src/app/model/camilla-dsp.model.ts

@@ -0,0 +1,95 @@
+export interface CamillaDspConfig {
+  title: string | null;
+  description: string | null;
+  devices: Devices;
+  mixers: { [key: string]: Mixer };
+  filters: { [key: string]: Filter };
+  processors: any;
+  pipeline: Pipeline[];
+}
+
+export interface Devices {
+  samplerate: number;
+  chunksize: number;
+  queuelimit: number | null;
+  silence_threshold: number | null;
+  silence_timeout: number | null;
+  capture: Capture;
+  playback: Playback;
+  enable_rate_adjust: boolean | null;
+  target_level: number | null;
+  adjust_period: number | null;
+  resampler: any;
+  capture_samplerate: number | null;
+  stop_on_rate_change: boolean | null;
+  rate_measure_interval: number | null;
+  volume_ramp_time: number | null;
+}
+
+export interface Capture {
+  type: string;
+  channels: number;
+  device: string;
+  format: string;
+}
+
+export interface Playback {
+  type: string;
+  channels: number;
+  device: string;
+  format: string;
+}
+
+export interface Filter {
+  type: string;
+  description: string | null;
+  parameters: BiquadParameters;
+}
+
+export interface BiquadParameters {
+  type: 'Peaking' | 'Lowshelf' | 'Highshelf';
+  freq: number;
+  q: number;
+  gain: number;
+}
+
+export interface Pipeline {
+  type: string;
+  channel: number;
+  names: string[];
+  description: string | null;
+  bypassed: boolean | null;
+}
+
+export interface SignalLevels {
+  playback_rms: number[];
+  playback_peak: number[];
+  capture_rms: number[];
+  capture_peak: number[];
+}
+
+export interface Mixer {
+  description: string | null;
+  channels: MixerChannels;
+  mapping: MixerMapping[];
+}
+
+export interface MixerChannels {
+  in: number;
+  out: number;
+}
+
+export interface MixerMapping {
+  dest: number;
+  sources: MixerSource[];
+  mute: boolean | null;
+}
+
+export interface MixerSource {
+  channel: number;
+  gain: number;
+  inverted: boolean | null;
+  mute: boolean;
+  scale: string | null;
+}
+

src/app/model/zero-conf.model.ts

@@ -0,0 +1,2 @@
+export class ZeroConf {
+}

src/app/pages/camilla-dsp/camilla-dsp-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CamillaDspPage } from './camilla-dsp.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CamillaDspPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CamillaDspPageRoutingModule {}

src/app/pages/camilla-dsp/camilla-dsp.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CamillaDspPageRoutingModule } from './camilla-dsp-routing.module';
+
+import { CamillaDspPage } from './camilla-dsp.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CamillaDspPageRoutingModule
+  ],
+  declarations: [CamillaDspPage]
+})
+export class CamillaDspPageModule {}

src/app/pages/camilla-dsp/camilla-dsp.page.html

@@ -0,0 +1,112 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="menu"></ion-back-button>
+    </ion-buttons>
+    <ion-title>camilla-dsp</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">camilla-dsp</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <div class="p-4">
+    <h1 class="text-2xl font-bold mb-4">CamillaDSP Control</h1>
+    <ion-input placeholder="WebSocket URL" [(ngModel)]="CAMILLA_URL"></ion-input>
+    <p class="mb-2">Connection Status: <strong>{{ connectionStatus }}</strong></p>
+    <ion-button (click)="connect()">Connect</ion-button>
+    <ion-button (click)="disconnect()">Disconnect</ion-button>
+    <ion-button (click)="getState()">Get State</ion-button>
+    <ion-button (click)="getConfigJson()">Get Config JSON</ion-button>
+    <ion-button (click)="getConfigYaml()">Get Config YAML</ion-button>
+    <ion-button (click)="getUpdateInterval()">Get Update Interval</ion-button>
+    <ion-button (click)="getCaptureSignalLevels()">Get Capture Signal Levels</ion-button>
+    <ion-button (click)="setUpdateInterval(100)">Set update Interval</ion-button>
+    <ion-button (click)="getVolume()">Get Volume</ion-button>
+     <ion-range  min="-150" max="50" step="1" [(ngModel)]="currentVolume" (ionChange)="setVolume(currentVolume)">
+      <ion-label slot="start">Volume: {{ currentVolume }}</ion-label>
+    </ion-range>
+"
+
+    <pre class="bg-gray-100 p-4 rounded mt-4 overflow-auto">{{ lastMessage | json }}</pre>
+    <pre class="bg-gray-100 p-4 rounded mt-4 overflow-auto">{{ parsedConfig | json }}</pre>
+  </div>
+
+  <div *ngIf="levels" class="ion-margin">
+    <h2 class="text-xl font-bold mb-2">Signal Levels</h2>
+    <div *ngIf="levels" class="ion-margin">
+      <h2>Capture (Snapcast Signal)</h2>
+      <p>Capture RMS 0{{ levels.capture_rms[0] }} dB</p>
+      <div class="bar" [style.width]="levels.capture_rms[0] + 600+ 'px'"></div>
+      <p>Capture RMS 1{{ levels.capture_rms[1] }} dB</p>
+      <div class="bar" [style.width]="levels.capture_rms[1] + 600+ 'px'"></div>
+      <p>Capture Peak 0{{ levels.capture_peak[0] }} dB</p>
+      <div class="bar" [style.width]="levels.capture_peak[0] + 600+ 'px'"></div>
+      <p>Capture Peak 1 {{ levels.capture_peak[1] }} dB</p>
+      <div class="bar" [style.width]="levels.capture_peak[1] + 600+ 'px'"></div>
+
+      <h2>Playback</h2>
+
+      <p>Playback RMS 0{{ levels.playback_rms[0] }} dB</p>
+      <div class="bar" [style.width]="levels.playback_rms[0] + 600+ 'px'"></div>
+      <p>Playback RMS 1{{ levels.playback_rms[1] }} dB</p>
+      <div class="bar" [style.width]="levels.playback_rms[1] + 600+ 'px'"></div>
+      <p>Playback Peak 0{{ levels.playback_peak[0] }} dB</p>
+      <div class="bar" [style.width]="levels.playback_peak[0] + 600+ 'px'"></div>
+      <p>Playback Peak 1 {{ levels.playback_peak[1] }} dB</p>
+      <div class="bar" [style.width]="levels.playback_peak[1] + 600+ 'px'"></div>
+    </div>
+  </div>
+  <div *ngIf="parsedConfig" class="ion-margin">
+    <h2 class="text-xl font-bold mb-2">Parsed Configuration</h2>
+    <div *ngFor="let filter of parsedConfig.filters | keyvalue">
+      {{ filter.key }}:
+      <ion-item>
+        Type: {{ filter.value.type }}
+      </ion-item>
+      <ion-item>
+        Gain: {{ filter.value.parameters.gain }}
+        <ion-range min="-24" max="24" step="0.1" [(ngModel)]="filter.value.parameters.gain"
+          (ionChange)="updateFilterParameter(filter.key, 'gain', filter.value.parameters.gain)"></ion-range>
+      </ion-item>
+      <ion-item>
+        Frequency: {{ filter.value.parameters.freq }}
+      </ion-item>
+      <ion-item>
+        Q: {{ filter.value.parameters.q }}
+      </ion-item>
+      <!-- <ion-item *ngFor="let param of filter.value.parameters | keyvalue">
+       {{ param.key }}: {{ param.value }}
+       <ion-range min="0" max="1" step="0.01" [(ngModel)]="param.value" (ionChange)="updateFilterParameter(filter.key, param.key, param.value)"></ion-range>
+        <ion-input type="number" [(ngModel)]="param.value" (ionChange)="updateFilterParameter(filter.key, param.key, param.value)"></ion-input>
+     </ion-item>   -->
+    </div>
+    <div *ngFor="let mixer of parsedConfig.mixers | keyvalue">
+      {{ mixer.key }}:
+      <ion-item>
+        Channels: {{ mixer.value.channels }}
+      </ion-item>
+      <div *ngFor="let mapping of mixer.value.mapping, let i = index">
+        <p>Destination {{ mapping.dest }}
+          <span *ngIf="i === 0"> (Left)</span>
+          <span *ngIf="i === 1"> (Right)</span>
+        </p>
+        <div *ngFor="let source of mapping.sources">
+          <p>Source {{ source.channel }} - Gain: {{ source.gain }}</p>
+          <ion-range min="-24" max="24" step="0.1" [(ngModel)]="source.gain"
+            (ionChange)="updateMixerMapping(source, mixer.key)"></ion-range>
+          <p>Inverted: {{ source.inverted}}</p>
+          <ion-toggle [(ngModel)]="source.inverted" (ionChange)="updateMixerMapping(source, mixer.key)"></ion-toggle>
+          <p>Muted: {{ source.mute}}</p>
+          <ion-toggle [(ngModel)]="source.mute" (ionChange)="updateMixerMapping(source, mixer.key)"></ion-toggle>
+        </div>
+
+      </div>
+    </div>
+
+
+  </div>

src/app/pages/camilla-dsp/camilla-dsp.page.scss

@@ -0,0 +1,7 @@
+.bar {
+  height: 20px;
+  background-color: var(--ion-color-primary);
+  margin: 2px 0;
+//   transition: width 0.01s;
+  width: 20px;
+}

src/app/pages/camilla-dsp/camilla-dsp.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CamillaDspPage } from './camilla-dsp.page';
+
+describe('CamillaDspPage', () => {
+  let component: CamillaDspPage;
+  let fixture: ComponentFixture<CamillaDspPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CamillaDspPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});