入门- Angular 2和TypeScript

本教程描述了使用Angular 2和TypeScript使用Digilent Instrumentation协议创建自定义web应用的过程。

1. 确保你有Node, npm和离子CLI安装．您还需要一个代码编辑器。对于Angular2应用来说，Visual Studio Code是一个很好的编辑器。
   
   
2. 进入一个目录并开始一个新的离子项目。
   

   离子开始我的望远镜教程

   
   

3. 输入项目目录。
   

   cd my-openscope

   
   

4. 从npm安装Digilent仪器协议和Digilent图表。
   

   NPM install—save dip-angular2 . NPM install—save digilent-chart-angular2

   
   

5. 有离子建设和服务项目。
   

   离子服务

   
   
   
   

6. 在项目目录中打开代码编辑器。
   
   
7. src / app / app.module开放。导入DeviceManagerService和DigilentChart，分别添加到providers和declarations中。
   

   进口｛BrowserModule｝从“@angular / platform-browser”；进口｛NgModule，ErrorHandler｝从“@angular /核心”；进口｛IonicApp，IonicModule，IonicErrorHandler｝从“ionic-angular”；进口｛MyApp｝从”。/ app.component '；进口｛HelloIonicPage｝从“. . /页面/ hello-ionic / hello-ionic”；进口｛ItemDetailsPage｝从“. . /页面/条目细节/条目细节”；进口｛ListPage｝从“. . /页面/ /列表”；进口｛状态栏｝从“@ionic-native /状态栏”；进口｛SplashScreen｝从“@ionic-native /闪屏”；进口｛DeviceManagerService｝从“dip-angular2 /服务”；进口｛DigilentChartModule｝从“digilent-chart-angular2 /模块”；＠NgModule（｛声明：［MyApp，HelloIonicPage，ItemDetailsPage，ListPage］，进口：［BrowserModule，IonicModule。forRoot（MyApp），DigilentChartModule］，引导：［IonicApp］，entryComponents：［MyApp，HelloIonicPage，ItemDetailsPage，ListPage］，供应商：［状态栏，SplashScreen，｛提供：ErrorHandler，useClass：IonicErrorHandler｝，DeviceManagerService］｝）出口类AppModule｛｝

   
   

8. src /页面/ hello-ionic / hello-ionic.ts开放。导入并注入DeviceManagerService。
   

   进口｛组件｝从“@angular /核心”；进口｛DeviceManagerService｝从“dip-angular2 /服务”；＠组件（｛选择器：“page-hello-ionic”，templateUrl：“hello-ionic.html”｝）出口类HelloIonicPage｛构造函数（公共deviceManagerService：DeviceManagerService）｛｝｝

   
   

9. 添加一个名为“deviceUri”的string类型的公共属性。添加一个名为connectToDevice()的方法，它在设备管理器服务上调用connect并订阅这个可观察对象。
   

   ＠组件（｛选择器：“page-hello-ionic”，templateUrl：“hello-ionic.html”｝）出口类HelloIonicPage｛公共deviceUri：字符串；构造函数（公共deviceManagerService：DeviceManagerService）｛｝connectToDevice（）｛这．deviceManagerService．连接（这．deviceUri）．订阅（（数据）＝＞｛控制台。日志（数据）；｝，（犯错）＝＞｛控制台。日志（犯错）；｝，（）＝＞｛｝）；｝｝

   
   

10. 打开src/pages/hello-ionic/hello-ionic.html，删除标签内的所有元素。创建一个带有堆叠标签和双向绑定到deviceUri的输入的离子项。创建一个绑定到调用connectToDevice()的单击事件的按钮
    

    < ion-header >< ion-navbar ><按钮ion-button menuToggle >< ion-icon的名字＝“菜单”></ion-icon ></按钮>< ion-title >你好离子</ion-title ></ion-navbar ></ion-header ><离子-内容填充>< ion-item ><离子-标签堆叠>设备地址</ion-label >< ion-input［（ngModel）］＝“deviceUri”></ion-input ></ion-item ><按钮ion-button（点击）＝“connectToDevice()”>连接到设备</按钮></离子含量>

    
    

11. 请确保OpenScope连接到Wifi，并在输入框中输入IP地址，即http://192.168.1.8”。打开控制台并单击“连接到设备”按钮。一些调试信息将打印在控制台中。成功的枚举如下图所示。
    
12. 接下来，从'dip-angular2/services'中导入DeviceService，并创建一个类型为DeviceService的名为myDevice的属性。
    

    进口｛DeviceManagerService，DeviceService｝从“dip-angular2 /服务”；.．.公共myDevice：DeviceService；.．.

    
    

13. 添加一个turnOnAwg函数，告诉OpenScope创建一个1千赫3 Vpp正弦波，运行它。注意，. flatmap函数用于链接对OpenScope的异步调用。
    

    .．.turnOnAwg（）｛这．myDevice．仪器．美国线规．setRegularWaveform（［1］，［｛signalType：的正弦，signalFreq：1000，vOffset：0，vpp：3.｝］）．flatMap（（数据）＝＞｛控制台。日志（数据）；返回这．myDevice．仪器．美国线规．运行（［1］）；｝）．订阅（（数据）＝＞｛控制台。日志（数据）；｝，（犯错）＝＞｛控制台。日志（犯错）；｝，（）＝＞｛｝）；｝.．.

    
    

