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

2019-8-6 18:06 [复制链接] 2 455


  K6 `( E- S* v7 N% h4 Z( q

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

: m" ]) k- u  o" h, ]

前言

5 {( x4 z* U3 j

每两年一度、每届都有上万个团队参加的全国高校最大的赛事“全国大学生电子设计竞赛”即将正式拉开帷幕,在7个大的竞赛类别中,基本都会有用得上屏幕的项目,简单举例:

/ s6 S# F1 J/ \# N; N9 K) a
; `: I' _( ]7 ]* o! Z+ A1 h" D

电源类的“数控直流电源”,“直流稳压电源”:一个漂亮的控制面板是不是很吸引眼球;

" X; g, ^* A( M

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

& G  {( U$ m; Y" M% F6 n, z

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

, E$ u. K& e, o

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

, D; u1 h8 V$ n4 X1 }0 r$ j; Q
2 ]8 \1 V9 S1 J( p, ?

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

# g$ w# j' z( b9 U$ M2 s6 F

多路温度采集系统

1 Q/ \! f, q0 h" x/ n* Z; a
/ j3 F" [8 g% x$ N3 U

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

/ w; c/ E; s! N& m3 K; j
: P# i. C/ \) |5 V

串口

/ t2 j5 ^( y2 b  R  J1 [$ I

首先我们要知道这个分布式无线温度监控系统(详情请见论坛DIY板块)是多路温度传输的,通过一个主控采集多路温度信息,那么这里我们就可以设计一个多路温度的显示界面,这里我以2个为例,简单设计如下:
& C; o* N3 U9 D. q* d# M
9 [- x. ?% C6 `9 s" ~2 Q接着就可以编写代码接收串口数据(也就是接收主控发送过来的多路温度信息),处理后实时显示在label上:

* D, c. I! n' y, u1 r+ f- F6 @
var page = {  q/ d% e3 g+ X- D3 A
    temp : 0,: D0 |* N3 m8 i- h/ |
    one : 0,4 t! }, Y5 x8 A1 x5 D
    two : 0,
9 r2 {! T% q2 Z- t5 U    data:{timer1 : 0},: |, u5 c. d0 v

  w4 Q- l0 S7 Q    /* 此方法在第一次显示窗体前发生 */4 f- t! w& \4 h$ s' `
    onLoad:function(event){
$ M# n3 Z. r3 H1 E& n, \% f, G* A        var that = this; & v, x, [- h' `# B* O$ S$ ]
        this.uart = pm.openSerialPort({port : "uart0", baud : 115200}); //打开串口& D( n3 ]. ^: M; V* a% P- x* A
        this.uart.onData(function(data){                                //接收并处理串口数据
7 D0 j5 Q2 j& D$ [        that.temp = data.toString("ascii");- ], Q2 E0 m) c5 ~: H. Y
        var One = that.temp.slice(0,5);
. a0 _9 G- i  o- j        var Two = that.temp.slice(5,10);( X. N0 r5 F( o! r/ {3 T
        that.one = One.toString("ascii");5 K# [8 u( l- b0 M: p9 G2 O
        that.two = Two.toString("ascii");  h$ P+ v( l1 q% I' u
0 i# j# ^$ `6 ]: ?
        that.setData({label1 : that.one});                              //更新label显示内容
& m* p4 m' c) z/ Q, L( g        that.setData({label2 : that.two});
7 _, M; z( b* O# I2 q/ E        that.setData({page1 : {refresh : true}})                        //刷新page,实时显示; }( }' u! {% o1 p  P
        });
1 S' m/ W* D! K8 w) i0 S) H8 ?; }: x            },
( O0 E) V, L8 y! o. b- t( U( b+ h( v& p( W/ y
    /* 此方法展示窗体前发生 */
) `& Q- Q- U! L: u1 q4 W0 ]    onShow:function(event){
0 {# A2 Y: _5 M( J, u' x- \% K  ^% G  G  z( {7 V, i# A* W' i0 c# w
    },
) s" w  i& m0 L8 |0 r7 r: n5 a
6 Z7 B6 R* s8 N% p! Q    /* 此方法关闭窗体前发生 */
7 T- ^0 u1 e) ]    onExit:function(event){  _+ H7 f2 H4 g* y7 z4 ~
        this.uart.close();
) i) y: P" q( l# j6 N# Z! n7 _* g    },       
5 y0 p7 y/ b1 m' c  s  N+ |};$ D9 K7 {3 B# l9 e) V4 ~

  v- Z/ q8 j; N% `6 A; pPage(page);
/ k% e" U; p* @/ M$ q+ Y/ s3 i  o9 X  Q
page = 0;
9 U/ @$ t( u& Z9 e% U- n+ J

代码是不是很简单,只需几句JS,效果如下:; t' L7 a! _! M' b; t: K) }$ D

' \/ `1 q  G# f( t% M$ C

网络

5 ^$ O4 S* N# T7 ]; u9 b

继续补充我们的UI界面,我用一个按钮来连接WiFi,一个按钮来发布数据到MQTT服务端,WiFi连接成功会有反馈信息到label,简单设计如下:
( ?1 K. e: h! T. \# x7 e- S2 b

) v2 Y2 C2 P' F, g& X) V

代码如下:

" `* B2 ?5 w+ s. g7 o$ F
var page = {6 l) b, S# N  A* E' p7 S
0 l" S7 L% j9 @( \
    wifi : 0,
6 o3 b( B1 L* \. ?6 J7 K    mqttModule : 0,
7 _0 \2 O' i1 d* r. V3 r$ D    client : 0,( X1 o# x! y' E6 G
    temp : 0,+ `5 |! X7 D* S- F! [
    one : 0,% x2 r/ {1 c) N, L3 X3 l
    two : 0,
1 d3 |2 K8 C" j1 v: ^3 ]
2 k9 B( d$ P$ {    data:{timer1 : 0},* n7 ?" b* o! T( w' [
' K' ]- H, q  B7 {" X( m) T4 Q( x
    /* 此方法在第一次显示窗体前发生 */
$ l& e" T/ \4 |    onLoad:function(event){' p$ [3 a' y- b/ v4 ?+ v
        var that = this; $ ~7 R+ V) `$ q8 |0 |

. C; b0 H# \, H+ n$ R# E        this.mqttModule = require("mqtt");              //调用mqtt module- H' _' Y' C: c! `! T
        this.client = this.mqttModule.Client("tcp://47.93.186.194:1883");       //创建MQTT Client
  t, @, y: L; {# d) U        this.wifi = pm.createWifi();                    //打开wifi设备
0 e( J5 t' C. z0 p" q        this.uart = pm.openSerialPort({port : "uart0", baud : 115200});, E+ O+ i$ u! e) w0 i" P/ o" u8 ^, t
        this.uart.onData(function(data){
" Z9 D4 n% G  j% F! z) f        that.temp = data.toString("ascii");
* [! L; h) s4 r1 U  O        var One = that.temp.slice(0,5);% ?+ L9 g- \  ?9 r6 t2 N. i
        var Two = that.temp.slice(5,10);6 P% D' P! C/ S! L, f
        that.one = One.toString("ascii");8 e, b6 P2 }. Y0 M- Z: ?
        that.two = Two.toString("ascii");" D  W- x" c5 q& H: D  }/ a

* P/ ]  Z9 c. e: I        that.setData({label1 : that.one});! {3 E5 m- h7 I8 ?- t; A" I% |
        that.setData({label2 : that.two});
# ]0 [9 [+ ?, S  N        that.setData({page1 : {refresh : true}}) 
; f$ f7 w7 u9 \* F( I; o  d        });
7 @9 w4 E+ p8 Q$ @- N) e7 y" _; k9 h0 g5 r            },
4 N' V; o$ L! r: M# b% _$ \! m8 o, [% \
    /* 此方法展示窗体前发生 */
, h2 x$ q. c/ p    onShow:function(event){
( F/ ~& P4 B+ k2 F+ F+ p) i9 x/ H/ v0 J+ {& b
    },! ~: V4 F! I0 S/ @) i. i$ P

3 v% P- l  x# n; P$ k  [, q7 I& k    /* 此方法关闭窗体前发生 */3 A/ \9 Y) ?/ V. S3 o4 N
    onExit:function(event){
$ R. I# N/ w9 x* b, k* t( l        this.uart.close();
7 s: l9 y. X7 P3 n! G+ ?    },
  q9 N  |4 r# _
, m; \5 R+ q- ^( @3 L4 J) w    //WiFi按钮调用函数,连接WiFi3 [5 I' s0 Y4 A) k0 D2 `
    onBtn:function(event){& P, J/ Z$ k$ W, Q. A* Y' l
        console.log('hh');
  z  d2 A* L5 ^        if (this.wifi.connect({  ssid: "realthread_VIP",
. J, x& o' y) z' H: ~% ?3 Z- s                            password: "1234567o"}) == true){
5 S5 K4 K" T4 A                                this.setData({label5 : 'WiFi OK'})}3 u- c/ E3 T" L+ x
    },3 |) l7 ^# ^  E: _) {
4 ?5 G3 k6 W7 X) W
    //MQTT按钮调用函数,发布数据
5 q" v6 o9 d2 _- p- p    onBtno:function(event){; ?* t' j& {; x2 R% i7 C/ _0 a% Y
        this.client.connect();# Z# H( b4 L9 |# W5 e
        this.client.publish('TEMP1', this.one);
* d8 r1 N$ {& M+ u6 i, S7 u# {        this.client.publish('TEMP2', this.two);        , a- |- B: z$ \) j2 {9 U
    },
: Q* G/ U7 i" L* s* [. A% p8 z};8 H' X  n- j$ V% U

# k1 |2 g: X1 D7 xPage(page);0 E' S) u' l, S- e( ~  Y$ h$ j5 k
" \. e8 s4 n  }+ I: X
page = 0;4 t8 y$ _9 a6 s" Q" B1 M+ ^8 `
" x% ?7 _4 n3 r" W1 T* n* l

WiFi连接成功如下:
1 v# z, b& ?2 e: }! z9 ]4 d. k

4 i% V% b. i6 ~6 O8 h

我在电脑的mqtt软件订阅了我发布的主题,当我按下MQTT按钮时,软件正常接收到数据:
; E" _& u: H0 J% N/ K3 H8 E8 K

# t# w0 O& G. R6 E

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

2 S# F0 M$ w2 _$ u

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

6 [3 |0 b( s  O" m

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

2 Q4 z7 A3 S4 {4 E, }, D4 @
使用道具 举报 显示全部楼层 回复
最新评论 | 正序浏览
显示全部楼层 |楼层直达:
发表于 2019-8-6 18:08:07 | 显示全部楼层
好 63 N5 q$ _% H& G1 t! u, R
温度采集  四个大字很个性. ^0 ~+ g# A2 c$ h
使用道具 举报 回复
发表于 2019-8-6 18:09:49 | 显示全部楼层
MurphyZhao 发表于 2019-8-6 18:086 o' w7 @7 G- `6 C5 Q! m8 ^
好 6/ ]7 O' s" X, ^, X
温度采集  四个大字很个性
# u4 N; n5 Q* D# z) Z- [+ U, L
买买买
使用道具 举报 回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|RT-Thread开发者社区 ( 沪ICP备13014002号-1

有害信息举报电话:021-31165890 手机:18930558079

© 2006-2019 上海睿赛德电子科技有限公司

Powered by RT-Thread

快速回复 返回顶部 返回列表