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

Posted HaaS技术社区

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HaaS UI 使用 树莓派 打造自己的第一个案例相关的知识,希望对你有一定的参考价值。

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. 开关浮层,是一个绝对布局带有蒙版效果的浮层,用于全局提示的交互

以上是关于HaaS UI 使用 树莓派 打造自己的第一个案例的主要内容,如果未能解决你的问题,请参考以下文章

使用树莓派打造一个私人NAS+博客(1)——网络篇

使用树莓派打造一个私人NAS+博客(2)——硬件篇

《畅玩NAS》 使用树莓派打造一个NAS服务器

从零打造树莓派智能助手——让树莓派说话

树莓派将树莓派打造成电视盒子

用树莓派打造一个家庭影院