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

发布于 2019-08-06 18:06:35

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

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

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

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

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

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

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

### 串口
首先我们要知道这个分布式无线温度监控系统(详情请见论坛DIY板块)是多路温度传输的,通过一个主控采集多路温度信息,那么这里我们就可以设计一个多路温度的显示界面,这里我以2个为例,简单设计如下:
![]()
接着就可以编写代码接收串口数据(也就是接收主控发送过来的多路温度信息),处理后实时显示在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)

### 网络
继续补充我们的UI界面,我用一个按钮来连接WiFi,一个按钮来发布数据到MQTT服务端,WiFi连接成功会有反馈信息到label,简单设计如下:
![](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)

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

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

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

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

查看更多

关注者
0
被浏览
1k
2 个回答
MurphyZhao
MurphyZhao 2019-08-06
好 6
温度采集 四个大字很个性
DaZhou
DaZhou 2019-08-06
MurphyZhao 发表于 2019-8-6 18:08
好 6
温度采集 四个大字很个性


买买买

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友