[助力电赛]柿饼派串口，网络使用教程

发布于 2019-08-06 18:06:35 浏览：2437 订阅该版

[tocm]

# [助力电赛]柿饼派串口，网络使用教程

## 前言 
每两年一度、每届都有上万个团队参加的全国高校最大的赛事“全国大学生电子设计竞赛”即将正式拉开帷幕，在7个大的竞赛类别中，基本都会有用得上屏幕的项目，简单举例： 
> 电源类的“数控直流电源”，“直流稳压电源”：一个漂亮的控制面板是不是很吸引眼球；

> 信号源类的“波形发生器”：画好波形定是你重要的工作；

> 仪表仪器类：一个酷炫的仪表盘将会是你加分的点；

> 数据采集与处理类：采集到的数据如何优雅的展示出来，首选自然是屏幕了。

那么此时如何优雅的开发出一个美腻的显示界面或是交互界面，大概会成为专注电子技术的大佬们比较头疼的地方。不过，只要你用上了柿饼UI，所有的问题都将不再是问题；参赛的同学可以利用柿饼UI的可视化辅助开发工具Persimmon UI Builder直接进行页面设计，无需再用繁琐的代码去实现控件的排列布局、图片的引用等操作。与此同时我们还有丰富的动效支持，即拿即用。有效的减小了交互界面设计的难度，让你的参赛作品更加分。

## 多路温度采集系统
> 说柿饼UI好，那总得亲眼看看才知道。没问题，下面我就结合RT-Thread-智能家居DIY活动-分布式无线温度监控系统，来说说柿饼UI的开发以及串口，网络的使用。

### 串口
首先我们要知道这个分布式无线温度监控系统（详情请见论坛DIY板块）是多路温度传输的，通过一个主控采集多路温度信息，那么这里我们就可以设计一个多路温度的显示界面，这里我以2个为例，简单设计如下：
![]([http://ww1.sinaimg.cn/large/93ef9e7bly1g5q2svwpubj20dg07owh3.jpg](http://ww1.sinaimg.cn/large/93ef9e7bly1g5q2svwpubj20dg07owh3.jpg))
接着就可以编写代码接收串口数据（也就是接收主控发送过来的多路温度信息），处理后实时显示在label上：

```C
var page = {
    temp : 0,
    one : 0,
    two : 0,
    data:{timer1 : 0},

/* 此方法在第一次显示窗体前发生 */
    onLoad:function(event){
        var that = this; 
        this.uart = pm.openSerialPort({port : "uart0", baud : 115200}); //打开串口
        this.uart.onData(function(data){                                //接收并处理串口数据
        that.temp = data.toString("ascii");
        var One = that.temp.slice(0,5);
        var Two = that.temp.slice(5,10);
        that.one = One.toString("ascii");
        that.two = Two.toString("ascii");

that.setData({label1 : that.one});                              //更新label显示内容
        that.setData({label2 : that.two});
        that.setData({page1 : {refresh : true}})                        //刷新page，实时显示
        });
            },

/* 此方法展示窗体前发生 */
    onShow:function(event){

},

/* 此方法关闭窗体前发生 */
    onExit:function(event){
        this.uart.close();
    },       
};

Page(page);

page = 0;
```
代码是不是很简单，只需几句JS,效果如下:
![]([http://ww1.sinaimg.cn/large/93ef9e7bly1g5q36bwys2j23402c0x6q.jpg](http://ww1.sinaimg.cn/large/93ef9e7bly1g5q36bwys2j23402c0x6q.jpg))

### 网络 
继续补充我们的UI界面，我用一个按钮来连接WiFi，一个按钮来发布数据到MQTT服务端，WiFi连接成功会有反馈信息到label，简单设计如下：
![]([http://ww1.sinaimg.cn/large/93ef9e7bly1g5q3bbr2fzj20dc07jwgu.jpg](http://ww1.sinaimg.cn/large/93ef9e7bly1g5q3bbr2fzj20dc07jwgu.jpg))

代码如下:

```C
var page = {

wifi : 0,
    mqttModule : 0,
    client : 0,
    temp : 0,
    one : 0,
    two : 0,

data:{timer1 : 0},

/* 此方法在第一次显示窗体前发生 */
    onLoad:function(event){
        var that = this;

this.mqttModule = require("mqtt");              //调用mqtt module
        this.client = this.mqttModule.Client("tcp://47.93.186.194:1883");       //创建MQTT Client
        this.wifi = pm.createWifi();                    //打开wifi设备
        this.uart = pm.openSerialPort({port : "uart0", baud : 115200});
        this.uart.onData(function(data){
        that.temp = data.toString("ascii");
        var One = that.temp.slice(0,5);
        var Two = that.temp.slice(5,10);
        that.one = One.toString("ascii");
        that.two = Two.toString("ascii");

that.setData({label1 : that.one});
        that.setData({label2 : that.two});
        that.setData({page1 : {refresh : true}}) 
        });
            },

/* 此方法展示窗体前发生 */
    onShow:function(event){

},

/* 此方法关闭窗体前发生 */
    onExit:function(event){
        this.uart.close();
    },

//WiFi按钮调用函数，连接WiFi
    onBtn:function(event){
        console.log('hh');
        if (this.wifi.connect({  ssid: "realthread_VIP",
                            password: "1234567o"}) == true){
                                this.setData({label5 : 'WiFi OK'})}
    },

//MQTT按钮调用函数，发布数据
    onBtno:function(event){
        this.client.connect();
        this.client.publish('TEMP1', this.one);
        this.client.publish('TEMP2', this.two);        
    },
};

Page(page);

page = 0;

```
WiFi连接成功如下：
![]([http://ww1.sinaimg.cn/large/93ef9e7bly1g5q3nl0fs9j23402c01l1.jpg](http://ww1.sinaimg.cn/large/93ef9e7bly1g5q3nl0fs9j23402c01l1.jpg))

我在电脑的mqtt软件订阅了我发布的主题，当我按下MQTT按钮时，软件正常接收到数据：
![]([http://ww1.sinaimg.cn/large/93ef9e7bly1g5q3qkf6j6j20ry0f3aag.jpg](http://ww1.sinaimg.cn/large/93ef9e7bly1g5q3qkf6j6j20ry0f3aag.jpg))

看，仅仅增加10行左右的代码，就完成了wifi的连接，以及数据发布到MQTT服务端，是不是很快捷很方便。

由于时间原因，UI方面我并没有设计的很好看，但依然不妨碍柿饼的强大，有能力的同学可以充分发挥自己的想象力，设计出动感酷炫的UI界面,例如根据温度改变温度计的高度和颜色等等，再搭配柿饼的一系列外设，相信那一定是个出色的作品。

好了，我的简单分享就到这里了，希望能给参加电赛的同学带去一些新的想法，然后用上柿饼UI，完成你与众不同的作品。