14. 更新connect方法，让设备管理器服务从枚举响应创建一个设备，并将myDevice设置为新添加的设备。
    

    .．.connectToDevice（）｛这．deviceManagerService．连接（这．deviceUri）．订阅（（数据）＝＞｛控制台。日志（数据）；这．deviceManagerService．addDeviceFromDescriptor（这．deviceUri，数据）；这．myDevice＝这．deviceManagerService．设备［这．deviceManagerService．activeDeviceIndex］；这．turnOnAwg（）；｝，（犯错）＝＞｛控制台。日志（犯错）；｝，（）＝＞｛｝）；｝.．.

    
    

15. 创建一个string类型的chartId属性，并将其设置为'myOpenscopeChart'。创建一个chartOptions属性，并根据flot文档设置所需的图表选项。
    

    .．.公共chartId：字符串＝“myOpenscopeChart”；公共chartOptions：任何＝｛系列：｛行：｛显示：真正的｝｝，传说：｛显示：假｝，帆布：真正的，网格：｛hoverable：真正的，可点击的：真正的，autoHighlight：假，borderWidth：0，写成backgroundColor：“黑”，labelMargin：15，保证金：｛前：15，左：10，正确的：27，底：10｝｝，axisLabels：｛显示：真正的｝，工具提示：｛显示：真正的，cssClass：“flotTip”｝，zoomPan：｛启用：真正的，secsPerDivisionValues：［0.0001，0.0002，0.0005，０．００１，0．002，０．００５，0．01，0．02，0．05，0．1，0．2，0．5，1］｝，cursorMoveOnPan：真正的，桠溪：｛位置：“左”，axisLabel：＇＇，axisLabelColour：# 666666的，axisLabelUseCanvas：真正的，显示：真正的，tickColor：# 666666的，字体：｛颜色：# 666666的｝｝，xaxis：｛tickColor：# 666666的，字体：｛颜色：# 666666的｝｝｝；.．.

    
    

16. 创建chartLoad()方法。
    

    .．.chartLoad（）｛控制台。日志（“图加载!”）；｝.．.

    
    

17. 创建一个div，样式设置为:" height: 500px;宽度:100%;字体大小:14 px;”。在div标签内部，创建一个数字图表，并将所有的输入和输出连接到我们的属性和方法。为数字图表创建一个名为myChart的模板引用变量。
    

    .．.<div风格＝“高度:500 px;宽度:100%;字体大小:14 px;“>< digilent-chart # myChart［flotOptions］＝“chartOptions”［chartId］＝“chartId”（chartLoad）＝“chartLoad()”></digilent-chart ></div>.．.

    
    

18. 从@angular/core中导入ViewChild，从'digilent-chart-angular2/components '中导入DigilentChart。使用模板引用变量myChart为digilent图表创建一个ViewChild，并将其类型赋值为DigilentChart。
    

    进口｛组件，ViewChild｝从“@angular /核心”；进口｛DeviceManagerService，DeviceService｝从“dip-angular2 /服务”；进口｛DigilentChart｝从“digilent-chart-angular2 /模块”；.．.＠ViewChild（“myChart”）myChart：DigilentChart；.．.

    
    

19. 添加一个getData方法，该方法将设置示波器参数、触发器参数和调用触发器单。添加一个openscopeRead方法，连续调用openscope上的read，直到成功返回一个缓冲区。
    

    .．.getData（）｛这．myDevice．仪器．osc．setParameters（［1］，［0］，［0.25］，［350000］，［5000］，［0］）．flatMap（（）＝＞｛返回这．myDevice．仪器．触发．setParameters（［1］，［｛仪器：“osc”，通道：1，类型：“risingEdge”，lowerThreshold：470，upperThreshold：500｝］，［｛osc：［1］｝］）；｝）．flatMap（（）＝＞｛返回这．myDevice．仪器．触发．单（［1］）；｝）．订阅（（数据）＝＞｛控制台。日志（数据）；｝，（犯错）＝＞｛控制台。日志（犯错）；｝，（）＝＞｛这．openscopeRead（）；｝）；｝openscopeRead（）｛这．myDevice．仪器．osc．读（［1］）．订阅（（数据）＝＞｛这．myChart．setData（［｛数据：这．myDevice．仪器．osc．dataBuffer［这．myDevice．仪器．osc．dataBufferReadIndex］［0］．数据，桠溪：1，行：｛显示：真正的｝，点：｛显示：假｝｝］，真正的）；｝，（犯错）＝＞｛setTimeout（（）＝＞｛这．openscopeRead（）；｝，One hundred.）；｝，（）＝＞｛｝）；｝.．.

    
    

20. 在src/pages/hello-ionic/hello-ionic.html中，创建一个按钮并绑定到单击事件，这样getData()就会被调用。一种方法是使用myDevice绑定到按钮的disabled属性，这样在定义myDevice之前它都是禁用的。
    

    .．.<按钮ion-button［禁用］＝"！myDevice”（点击）＝“getData()”>获取数据</按钮>.．.

    
    

21. 确保OpenScope上的Wavegen连接到示波器通道1(实橙色线连接到实黄色线)。这使得我们可以通过从波形输出一个信号并通过示波器通道1读取它来执行一个环回。
    
    
22. 使用“连接到设备”按钮连接到您的OpenScope，然后单击“获取数据”按钮从OpenScope读取数据缓冲区，并将其绘制在图表上。