返回发烧友论坛
发 帖  

[文章]【HarmonyOS HiSpark AI Camera试用连载 】智能家用仪表盘开发-其一

知之为知之zhl
2022-04-30 11:49:03
阅读量0
试用烧录鸿蒙测试HarmonyOS
0
0
# 智能家用仪表盘-其一

> 鸿蒙 的 arkUI 框架可以做到一端开发，多端部属，开发效率很高，这里使用其来开发一款智能家用仪表盘应用。

## 开发环境参考

* 系统 : Ubuntu18.04 LTS（虚拟机）、Windows10 21H2
* llvm : 10.0.1
* gn : 1717
* hc-gen : 0.65
* ninja : 1.10.1
* devicetool-linux-tool : 3.0.0.300
* vscode : 1.62.2
* DevEco Device Tool：3.0 Beta 2
* 系统镜像 : hispark_taurus.tar.gz （v3.1-Release）

## 鸿蒙 3.1 系统配置流程

* 下载下来的 hispark_taurus.tar.gz 看起来是代码镜像编译完的 out/hispark_taurus 目录中内容，所以应该可以直接替换原有的 3.0 镜像，就不用配置 HiTool来下载了。
* 直接把 hispark_taurus.tar.gz 复制到 之前 3.0 代码编译完的 out/hispark_taurus 目录中 （其实不知道这样做对不对，但是 15G 的代码虚拟机扛不住）

config3_1.jpg


* 可以看到 kernel 编译完的输出在 out/hispark_taurus/ipcamera_hispark_taurus/OHOS_Image.bin 后面的 rootfs 和 userfs 在同一目录

config3_1_.jpg


* 把 hispark_taurus.tar.gz 直接解压到 out/hispark_taurus/ipcamera_hispark_taurus/ 中
* 直接烧录到开发板

## HAP 开发 -- 顶部 Tab 栏开发

* 测试界面采用 flex 自适应布局

* hml 代码

  1. <div class="container">
  2. <stack class="container">
  3.      <stack style="width: 960px;height: 480px;">
  4. <!--         上边栏-->
  5.          <div style="height: 15%;width: 100%;top: 0%;align-items: center; background-color: #3a3d46;">
  6.              <div style="padding: 0 0px; height: 100%;width: 100%;justify-content: space-between;display: flex; ">
  7.                  <text if="{{this.select(0)}}"  class="tab_activate">Home</text>
  8.                  <text if="{{!this.select(0)}}" class="tab_normal" on:click="goto(0)">Home</text>
  9.                  <text if="{{this.select(1)}}"  class="tab_activate">Light</text>
  10.                  <text if="{{!this.select(1)}}" class="tab_normal" on:click="goto(1)">Light</text>
  11.                  <text if="{{this.select(2)}}"  class="tab_activate">ToDo</text>
  12.                  <text if="{{!this.select(2)}}" class="tab_normal" on:click="goto(2)">ToDo</text>
  13.                  <text if="{{this.select(3)}}"  class="tab_activate">Other</text>
  14.                  <text if="{{!this.select(3)}}" class="tab_normal" on:click="goto(3)">Other</text>
  15. <!--                 <text class="tab_normal" on:click="exit()">Exit</text>-->
  16.                  <div class="tab_normal">
  17.                      <image class="wifi-btn"  src="/common/icon_wifi_on.png"></image>
  18.                      <text class="tab_normal" style="width: 80%; margin: 10px 0px;">12:00</text>
  19.                  </div>
  20.              </div>
  21.          </div>
  22.          <swiper class="swiper" index="{{index}}" on:change="change">

  24.              <div class="swiperitem" style="background-color: red;">

  26.              </div>
  27.              <div class="swiperitem" style="background-color: blue;">

  29.              </div>
  30.              <div class="swiperitem" style="background-color: green;">
  31.              </div>
  32.              <div class="swiperitem" style="background-color: white;">

  34.              </div>

  36.          </swiper>
  37.      </stack>
  38. </stack>
  39. </div>
复制代码

* CSS 代码
  1. .container {
  2.     display: flex;
  3. /* 让一行中的元素平均分配宽度 */
  4.     justify-content: space-around;
  5.     align-items: center;
  6. /* 元素在一行放不下时自动换行 */
  7.     flex-wrap: wrap;
  8.     left: 0px;
  9.     top: 0px;
  10.     width: 960px;
  11.     height: 480px;
  12.     background-color: #18181a;
  13. }

  15. .swiper {
  16.     top: 15%;
  17.     width: 100%;
  18.     height: 90%;
  19.     justify-content: center;
  20. }

  22. .swiperitem {
  23.     width: 100%;
  24.     height: 100%;
  25. /*    display: flex;*/
  26.     align-items: flex-start;
  27.     justify-content: center;
  28. /*    left: 2.5%;*/
  29. /*    top: 2.5%;*/
  30.     background-color: #18181a;
  31. }

  33. .show-state {
  34. /*    width: 106px;*/
  35. /*    height: 60px;*/
  36.     font-size: 24px;
  37.     text-align: center;
  38. /*    color: #ffffff;*/
  39. }

  41. .tab_normal {
  42. /*    background-color: deepskyblue;*/
  43.     height: 100%;
  44.     width: 20%;
  45.     font-size: 32px;
  46.     text-align: center;
  47.     color: white;
  48. }

  50. .tab_activate {
  51.     background-color: #455152;
  52.     height: 100%;
  53.     width: 20%;
  54.     text-align: center;
  55.     font-size: 32px;
  56. }

  58. .wifi-btn {
  59.     width: 38px;
  60.     height: 38px;
  61.     margin: 15px 0px;
  62.     margin-left: 20px;
  63. }

  65. .img_btn{
  66.     width: 200px;
  67.     height: 96px;
  68.     flex-direction: row;/*    justify-content: center;*/
  69.     align-items: center;
  70.     background-color: #3a3d46;

  72.     border-radius: 24px;
  73.     margin: 10px;
  74. }

  76. .img_btn_text {
  77.     width: 106px;
  78.     height: 60px;
  79.     font-size: 24px;
  80.     text-align: center;
  81.     color: #ffffff;
  82. }

  84. .switch-image {
  85.     width: 60px;
  86.     height: 36px;
  87. /*    margin-left: 18px;*/
  88. /*    margin-top: 9px;*/
  89. /*    margin-left: 260px;!*    background-color: #ff0000;*!*/
  90. }
复制代码

* 编译 hap 包

hapbuild.jpg



* 从鸿蒙 3.1 编译结果文件中找 dev_tools 的 bm 工具

bm3_1.jpg


* 打开右边的模拟器查看

tab.gif


* SD插在开发板上、串口连接到开发板
* 取消证书验证关闭、打开 debug 模式

  1. cd sdcard
  2. ./bm set -d enable
  3. ./bm set -s disable
  4. ./bm install -p pomin.hap
复制代码

hapinstall3_1.jpg


* 打开看看

视频在下方

* 忘记写退出按键了，就直接 task 命令和 kill 命令终止线程吧

kill.jpg


举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友