最近,和同学接手了一个某军校《导航原理》课程的教学实验平台软件开发工作。

  本项目在客户端主要用到的技术便是node-webkit,使用它能够以Web的方式开发桌面应用程序。下面,就以本项目为例,介绍一下node-webkit项目。

  顾名思义,node-webkit就是nodejs+webkit。这样做的好处显而易见,核心奥义在于,用nodejs来进行本地化调用,用webkit来解析和执行HTML+JS。

  首先,下载安装node-webkit。点击下面的链接下载解压即可。

    https://github.com/rogerwang/node-webkit

  下载完之后解压,可以看到如下内容:

双击nw.exe直接运行,看到如下界面说明一切都ok,在你的机器上可以运行:

  接着,便可开始本项目的开发工作了。我选择了webstorm作为ide工具,下载安装webstorm,再去网上随便找个破解码(建议花点钱装个B)。

  下载安装好webstorm后,新建一个空工程,命名为“daohang”。如下图:

  

  最简单的node-webkit项目只需要两个文件,即:一个html文件和一个package.json(来说明项目名称、版本和依赖等)。而本项目需要制作很多飞机航行位置变化等动画效果,还需要与硬件交互,所以还需要借助css、js、node.js、jquery、johnny-five等。下面,简要介绍一下各个技术。

  1、页面样式:css

  2、svg动画和特效:html5、css3、jquery、js

  3、串口通信:node-serialport(node.js的一个通信模块)、johnny-five(使Arduino板能与网络交互的框架)

  目前,本项目的模块只完成了基本页面的跳转,还未开始动画和串口通信的开发。项目结构如下:

  

  最后,我们来看看项目初步运行效果。主页面index.html如下,用户可以选择进入路基或星基系统。

  

  在路基系统中,操作界面如下:

  

  系统主要的功能模块分为:无线测角、测距和测速。这里涉及和硬件交互,需要使用node-serialport、J5等技术与Arduino板进行数据交互,动态地更新页面,目前正在学习中。

  今后,会随着项目的进展,和大家分享有关SVG动画制作、J5、node-serialport的相关应用。

  

导航原理实验系统软件——node-webkit初探的更多相关文章

  1. Node.js初探之GET方式传输

    Node.js初探之GET方式传输 例子:form用GET方法向后台传东西 html文件: <form action="http://localhost:8080/aaa" ...

  2. Node Express 初探

    一如既往,先上一张图 Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. 关于Express更多相关知识请链接至官网http://www.expressjs.com.c ...

  3. 编译原理实验之SLR1文法分析

    ---内容开始--- 这是一份编译原理实验报告,分析表是手动造的,可以作为借鉴. 基于  SLR(1) 分析法的语法制导翻译及中间代码生成程序设计原理与实现1 .理论传授语法制导的基本概念,目标代码结 ...

  4. Node.js 初探

    概念 Node.js 是构建在Chrome javascript runtime之上的平台,能够很容易的构建快速的,可伸缩性的网络应用程序.Node.js使用事件驱动,非阻塞I/O 模式,这使它能够更 ...

  5. 解密SVM系列(四):SVM非线性分类原理实验

    前面几节我们讨论了SVM原理.求解线性分类下SVM的SMO方法.本节将分析SVM处理非线性分类的相关问题. 一般的非线性分类例如以下左所看到的(后面我们将实战以下这种情况): 能够看到在原始空间中你想 ...

  6. 计算机网络原理实验_使用网络协议分析仪Wireshark

    一.实验名称  使用网络协议分析仪Wireshark 二.实验目的: 1. 掌握安装和配置网络协议分析仪Wireshark的方法: 2. 熟悉使用Wireshark工具分析网络协议的基本方法,加深对协 ...

  7. 堆栈上的舞蹈之释放重引用(UAF) 漏洞原理实验分析

    0x01 前言 释放重引用的英文名名称是 Use After Free,也就是著名的 UAF 漏洞的全称.从字面意思可以看出 After Free 就是释放后的内存空间,Use 就是使用的意思,使用释 ...

  8. ARP协议工作原理实验

    一.实验目的 验证"在向目的主机发送数据包时会先查询ARP高速缓存,如果ARP高速缓存中已保存了目的主机的MAC地址,不进行ARP查询,使用ARP高速缓存中的MAC地址:如果缓存中没有IP对 ...

  9. Node.js系列之node.js初探

    官方介绍:Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable n ...

随机推荐

  1. PHPEXCEL实例-导出EXCEL

      PHPExcel 是相当强大的 MS Office Excel 文档生成类库,当需要输出比较复杂格式数据的时候,PHPExcel 是个不错的选择. <?php /* * 导出EXCEL *  ...

  2. android开发学习——day3

    关于android开发的详细过程了解 Android App程序的四种重要组成类型:1.Activity 2.Service 3.Content Provider 4.Broadcast Receiv ...

  3. ios framework 开发

    ios framework 开发 之 参考 ios framework 开发 之 实战 iOS workspace 依次编译多个工程

  4. spring mvc 引用 jasper JasperReportsHtmlView的nullpx图片问题

    spring mvc 引用 jasper  JasperReportsHtmlView的nullpx图片问题 参考:http://stackoverflow.com/questions/1168633 ...

  5. 支付宝 Android 版使用的开源组件

    支付宝 Android 版使用的开源组件 前言: 花了点时间整理了 支付宝 Android 客户端使用的开源组件,给需要的同学.在你不知道用什么开源框架的时候可以作下参考,毕竟支付宝是阿里的重量级产品 ...

  6. fir.im Weekly - 2017 年必须了解的 iOS 开源库

    放假的脚步临近,每个人都在期待一个愉悦的春节假期.最近,@张嘉夫 分享了一篇 Medium 上的文章<33 个 2017 年必须了解的 iOS 开源库>,总结了 2016 年最棒的 iOS ...

  7. Spring 4 MVC+Hibernate 4+MySQL+Maven使用注解集成实例

    Spring 4 MVC+Hibernate 4+MySQL+Maven使用注解集成实例 转自:通过注解的方式集成Spring 4 MVC+Hibernate 4+MySQL+Maven,开发项目样例 ...

  8. js中的 arguments ,实参的集合

    当 传递的参数个数不确定时,,可使用 arguments ..

  9. jq基础

    $(function() {          $(".dd").attr("class","cc").append("<h ...

  10. NMEA-0183协议解析

    NMEA-0183 NMEA 0183是美国国家海洋电子协会(National Marine Electronics Association )为海用电子设备制定的标准格式.目前业已成了GPS导航设备 ...