changeset 44:13f5f228ed98

Add a component for the feature extraction menu, and start setting up some comms with the worker. Currently populating a select box with list of extractors from hardcoded server.

--- a/src/app/app.component.html	Fri Dec 02 16:44:11 2016 +0000
+++ b/src/app/app.component.html	Fri Dec 02 16:55:14 2016 +0000
@@ -22,7 +22,7 @@
         <app-playback-control class="playback-content"></app-playback-control>
       </md-tab>
       <md-tab label="Feature Extraction">
-        <p>Extraction</p>
+        <app-feature-extraction-menu></app-feature-extraction-menu>
       </md-tab>
     </md-tab-group>
   </md-sidenav>

--- a/src/app/app.module.ts	Fri Dec 02 16:44:11 2016 +0000
+++ b/src/app/app.module.ts	Fri Dec 02 16:55:14 2016 +0000
@@ -10,6 +10,7 @@
 import { PlaybackControlComponent } from './playback-control/playback-control.component';
 import { AudioPlayerService } from "./services/audio-player/audio-player.service";
 import { FeatureExtractionService } from "./services/feature-extraction/feature-extraction.service";
+import { FeatureExtractionMenuComponent } from "./feature-extraction-menu/feature-extraction-menu.component";
 
 function createAudioContext(): AudioContext {
   return new (
@@ -23,7 +24,8 @@
     AppComponent,
     WaveformComponent,
     AudioFileOpenComponent,
-    PlaybackControlComponent
+    PlaybackControlComponent,
+    FeatureExtractionMenuComponent
   ],
   imports: [
     BrowserModule,

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/feature-extraction-menu/feature-extraction-menu.component.html	Fri Dec 02 16:55:14 2016 +0000
@@ -0,0 +1,7 @@
+<select id="extractors">
+  <option selected></option>
+  <option *ngFor="let extractor of extractors" value="{{extractor.key}}">
+    {{extractor.name}}
+  </option>
+
+</select>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/feature-extraction-menu/feature-extraction-menu.component.spec.ts	Fri Dec 02 16:55:14 2016 +0000
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { FeatureExtractionMenuComponent } from './feature-extraction-menu.component';
+
+describe('FeatureExtractionMenuComponent', () => {
+  let component: FeatureExtractionMenuComponent;
+  let fixture: ComponentFixture<FeatureExtractionMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FeatureExtractionMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FeatureExtractionMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/feature-extraction-menu/feature-extraction-menu.component.ts	Fri Dec 02 16:55:14 2016 +0000
@@ -0,0 +1,32 @@
+import {Component, OnInit} from '@angular/core';
+import {FeatureExtractionService} from "../services/feature-extraction/feature-extraction.service";
+
+interface ExtractorInfo {
+  key: string;
+  name: string;
+}
+
+@Component({
+  selector: 'app-feature-extraction-menu',
+  templateUrl: './feature-extraction-menu.component.html',
+  styleUrls: ['./feature-extraction-menu.component.css']
+})
+export class FeatureExtractionMenuComponent implements OnInit {
+
+  extractors: ExtractorInfo[];
+
+  constructor(private piperService: FeatureExtractionService) {
+    this.extractors = [];
+  }
+
+  ngOnInit() {
+    this.piperService.list().then(available => {
+      available.available.forEach(staticData => this.extractors.push({
+          key: staticData.key,
+          name: staticData.basic.name
+        })
+      );
+    });
+  }
+
+}

--- a/src/app/playback-control/playback-control.component.ts	Fri Dec 02 16:44:11 2016 +0000
+++ b/src/app/playback-control/playback-control.component.ts	Fri Dec 02 16:55:14 2016 +0000
@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {AudioPlayerService} from "../services/audio-player/audio-player.service";
+import {FeatureExtractionService} from "../services/feature-extraction/feature-extraction.service";
 
 @Component({
   selector: 'app-playback-control',
@@ -8,10 +9,12 @@
 })
 export class PlaybackControlComponent implements OnInit {
 
-  constructor(private audioService: AudioPlayerService) {
+  constructor(private audioService: AudioPlayerService,
+              private featureExtractionService: FeatureExtractionService) {
   }
 
   ngOnInit() {
+    this.featureExtractionService.testMessageStream();
   }
 
   emitPlayPause() {

--- a/src/app/services/feature-extraction/FeatureExtractionWorker.ts	Fri Dec 02 16:44:11 2016 +0000
+++ b/src/app/services/feature-extraction/FeatureExtractionWorker.ts	Fri Dec 02 16:55:14 2016 +0000
@@ -2,6 +2,11 @@
  * Created by lucas on 01/12/2016.
  */
 
+import {ListResponse, EmscriptenProxy} from 'piper';
+import {PiperSimpleClient} from 'piper/HigherLevelUtilities';
+import { VampExamplePlugins } from 'piper/ext/VampExamplePluginsModule';
+
+
 // TODO TypeScript has a .d.ts file for webworkers, but for some reason it clashes with the typings for dom and causes compiler errors
 interface WorkerGlobalScope {
   onmessage: (this: this, ev: MessageEvent) => any;
@@ -14,14 +19,20 @@
 
 export default class FeatureExtractionWorker {
   private workerScope: WorkerGlobalScope;
+  private piperClient: PiperSimpleClient;
 
   constructor(workerScope: WorkerGlobalScope) {
-    console.log('ctor');
     this.workerScope = workerScope;
-    this.workerScope.onmessage = (ev: MessageEvent) => {
-      console.log(ev.data);
-    };
     let counter = 0;
     setInterval(() => this.workerScope.postMessage(counter++), 1000);
+    this.piperClient = new PiperSimpleClient(new EmscriptenProxy(VampExamplePlugins()));
+    this.workerScope.onmessage = (ev: MessageEvent) => {
+      switch (ev.data.method) {
+        case 'list':
+          this.piperClient.list({}).then(this.workerScope.postMessage);
+      }
+    };
   }
+
+
 }

--- a/src/app/services/feature-extraction/feature-extraction.service.ts	Fri Dec 02 16:44:11 2016 +0000
+++ b/src/app/services/feature-extraction/feature-extraction.service.ts	Fri Dec 02 16:55:14 2016 +0000
@@ -1,19 +1,35 @@
 import { Injectable } from '@angular/core';
+import {ListResponse} from "piper";
+
 
 @Injectable()
 export class FeatureExtractionService {
 
   private worker: Worker;
 
+
   constructor() {
     this.worker = new Worker('bootstrap-feature-extraction-worker.js');
   }
 
   testMessageStream() {
+    this.worker.addEventListener('message', ev => console.log(ev.data));
     this.worker.postMessage('anything');
-    this.worker.onmessage = (ev: MessageEvent) => {
-      console.log(ev.data);
-    };
   }
 
+  list(): Promise<ListResponse> {
+    return this.request({method: 'list'}, (ev: MessageEvent) => ev.data.available !== undefined);
+  }
+
+  private request<Req, Res>(request: Req, predicate: (ev: MessageEvent) => boolean): Promise<Res> {
+    return new Promise(res => {
+      const listener = (ev: MessageEvent ) => {
+        this.worker.removeEventListener('message', listener);
+        if (predicate(ev))
+          res(ev.data);
+      };
+      this.worker.addEventListener('message', listener);
+      this.worker.postMessage(request);
+    });
+  }
 }