RT-Thread-【12月原创】柿饼UI作业（三）—— 末日求生系统RT-Thread问答社区

【12月原创】柿饼UI作业（三）—— 末日求生系统

发布于 2020-12-14 13:50:50 浏览：760 订阅该版

[tocm]

# 柿饼UI学习心得分享

[基础部分视频](https://www.bilibili.com/video/BV1Up4y1q7qs?t=12)
[提高部分视频](https://www.bilibili.com/video/BV1Sy4y1S7ax)

> 为了获得更好的视觉体验可以去个人博客查看[个人博客](http://rbb996.gitee.io/blog/2020/12/14/%E6%9F%BF%E9%A5%BCUI%E5%AD%A6%E4%B9%A0%E5%BF%83%E5%BE%972/)

## 概述
介绍：
> Persimmon 是一套运行在RT-Thread嵌入式实时操作系统上的图形用户组件界面，用于提供图形界面的用户交互。
> 它采用C++语言编写，基于C语言实现的底层图形像素引擎，为上层应用提供了控件、窗口、signal/slot，手势动画等机制。 为了提高UI的开发灵活性、降低用户开发时间和成本，Persimmon 提供了所见即所得的UI设计器。用户可通过设计器轻松实现UI界面设计，并利用JavaScript脚本实现对界面逻辑的控制。
---
代码已经放到了我的 [Gitee](https://gitee.com/Rbb996/persimmon-ui-operation)上面了，需要的小伙伴可以自己去下载，欢迎交流。

---

## 作业题目
直接上图：

---
![作业需求](https://img-blog.csdnimg.cn/20201214114731318.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjEwNDMw,size_16,color_FFFFFF,t_70)

可以看出周老师为我们布置的作业很有挑战性和创新性：幽灵检测仪，心率测量仪，安全营地等等，难度比较第一次提升了不少。

## 作业思路

说一下大体的思路吧：
* 1.幽灵检测仪：我最初的思路是用画布做仪表盘，最后发现有个控件叫做"clock"所以只需要做一个时钟利用秒针的旋转进行扫描。同时如果在扫描的过程中要显示扫描的节点信息，需要借助lable控件，使用其visible属性设置显示以及不显示即可。
* 2.心率检测仪：这个部分我是参考了叫fyywhy的这位大佬，心率测量借助Canvas画布控件，在Canvas控件中，因为draw()方法只能调用一次。所以我们只能一次把路径指定后，最后调用draw()方法一次性绘制。所以先初始化一个数组，存储每个点的x,y坐标。然后每次递增数组下标。进行遍历绘制来产生动画效果。
* 3.安全营地：显示安全营地的名称、距离、安全等级，这个我们使用自定义面板调用即可，在柿饼官方的基础教程中已经有所展示。

![雷达扫描](https://img-blog.csdnimg.cn/20201214133459312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjEwNDMw,size_16,color_FFFFFF,t_70)

>雷达扫描的代码：
```javascript
onLoad: function (event) {
        var that = this
        var sec = 0;
        var count = 0;
        var is_show = 1;
        var scan_count = 0;

this.setData({
            Clock1: {
                second: { x: 0, y: 115 }
            },
            p1: { visible: false }
        })

//默认不显示
        that.setData({ p1: { visible: false } });
        that.setData({ p2: { visible: false } });
        that.setData({ p3: { visible: false } });

this.timer = setInterval(function () {
            that.setData({ Clock1: { value: sec++ } })

count++;
            if (18 < count && 1 == is_show) {
                is_show = 0;
                that.setData({ p1: { visible: true } });
                that.setData({ p2: { visible: true } });
                that.setData({ p3: { visible: true } });
            }
            if (25 < count) {
                that.setData({ p1: { visible: false } });
                that.setData({ p2: { visible: false } });
                that.setData({ p3: { visible: false } });
            }
            if (60 <= count) {
                is_show = 1;
                count = 0;
            }

if (0 == count % 60) {
                scan_count++;
                that.setData({ scan_count: { value: scan_count.toString() } });
            }

if (that.progress > 105) {
                clearInterval(that.timer);
                pm.navigateBack('scaner_page/scaner_page')
            } else {
                that.setData({ CircleProgress1: { value: that.progress } });
            }

}, 30)
    },

```
![心率测量](https://img-blog.csdnimg.cn/20201214133350253.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjEwNDMw,size_16,color_FFFFFF,t_70)

>心率测量仪Canvas的代码：
```javascript
    btn_again: function (event) {
        var that = this;
        var base = 100;
        var point_arr = [];

for (var i = 0; i < 90; i++) {
            var point = {};

point.x = i * 5;
            point.y = get_range_num(base - this.sub_data, base + this.add_data);

if (0 == i % 10) {
                point.y = get_range_num(base + this.sub_data, base + this.add_data);//30-40
            }
            if (0 == i % (10 + 1)) {
                point.y = get_range_num(base - this.add_data, base - this.sub_data);//10-20
            }
            point_arr.push(point);
        }

var start = null;
        //动画渲染调用
        function renderCallback(timestamp) {
            if (!start)
                start = timestamp;
            var progress = (timestamp - start) / 4000;
            if (progress <= 0.999) {
                move(progress);
            }

if (0.999 < progress) {
                start = timestamp;
                move(progress);
            }

if (progress < 1) {
                requestAnimationFrame(renderCallback);
            }
        }
        requestAnimationFrame(renderCallback); // start first frame    
    },

btn_add: function (event) {
        this.add_data += 20;
        this.sub_data -= 10;
    },

btn_sub: function (event) {
        if (this.add_data <= 0) {
            console.log("slow！！");
            this.add_data = 0;
            this.sub_data = 0;
        } else {
            this.add_data -= 20;
            this.sub_data += 10;
        }
    },        
```

---

大体上的需求就是这么些，这次作业真的极大程度上锻炼了我的js水平以及如何展示更加美观的UI视觉效果，很感谢RTT的柿饼UI平台以JS代码的方式去让我们更加方便的设计嵌入式设备UI界面。题目和源码都放在git上面了，需要的可以自行下载。如果有错误的地方欢迎指正，共同进步！谢谢。