基于" 柿饼派 "用画布做个空气质量动态图表

发布于 2019-05-31 17:05:29 浏览：4063 订阅该版

* 本帖最后由 子胥 于 2019-5-31 17:26 编辑 *

首先放个动态图看看效果！
附件里有自己拍摄的小视频。用空气清新剂对着检测仪喷了下，数值直接Bing Bang! (还检测出了甲醛浓度！？ 检测仪不好呢？还是空气清新剂有问题？)

![GIF.gif](/uploads/201905/31/155839iq4jwb4wvi6kjqe9.gif)

这个应用直接用Persimmon UI来制作，硬件则用的是 “柿饼派”！（有需要小伙伴可以直接去RTT的网店购买）

原理：

把检测仪和柿饼派用串口连接，并在JS脚本中，打开Uart0端口，再接收数据，并对数据进行分析处理，最后绘制到画布上。
串口数据的收发和校验工作，可以看最近刚上传的 Persimmon教学视频。>  [https://space.bilibili.com/423462075/channel/detail?cid=74036](https://space.bilibili.com/423462075/channel/detail?cid=74036)。

这个Demo主要添加了用canvas制作动效。

准备：

- 软件: PersimmonUI Builder
- 设备: 柿饼派，空气质量传感器，喇叭(可以不需要)
- 素材：背景图和字体文件
- 资料: 传感器换传输协议 (附件的末尾)

开始：

- 前端: 直接设置背景图片 ，再放一个Canvas控件 ( 这真的太简单了！！！)

![ui.png](/uploads/201905/31/170407awoz54s4mk5rwr22.png)

- 脚本：
    把脚本文件放在附件里了。。。本来贴了代码，但是一发表，代码就留了一行，crazy！就做个图片给大家看，需要复制代码的小伙伴，请下载附件

![js.png](/uploads/201905/31/172408n33qypv776fv81h7.png)

<br> <a href="https://fastadmin.rt-thread.org/uploads/201905/31/163354eox2grgkqdkioqe4.attach" download="PMS5XXXST颗粒物传感器中文说明书V2.0.pdf">下载附件[PMS5XXXST颗粒物传感器中文说明书V2.0.pdf]</a> <br> <a href="https://fastadmin.rt-thread.org/uploads/201905/31/165915p1vo6f2ya34ltpay.attach" download="B612.mp4">下载附件[B612.mp4]</a> <br> <a href="https://fastadmin.rt-thread.org/uploads/201905/31/171746vsztkkgjrzerpe7p.attach" download="air.js">下载附件[air.js]</a>