This tutorial describes the process of creating custom web applications with the Digilent Instrumentation Protocol using Angular 2 and TypeScript.
ionic start my-openscope tutorial
cd my-openscope
npm install --save dip-angular2 npm install --save digilent-chart-angular2
import { BrowserModule } from '@angular/platform-browser'; import { NgModule, ErrorHandler } from '@angular/core'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic'; import { ItemDetailsPage } from '../pages/item-details/item-details'; import { ListPage } from '../pages/list/list'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { DeviceManagerService } from 'dip-angular2/services'; import { DigilentChartModule } from 'digilent-chart-angular2/modules'; @NgModule({ declarations: [ MyApp, HelloIonicPage, ItemDetailsPage, ListPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), DigilentChartModule ], bootstrap: [IonicApp], entryComponents: [ MyApp, HelloIonicPage, ItemDetailsPage, ListPage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, DeviceManagerService ] }) export class AppModule {}
import { Component } from '@angular/core'; import { DeviceManagerService } from 'dip-angular2/services'; @Component({ selector: 'page-hello-ionic', templateUrl: 'hello-ionic.html' }) export class HelloIonicPage { constructor(public deviceManagerService: DeviceManagerService) { } }
@Component({ selector: 'page-hello-ionic', templateUrl: 'hello-ionic.html' }) export class HelloIonicPage { public deviceUri: string; constructor(public deviceManagerService: DeviceManagerService) { } connectToDevice() { this.deviceManagerService.connect(this.deviceUri).subscribe( (data) => { console.log(data); }, (err) => { console.log(err); }, () => { } ); } }
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Hello Ionic</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-item> <ion-label stacked>Device Address</ion-label> <ion-input [(ngModel)]="deviceUri"> </ion-input> </ion-item> <button ion-button (click)="connectToDevice()"> Connect To Device </button> </ion-content>
import { DeviceManagerService, DeviceService } from 'dip-angular2/services'; ... public myDevice: DeviceService; ...
... turnOnAwg() { this.myDevice.instruments.awg.setRegularWaveform([1], [{ signalType: 'sine', signalFreq: 1000, vOffset: 0, vpp: 3 }]) .flatMap((data) => { console.log(data); return this.myDevice.instruments.awg.run([1]); }) .subscribe( (data) => { console.log(data); }, (err) => { console.log(err); }, () => { } ); } ...
... connectToDevice() { this.deviceManagerService.connect(this.deviceUri).subscribe( (data) => { console.log(data); this.deviceManagerService.addDeviceFromDescriptor(this.deviceUri, data); this.myDevice = this.deviceManagerService.devices[this.deviceManagerService.activeDeviceIndex]; this.turnOnAwg(); }, (err) => { console.log(err); }, () => { } ); } ...
... public chartId: string = 'myOpenscopeChart'; public chartOptions: any = { series: { lines: { show: true } }, legend: { show: false }, canvas: true, grid: { hoverable: true, clickable: true, autoHighlight: false, borderWidth: 0, backgroundColor: 'black', labelMargin: 15, margin: { top: 15, left: 10, right: 27, bottom: 10 } }, axisLabels: { show: true }, tooltip: { show: true, cssClass: 'flotTip' }, zoomPan: { enabled: true, secsPerDivisionValues: [0.0001, 0.0002, 0.0005, 0.001, 0.002, 0.005, 0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1] }, cursorMoveOnPan: true, yaxis: { position: 'left', axisLabel: '', axisLabelColour: '#666666', axisLabelUseCanvas: true, show: true, tickColor: '#666666', font: { color: '#666666' } }, xaxis: { tickColor: '#666666', font: { color: '#666666' } } }; ...
... chartLoad() { console.log('chart loaded!'); } ...
... <div style="height: 500px; width: 100%;font-size: 14px;"> <digilent-chart #myChart [flotOptions]="chartOptions" [chartId]="chartId" (chartLoad)="chartLoad()"></digilent-chart> </div> ...
import { Component, ViewChild } from '@angular/core'; import { DeviceManagerService, DeviceService } from 'dip-angular2/services'; import { DigilentChart } from 'digilent-chart-angular2/modules'; ... @ViewChild('myChart') myChart: DigilentChart; ...
... getData() { this.myDevice.instruments.osc.setParameters([1], [0], [0.25], [350000], [5000], [0]) .flatMap(() => { return this.myDevice.instruments.trigger.setParameters([1], [{ instrument: 'osc', channel: 1, type: 'risingEdge', lowerThreshold: 470, upperThreshold: 500 }], [{ osc: [1] }]); }) .flatMap(() => { return this.myDevice.instruments.trigger.single([1]); }) .subscribe( (data) => { console.log(data); }, (err) => { console.log(err); }, () => { this.openscopeRead(); } ); } openscopeRead() { this.myDevice.instruments.osc.read([1]).subscribe( (data) => { this.myChart.setData([{ data: this.myDevice.instruments.osc.dataBuffer[this.myDevice.instruments.osc.dataBufferReadIndex][0].data, yaxis: 1, lines: { show: true }, points: { show: false } }], true); }, (err) => { setTimeout(() => { this.openscopeRead(); }, 100); }, () => { } ); } ...
... <button ion-button [disabled]="!myDevice" (click)="getData()"> Get Data </button> ...