【PersimmonUI柿饼学习营】+ A Byte of China + 网络/串口/天气预报

2018-10-7 20:06 [复制链接] 2 1005

最后一周作业:基于网络和串口的天气预报, F7 ?" J' K8 k
实现以下板块:
" X) F6 g9 @& T( T! C: Q        1,日历板块:要求从网上获取当天各类实时信息,如天气,黄历信息等,显示并记录下来。8 p! c+ s- b2 W8 h8 h
        2,分析板块:根据日历板块记录的数据信息,使用画布制作出数据分析图(如柱状图等)。! L7 C$ E9 l% e9 H2 E& p9 r
        3,能通过串口输入指定日期(一天,或者连续几天),并从串口返回出相应的数据。
# F% D7 c& T# Z  k8 P# L- [; b$ L5 l0 X% P0 a" E% W2 d/ I& T; n5 j
开发环境
; m# X2 x$ K9 @) X- R' e& [RTT + PerimmonUI + 野火RT1052Mini + 5寸800*480触屏- L% ~7 Y3 E* G
TIM截图20181007194820.png
: `- O- u0 M5 f/ j+ p( E
& [) z, |& V4 T! J4 f/ f开发过程
- |0 `* I: ~: l. ^. |" l: j; i9 j本次作业的关键是网络和串口,本次终于可以从UI接触到硬件交互,作业可以分成3部分:1、网络;2、数据展示;3串口。1、网络的重点在于使用网络API接口获取需要的数据,通过GET方法我们获取到JSON格式的天气预报,然后对格式进行处理,获得我们需要的对应数据(高低温,天气,风速等)
# Z1 h% P, q, M! H) }' ^0 U2、数据展示使用画布来实现,灵感来自折线图,两条折现展示近三天的高低温,三天中的天气通过背景色来区别(晴天为蓝色,多云为灰色,其他为绿色),同时利用定时器回调函数,可以实现折线上升的动画效果;关于城市选择我们通过card控件+城市图片来实现,通过card值来切换城市,进而改变天气预报API地址以获取对应城市的天气,当然获取到的当天天气会通过label展示在预报区之上,整体布局如下。
2 Y& @+ `& M! Y! @7 t TIM截图20181007194621.png - V4 D. a+ j; I( K
3、串口需要解决的问题是对接收到的报文进行组帧在分组,串口询问天气的固定格式为“yyyy-mm-dd n” (yyyy-mm-dd为起始日期,n为1~3,表示需要的天数,因天气预报API限制,只能获取当前三天的数据,如起始日期为明天,需要三天,我们只能获得两天的数据)。获得固定格式的串口数据请求,再将相应的数据返回到串口,如果数据格式有误,会提示正确格式模板。  o, X/ Z# n) T7 t; F

* _$ {; Q; o& T* g- K具体请详见JS源码' ^$ ~7 h2 v/ J6 S5 |" [
app.js源码,主要实现uart串口应用
  1. var strcon_flg = 0;# c  Z) y# }& p% R
  2. var str1
    ' m( e6 I! m+ ^7 t
  3. var str21 `* f4 P! a. M9 w
  4. var app = {
    $ W! x3 C( ~1 o) E# m
  5.     page : "page1/page1",
    4 [, N+ j+ @' E
  6. 9 U5 o) `) P: S: k; @# i! S6 [3 B
  7.     onLaunch: function (event)  //app加载回调函数4 t, X4 D8 @0 Y+ p4 c2 z; k5 m  N
  8.     {
    . |7 l3 T, e& J/ }
  9.         console.log('app onLaunch');7 }: v6 i( G* x9 [
  10.     $ y1 P7 x0 s8 n! u+ w8 ~
  11.         uart = pm.openSerialPort({device: "uart5"});    //打开串口设备uart5
    3 k/ I0 M$ U- ?4 W  F) L
  12.         if (uart)
    # f7 l9 @* `: w
  13.         {- w. X( c# j( i; ?% o
  14.             console.log('pm.openSerialPort OK');
    . Y, b. D6 z( J4 a; `
  15.             uart.write(Buffer("Please input the date: e.g '2018-10-01 3' which means 3 days data from 2018-10-01 ", 'ascii'));     //串口发送数据,一个ascii字符串数据BUFF
    $ }+ R6 W5 |- ]( }0 I0 w$ ]
  16.             uart.onData(this.onUart, this);     //设置串口接收函数为 onUart5 r; {% D* R( z8 s
  17.         }- x/ F0 d3 v  x1 C3 }" B: f
  18.     },8 u9 X+ D& c# _

  19. 0 @7 T$ m/ o; q. ^' N8 X
  20.     onUart : function (data)    //串口接收数据回调函数,data 为串口数据' ^; Y& Z5 F! d  y- q1 [+ ^! ~
  21.     {0 F' b( ]' G8 z% w. Y. S" [
  22.         if(strcon_flg == 0)
    9 p3 Z1 S4 Y1 ]3 V' x6 ?/ _
  23.         {
    / c: N7 {- h2 m2 x! ]! ~
  24.             strcon_flg = 1;
    , a) p  i8 Z/ Z9 M/ K
  25.             str1 = data.toString('ascii')( f7 k3 r( O8 Z
  26.             return;
    . i6 P7 ~2 ]* J2 u  ?
  27.         }
    1 p" x, [  F$ A4 R- ?) O& C  z
  28.         else
    ( o- L  C5 d# i( p
  29.         {
    ' j9 c( F" r) V
  30.             str2 = data.toString('ascii');8 ]+ D8 ^7 K! t; m: {$ E. i
  31.             strcon_flg = 0;
    $ X2 V1 R. d* ~+ x! q
  32.         }8 z- o& \0 v# h% g; B
  33.         var str3 = str1.concat(str2)
    3 r* K5 z3 o2 _( ^7 _
  34.         console.log(str3)
    # z: ^0 W: z, a% |
  35.         str3 = str3.substring(str3.indexOf("2"))
    ) y  D1 b4 _. I$ V$ j6 x
  36.         console.log(str3)
    1 R  ~1 [) Q  C9 r
  37.         var udate = str3.split(" ")0 w1 E9 Q, a  o# \; Z3 T0 M, N- i* m
  38.         console.log(udate)
    ' M/ X+ Y4 b" i
  39.         var x = udate[1]
    ' m' t" g% A0 c& t6 {& B
  40.         for(var i = 0; i < 3; i++)% t1 N- L5 i2 Y+ _$ t$ I+ ?! I
  41.         {
    4 |  ]1 U5 r3 N3 V! a. A8 V
  42.             console.log(udate[0],' vs ',date[i])
    $ d( D7 \6 J; M) s
  43.             console.log(x)
    " C0 L" b7 t) A: W9 e4 n+ V1 M
  44.             if(udate[0] == date[i])
    ; ]2 C  A6 T. `, B, a$ K
  45.                 break& y; a4 o+ U' b1 X+ L5 m
  46.         }
    5 V9 o0 s9 O1 E* P
  47.         if((i >= 3)||(parseInt(x) > 3))
    * Y3 D' _$ R% K6 H
  48.         {4 R( K2 [( Z: d) c6 @" ^& [
  49.             var str_err = "Invalid date(recent 3 days) or format(2018-10-01 3) "3 r6 T9 Y3 ?( E8 l* o) A/ s6 s' _
  50.             console.log(str_err)
    2 n3 r' p1 Z# P8 D
  51.             uart.write(Buffer(str_err, 'ascii'));
    ' b# j) r! N; S* q3 C  g9 M
  52.         }$ A5 K( h% P# N
  53.         else * ^$ W9 Y) e- W9 b8 T
  54.         {
    ! k; ]' x: l. S1 R, O
  55.             var n = parseInt(x);3 d/ f( ?; r. i
  56.             if(i+n > 3)6 o3 M' R( M7 H! F' s
  57.             {
    ) l8 p4 ~2 ~5 C/ D. m3 T
  58.                n = 3;  C5 H) {5 d! e$ O$ F
  59.             }+ o+ [- M7 K; ]+ B! X
  60.             else9 K+ P1 h, p/ d; U
  61.             {
    9 k* B% K  {% G2 ^5 V
  62.                n = i+n: H' r$ |& M# O) I; s& C* }
  63.             }
    ) `/ z) }1 o2 O* H2 T$ I0 R
  64.             for(var j = i; j < n; j++)
    " p8 ?/ S; ~4 g: u- [1 v& l
  65.             {$ ~+ N2 T2 }' m. X9 Q- J
  66.                 var strj = date[j]+ '  High Temperature: '+ high1[j] + '   Low Temperature:' + low1[j] + '    \r\n';
    2 k$ v# J. t' Q  W$ E7 {. y5 R0 \
  67.                 console.log(strj)
    9 z% I* }4 o8 q4 d' Y, U
  68.                 uart.write(Buffer(strj, 'ascii'));" j1 A7 w/ O7 b' y/ v
  69.             }
    ! Y: |% k3 @$ Y
  70.         }
    % \  @7 m# t$ Z- z( `' I$ a
  71.     }
    + c2 G( A' M. b' D
  72. };
    ' D) F( T0 J' p! d8 r% n

  73. ( r) P2 k/ ~/ Y1 U
  74. App(app);
复制代码

5 o  B& u# f: M* Epage1.js源码,主要实现网络和显示1 U  J0 w, B# z  {8 G! z
  1. var date = ['2018-09-29','2018-09-30','2018-10-01']
    # B5 F7 e7 Z# I4 t) a- W% I
  2. var CITIES = ['beijing','shanghai','guangzhou','nanjing','new'], y+ ^$ ~9 z4 ^: t; p
  3. var City_name = 'Beijing'
    " l0 [4 `5 c  Z) {6 N1 [
  4. var code = ['Sunny','Cloudy','Snowy']
    % B; V! b7 c: L4 z! {# p7 E
  5. var CODE = ['Sunny','Cloudy','Snowy']
    ) p' z) ?) m# V" r
  6. var DIRECTION = ['N','E','W','S','NE','NW','SE','SW']& {  |. U: ?4 r( b" ]! {
  7. var wind_s = ['20','10','30']0 W( e' P  Q, O
  8. var wind_l = ['2','1','3']9 W3 ^/ j' f4 U
  9. var wind_d = ['W','E','N'], U# W. Q/ {# T4 ~
  10. var high = [0, 0, 0]
    0 ]7 j5 w9 G- z, }
  11. var low  = [0, 0, 0]
    * x0 x  |0 M" a; [( n
  12. var high1 = [25, 26, 24]
    & }1 ]4 `1 [1 T- c* X, I, H
  13. var low1  = [15, 10, 17]
    5 l7 D- n. n. E
  14. / G. U5 c; O2 f3 n) G$ ~
  15. var DISTANCE = 110# q* y+ P- d5 T' a+ \' i- u

  16. $ [/ J2 D+ i* ~8 Z  a' I' z
  17. var jsons = '{"results":[{"location":{"id":"WX4FBXXFKE4F","name":"Beijing","country":"CN","path":"Beijing,Beijing,China","timezone":"Asia/Shanghai","timezone_offset":"+08:00"},"daily":[{"date":"2018-09-30","text_day":"Cloudy","code_day":"4","text_night":"Cloudy","code_night":"4","high":"19","low":"13","precip":"","wind_direction":"NW","wind_direction_degree":"315","wind_speed":"20","wind_scale":"4"},{"date":"2018-10-01","text_day":"Sunny","code_day":"0","text_night":"Sunny","code_night":"1","high":"24","low":"12","precip":"","wind_direction":"N","wind_direction_degree":"0","wind_speed":"20","wind_scale":"4"},{"date":"2018-10-02","text_day":"Sunny","code_day":"0","text_night":"Sunny","code_night":"1","high":"24","low":"11","precip":"","wind_direction":"N","wind_direction_degree":"0","wind_speed":"10","wind_scale":"2"}],"last_update":"2018-09-30T11:00:00+08:00"}]}'& a% s; @4 d. i2 s9 A3 w+ [
  18. var json_obj = JSON.parse(jsons)
    # R9 z: g, @- S5 N( I  j

  19. 6 c8 h) m$ e- r: R+ N! L3 v0 A6 w# \
  20. var s1 = 'http://api.seniverse.com/v3/weather/daily.json?key=hfvxxp7oq0w4dmso&location='
    * G" i" R3 X2 i8 w% E* C6 e, H  Z
  21. var city = 'beijing'
    / T+ j. g+ ?2 I( h
  22. var s2 = '&language=en&unit=c&start='
    $ @7 f8 \) N  a1 e; K# M# ~5 g
  23. var day = '0'
    ' J1 G2 ]: K2 y, N+ U# X9 p
  24. var s3 = '&days=3'0 X- g' Z7 f6 G) n7 Z
  25. var url_w = s1+city+s2+day+s38 j9 u" z8 n: o$ f  {& {

  26. ' B- K% h4 }3 E0 h. Z1 K. l
  27. var ctx_1 = ' Temp:'
    3 ~3 M1 F1 ?' x
  28. var ctx_2 = '~'
    ' b: }8 j! G- a$ H1 O: X
  29. var ctx_3 = ' Wind Speed:'
    / D" c% K9 H! n8 D/ p1 |
  30. var ctx_4 = ' Wind Direction:'
    ' n( S& M0 W" d: [! M
  31. var ctx_5 = ' Wind Scale: '5 R* x! M9 Q  w& }
  32. var ctx_0 = ' Date:'
    9 J# x. I- X$ u1 L8 k% r
  33. var i = 0;
    * \. _% c7 n6 R, A5 P  |7 w
  34. var j = 0;3 V! [8 [' _: R4 F, |' E
  35. var dly = 195;) p/ n0 B  k+ |- C  F
  36. var ani_flg = 0;
    # E- I6 r" y) h8 z0 t- _* C
  37. 8 R% D: G! o( m0 `9 @/ I3 b
  38. var page = {/ l0 q) k, O% r% J
  39. & I* X' m- t! G' ^0 `( a: a
  40.     dataa : {timer1 : 0},( v0 N3 M9 l8 u* R' p
  41.     & |, j* k+ z+ ^8 Z2 W. X3 t7 H
  42.     onLoad : function()9 n, @2 W, M, G3 ^& R, J9 B
  43.     {/ d( H) U; C. _# ]8 d4 N
  44.         var thiz = this;
    + |( m( C% [7 `) s6 Y
  45. 3 L( H, n4 H6 G3 s- x* Q
  46.         // Register a timer callback function( \5 H% X1 T# q5 |/ W% |- f7 P' D
  47.         this.dataa.timer1 = setInterval(function()
    : @' c; A  [1 ?- N9 Z4 n$ u
  48.         {  
    . i3 ^! ~& ~7 V. P
  49.             if((ani_flg & 0x0F) == 0)  \5 B/ M" M' g7 s' B
  50.             {3 G+ N: _- Z& {( w* z
  51.                 for(var k = 0; k < high.length; k++)
    2 X% H2 ~- ^$ n# c
  52.                 {
    0 G6 b( h0 c% |1 ^8 z( i
  53.                     if(high[k] <  high1[k]){1 H& w$ [' ~$ u) g' S' }% Z  G
  54.                         high[k] += Math.round(high1[k]/5)
    # n% C, {; S4 a' h/ j% v5 D: X
  55.                     }
    6 ]% I/ a5 Z( K) J3 L+ ^+ x; P
  56.                     else0 B7 q, G% u& r
  57.                     {; ^5 T; \% S+ _7 j2 n8 Q* I* H4 U
  58.                         ani_flg |= 0x10;
      A0 i; z1 X0 }' I; Q/ n
  59.                     }& q4 g  N" C! V' \* ]& i8 E% z
  60.                     if(low[k] < low1[k]){
    4 R( u$ Z- l7 ]
  61.                         low[k]  += Math.round(low1[k]/5)
    ) h- C6 E9 }. n, E% q" i
  62.                     }
    $ f' J+ U  g, t! g. |1 r$ D
  63.                     else0 z! j6 ^! g( q& W$ z1 x( W
  64.                     {& e3 f+ R, s& r! c$ [) \
  65.                         ani_flg |= 0x20;
    7 H0 O" k  G" U/ X/ m, B, p
  66.                     }' B7 Z( l& b0 `' K( E
  67.                 }
    - H& d  ]; h$ e" F: x
  68.                         
    $ I  @0 T- O& p6 c) v
  69.                 thiz.display();
    8 I  ^3 B. P' G$ n' k) F6 r
  70.                 if((ani_flg & 0xF0) == 0x30)- Y# j  u9 w# ~2 K/ s
  71.                 {
    3 B* e# A  @9 k$ n
  72.                     ani_flg = 0xFF;" q( j8 W; n% P& x& ^7 H( {1 c
  73.                 }
    1 _" J& v7 F  C0 F6 N
  74.             }' h  k" W6 \/ \! Q. p4 x- @( u& p
  75.             if(dly >= 200)
    1 a. K' C( [$ D# _0 `; n
  76.             {
    ' d7 \' i4 X# Y; O2 n
  77.                 //thiz.onUpdate()
    5 X0 A" p9 n* I& {1 f
  78.                 thiz.getSkyInfo()
    4 X, H4 i7 T9 j$ W) V9 v. k0 U
  79.                 dly = 0;
    4 M5 v( y5 {; @$ J- v- d
  80.             }- P! C  p. H. `0 f) O
  81.             dly++  C, P* S7 ~" I* X" [. J! \* a9 c9 L
  82.         }, 50);
    . \8 E" {8 J. }* z# ^! n" h2 ~% Z
  83.         this.getSkyInfo();
    1 _( x3 Z  M% i- Z
  84.         this.display()
    . x( M  _# H4 W  a/ [
  85.         //this.onUpdate()
    8 D" M& {& p5 r) O, `! Z
  86.     },
    : j3 _* N  ~0 M$ c- N
  87.    
    9 S  f# z, X/ M. ^# `
  88.     getRndW : function()
    . M# b& h( B% [7 j
  89.     {
    . [& P7 ~6 t" k1 n
  90.         for(var k = 0; k < high.length; k++)4 Z4 N8 W! b" N
  91.         {
    & E2 k' p1 j* L% u
  92.             high[k] = 0;
    2 S+ o. F% ]0 m- I
  93.             low[k]  = 0;
    5 T: B* ~8 d/ V$ P/ H1 J0 K
  94.             high1[k] = Math.floor(Math.random()*5+20)9 a3 X# W9 a: l, U
  95.             low1[k]  = Math.floor(Math.random()*5+10)
    ' x$ d' c7 h7 T- K
  96.             code[k]  = CODE[Math.floor(Math.random()*3)]! X" x4 B4 k  A0 {. y  S
  97.             wind_s[k]  = Math.floor(Math.random()*20)
    8 X% H, W: O# _* |4 [2 D! d
  98.             wind_l[k]  = Math.floor(Math.random()*10)- u, s- h/ h1 o6 ~* a! r) t8 |
  99.             wind_d[k]  = DIRECTION[Math.floor(Math.random()*8)]
    8 P1 t, O- i/ v1 b1 O% m
  100.             var ctx  = 'Zootopia'+' '+code[0]+ctx_1+low1[0]+ctx_2+high1[0]+ctx_0+date[0]/ d: x; y; n8 N3 |4 v1 @  v
  101.             var ctxw = ctx_3+wind_s[0]+ctx_4+wind_d[0]+ctx_5+wind_l[0]/ b# b# V7 v# b7 R. u# x
  102.             this.setData({label1: { value : ctx , refresh : true}});
    * f. X/ v4 v* P& V) c# h. C9 {7 V" i
  103.             this.setData({label2: { value : ctxw, refresh : true}});
    * D# L  }/ p4 D$ T* k* j
  104.             ani_flg = 0;/ ]& W( l( f# c# l
  105.         }0 R" ]3 k# p! Q) ]* @
  106.     },
    3 |5 v1 d- _* `4 ^5 G% |& I

  107. : q' _/ Y7 _$ Q
  108.     display : function()
    " e6 _$ v% J  L6 p0 a$ z8 u5 ?- n, {  j
  109.     {9 o! S8 O9 U& ?/ \. ^& F8 M. n
  110.         var context = pm.createCanvasContext('Canvas1', this)           //获取画布对象
    - Z  h# ~6 u% L1 g" ^
  111. 0 c. J* ], I6 ~8 [) ~. ~7 Z, v
  112.          if (context)
    ! R$ }# l% S. z3 F5 c" ^: _5 O
  113.         {& N% Z. M; @7 s  a2 h
  114.             var max = 36;
    3 c* l2 }% @1 M% ^% q0 `

  115.   Y3 p$ p/ n! b  m& m4 q* H  t4 w
  116.             for(var j = 0; j < 3; j++)
    # Z3 H4 ^$ `( Y4 H0 T: p
  117.             {& w) c0 e0 Y6 q( ?3 X# L8 P$ @
  118.                 grd = context.createLinearGradient(0, 0, 0, 480)
    3 f; b0 U: e( [$ J1 z6 k
  119.                 grd.addColorStop(0, 'black')
    ( m4 A+ h/ P- t) G. z! `
  120.                 if(code[j] == 'Sunny')
    # w# I8 I, ?/ r7 w
  121.                 {
    # h0 ]5 b' ^( Y; t
  122.                     grd.addColorStop(1, '#FF9090FF')
    , x7 d! ^( R- H
  123.                 }else if(code[j] == 'Cloudy')
    # f$ J8 M$ q( g8 w
  124.                 {
    5 U+ ?2 z3 {; u1 I7 E6 n# O( _) A
  125.                     grd.addColorStop(1, 'GRAY')
    $ F# s' J  O. x4 _( A( j, l! \
  126.                 }else
    , g; }! [- d$ b
  127.                 {
    4 Z- r) Y+ }5 h& l( O& A: [
  128.                     grd.addColorStop(1, '#FFB9FFB9')! L; A; E, x" a+ N- o+ u% ?0 b
  129.                 }
    ) {- _; ~( s: D" o% j5 h# _$ ~
  130.                 // Fill with gradient' Q  {8 b( J' t* o
  131.                 context.setFillStyle(grd)  t" V( \# |2 t: s
  132.                 context.fillRect(60 + j * DISTANCE, 30, DISTANCE , 350)
    ; t# t" b7 d( I4 E( B" u
  133.             }
      g4 v: m1 z+ H. c

  134. ! ~3 p! `6 Y, |! c" X- z. V$ ?; H1 D
  135.             max = Math.floor(max / 6);4 v, z  L: M0 i5 `2 j6 D$ l
  136. 9 b1 F6 }4 ?  k; ^
  137.             /* 画浅灰色竖线竖线 */
    - T& _* C* `' y4 h% k+ f
  138.             context.beginPath();                //开启新路径
    3 x6 d5 J2 _1 g
  139.             context.setStrokeStyle('#C0C0C0')   //设置边框颜色
    5 h8 N7 W+ [( i& L5 P

  140. 8 _8 t) _8 v- s; I
  141.             for( index = 1; index <= 3; index++ )
    4 s$ Y8 e( E5 U7 c
  142.             {8 V  o8 J( a# p- ?
  143.                 var y = 380;" h, H; n+ p* F9 ]7 @  p
  144.                 context.moveTo(60 + index * DISTANCE, y)                   //线条起点) M1 v/ w. S( \
  145.                 context.lineTo(60 + index * DISTANCE, 30)    //线条终点) t- h0 ~$ b. \( ~* R
  146.             }
    0 J# O8 i. n) z( Z" N$ ?9 Y, X* y

  147. 6 \- A) ], `# W# o4 Q
  148.             context.stroke()        //画线. r9 d# p/ `+ d
  149.             context.closePath();    //关闭当前路径0 Z" F' g" R5 ~; Q
  150. # B" W$ _4 K, z9 O7 c
  151.             /* 画横纵坐标刻度 */
    5 d1 o4 v$ M+ e# E
  152.             context.beginPath();            //开启新路径6 k$ a4 N! \  g) k
  153.             context.setStrokeStyle('black') //设置边框颜色" q8 d$ \, b% O9 Y5 N

  154. % \- y3 m; U' L1 i' V
  155.             context.fillText('Temperature', 5, 5)    //绘制文字,坐标(5,5)' I$ k4 r6 m' W, W- d

  156. 5 I+ N9 O( i6 J" I
  157.             context.setTextBaseline('middle')         //设置文本绘制纵坐标对齐方式
    ! a( B! \/ I( `
  158.             for( index = 0; index < 7; index++ )
    : u: I3 \+ m2 L5 i- b
  159.             {4 c: F% N8 [4 R* G' @" K/ f  z
  160.                 var y = 30 + index * 50;
    % Y$ g  L$ ^; \) F: G
  161.                 var value = max * (7 - index);
    5 w% u3 O3 T( x- F$ q8 }( [
  162.                 /*纵坐标刻度*// o6 C2 c( a/ U
  163.                 context.moveTo(55, y)
    1 |( E8 w  e7 H8 ^
  164.                 context.lineTo(60, y); Y' e; Q4 E' m6 v7 J, L
  165.                 context.fillText(value.toString(), 20, y)5 K+ M+ i/ D* G
  166.             }- }: N2 {5 u7 ]7 |) B
  167. ) S1 s; L. o7 g
  168.             context.moveTo(55, 30 + index * 50)
    1 q* R0 U  Z5 D) o3 I3 ~
  169.             context.lineTo(60, 30 + index * 50)
    ' O" s9 W  X6 a9 f
  170.             context.fillText('0', 20, 30 + index * 50)" i( r, W8 P* v$ }# x9 C
  171. ' U0 G0 W# B- d% ]2 v/ z) n4 [: o, Y
  172.             context.moveTo(60, 30)
    & w  B( [+ N2 i$ `9 m
  173.             context.lineTo(60, 30 + index * 50)
    ( u$ z2 b, Y+ }2 N9 R, h  A

  174. ( m* W3 Z! U3 a6 V
  175.             context.moveTo(60, 30 + index * 50)
    8 d- K" @6 q! |
  176.             context.lineTo(60 + 3 * DISTANCE, 30 + index * 50)
    1 A, ?; S# t1 W) l2 N" B

  177. ; K# ]* m( {- N8 L
  178.             context.setTextAlign('center')  //设置文本绘制横坐标对齐方式1 Y7 H6 v/ q) a* V' V5 H
  179. / i9 H; n8 K1 {& Q5 r$ ~
  180.             for( index = 1; index <= 3; index++ )
    + y% u! Q# I5 R  |7 f; A" q  }
  181.             {
    * b+ ^7 g; \, u
  182.                 var x = 60 + (index-0.5) * DISTANCE;" ^6 V0 }* _8 e$ _6 P: d- y: G* U" \
  183.                 /*横坐标刻度*/- j; s( ?: ^! D
  184.                 context.moveTo(x, 380)+ j$ c) d8 f/ y
  185.                 context.lineTo(x, 385)
    4 ~+ y+ E3 e- ]/ o
  186.                 context.fillText(date[index-1], x, 395)
    1 _: _% y, K( R$ N+ k' X
  187.             }, y1 W: k8 Y) g% m) J# U1 R
  188. 5 x( T( k! I0 ?( S1 M* X( _
  189.             context.setTextAlign('left')    //设置文本绘制横坐标对齐方式1 X6 A- }. O5 ], Y" J! K, ]+ ^& l
  190.             context.fillText('Date', 60 + (low.length) * DISTANCE + 10 , 395)' r6 X) h. U1 R+ B* v
  191.             context.stroke()! `0 _0 T8 L* c0 w- G% I% W  \
  192.             context.closePath();
    2 B- v7 O  j7 R1 A3 S/ Y
  193.             
    * V2 V7 h5 k- z: v
  194.             
    . a2 ^" C+ {% e; K: F4 |

  195. 6 ]( ]* L" F) J/ s7 p2 `& f3 N4 v
  196.             /* High temp */
    ! y* J' o/ X* f- @: @' K! B
  197.             var x = 60 + DISTANCE/2;! j2 Y. ?, T7 [
  198.             context.moveTo(x, 380)
    9 U4 }/ m: _8 _( b  f6 M: o& Z, w4 a
  199.             context.beginPath();
    " s! L9 |" o8 {! o3 b) W" z
  200.             context.setLineCap('round')2 A" q! B5 ~/ C& o3 @: S: `
  201.             context.setStrokeStyle('#FFFF6969'): ~$ Q' v; d( E$ q
  202.             context.setLineWidth(4)        //设置线条宽度          * S/ m' {, _7 ^. z. p+ U* W6 p9 k
  203.             for( index = 0; index < high.length; index++ )
    7 y0 ^3 P5 N+ s% l! Y& f5 t) O, A
  204.             {
    4 H1 k4 z/ t' q# `* C/ _, N
  205.                 var x = 60 + DISTANCE/2 + index * DISTANCE;
    5 p4 U" b& {/ n
  206.                 var y = high[index] * 350 / (max * 7)  [* x, X) f- Z" v# y
  207.                 context.lineTo(x, 380 - y)
    3 x% ^* X* t) H/ L4 L7 ~4 E6 }6 H
  208.                 context.arc(x, 380 - y, 3, 0, 2 * Math.PI)
    5 Y, {6 n: ?# [9 u( R5 A/ j$ a" u, c
  209.             }) Q; i1 |) g# q: U9 s$ X9 U
  210.             context.stroke()
    & d- w4 \7 ]( o, ~+ u* p
  211.             context.closePath();! j3 X% `# m6 C" x# Y$ u2 j
  212.             
    $ s# A9 c4 M( I: q* U
  213.             
    4 B) J7 g2 n) N. _7 ^( A, M
  214.             
    ; W3 c  {5 T7 e
  215.             /* Low temp */
    + q! E% |# j7 x  Q
  216.             var x = 60 + DISTANCE;
    : T) @4 I1 R! U0 c: I
  217.             context.moveTo(x, 380)" K$ G5 N/ @4 O! E- O
  218.             context.beginPath();8 U6 L) m  A: D
  219.             context.setStrokeStyle('#FF6969FF')  u1 \+ S# B1 S, t9 w" a8 ~
  220.             for( index = 0; index < low.length; index++ )+ q+ k  a% l; f
  221.             {
    8 b- g( |& V5 z) l
  222.                 var x = 60 + DISTANCE/2 + index * DISTANCE;
    & V9 o3 ]( c8 k) `
  223.                 var y = low[index] * 350 / (max * 7)5 A2 o; k2 G# L9 m: H* A" s. y- e
  224.                 context.lineTo(x, 380 - y)
    ' a* i" s0 T5 y, f$ c( C7 K
  225.                 context.arc(x, 380 - y, 3, 0, 2 * Math.PI)
    , N% B9 v/ R( p# B$ T
  226.             }
    % }6 q8 V+ p# s( g! n7 F' Q" s, a
  227.             context.stroke()& Y" o' c) m! U; U
  228.             context.closePath();
    3 }; i! `/ o0 N5 z9 L
  229.             
    / V/ N1 U& p4 W! d, x
  230.             // Value( @' ]9 t& _8 R2 e2 W
  231.             context.setTextAlign('center')
    ; {( r: {9 C# V; S" Z
  232.             context.setFillStyle('white')+ a  V- p0 n& k6 _; d
  233.             for( index = 0; index < 3; index++ )7 k/ [" ~( s# a5 P: H
  234.             {+ R6 M* f7 h0 D- P: r
  235.                 var x = 60 + DISTANCE/2 + index * DISTANCE;9 Z$ _4 }% R8 |" t
  236.                 var y = high[index] * 350 / (max * 7)- K, T. h/ y* ~9 p( N' ^, F
  237.                 context.fillText(high[index].toString(), x, 365-y)
    1 K. J- ^; B- y; q. t& A
  238.                
    ( g4 |) P8 {  Q4 K
  239.                 var x = 60 + DISTANCE/2 + index * DISTANCE;
    , D9 Q+ w" ^7 t. l* H3 i2 S2 x# |. R
  240.                 var y = low[index] * 350 / (max * 7)
    ) @$ H) A; p+ }: @8 y3 R! W  R
  241.                 context.fillText(low[index].toString(), x, 395-y)
    ' a8 h0 S" {2 K3 j
  242.                 3 s: G% |: a1 J7 q# X
  243.                 var x = 60 + DISTANCE/2 + index * DISTANCE;0 U# |& u/ y! a  a( l8 a- N
  244.                 context.fillText(code[index], x, 50)# g0 d% ?( A: l6 o
  245.             }) R. W8 b0 G& e4 X
  246.             ( u9 S+ _! ^9 }/ C0 b
  247.             context.draw();
    ; s. A( Z6 r5 w0 z9 \, ~2 }
  248.                        
    ) }) U  X6 l) V: f3 P; |
  249.         }
    " k% q% f  e$ D# Z' }* D2 U7 Q& Q8 b
  250.     },
      l& V3 x( T* b/ v% \5 ^
  251.     onUpdate : function(){                //根据json_obj中的数据,来设定对应Label的值- I% v! w) \; u9 _$ Y: u, J
  252.         for(var i = 0; i < 3; i++){4 [7 l1 |; ^+ N/ I3 ^+ Z, d3 w* B
  253.             high[i]   = 0;6 @& X4 r( q  K& k
  254.             low[i]    = 0;
    & {4 r5 k" F9 a6 V  t, t
  255.             City_name = json_obj.results[0].location.name
      a8 e2 M. T" K( H
  256.             date[i]   = json_obj.results[0].daily[i].date7 H( {1 U6 q6 B7 d' ~; K4 s
  257.             code[i]   = json_obj.results[0].daily[i].text_day, x: ?1 f6 D0 f* w2 M9 M
  258.             high1[i]  = json_obj.results[0].daily[i].high# L# Y; [9 k& x8 l1 C- a5 h3 }
  259.             low1[i]   = json_obj.results[0].daily[i].low
    & h2 F( e) J# J/ S* v( w
  260.             wind_d[i] = json_obj.results[0].daily[i].wind_direction6 n0 @' r0 z( y9 E& m; q: j& l
  261.             wind_s[i] = json_obj.results[0].daily[i].wind_speed3 U+ A$ v' J' T5 O- P
  262.             wind_l[i] = json_obj.results[0].daily[i].wind_scale/ q+ z/ V! r* V3 m* ]
  263.             var ctx  = City_name+' '+code[0]+ctx_1+low1[0]+ctx_2+high1[0]+ctx_0+date[0]6 X( Q" m4 y/ R+ l! r
  264.             var ctxw = ctx_3+wind_s[0]+ctx_4+wind_d[0]+ctx_5+wind_l[0]
    2 w/ h' k2 U- u. q& K$ u( p' m
  265.             this.setData({label1: { value : ctx , refresh : true}});
    3 x, _% y7 z' J- C. b
  266.             this.setData({label2: { value : ctxw, refresh : true}});& E- @# E" o& ]* z
  267.             ani_flg = 0;
    8 B- [+ X+ Z, g# P
  268.         }
    8 k, C. S# l& a% v5 d
  269.         },
    - J2 v2 c$ {7 ?4 W$ B3 M) R
  270.    
    + y7 _# P, f" ]# _% n+ A
  271.     getSkyInfo: function(e) {
    + A. H+ D$ U6 W5 s- T; P) ?* C) N
  272.         var thiz = this;
    $ C$ E# d- I  l5 l/ n4 t0 n
  273.         var str =0;2 t1 [7 O% u* h% E# e
  274.         url_w = s1+city+s2+day+s30 ], R6 x9 T0 y
  275.         console.log(url_w)
    : c# x* I& p6 C; x' s- M
  276.         var rq1 = pm.request({/ ]9 }" c/ q$ ~2 S' X
  277.             url: url_w, // 获取天气预报的API
    ( i6 w4 f4 ?$ F$ d( A6 s4 t
  278.                 method : 'GET',
    6 W1 U# z1 G* y& b7 M: H
  279.                 header:{; w0 T6 C# U6 a7 D
  280.                         "Content-Type":"application/json"
    * u" o2 v# x; n  G- u% i% r
  281.                 },, o6 U& b* E. d, Q) P9 b
  282.                 success: function(res) {                //与开发者服务器连接成功后,执行的回调函数
    6 R- }/ W5 w, E) d7 G7 Q8 f& I
  283.                         str = res.data.toString('utf8');        // 把data从Buffer转成string
      ^0 f  I5 q0 S5 n
  284.                         json_obj=JSON.parse(str);                        //把JSON格式的string转成JSON对象,以便获取数据" X/ g% i& o; z: z% U1 w+ o# S  O" [
  285.                         thiz.onUpdate();        //更新各个控件的值' i, G2 y) \. P3 G: K3 b% ?
  286.                 },
    ; C+ e( U. n5 h. C$ [3 _" A
  287.                 fail: function(){
    % x, J3 `( U. J' B5 b2 q! D
  288.                         console.log('request failed')
    6 H" b! [' G) q2 L
  289.                 }
    / W2 }+ P& Z% |9 R, `
  290.                 });
    4 A! |8 _+ s/ W
  291.         },
    / }8 Y6 {. o+ o, K* q2 P
  292.         # y' E6 M5 H% ^+ x! i; i' U
  293.        
    4 H7 h% p( L3 v/ N
  294.         onChange : function(e){* G9 W' K+ i. J( v
  295.             console.log(e.detail.value), h  ?0 Y" ?) Y3 L/ g+ A
  296.             console.log(CITIES[e.detail.value])
    ; n0 H1 i3 _# L; _
  297.             dly = 0;. g; @1 h1 S8 e' q! x2 |/ @3 l+ O
  298.             ; I* c1 A0 l0 @; B* c
  299.             if(CITIES[e.detail.value] == 'new')" z( v0 r* x- t8 f( V( p
  300.         {
    5 s7 t1 [8 |: P6 V
  301.             this.getRndW()+ }9 l; f5 m2 @0 u3 r& `  R% Q' p
  302.         }% N) G* L6 N4 b* o+ A" d! L
  303.         else
    2 z' A; _* s" {* M0 f, o
  304.         {
    , |- e9 q2 F1 a9 T/ k/ b. P
  305.             city = CITIES[e.detail.value]  v: W6 f/ i' H2 C( r
  306.             //this.onUpdate()% a4 |. a3 l5 @( q6 L. U
  307.             this.getSkyInfo()7 t: S! x" ]7 _) n1 K
  308.         }, `+ \/ D- a! H+ ]8 I4 g
  309.         }
    5 P% _. G  m; S+ {& A1 b2 `
  310. };) ~0 m- Q; p$ d3 m0 }
  311.   `% [. l2 B" X  I/ Y3 H
  312. Page(page);; Y7 K8 T& a5 w8 j' i4 l- j
复制代码

4 z% ^# O+ C' q
2 B3 g7 g9 p) h- D' k效果展示) q7 }5 K* V4 d: _6 t
仿真的界面效果
. _9 _: U6 o. H2 a, \$ t+ g wf.gif ! ^. {1 s4 d" F+ H  `5 a
板子上跑的效果- Y" X5 w5 W# `0 r9 k+ x9 e( ~+ \
l5-v.gif
! v- {3 x5 c7 H- @- H串口效果
2 T+ H6 f) y$ N: ~' o: w$ [$ o l5-2.gif
: m$ E4 q8 S, ?4 b# ]4 q6 O" H0 F2 ~2 M3 w7 o
1 A  q  {' H' k! j; Z! A$ r
总结  a( z, `# N  x% B
本周作业有了硬件的内容,更加嵌入式了,具体功能细节还有待研究。
2 R2 o) y) }3 h# ?! b( B/ n8 E网络功能很方便,使用内置的http的get方法可以很轻松获取网络资源,小伙伴们可以结合《网络编程学习营》的内容进一步探索更有趣更实用的功能。3 d/ Z/ v2 R; F( O/ t$ e
串口的使用也很简单,还考虑到串口数据与各个page的交互,这个很不错。2 k: P) U* M, y4 A( d$ v; p
我的js编程还不是很熟,还是用面向过程的方式编写代码,相信开发js的同学来使用柿饼的话应该能写出更高效优美的代码。- x7 M4 s- Y4 B6 d' Q+ t9 L
: V3 E: w: O& o; G4 A' O, C. P
这是最后一课,用一句话总结:柿饼通过所见即所得的开发方式和便捷易学的JS脚本语言编程模式颠覆了UI的开发!
' j* |0 w+ G. ~' c: }: ]整过学习过程的代码我都有放到个人的github中,欢迎一起交流 https://github.com/ianhom/JavaSc ... ter/app/PersimmonUI
) F% R7 x, j! A/ K% [" ]6 u+ A' A熟练使用好柿饼,还有其他效果哦,下图是我使用柿饼快速制作的冒泡排序动图,是不是很方便呢。, _. o$ g; c; K  X$ ~% L
后面柿饼正式发布后,期待更多的小伙伴们优秀作品!+ |0 ~/ r5 @, u% Q
感谢柿饼,感谢RT-Thread!!( d4 t% H9 L; t+ _0 R0 v
RT-Thread总会给我们相聚的机会,让我们下次再见吧~
) x; i& l/ c$ O; B1 J! S* v; V# d  c bubblesort.gif & Y( n" C( O' x8 m0 r/ }( ?7 `  ?
% w+ U1 l' Q2 d3 J6 }
柿饼工程. X5 n% \3 {' P
hw5-3-4.rar (4.16 MB, 下载次数: 241)
使用道具 举报 显示全部楼层 回复
最新评论 | 正序浏览
显示全部楼层 |楼层直达:
发表于 2018-10-7 20:21:08 | 显示全部楼层
ABC大佬厉害!而且这次又是第一个交作业!
使用道具 举报 回复
发表于 2018-10-10 14:24:31 | 显示全部楼层
顶一下,看着很流畅,而且这个排序很精髓
使用道具 举报 回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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

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

Powered by RT-Thread

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