1.将M5StackCore2与电脑连接

2.为M5StackCore2烧录HaaS固件

烧录的方法见下文

阿里云HaaS固件烧录至m5stack的步骤

3.使用vscode新建一个文件

新建一个vscode程序，基于helloworld

详细步骤见下文

使用vscode新建HaaS工程的基本步骤

4.编译HaaS UI源代码

import lvgl as lv
from display import LVGL as displv.init()
disp.init()cw = lv.colorwheel(lv.scr_act(), True)
cw.set_size(200, 200)
cw.center()

5.部署运行

点击部署运行，等待一小会，就可以将程序“推送”至硬件。硬件内置的HaaS固件程序，会将这些代码自动存储在FLASH内，并自动执行它。

在界面最上端显示需要选择的串口号，首先选择本地更新

然后选择串口号

首先等待硬件复位

串口信息如下：

PS D:\m5stackwork\HaaSPython> $Env:Path="C:\ProgramData\aos\miniconda3;C:\ProgramData\aos\miniconda3\Scripts;C:\ProgramData\aos\miniconda3\Library\bin;$Env:Path";python c:\Users\XXXX\.vscode\extensions\haas.haas-studio-2.1.0\asserts\mpy_tools\mpytool.py -p COM4 -f d:\m5stackwork\HaaSPython\solutions\test_lvgl -t c:\Users\86139\.vscode\extensions\haas.haas-studio-2.1.0\asserts\mpy_tools
[*] port is COM4
[*] Filename is d:\m5stackwork\HaaSPython\solutions\test_lvgl
[*] Filename is c:\Users\86139\.vscode\extensions\haas.haas-studio-2.1.0\asserts\mpy_tools
C:\Users\XXXX\AppData\Roaming\Thonny
==== wait hardware reset!!! ====

烧录的过程如下图所示

==== hardware reset OK!!! ====
=== start upload... ===
=== wait python process interrupt ===
=== start upload... ===
=== wait python process interrupt ===
upload process...7%
upload process...14%
upload process...21%
upload process...28%
upload process...35%
upload process...49%
upload process...56%
upload process...62%
upload process...76%
upload process...83%
upload process...90%
upload process...97%
upload process...98%
=== upload progress end ===
5.627927780151367
4.483625888824463
--- Miniterm on COM4 115200,8,N,1 ---
--- Quit: Ctrl+] | Menu: Ctrl+T | Help: Ctrl+T followed by Ctrl+H ---
flash_get_info no:5 offset:0x16000 size:0x1000
128: ota crc cal:0x6514 param:0xffff
ota upg_flag:0xffffcount:0 crc:0xffffboot_type:255
No OTA upgrade.
mount fs
==== python execute bootpy ====
==== python file check /data/pyamp/main.py ====
==== python execute from /data/pyamp/main.py ====
E (5575) disp_lvgl: app_init
E (5785) disp_lvgl: register touch driver
mp_task-250 2858236
MicroPython v1.17-dirty on 2022-04-29T12:56:11; ESP32 module (spiram) with ESP32
Type "help()" for more information.

烧录成功的样子是

6.如何使用

顾名思义，色轮允许用户选择一种颜色。颜色的色相、饱和度和值可以单独选择。

长按对象，色轮将更改为颜色的下一个参数（色调，饱和度或值）。双击将重置当前参数。

动画效果如视频所示。

HaaS UI色轮的长按和双击操作效果

最后讲一下啥是HaaS UI

我们可以理解它是HaaS固件的一个界面开发工具包，使用该工具包，可以用了了数行代码实现准专业水平的UI界面，这个界面相比简单的线条以及形状灯组成的简易界面更加专业。UI Lite for Python以LVGL 8.1为基础进行打造，最低只需要64k Flash和16k RAM即可运行。当前UI Lite for Python固件可运行在M5StackCore2开发板上。

啥是LVGL？

LVGL(轻巧而多功能的图形库)是一个免费的开放源代码图形库，它提供创建具有易于使用的图形元素，精美的视觉效果和低内存占用的嵌入式GUI所需的一切。LVGL的作者是来自匈牙利的Gabor Kiss-Vamosikisvegabor，LVGL用C语言编写，以实现最大的兼容性（与C ++兼容），模拟器可在没有嵌入式硬件的PC上启动嵌入式GUI设计，同时LVGL作为一个图形库，它自带着接近三十多种小工具可以供开发者使用。这些强大的构建块按钮搭配上带有非常丝滑的动画以及可以做到平滑滚动的高级图形，同时兼具着不高的配置要求以及开源属性，显著的优势使得LVGL蔚然成风，成为广大开发者在选择GUI时的第一选择。

（本段文字来自于开源轻量级显示框架LVGL简介 - 知乎 (zhihu.com)）

阿里云HaaS神奇界面（一）colorwheel - 颜色选择器相关推荐

阿里云HaaS“老板来了”用的ESP-EYE语音唤醒+人脸识别介绍
摘要:"老板来了"案例是阿里云HaaS最受欢迎的案例之一,其中用到的ESP-EYE模块是一款带有AI功能的"智能摄像头",有一些同学问我该怎么样使用它,本文就从 ...
vscode编译阿里云HaaS例程遇到fatal error: fb.h: No suchfile or directory怎么解决？
摘要:基于vscode调试HaaS例程时遇到fatal error: fb.h: No such file or directory错误时,需要在yaml文件中添加一个依赖才可以继续编译.本文介绍一下 ...
阿里云HaaS固件烧录至m5stack的步骤
摘要:本文介绍如何将HaaS固件烧录至m5stack core2硬件设备上.让低代码开发物联网应用的HaaS应用在更多的硬件上,是HaaS的初心,具体的做法是将功能强大的固件烧录至硬件设备上,通过通用 ...
仿阿里云后台管理界面模板html源码——后台
链接:http://pan.baidu.com/s/1nuH2SPj 密码:ar8o 转载于:https://www.cnblogs.com/wordblog/p/6790899.html
初学者入门阿里云haas510开板式DTU（2.0版本）--510-AS
摘要:相比于haas600,haas团队推出的haas510价格更加便宜,做到了百元以内.2.0版本比1.0版本布局更加合理,USB.用户串口和调试串口采用了不同的硬件接头,不会再发生误插的危险.阿里 ...
初学者入门阿里云Haas100开发板基本步骤
2020年9月阿里云云栖大会上发布的haas100开发板非常棒,其设计的初衷是简化开发步骤,做"积木式"的软硬件.但是在跑第一个程序的过程中,还是遇到了很多问题.本文就从零开始,一 ...
项目4---罗列并解释阿里云服务的存储产品
任务1 注册并登录阿里云官方网站首先打开阿里云的官方网页 https://www.aliyun.com/ 点击右上角的免费注册(跳转到注册页面) 可以选择支付宝或者其他方式登陆,也可以直接注册新的账 ...
用DzzOffice管理阿里云OSS
在DzzOffice分两种方式管理阿里云OSS 1.把阿里云oss作为多人或企业的共享网盘使用. 2.接入个人的阿里云oss管理,可同时管理多个bucket,多个bucket之间可以互传文件. 下面先 ...
阿里云李飞飞：今年将帮1000家企业“去O”，完成10000套传统数据仓库上云
阿里云直播回放头号云话题直播回放 "今年将帮1000家企业'去O',完成10000套传统数据仓库上云."6月9日,阿里云数据库负责人李飞飞在阿里云峰会上表示,经过多年技术演进,传 ...

阿里云HaaS神奇界面（一）colorwheel - 颜色选择器