ESP32 + HaaS Python UI Lite 组件 打造倒计时面板

Posted 2022-03-28 HaaS技术社区

   通过UI界面和用户交互已经成为各种设备的首选，界面上不但可以展示各种信息，并且用户根据屏幕上提示进行点击就能进行各种操作。倒计时计数器是我们在日常生活中常用的功能，在锻炼身体、烹饪、比赛等场景经常可以看到。本案例便是基于UI Lite开发一个倒计时器案例。

1、简介

   本文将基于HaaS UI Lite开发框架使用Python语言进行倒计时计数器的打造。

   本案例打造只需要使用M5StackCore2开发板一台即可。

2、设备端开发

2.1、开发环境

   在进行下一步之前请确保M5StackCore2开发环境已经搭建完毕，详情请参考M5StackCore2快速开始中的说明。

2.2、创建解决方案

   如下图所示，打开VS Code之后在新建一个基于helloworld的python工程，设定好工程名称（“count_down”）及工作区路径之后，硬件类型选择m5stackcore2，点击立即创建，创建一个Python轻应用的解决方案。

   下载本案例脚本的代码解压后全部复制，覆盖“count_down”工程根目录下的所有文件，main.py文件如下图所示：

3、运行效果

   将count_down工程推送到M5StackCore2开发板之后，脚本会自动运行。屏幕上面显示如下信息：

4、HaaS UI Lite 倒计时计数器模板说明

   本案例中使用到了HaaS UI Lite封装的倒计时计数器类型的模板。基于此模板可以很方便的将倒计时信息显示在面板上。此模板的实现请参考countDown.py的代码。

   倒计时面板上有4个指定的倒计时时间，单位是分钟，默认的数值分别是1，3，5，10；可以在创建count down页面的时候修改默认值，最大倒计时时间是10分钟。

   下面是倒计时计数器模板API的说明。

CountDown() - 创建计数器面板对象

• 函数原型

stopWatch = CountDown()

• 参数说明
• 返回值

创建成功返回计数器类型的对象

• 示例代码

from countDown import CountDown
countDownPage = CountDown()
print('create countDown object')

• 代码输出

create countDown object

createPage(value1 = 1, value2 = 3, value3 = 5, value4 = 10) - 创建计时器面板

• 函数功能：

创建计时器面板，上面有4个可选的倒计时数字，单位是分钟，默认值分别是1，3，5，10；创建的倒计时分钟数不能大于10分钟.

• 函数原型

CountDown.createPage(value1, value2, value3, value4)

• 参数说明

参数	类型	必选参数？	说明
value1	int	否	界面最左侧定时器时间长度，单位：分钟
value2	int	否	界面左侧第二个定时器时间长度，单位：分钟
value3	int	否	界面最右侧定时器时间长度，单位：分钟
value4	int	否	界面右侧第二个定时器时间长度，单位：分钟

• 返回值

无

• 示例代码

from count_down import CountDown
countDownPage = CountDown()
print('create countDown object')
# max value is 10
countDownPage.createPage()
print("create page")

• 代码输出

create countDown object
create page

本案例中使用到了多种控件，关于HaaS UI Lite的控件说明请参考链接。

更多有趣案例，请前往

HaaS开发框架HaaS积木方案，赋能生态开发者，让您快速找到自己需要的解决方案，硬件主板与外设，以及各种应用组件。https://haas.iot.aliyun.com/solution