Updated remote-source and remote-output components according to last …

…developments in SDRangel

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdrangelcli",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "repository": {
     "type": "git",
     "url": "git://github.com/f4exb/sdrangelcli.git"

src/app/app.component.ts

@@ -16,7 +16,7 @@ import { RemoveFeaturesetDialogComponent } from './main/remove-featureset-dialog
 export class AppComponent {
 
   title = 'SDRangelCli';
-  version = '2.4.0';
+  version = '2.4.1';
   sdrangelURL = 'http://127.0.0.1:8091/sdrangel'; // the default URL
 
   constructor(private sdrangelUrlService: SdrangelUrlService,

src/app/channel-details/remote-source/remote-source.component.html

@@ -21,11 +21,8 @@
       <!-- channel monitor (optional) -->
       <table *ngIf="monitor">
         <tr>
-          <td>
-            <span matTooltip="Stream center frequency setting">Freq {{report.centerFreq}} kHz</span>
-          </td>
-          <td>
-            <span matTooltip="Stream nominal sample rate">SR {{report.sampleRate}} S/s</span>
+          <td colspan="2">
+            <span matTooltip="Report timestamp">{{ getReportDateTime() }}</span>
           </td>
           <td>
             <span matTooltip="Nb total blocks/Nb FEC blocks per frame">FEC {{report.nbOriginalBlocks+report.nbFECBlocks}}/{{report.nbFECBlocks}}</span>
@@ -41,18 +38,63 @@
         </tr>
         <tr>
           <td>
-            <span matTooltip="Stream pumping rate and status">Pull SR {{getStreamSampleRate().toFixed(0)}} S/s </span>
             <i class="fa fa-circle" style="font-size:14px;" [ngStyle]="{'color': getStreamStatusColor()}" [matTooltip]="getStreamStatusText()"></i>
+            &nbsp;
+            <span matTooltip="Stream pumping rate and status">Pull SR {{ getStreamSampleRate().toFixed(0) }} S/s </span>
           </td>
           <td style="width: 15ch">
-            <span matTooltip="Correctable errors (current/total)">Corr {{deltaCorrectableCount}}/{{report.correctableErrorsCount}}</span>
+            <span matTooltip="Correctable errors (current/total)">Corr {{ deltaCorrectableCount }} / {{ report.correctableErrorsCount }}</span>
           </td>
           <td style="width: 15ch">
-            <span matTooltip="Uncorrectable errors (current/total)">Uncorr {{deltaUncorrectableCount}}/{{report.uncorrectableErrorsCount}}</span>
+            <span matTooltip="Uncorrectable errors (current/total)">Uncorr {{ deltaUncorrectableCount }} / {{ report.uncorrectableErrorsCount }}</span>
           </td>
         </tr>
+        <!-- Footer -->
+        <tr style="height: 3px;">
+        </tr>
       </table>
       <table>
+        <!-- Row 1: Center frequency, shift, local device -->
+        <tr>
+          <td>
+            Fc
+            <span matTooltip="Center frequency">
+              {{channelCenterFrequencyKhz}} kHz
+            </span>
+          </td>
+          <td style="width:15ch">
+            &#x394;f {{calculateFrequencyOffset()}} kHz
+          </td>
+          <td></td>
+        </tr>
+        <!-- Row 3: Interpolation, filter stages -->
+        <tr>
+          <td>
+            &#xf7;
+            <mat-select style="width:6ch; background-color: white; margin: 1px;"
+              [(value)]="settings.log2Interp"
+              (selectionChange)="setInterp()"
+              matTooltip="Channel interpolation">
+              <mat-option *ngFor="let log2Interp of log2Interps" [value]="log2Interp.value">
+                {{log2Interp.viewValue}}
+              </mat-option>
+            </mat-select>
+            <span matTooltip="Channel bandwidth">
+              {{getChannelBaseband()}} kHz
+            </span>
+          </td>
+          <td colspan="2">
+            Filter hash
+            <input type="number" class="filter-input"
+                [(ngModel)]="settings.filterChainHash"
+                (change)="setFilterChainHash()"
+                matTooltip="Filter chain hash number"
+                min=0 [max]="getMaxFilterChainHash()" step=1>
+            <span matTooltip="Filter chain stages left to right (L: low, C: center, H: high)">
+              {{getFilterChainString()}}
+            </span>
+          </td>
+        </tr>
         <!-- address, port -->
         <tr>
           <td>

src/app/channel-details/remote-source/remote-source.component.ts

@@ -9,6 +9,10 @@ import { Subscription, interval } from 'rxjs';
 import { Utils } from '../../common-components/utils';
 import { ChannelSettings } from '../channel-details';
 
+interface Log2 {
+  value: number;
+  viewValue: number;
+}
 @Component({
   selector: 'app-remote-source',
   templateUrl: './remote-source.component.html',
@@ -38,6 +42,17 @@ export class RemoteSourceComponent implements OnInit {
   deltaUncorrectableCount: number;
   deltaSampleCount: number;
   useReverseAPI: boolean;
+  log2Interps: Log2[] = [
+    {value: 0, viewValue: 1},
+    {value: 1, viewValue: 2},
+    {value: 2, viewValue: 4},
+    {value: 3, viewValue: 8},
+    {value: 4, viewValue: 16},
+    {value: 5, viewValue: 32},
+    {value: 6, viewValue: 64},
+  ];
+  channelDeltaFrequency: number;
+  channelCenterFrequencyKhz: number;
 
   constructor(private route: ActivatedRoute,
     private channeldetailsService: ChannelDetailsService,
@@ -100,6 +115,8 @@ export class RemoteSourceComponent implements OnInit {
           this.statusMessage = 'OK';
           this.statusError = false;
           this.settings = channelSettings.RemoteSourceSettings;
+          this.channelDeltaFrequency = this.calculateFrequencyOffset();
+          this.channelCenterFrequencyKhz = (this.deviceCenterFrequency + this.channelDeltaFrequency) / 1000;
           this.rgbTitle = Utils.intToRGB(this.settings.rgbColor);
           this.rgbTitleStr = Utils.getRGBStr(this.rgbTitle);
           this.useReverseAPI = this.settings.useReverseAPI !== 0;
@@ -136,7 +153,7 @@ export class RemoteSourceComponent implements OnInit {
         _ => {
           this.channeldetailsService.getReport(this.sdrangelURL, this.deviceIndex, this.channelIndex).subscribe(
             channelReport => {
-              if (channelReport.channelType === 'DaemonSource') {
+              if (channelReport.channelType === 'RemoteSource') {
                 this.report = channelReport.RemoteSourceReport;
                 const timestampUs = this.report.tvSec * 1000000 + this.report.tvUSec;
                 if (this.lastTimestampUs === 0) {
@@ -178,6 +195,11 @@ export class RemoteSourceComponent implements OnInit {
     this.enableReporting(this.monitor);
   }
 
+  getReportDateTime(): string {
+    const dateObj = new Date((this.report.tvSec * 1000000 + this.report.tvUSec) / 1000);
+    return dateObj.toISOString();
+  }
+
   onTitleColorChanged(colorStr: string) {
     this.rgbTitleStr = colorStr;
     this.setTitleColor();
@@ -200,6 +222,18 @@ export class RemoteSourceComponent implements OnInit {
     this.setDeviceSettings(newSettings);
   }
 
+  setInterp() {
+    const newSettings: RemoteSourceSettings = <RemoteSourceSettings>{};
+    newSettings.log2Interp = this.settings.log2Interp;
+    this.setDeviceSettings(newSettings);
+  }
+
+  setFilterChainHash() {
+    const newSettings: RemoteSourceSettings = <RemoteSourceSettings>{};
+    newSettings.filterChainHash = this.settings.filterChainHash;
+    this.setDeviceSettings(newSettings);
+  }
+
   setDataAddress() {
     const newSettings: RemoteSourceSettings = <RemoteSourceSettings>{};
     newSettings.dataAddress = this.settings.dataAddress;
@@ -256,13 +290,13 @@ export class RemoteSourceComponent implements OnInit {
 
   getStreamStatusColor(): string {
     if (this.deltaSampleCount === 0) {
-      return 'blue';
+      return 'rgb(0, 0, 200, 1.0)';
     } else if (this.deltaUncorrectableCount !== 0) {
-      return 'red';
+      return 'rgb(200, 0, 0, 1.0)';
     } else if (this.deltaCorrectableCount !== 0) {
-      return 'grey';
+      return 'rgb(160, 160, 160, 1.0)';
     } else {
-      return 'green';
+      return 'rgb(0, 200, 0, 1.0)';
     }
   }
 
@@ -277,4 +311,21 @@ export class RemoteSourceComponent implements OnInit {
       return 'Streaming OK';
     }
   }
+
+  getChannelBaseband(): number {
+    return (this.deviceBasebandRate / 1000) / (1 << this.settings.log2Interp);
+  }
+
+  getMaxFilterChainHash(): number {
+    return 3 ** this.settings.log2Interp;
+  }
+
+  getFilterChainString(): string {
+    return Utils.convertHBFilterChainToString(this.settings.log2Interp, this.settings.filterChainHash);
+  }
+
+  calculateFrequencyOffset(): number {
+    return this.deviceBasebandRate * Utils.getHBFilterChainShiftFactor(this.settings.log2Interp, this.settings.filterChainHash);
+  }
+
 }

src/app/channel-details/remote-source/remote-source.ts

@@ -1,30 +1,36 @@
 export interface RemoteSourceSettings {
     dataAddress: string;
     dataPort: number;
-    rgbColor: number;
-    title: string;
-    useReverseAPI?: number; // bool
+    filterChainHash: number;
+    log2Interp: number;
     reverseAPIAddress?: string;
     reverseAPIPort?: number;
     reverseAPIDeviceIndex?: number;
     reverseAPIChannelIndex?: number;
+    rgbColor: number;
+    title: string;
+    useReverseAPI?: number; // bool
 }
 
 export const REMOTE_SOURCE_SETTINGS_DEFAULT = {
     dataAddress: '127.0.0.1',
     dataPort: 9090,
-    rgbColor: -7601148,
-    title: 'Remote channel source',
-    useReverseAPI: 0,
+    filterChainHash: 0,
+    log2Interp: 0,
     reverseAPIAddress: '127.0.0.1',
     reverseAPIPort: 8888,
     reverseAPIDeviceIndex: 0,
-    reverseAPIChannelIndex: 0
+    reverseAPIChannelIndex: 0,
+    rgbColor: -7601148,
+    title: 'Remote channel source',
+    useReverseAPI: 0
 };
 
 export interface RemoteSourceReport {
     centerFreq: number;
     correctableErrorsCount: number;
+    deviceCenterFreq: number;
+    deviceSampleRate: number;
     nbFECBlocks: number;
     nbOriginalBlocks: number;
     queueLength: number;
@@ -39,11 +45,13 @@ export interface RemoteSourceReport {
 export const REMOTE_SOURCE_REPORT_DEFAULT = {
     centerFreq: 434900,
     correctableErrorsCount: 0,
+    deviceCenterFreq: 435000000,
+    deviceSampleRate: 48000,
     nbFECBlocks: 8,
     nbOriginalBlocks: 128,
     queueLength: 18,
     queueSize: 32,
-    sampleRate: 75000,
+    sampleRate: 48000,
     samplesCount: 101481494,
     tvSec: 1535913707,
     tvUSec: 667575,

src/app/device-details/device-details.module.ts

@@ -34,6 +34,7 @@ import { RemoteInputComponent } from './remote-input/remote-input.component';
 import { KiwisdrComponent } from './kiwisdr/kiwisdr.component';
 import { RemoteOutputComponent } from './remote-output/remote-output.component';
 import { Sdrplayv3Component } from './sdrplayv3/sdrplayv3.component';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 @NgModule({
   imports: [
@@ -44,6 +45,7 @@ import { Sdrplayv3Component } from './sdrplayv3/sdrplayv3.component';
     MatOptionModule,
     MatCheckboxModule,
     MatTooltipModule,
+    MatProgressBarModule,
     CommonComponentsModule,
     DeviceDetailsRoutingModule
   ],

src/app/device-details/remote-output/remote-output.component.css

@@ -109,4 +109,22 @@ td.yellow {
 
 ::ng-deep  .mat-checkbox-label {
   line-height: 16px!important;
-}
+}
+
+.fill-bar {
+  height: 10px;
+  width: 40ch;
+  margin:0 auto;
+}
+
+::ng-deep .mat-progress-bar-fill::after {
+  background-color: rgb(33, 124, 30);
+}
+
+::ng-deep .mat-progress-bar-buffer {
+  background: rgb(205, 205, 205);
+}
+
+::ng-deep .mat-progress-bar {
+  border-radius: 5px;
+}