HaaS UI 使用 树莓派 打造自己的第一个案例

Posted 2022-03-30 HaaS技术社区

HaaS UI是一个面向AIoT 领域的渐进式JS应用开发框架，以移动开发理念有效降低开发者研发AIoT带屏应用难度。全面拥抱JavaScritp开源生态，且系统服务通过统一的JSAPI，实现一端开发，多端运行策略。

下载32位Lite版本(无桌面)镜像

• 为了更好在树莓派上体验体验HaaS UI，请刷32位Lite版本(无桌面)，国内推荐去树莓派实验室下载链接
• 同时我们也提供直接下载链接

• 下载完成后开始刷机
• 格式化SD卡
  • 准备一张 16G SD 卡（官方建议大于4G），格式化 SD 卡为 FAT32 格式

配网

方式1-修改conf文件

• 用电脑打开刷好 Raspbian 系统的 SD 卡
• 在 boot 分区，也就是树莓派的 /boot 目录下新建 wpa_supplicant.conf 文件，按照下面的参考格式填入内容并保存 wpa_supplicant.conf 文件。
• 需填写ssid（wifi名）和psk（wifi密码）字段，network可配置多个，按优先级排列：

country=CN
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
 
network=
	ssid="xxx"
	psk="xxx"
	key_mgmt=WPA-PSK
	priority=1

方式2-可视化操作

• 用键盘连接树莓派，连接显示屏，登录（用户名：pi，密码：raspberry）
• 输入sudo raspi-config，进入system options->wireless lan

 

• 输入wifi名和密码

• 点击finish

• 输入sudo reboot即可重新配网

登录树莓派设备

推荐开启SSH功能，方便电脑端通过命令操作设备

SSH登录命令

ssh pi@ip地址xxx
（用户名：pi，密码：raspberry）

开启 SSH 服务

方式1-创建ssh文件

• 用电脑打开刷好 Raspbian 系统的 SD 卡
• 在 boot 分区，也就是树莓派的 /boot 目录下新建一个文件，空白的即可，文件命名为 ssh（注意要小写且不要有任何扩展名）
• 树莓派在启动之后会在检测到这个文件之后自动启用 ssh 服务
• 接下去操作见登录设备

方式2-可视化操作

• 在命令行输入：sudo raspi-config，然后回车，如下图：

• 选择第五项：“5 Interfacing Options”，回车，如下图：

• 选择第二项：“SSH”，回车，如下图：

• 选择是，回车。如下图：

• 最后点选“Finish”完成，输入sudo reboot等待重启即可，如下图：

• 接下去操作见登录设备

登录设备

• 完成开启SSH服务后，重启树莓派
• 在开机过程中会显示该设备IP (建议用笔记本记录并保存下来)，如图片所示
• 如果屏幕上没有显示IP地址，可参考无显示屏查找树莓派IP

• 然后电脑跟该树莓派在同一个路由器下，使用ssh登录，命令

ssh pi@ip地址xxx
（用户名：pi，密码：raspberry）

• **注：**如果开机没有出现ip地址，说明树莓派连接wifi失败

安装HaaS UI运行环境(基于SSH方式)

• 注：必须配网成功且已上网
• 下载install-haasui.sh脚本

wget 'https://hli.aliyuncs.com/o/config/haas-ui-sdk/install-haasui.sh'

• 修改install-haasui.sh脚本执行权限

sudo chmod a+x ./install-haasui.sh

• 执行install-haasui.sh脚本，注意要用sudo执行

sudo ./install-haasui.sh

运行HaaS UI

• 连接屏幕
• 在终端输入miniapp命令

miniapp

输入miniapp命令后，树莓派会显示如下页面： 

花屏问题

目前发现树莓派4B可能存在花屏现象，可通过注释掉系统配置文件/boot/config.txt中的dtoverlay选项来解决

# dtoverlay=vc4-fkms-v3d

接下来就可以创作自己的案例啦

智能空调案例 

gif 效果展示

示例代码下载

代码下载

智能空调展示了设备控制常用的 UI 定制方法：

1. 风速控制，是一个slider功能切换不同的选项
2. 温度控制，是两个按钮点击后切换一组数字，并且通过字体显示摄氏度符号
3. 模式控制，底部模式控制依然是一个slider切换不同选项
4. 开关浮层，是一个绝对布局带有蒙版效果的浮层，用于全局提示的交互