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

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

通过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

————————————————

版权声明:本文为CSDN博主「HaaS技术社区」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/HaaSTech/article/details/123735110

相关文章
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
379 4
|
传感器 存储 人工智能
用通义灵码2.5打造智能倒计时日历:从零开始的Python开发体验
本文记录了使用通义灵码2.5开发倒计时日历工具的全过程,展现了其智能体模式带来的高效协作体验。从项目构思到功能实现,通义灵码不仅提供了代码生成与补全,还通过自主决策分解需求、优化界面样式,并集成MCP工具扩展功能。其记忆能力让开发流程更连贯,显著提升效率。最终成果具备事件管理、天气预报等功能,界面简洁美观。实践证明,通义灵码正从代码补全工具进化为真正的智能开发伙伴。
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
543 1
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1101 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
10月前
|
Linux Go iOS开发
IDA 9.2 发布:Golang 改进、新 UI 组件、类型解析等
IDA Pro 9.2 (macOS, Linux, Windows) - 强大的反汇编程序、反编译器和多功能调试器
1547 0
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
913 12
|
移动开发 开发者
仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑
仓颉开发语言即将发布一周年,虽已有知名App应用,但教程稀缺且官网文档不够完善。幽蓝君推出系列教程,从零开始系统讲解移动开发。本期介绍常用UI组件:按钮、文本、图片、输入框与搜索框的使用方法及注意事项,帮助开发者快速上手仓颉语言。
|
存储 小程序 Python
农历节日倒计时:基于Python的公历与农历日期转换及节日查询小程序
### 农历节日倒计时:基于Python的公历与农历日期转换及节日查询小程序 该程序通过`lunardate`库实现公历与农历的日期转换,支持闰月和跨年处理,用户输入农历节日名称后,可准确计算距离该节日还有多少天。功能包括农历节日查询、倒计时计算等。欢迎使用! (239字符)
1331 86
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
807 38
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
883 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)

热门文章

最新文章

推荐镜像

更多