RT-Thread-基于柿饼UI的“环境检测仪”RT-Thread问答社区

基于柿饼UI的“环境检测仪”

发布于 2021-03-31 20:26:56 浏览：830 订阅该版

[tocm]

原文链接
https://bbs.aaronyang.cc/?p=7611

首先，感谢RTT的这次体验机会，此代码参考了Factory_Demo

先上模拟器效果图：
 ![image.png](https://oss-club.rt-thread.org/uploads/20210331/db5ccb90a32da7a84effa4bf3472d5ca.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/576bfd333b48e7f85718926797461eaa.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/46ea0c611e502e92fd6c031319add51f.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/d1754e849c8948f2b27dfb3d1a15b165.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/2ee5001de93e078dd55866ae798419df.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/2d630c018e51673282221c9aa5f2b208.png)

由于UP上班原因，所以只能下班后不偷懒情况下弄，专心搞还是花不了太多时间的~

设计进度：
第一周：熟悉语法，产品框架
第二周：设计UI界面
第三周：设计界面
第四周：测试验证

# 第一周：熟悉语法，产品框架
这里推荐先撸RTT小破站的视频进行熟悉，官网有很多资料还未来得及更新，也是踩了两次坑。
https://space.bilibili.com/423462075/channel/detail?cid=74036
![image.png](https://oss-club.rt-thread.org/uploads/20210331/961ba7ee3fe72054619ee1dd825a32cf.png)

然后就是根据教程安装相关软件啦
必须统一使用 SDK 的开发工具（特别是 设计器，必须使用SDK里面的 ），SDK有全套的开发工具，不需要再额外下载。
SDK链接：https://realthread.cowtransfer.com/s/9248651f54b94c
反馈链接：https://www.wenjuan.com/s/UZBZJvNuqY/
社区论坛链接：https://club.rt-thread.org/

起初想通过调用阿里云天气接口，将空气数据也接入进来但是考虑实现，最终还是使用了彩云科技开放平台 API，由于前期未开放空气接口，先基于天气接口进行开发。
结构设计：（草图）

![image.png](https://oss-club.rt-thread.org/uploads/20210331/5b64dc7a86ef8b926011af391cb6b058.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/509be1efd4d06ea6e66ac1d642487787.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/3ddf44b5b5b4a22ff4b242de2c94a9b2.png)

好了，下面通过PS实现框图绘制

# 第二周：设计UI界面
![image.png](https://oss-club.rt-thread.org/uploads/20210331/7d299a59a68f85b0a87024bf14e74ce3.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/a40a9bb1396a00bb8faf3a131cfdef56.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/e6564246a9135abf2e77be0fe2f49d72.png)

通过自动化脚本生成单独的素材

![image.png](https://oss-club.rt-thread.org/uploads/20210331/6a1f2a87eb2b7da113151ef1a1cba99f.png)

使用Python脚本进行图片清洗及整理

![image.png](https://oss-club.rt-thread.org/uploads/20210331/c3e168bc0e5eeac8d218666866fafc39.png)

# 第三周：设计界面，代码实现
1、界面设计，图片导入，完成基础按钮功能
![image.png](https://oss-club.rt-thread.org/uploads/20210331/fa07a49033575239895c08ae193e17c3.png)

2、完成button跳转，listctrl，这里第二个button还没写，所以有个小bug，请忽略><
![image.png](https://oss-club.rt-thread.org/uploads/20210331/c408508a0c15d53baaecbc6cf581ff78.png)

3、完成开机默认展示,时间更新
![image.png](https://oss-club.rt-thread.org/uploads/20210331/69a0e8c148da7bc7f03b348b65c437d3.png)

4、现在是不是完美很多了？
![image.png](https://oss-club.rt-thread.org/uploads/20210331/f1865d918064d37fddf615a34a53764e.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/5cec562331f0d74f345c930b3ae42d61.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/b2a8542b388cacf7686bb34a7ff6f85b.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/9e9985de772060ef1e34ba2322c1b48d.png)

5、接下来是我认为最难的一个功能，历史检测的波形图绘制。 
由于是第一次接触canvas，所以也是算了半天，首先从左上角开始为原点（0,0），然后根据自己画布的界面依次往下推导。

![image.png](https://oss-club.rt-thread.org/uploads/20210331/fda8ea7ebe8346fc9fc6428b12b453f0.png)

6、终于画完了T_T
![image.png](https://oss-club.rt-thread.org/uploads/20210331/02e0139b26aa3760d4c1c5cac214fbae.png)

Y坐标代表温度，X坐标代表0~24小时的温度情况，这里由于开发时间受限，所以做了基础的代码，给出来的数据是通过随机数画的，并没有将实际的温度进行存储，所以导致温度幅度比较大，在实际情况下，应该会感冒吧哈哈~

# 第四周：测试验证
下载到板子里看看。

1、开机上电：
![image.png](https://oss-club.rt-thread.org/uploads/20210331/defc130afb83a7a4a49458d0598359bb.png)

2、连接WIFI：
![image.png](https://oss-club.rt-thread.org/uploads/20210331/5d89f8d9d10deb0ff9f6d249aea07082.png)

连接成功
![image.png](https://oss-club.rt-thread.org/uploads/20210331/36e877b0b48a1e7104eaff4117eb1dfc.png)

3、返回首页看看，天气已经出来了。语音也是可以播报的，点一下。
左侧的时间没有做成实时的，图快，新加了一个Label。

![image.png](https://oss-club.rt-thread.org/uploads/20210331/692a89714846c912286d2995470e7dc0.png)

4、历史检测
![image.png](https://oss-club.rt-thread.org/uploads/20210331/d7c148b32593c4b4d7aeb65a0dc0b4ce.png)

5、设置页面
![image.png](https://oss-club.rt-thread.org/uploads/20210331/c8c5936255d7c6d88656e6b8ab5e255c.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/81f8acdb0c7e0d36fcb1e9197d35f24f.png)

![image.png](https://oss-club.rt-thread.org/uploads/20210331/d58d18b5432de973a057c081681debea.png)

由于论坛不能上传演示视频，所以我把源码，UI设计，演示视频都放在了个人博客，喜欢的小伙伴可以下载观看。

原文链接
https://bbs.aaronyang.cc/?p=7611

回到
底部

基于柿饼UI的“环境检测仪”

关于作者

aaronyang

相关文章

热门标签

本月文章贡献

基于柿饼UI的“环境检测仪”

关于作者

aaronyang

相关文章

推荐文章

热门标签

本月问答贡献

本月文章贡献