web动画

纯web技术玩转机器人？（上篇）

2017-08-06  本文已影响257人  Jeremy_young

首先想说的是，web 开发者玩些机器人传感器硬件啥的，并不是新鲜话题或者技术，但作为已入行前端多年的我，第一次接触并且做到的时候，也是非常兴奋的。第一次在简书创作，请各位同道前辈多多包涵指教，先谢了！

对于一个 web 开发者，这些年感受最深最多的，恐怕就是前端开发世界的“善变”，变化让人深受其累，但同时也充分说明前端世界极其活跃。这些迫使让人习以为常的变化，就好比过山车，既让人忐忑，又带人一路快速领略风光无限。

这不，时下一大波物联网、人工智能、机器人的又开始抬头，而且势头强劲地从台面跑到台下并介入到我们的生活中来了。前端人以其与生俱来的危机感，一面左眼深陷 react 代码、手不离“键”，一面右眼时不时瞟一下 TensorFlow、SLAM 什么鬼的暗自骂道：我靠！

路漫漫其修远兮，吾常默念勿放弃。

好了以上就是作为一名 JSer 的我的纠结和废话。一开始入行前端时，谁也没想到除了页面 pages 之外还有什么其他高大上的东西是前端可以做的。既然这样，那么用 web 技术去操控机器人应该是个比较麻烦的事吧？

——任何麻烦的事，可以归纳并映射到写代码上大概是：

但在本文所介绍 sensorium.js 库看来，这些麻烦事早就被“铲平”了，借助它，web 开发者能轻松（如果你不轻松一定记得发邮件反馈2333~）地通过手中的 JavaScript 代码控制机器人，体验代码控制物理世界的快感！

web 设施

一个非常弱的前提：会 ajax，会用 promise.then() 回调（照实例写甚至不用会...），会用 npm 安装个 sensorium.js 包到你的项目根目录
npm install sensorium --save
如果有淘宝镜像，你自然会加个c，比如这样cnpm install sensorium --save 下载安装得更快。安装 OK 后开始铺代码。

三步创建好主控板实例对象

// 获取一个 sensorium 实例
var sensorium = new Sensorium(); 

// 设定一个通信通道
var xhr = new XMLHttpRequest();
sensorium.setTransport({
    send: function(buf) {
        let host = 'http://127.0.0.1:8800';
        var data = '/?buf='+ JSON.stringify(buf);
        xhr.open("GET", host + data ,true);
        xhr.send(null);
    },
    onReceived: function(pipe) {
        xhr.onreadystatechange = function(e) {
          if (this.readyState == 4 && this.status == 200) {
            let binaStr = this.response;
            pipe(JSON.parse(binaStr).data);
          }
        };
    }
});

// 获取一个主控板实例
// var mcore = sensorium.createMcore(); 

// 好了，主控板实例已经成功获取
// 接下来看这个对象能干嘛

操控机器人

简单的理解，主控板就是主电路板，每台计算机上都有，机器人也由它作为控制中心。机器人身上搭载的各种传感器、电子元件比如 LED 灯、电机、舵机等等，构成了机器人本身，机器人凭借这些部件，在程序的控制下就能完成特定的任务。

——上面貌似已经涉及到硬件上的东西了，不过也只作为一个简单的理解，只需保留这样一个概念即可。最后只要知道上面 js 代码的 mcore 就代表了机器人的一种主控板就好了。在这个“主控板”中，用以下代码来控制机器人完成一些任务。

// 点亮主控板上的 LED 灯为绿色
var mcore.RgbLedOnBoard().g(200).turnOn();

// 读取超声波测距
mcore.Ultrasonic(3).getData().then(val => console.log(val));

// 控制左右电机（如果接上了的话）以 200 的速度前进
mcore.VirtualJoystick().leftSpeed(200).rightSpeed(200).run()

一路链式调用，就是这么简单！

sensorium.js 简介

sensorium.js 库本身提供了更多的 API 来驱动各种各样的传感器，所以拿到传感器，各种组合，玩法就超多~这是后话。如果您已经搭建了基本的页面，并且完成主控板的实例化，那么（win: F12 或 mac: win+alt+j）打开浏览器（chrome）控制台，输入 mcore. 就能以快捷方式查看到 mcore 主控板所支持的所有 API，比如罗盘、火焰、陀螺仪等等：

mcore apis.png
sensorium.js 本身也就是这么简单易用，在 API 设计之初就是让大家无需知道领域知识，也能凭“直觉”轻巧的用起来（还是那句话，要是用得不轻松一定记得发邮件反馈，先谢啦2333~）

到现在为止，算是告了一段落。但是 “web 设施” 其实还没有建成通车，且不说老师傅，就是年轻的司机也能一眼看出来：就凭你上面那些玩意，这车就能开了？还有机器人在哪？

开启一个小后台服务

明眼人很快看出来，上面用了 ajax，但属于一厢情愿，没有后台来处理，ajax 有诉难求。
所以，除了上面安装的 sensorium 库，这里还得装一个库
sensorium-server.js 作为 ajax 的服务器来用。
npm install sensorium-server -g
建议用 -g 全局安装它，这样允许您可以在任何目录下开启这个服务。
请耐心等待下这个库的下载安装，因为里头依赖了一个 serialport.js 库，该库包含了一个 node-pre-gyp ，文件较大。

sensorium-server.js 简介

我们就着它安装的时候，简单介绍下 sensorium-server.js 库。

sensorium-server 是个简单职责单一甚至简陋的库，这也是子标题说是个“小后台服务”的原因。它的主要业务逻辑及用途是：

其实说白了，就是 web 或者说浏览器没办法直接连通机器人，操作硬件，所以中间就插一道 nodejs，让 nodejs 来带为处理，并且 nodejs 每处理一次请求都会打印一次日志，方便 web 开发者 debug。

至于它简陋，是现在只接受 GET 请求，以及只能接受简单的命令行参数配置比如 stopReq 表示禁止打印请求消息。后续会抽时间把这个库完善下，毕竟这么残破的库真不好意思占用一个 npm 仓位。。

提交 sensorium-server.js 这个库的目的，就是方便 web 开发者直接在浏览器中就能调试机器人，铲平 web 连通机器人的最后一道障碍。

但不得不声明的是，笔者找了一些同类库（如大名鼎鼎的 http-server）但是又实在没有谁提供这样的功能，于是半造轮子半创作下，快速写出来这个库，可能有一些未知 bug，但我保证自己用来是 ok 的。

好，看看命令行窗口，正常网速下，应该已经下载并安装好了。接下来于命令行中，在任何文件目录下开启这个服务：
sensorium-server
或者简写成这样：
ss
当看到命令行中打印出以下信息，就说明服务正常开启了：

Starting up http-server, serving 8800
  http://127.0.0.1:8800
Hit CTRL + C to stop the server

开启了这个服务，你就无需关注通信传输部分了，只要借助 sensorium.js 提供的 API 专注于您前端代码即可。

至此，web 开发者已经完成了 “web 设施“ 的建设，也完成了 90% 的工作量。常言 “行百里半九十”，《纯web技术玩转机器人？（下篇）》将带您开完最后 10 里路。拜拜~

上一篇下一篇

猜你喜欢

热点阅读