最近,和同学接手了一个某军校《导航原理》课程的教学实验平台软件开发工作。
本项目在客户端主要用到的技术便是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的相关应用。