体验用JS开发硬件

发表于2016-12-23
评论0 1.1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学堂游戏美术行业精英群

167422913

体验用JS开发硬件

  In 网页重构 on 2016-11-28 13:32:56 by CB

  简介:前端开发者可以通过Ruff,使用自己熟悉的Javascript脚本语言进行硬件开发,从而将更多的注意力集中在应用逻辑上。

Ruff 是什么

  官方说法:Ruff 是一个支持 JavaScript 开发应用的物联网操作系统。Ruff 跨平台、可以支持各种硬件,例如树莓派等。



  为了便于理解,下文说的 Ruff 都特指其官方的开发套件,如上图,包含一些传感器,如光线感应、按钮、温湿度传感器、红外接受发送模块等。中间最大的那块就是 Ruff 开发套件的主板了。

  通过 Ruff 提供的js运行时,前端er可使用熟悉的js代码来控制连接在板上的设备模块,而不用关心底层实现,因为Ruff已经对硬件进行了抽象。

  因而可以在几乎没有硬件基础的情况下获取电子元件的数据(比如温湿度)、操作电子元件(比如控制LCD的显示、LED灯),然后用代码把它们的逻辑连接起来,即,使用js来控制物理设备

  逻辑部分代码和平时Web端的js代码一样,下面是官方的快速开始的Demo:


// 在 `#button` 按下时点亮 `#led-r`.$.ready(function(error) { $('#button').on('push', function() { $('#led-r').turnOn(); });});


  以上就是“按下按钮点亮LED”的逻辑实现的全部代码,是不是非常熟悉的味道。

那么整个开发流程是怎样的?

  开发流程在Ruff官网上已有相关详细介绍,这里用自己的理解来简化一下:

1、使用Ruff的SDK在电脑上建立项目目录,告知需要用到的元件
2、使用Ruff的SDK来查看元件的连线,并把元件和Ruff主板连接起来
3、使用你喜欢的文本编辑器,比如sublime text、webstorm来编写逻辑代码
4、通过电脑把项目整个目录部署到Ruff主板上
5、Ruff主板可以脱离电脑啦,以后只要给Ruff主板通电,就会自动执行之前部署上去的代码

  实操,做个颜色可调的LED

  说了这么多,终究有些抽象,下面用10分钟来做一个变色的灯。

  效果是:按下按钮灯光颜色循环,释放按钮则灯光停留在释放瞬间的颜色。

  所以,需要的元件是按钮、支持3原色的LED灯。先从Ruff的开发套件中翻出来这两个元件:



  顺便提一下,元件的包装袋上面有它的型号(包装底部的网址的最后黄颜色字体部分),后面会用到,同时那个url就是该元件API的文档地址。

在电脑上新建项目目录

  安装完Ruff提供的SDK后,在命令行窗口中执行rap init进行项目创建,非常类似npm的init,填写标题描述作者之类的。



  然后使用rap device add #元件自定义id 来为该项目添加元件(按钮和LED),元件的id用途是在逻辑代码中$('#元件id')来选中设备元件,名称可自定义。执行之后,下一步会询问要添加的元件的型号,即之前包装袋上的黄颜色部分。



  在类似对话式建立项目之后,项目的结构图如下。经过添加设备,ruff_modules目录下增加了相应的设备元件目录,其中包含了驱动的代码。



  项目就算是初始化好了,Ruff会自动计算出连线方式,执行rap layout —visual 弹出可视化的连线说明,按图示连上主板。



  上面的准备好了之后,剩下的就是逻辑的代码啦,在项目下src目录中的index.js文件中。

编写逻辑代码

  因为我们是做一个变色的灯,根据人眼的自然习惯,使用HSL颜色模型,固定饱和度(Saturation)、亮度(Lightness),循环改变色相(Hue)的方式。

  如此以来我们只需改变一个变量就可以改变颜色(色相)啦。



  查看LED元件的API,其提供的指定亮色setRGB([R, G, B])方法中,参数需要是RGB值,所以要做一下HSL到RGB的转换,伪代码如下:


function hslToRgb(h, s, l) { ... // 完整代码:http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c return[r, g, b]}


  主体逻辑代码:


var timmer; //变色的计时器var h = 0; //色相初始值,范围[0-1]//当按钮按下时,我们启动一个定时器,定时改变色相$('#button').on('push', function() { timmer = setInterval(function() { h += 0.01; if (h > 1) { h = 0; }; $('#led').setRGB(hslToRgb(h, 1, 0.5)); }, 100)});//当释放按钮时,清除定时器,此时颜色将停留在释放那一刻。$('#button').on('release', function() { clearInterval(timmer);});


  ……好,5分钟过去了,假设代码写完了……

把代码部署到Ruff主板

  通过查看官网的网络配置文档让Ruff主板和电脑在同一个局域网。

  然后还是在命令行窗口中,在当前项目目录下执行rap deploy -s部署代码并启动。

  以后每当给Ruff主板通上电,它即会自动启动并执行刚刚部署的代码了。

  附上最终效果:一个按下按钮颜色循环的彩灯,释放按钮颜色则停留。


如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

移动官网
公众号
在线反馈
返回顶部