11< ion-header [translucent] ="true ">
22 < ion-toolbar >
3+ < ion-buttons slot ="start ">
4+ < ion-back-button defaultHref ="menu "> </ ion-back-button >
5+ </ ion-buttons >
36 < ion-title > camilla-dsp</ ion-title >
47 </ ion-toolbar >
58</ ion-header >
1417 < div class ="p-4 ">
1518 < h1 class ="text-2xl font-bold mb-4 "> CamillaDSP Control</ h1 >
1619 < p class ="mb-2 "> Connection Status: < strong > {{ connectionStatus }}</ strong > </ p >
17- < button (click) ="connect() " class ="bg-blue-500 text-white p-2 rounded mr-2 "> Connect</ button >
18- < button (click) ="disconnect() " class ="bg-red-500 text-white p-2 rounded mr-2 "> Disconnect</ button >
19- < button (click) ="getState() " class ="bg-green-500 text-white p-2 rounded "> Get State</ button >
20- < button (click) ="getConfigJson() " class ="bg-purple-500 text-white p-2 rounded ml-2 "> Get Config JSON</ button >
21- < button (click) ="getConfigYaml() " class ="bg-yellow-500 text-white p-2 rounded ml-2 "> Get Config YAML</ button >
20+ < ion-button (click) ="connect() " > Connect</ ion-button >
21+ < ion-button (click) ="disconnect() "> Disconnect</ ion-button >
22+ < ion-button (click) ="getState() " > Get State</ ion-button >
23+ < ion-button (click) ="getConfigJson() "> Get Config JSON</ ion-button >
24+ < ion-button (click) ="getConfigYaml() " > Get Config YAML</ ion-button >
25+ < ion-button (click) ="getUpdateInterval() " > Get Update Interval</ ion-button >
26+ < ion-button (click) ="getCaptureSignalLevels() " > Get Capture Signal Levels</ ion-button >
27+ < ion-button (click) ="setUpdateInterval(100) " > Set update Interval</ ion-button >
2228
2329 < pre class ="bg-gray-100 p-4 rounded mt-4 overflow-auto "> {{ lastMessage | json }}</ pre >
2430 < pre class ="bg-gray-100 p-4 rounded mt-4 overflow-auto "> {{ parsedConfig | json }}</ pre >
2531 </ div >
32+ < div *ngIf ="levels " class ="ion-margin ">
33+ < h2 class ="text-xl font-bold mb-2 "> Signal Levels</ h2 >
34+ < div *ngIf ="levels " class ="ion-margin ">
35+ < h2 > Capture (Snapcast Signal)</ h2 >
36+ < p > Capture RMS 0{{ levels.capture_rms[0] }} dB</ p >
37+ < div class ="bar " [style.width] ="levels.capture_rms[0] + 600+ 'px' "> </ div >
38+ < p > Capture RMS 1{{ levels.capture_rms[1] }} dB</ p >
39+ < div class ="bar " [style.width] ="levels.capture_rms[1] + 600+ 'px' "> </ div >
40+ < p > Capture Peak 0{{ levels.capture_peak[0] }} dB</ p >
41+ < div class ="bar " [style.width] ="levels.capture_peak[0] + 600+ 'px' "> </ div >
42+ < p > Capture Peak 1 {{ levels.capture_peak[1] }} dB</ p >
43+ < div class ="bar " [style.width] ="levels.capture_peak[1] + 600+ 'px' "> </ div >
44+
45+ < h2 > Playback</ h2 >
46+
47+ < p > Playback RMS 0{{ levels.playback_rms[0] }} dB</ p >
48+ < div class ="bar " [style.width] ="levels.playback_rms[0] + 600+ 'px' "> </ div >
49+ < p > Playback RMS 1{{ levels.playback_rms[1] }} dB</ p >
50+ < div class ="bar " [style.width] ="levels.playback_rms[1] + 600+ 'px' "> </ div >
51+ < p > Playback Peak 0{{ levels.playback_peak[0] }} dB</ p >
52+ < div class ="bar " [style.width] ="levels.playback_peak[0] + 600+ 'px' "> </ div >
53+ < p > Playback Peak 1 {{ levels.playback_peak[1] }} dB</ p >
54+ < div class ="bar " [style.width] ="levels.playback_peak[1] + 600+ 'px' "> </ div >
55+ </ div >
56+ </ div >
2657 < div *ngIf ="parsedConfig " class ="ion-margin ">
2758 < h2 class ="text-xl font-bold mb-2 "> Parsed Configuration</ h2 >
2859 < div *ngFor ="let filter of parsedConfig.filters | keyvalue " >
@@ -32,13 +63,17 @@ <h2 class="text-xl font-bold mb-2">Parsed Configuration</h2>
3263 </ ion-item >
3364 < ion-item >
3465 Gain: {{ filter.value.parameters.gain }}
66+ < 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 >
3567 </ ion-item >
3668 < ion-item >
3769 Frequency: {{ filter.value.parameters.freq }}
3870 </ ion-item >
39- < ion-item *ngFor ="let param of filter.value.parameters | keyvalue ">
71+ < ion-item >
72+ Q: {{ filter.value.parameters.q }}
73+ </ ion-item >
74+ <!-- <ion-item *ngFor="let param of filter.value.parameters | keyvalue">
4075 {{ param.key }}: {{ param.value }}
41- <!-- < ion-range min="0" max="1" step="0.01" [(ngModel)]="param.value" (ionChange)="updateFilterParameter(filter.key, param.key, param.value)"></ion-range> -- >
76+ <ion-range min="0" max="1" step="0.01" [(ngModel)]="param.value" (ionChange)="updateFilterParameter(filter.key, param.key, param.value)"></ion-range>
4277 <ion-input type="number" [(ngModel)]="param.value" (ionChange)="updateFilterParameter(filter.key, param.key, param.value)"></ion-input>
43- </ ion-item >
78+ </ion-item> -->
4479 </ div >
0 commit comments