上手编写-柿饼UI“环境检测仪”代码

前言

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

先上模拟器效果图:

上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码

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

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

第一周:熟悉语法,产品框架

这里推荐先撸RTT小破站的视频进行熟悉,官网有很多资料还未来得及更新,也是踩了两次坑。
https://space.bilibili.com/423462075/channel/detail?cid=74036

上手编写-柿饼UI“环境检测仪”代码

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

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

上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码

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

第二周:设计UI界面

上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码

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

上手编写-柿饼UI“环境检测仪”代码

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

上手编写-柿饼UI“环境检测仪”代码

第三周:设计界面,代码实现

1、界面设计,图片导入,完成基础按钮功能

上手编写-柿饼UI“环境检测仪”代码

2、完成button跳转,listctrl,这里第二个button还没写,所以有个小bug,请忽略><

上手编写-柿饼UI“环境检测仪”代码

3、完成开机默认展示,时间更新

上手编写-柿饼UI“环境检测仪”代码

4、现在是不是完美很多了?

上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码

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

上手编写-柿饼UI“环境检测仪”代码

6、终于画完了T_T

上手编写-柿饼UI“环境检测仪”代码

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

第四周:测试验证

下载到板子里看看。

开机上电:

上手编写-柿饼UI“环境检测仪”代码

2、连接WIFI

上手编写-柿饼UI“环境检测仪”代码

连接成功

上手编写-柿饼UI“环境检测仪”代码

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

上手编写-柿饼UI“环境检测仪”代码

4、历史检测

上手编写-柿饼UI“环境检测仪”代码

5、设置页面

上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码
上手编写-柿饼UI“环境检测仪”代码

演示视频1:

演示视频2:

演示视频3:

(2)
AaronYang的头像AaronYang会员认证作者
上一篇 2023年 12月 19日 下午4:34
下一篇 2021年 6月 2日 下午4:18

相关推荐

  • joe

    文章目录joe补充说明语法选项参数 joe 强大的纯文本编辑器 补充说明 joe命令 是一款功能强大的纯文本编辑器,拥有众多编写程序和文本的优良特性。 语法 joe(选项)(参数)…

    入门教程 2023年 12月 19日
  • rpmquery

    文章目录rpmquery补充说明语法选项实例 rpmquery 从RPM数据库中查询软件包信息 补充说明 rpmquery命令 使用多种依据从rpm数据库中查询软件包信息。 语法 …

    入门教程 2024年 3月 4日
  • slocate

    文章目录slocate补充说明语法选项实例 slocate 命令查找文件或目录 补充说明 slocate命令 是一个命令查找文件或目录。slocate本身具有一个数据库,里面存放了…

    入门教程 2024年 3月 5日
  • dpkg-split

    文章目录dpkg-split补充说明语法选项参数实例 dpkg-split Debian Linux中将大软件包分割成小包 补充说明 dpkg-split命令 用来将Debian …

    入门教程 2023年 12月 7日
  • cal

    文章目录cal补充说明语法选项参数实例 cal 显示当前日历或指定日期的日历 补充说明 cal命令 用于显示当前日历,或者指定日期的日历,如果没有指定参数,则显示当前月份。 一个单…

    入门教程 2023年 12月 7日
  • iperf

    文章目录iperf补充说明安装iperf选项实例 iperf 网络性能测试工具 补充说明 iperf命令 是一个网络性能测试工具。iperf可以测试TCP和UDP带宽质量。iper…

    入门教程 2023年 12月 19日
  • yes

    文章目录yes补充说明语法参数实例 yes 重复打印指定字符串 补充说明 yes命令 在命令行中输出指定的字符串,直到yes进程被杀死。不带任何参数输入yes命令默认的字符串就是y…

    入门教程 2024年 3月 11日
  • IOS iAD整合

    文章目录简介实例步骤输出 简介 IAD是苹果推出的广告平台,它可以帮助开发者从应用程序中获取收入。 实例步骤 创建一个简单的View based application 选择项目文…

    2023年 4月 1日
  • Helm | Helm 仓库索引

    文章目录helm repo index简介可选项从父命令继承的命令请参阅 helm repo index 基于包含打包chart的目录,生成索引文件 简介 读取当前目录,并根据找到…

    入门教程 2023年 12月 14日
  • ifup

    文章目录ifup补充说明语法参数实例 ifup 激活指定的网络接口 补充说明 ifup命令 用于激活指定的网络接口。 语法 ifup(参数) 参数 网络接口:要激活的网络接口。 实…

    入门教程 2023年 12月 19日

发表回复

登录后才能评论
Translate »