智能门禁上也能有如此漂亮的图形界面

曾经终败给现在 2023-01-24 02:21 8阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70][]

前几天介绍 [新一代智能门禁解决方案][Link 1]，他不但有硬核的高级，还有漂亮的图形界面，这就是今天要介绍的主角HaaS UI。

# **智能****门禁产品简介** #

**HaaS UI 又落地在一个新的产品上，这就是人脸识别的智能门禁一体机。**该人脸识别一体机是一款5寸红外双目室外人脸识别设备。该设备具备5寸显示屏，支持5万人脸底库的**端上存储**和**离线精准识别，**支持刷卡功能，搭载业界顶级人脸识别算法，可实现快速人脸识别与通行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 1][]

## **产品特性** ##

该产品支持人脸识别、逆光识别、刷卡IC卡、自动解锁、访客管理、活体防伪等功能。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 2][]

## **应用场景** ##

该产品支持人脸识别管控门禁、办公人脸考勤、语音播报等场景，主要应用于平安社区、企事业单位、政府大楼、商业写字楼、工业园区、学校、金融网点、监狱等室内外场所。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 3][]

# **HaaS UI****简介** #

## **产生背景** ##

在IoT低端带屏场景，需要开发偏复杂的UI界面是比较困难的，业界常用的UI方案如LittleVGL，适合开发一些偏简单偏静态的控制面板类界面，较难满足偏复杂的运营需求，并且应用开发都以C&C++为主，后续的升级迭代或者UI改版会有很大的成本和困难。为解决这一问题，**阿里云智能IoT着手打造了IoT低端带屏场景的HaaS UI解决方案，让IoT设备能够运行JS编写的小程序**（同时也支持Native C++开发)，并支持部署在AliOS Things、RTOS、Linux等操作系统上。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 4][]

## **框架介绍** ##

HaaS UI框架是一套用在HaaS平台上的轻量级应用开发框架,是AliOS Things系统上推荐的应用&显示框架,目前是以JS开发为主、C/C++开发为辅。HaaS UI的整体框架由图形渲染引擎、小程序内核和Vue应用框架三部分组成。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 5][]

## **组件支持** ##

HaaS UI支持五类组件，分别为：内置组件、基础组件、表单组件、反馈组件和展示组件，开发者可以直接方便地使用这些组件。

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#d9d9d9;"> 内置组件 </td> 
 <td style="border-color:#d9d9d9;"> 基础组件 </td> 
 <td style="border-color:#d9d9d9;"> 表单组件 </td> 
 <td style="border-color:#d9d9d9;"> 反馈组件 </td> 
 <td style="border-color:#d9d9d9;"> 展示组件 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> div </td> 
 <td> layout </td> 
 <td> checkbox </td> 
 <td> popup </td> 
 <td> progress </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> scroller </td> 
 <td> icon </td> 
 <td> radio </td> 
 <td> dialog </td> 
 <td> qrcode </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> text </td> 
 <td> button </td> 
 <td> seekbar </td> 
 <td> - </td> 
 <td> - </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> image </td> 
 <td> toast </td> 
 <td> switch </td> 
 <td> - </td> 
 <td> - </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> slider </td> 
 <td> - </td> 
 <td> - </td> 
 <td> - </td> 
 <td> - </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> canvas </td> 
 <td> - </td> 
 <td> - </td> 
 <td> - </td> 
 <td> - </td> 
 </tr> 
 </tbody> 
</table>

## **样式支持** ##

HaaS UI的页面布局的盒模型基于 [CSS 盒模型][CSS]，每个组件元素都可视作一个盒子，并支持Flexbox布局模型。HaaS UI支持CSS的一些通用样式，涵盖了文本样式、CSS单位、CSS动画和Less扩展。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 6][]

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#d9d9d9;"> 通用样式 </td> 
 <td style="border-color:#d9d9d9;"> 文本样式 </td> 
 <td style="border-color:#d9d9d9;"> CSS单位 </td> 
 <td style="border-color:#d9d9d9;"> CSS动画 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> width </td> 
 <td> color </td> 
 <td> RGB，RGBA，red </td> 
 <td> animation-name </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> height </td> 
 <td> font-size </td> 
 <td> #f00，#ff0000 </td> 
 <td> animation-duration </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> padding </td> 
 <td> font-style </td> 
 <td> px </td> 
 <td> animation-timing-function </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> border </td> 
 <td> font-weight </td> 
 <td> % </td> 
 <td> animation-delay </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> margin </td> 
 <td> text-decoration </td> 
 <td> rpx </td> 
 <td> animation-iteration-count </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> flexbox </td> 
 <td> text-align </td> 
 <td> vw </td> 
 <td> animation-direction </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> transition </td> 
 <td> font-family </td> 
 <td> vh </td> 
 <td> animation-fill-mode </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> - </td> 
 <td> text-overflow </td> 
 <td> opacity </td> 
 <td> - </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> - </td> 
 <td> lines </td> 
 <td> lines </td> 
 <td> - </td> 
 </tr> 
 <tr> 
 <td style="border-color:#d9d9d9;"> - </td> 
 <td> line-height </td> 
 <td> flex </td> 
 <td> - </td> 
 </tr> 
 </tbody> 
</table>

## **远程调试** ##

HaaS UI支持在远程设备上通过WebSocket进行真机调试，可以像浏览器一样查修改页面上的元素，包括DOM标签以及css样式的查看，还有相关盒模型的图形信息。也可以在页面选择一个元素来审查和查看它的相关信息，当我们在浏览器页面下点击某个DOM元素时，设备上相应的DOM节点也会变为高亮状态，方便调试。

![20210716151937720.png][]

## **方案特性** ##

*  HaaS UI推荐JS/CSS开发应用，**JS的前端框架为Vue(v2.6.12)**，实现了W3C标准的标签和样式子集.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 7][]

*  支持纯C/C++应用开发，方便传统嵌入式开发者进行开发.
 *  **支持应用在线热更新，可以通过HaaS云服务对开发的应用进行升级.**

![20210716152036241.png][]

**后续，阿里云IoT HaaS团队将继续在更多场景进行探索，在更多场景中将HaaS UI方案落地。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70]: /images/20221004/0ec7e6e9e02e4b7e8294cc523d653a7d.png
[Link 1]: https://blog.csdn.net/HaaSTech/article/details/118694640
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 1]: /images/20221004/aea3baef57be4d4489a3d8311eaf2b44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 2]: /images/20221004/e8b58885242a4b3d98b6cfe2df938378.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 3]: /images/20221004/35183f434b3b4cfc978ed466a7af6340.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 4]: /images/20221004/e5c2bda754914f30a161914b89bf377e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 5]: /images/20221004/e1b005bd5e9f4730909586f9b1576330.png
[CSS]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model?spm=a2c7j.-zh-docs-styles-common-styles.0.0.3f9560fdvh2hYM
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 6]: /images/20221004/a87962dd95344dd294fac02aba6aa4cd.png
[20210716151937720.png]: /images/20221004/5d6e4c3627a546a5af2b1be06c41b866.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 7]: /images/20221004/fd6f15c863b5468ea6b60512bf3bdc00.png
[20210716152036241.png]: /images/20221004/ea23131be0854d09865ae593457e26d3.png