[柿饼派] 制作一个极简风格的桌面时钟+气象站

2019-8-30 15:51 [复制链接] 2 643

8 o& e8 q9 }1 h. b5 u/ n  h; m

[柿饼派] 制作一个极简风格的桌面时钟+气象站

- H) |' ~4 z) G+ a; E) }

什么都不要多说,直接上手设计UI界面:<br>
5 Y7 R) E' B5 Q' U0 l/ [# o# ~- N! FmXBgL6.jpg<br>
; e; {- z7 t8 A5 t* g! Y, y从图片中可以看出,这是一个可以显示实时时间,日期和城市天气信息的桌面时钟+气象站;那么应该如何获取这些信息呢?我分成两部分来做:

( y" P" z7 d! |, L4 V/ y  Q
      k1 g- B0 j5 v+ ?
  1. 首先是天气信息部分:通过HTTP request接口调用“心知天气”服务(不是打广告哈,因为我本人一直就用这个的免费版,不限制调用次数,但只有天气和温度两个数据,对我来说够了),返回的是json数据,稍稍处理一下下就可以拿到天气和温度两个数据了,再将其显示到屏幕的label上,同时根据天气情况可以显示对应的天气图标;我还在显示城市的地方加了一个textbox,这样整个气象站就更加灵活了,你可以不用在代码里把url写死,而可以随时触屏输入城市拼音更改你想显示的城市天气信息。
  2. 7 l: [9 I; Y9 h# q1 [& E
  3. 第二部分是实时时钟:原本我的想法是跟获取天气一样,找个可以获取世界时间的服务接口,这样一个HTTP request就搞定一切,但是找了一圈不是要钱就是有调用次数限制,所以我另外想了一个骚操作:在esp8266上开启sntp服务,每秒获取一次实际时间;同时开启mqtt服务,将每秒获取到的时间发布到服务器,而柿饼派这边订阅相应的主题,实时接收数据,就这样假装有sntp了;然后还是处理数据,显示。<br>
  4. 9 I0 ~4 j) R& R
$ \! c0 q; t; N* Z

上代码:

" K* K- n7 U6 s" `0 W: R+ j
var json_obj = 0;+ ^, I1 K" a% p; H. I/ u* T
var localname = 'shanghai';
* }. T, ?; H1 j$ v7 n9 b6 V3 c$ A$ p9 k
var page = {
! ^" J" n, _, S+ |( e2 Q; a+ W* x/ v2 y
    wifi : 0,
+ U/ E" [7 Q" G7 \5 a    time : 0,$ Y8 [; C5 d0 Z: G+ o3 h
    client : 0,4 i5 \/ v- a1 A( R: }) J6 Y
    data : {timer : 0},5 S. D* C1 _7 {; s- v
7 U! G4 p/ ]3 l/ u" S6 g) j
    getSkyInfo: function()5 e+ p; V9 x1 o( X0 v
    {
' J6 i9 Q* _, Y1 O* F        var that = this;7 ?3 }# a  A  i5 }5 E; Y& H
        var str =0;
6 D9 e0 ~+ L5 @) Q  N5 `" x" g8 }2 `3 J$ @; z
        var rq1 = pm.request
2 U# v' O. z+ p5 G" ~        ({
/ f3 `. J# P& Q. ]3 J            url: 'http://api.seniverse.com/v3/weather/now.json?key=6dxwrt9yzsyj3vmr&location=' + localname + '&language=zh-Hans&unit=c', 
  n' p: v  A) F# D5 N1 z' S            method : 'GET',
( E5 v1 I+ o% R% D8 d) ?            header:{9 S0 m0 X8 J3 u
                "Content-Type":"application/json"
1 W8 |+ L6 t7 i5 W% g% h. i! U. U# ~$ S: \            },
) z- X7 ?6 v6 I9 u) J            success: function(res) {    # _0 X+ c7 Y8 b3 q* N& ]/ }: p
                console.log('request success'),      9 J2 H' {% O+ R) E  u
                console.log(res.data),
/ u5 y4 ?" P# R: f" i- ?                str = res.data.toString('utf8');  
3 g9 j( v) N& F' T                json_obj=JSON.parse(str); 2 ~- }# L5 s+ J) ~5 l9 j" U% i

* _9 G  P) U3 u6 Q. y                that.setData( {local : {value : json_obj.results[0].location.name , refresh : true}}); 
9 C( b* n6 r: P: o- e* `* `                that.setData( {weather : {value : json_obj.results[0].now.text , refresh : true}}); - u& N& k' a6 T/ X
                that.setData( {temp : {value : json_obj.results[0].now.temperature , refresh : true}});% |" j  x- @/ [+ W

8 F7 t  _9 K9 g6 m& `/ j" i                switch(json_obj.results[0].now.text)# X3 N% n( s+ A
                {
) D4 ?  |. g# W/ ~                    case '晴':
" q4 m# d1 w: v, i                        that.setData({imagebox2 : 'sunny.png'});! G* s; }. G2 F. q
                        break;; |7 U+ R! O3 Q  R  }6 z
                    case '多云'||'晴间多云'||'大部多云'||'阴':
1 {% E. n. H1 T5 e                        that.setData({imagebox2 : 'cloud.png'});
. N7 }; j1 c% O9 D% ]9 S3 K7 F- F                        break;
% M0 h$ y- H- t4 E                    case '小雨'||'中雨'||'大雨'||'暴雨'||'大暴雨'||'特大暴雨':# W! L, K, `% p  m7 I
                        that.setData({imagebox2 : 'rain.png'});
9 Y8 ]+ }/ k1 I3 Z$ M  Q) A; u, P) O1 j                    default:  ~: b% {' d6 W2 T- A* F$ o) f
                        break;
1 t! y( h; e2 l) D2 C                }
* K4 n( i0 [! @7 [5 w, n8 X6 |5 L& n
            },
* Y9 }) s3 o8 L* o8 _5 e            fail: function(){
0 i/ O; q3 Q6 N  R; e                console.log('request failed')
! ^3 A* G8 ^+ h* w6 u1 @$ ?+ ?            }
) I' \" f7 M) M( ~( ]/ W( x        });
& {+ ~! E* @% }' f- P' c) }    },8 s5 O# l: ^% e

2 w: |) j# F: i0 {6 J$ Y& O    onLoad:function(event){
- `: ]. Q$ \8 o! ?  q4 f        var that = this; & D( R# n: l$ ^, {

4 J8 y+ s. W* [/ {+ P; p' w7 i        this.wifi = pm.createWifi();
. y+ h5 d+ {( a        var mqttModule = require("mqtt");6 q# V0 N" T) A* L
        this.client = mqttModule.Client("tcp://120.76.100.197:18831"); 8 E" U: b4 h# x# L

3 f, q: d3 P/ P        this.client.on("message", function(topic, message) {7 g; f( p7 g0 `; i  q+ Y! k% B
                    console.log(topic + " : " + message.toString("ascii"));  ; g) ^; |! h1 a" A* q  f$ `* A
                    that.time = message.toString("ascii");+ i5 K" D9 R6 |9 @, H

( M# p5 p" }0 ?# F$ K. ]                    var day = that.time.slice(0,3);
  v7 ~9 O  {* Y' i                    var month = that.time.slice(4,7);: Z9 Z; \' h5 ]; L9 e
                    var date = that.time.slice(8,10);* N( r( g4 F0 u
                    var year = that.time.slice(20,25);0 W% s- y5 x5 Q
6 {8 M5 d  Y- {  l) {# [
                    var clock = that.time.slice(11,13);
- a: K& f0 m, f  y" z# n                    var min = that.time.slice(14,16);. x" Q* w# I/ M: I# [2 O  S
                    var sec = that.time.slice(17,19);% B2 _' m2 v0 v  O

) I( |" D' R% C+ F/ N9 I                    that.setData({label1 : clock});
. ?) |2 R! \4 ?                    that.setData({label2 : min});% @& |6 I$ n/ W! H- s
                    that.setData({label3 : sec});
6 h2 t" P- N1 ~8 a2 i6 j; b9 L5 G7 r" y3 A/ [
                    that.setData({label8 : month});
$ g' K# P$ w. N( P, D3 L2 S; c                    that.setData({label9 : date});
2 y% w" @3 A4 d                    that.setData({label10 : year});1 M* ]0 r+ }# \( v$ y) ?) n
* v1 H8 Z) T6 q6 ~( r$ e
                    switch(day)
5 p" P8 o; c: H+ S. X, A  n- O+ B                    {% E' z: V2 a. t3 K" q1 K! _/ j8 N; R
                        case 'Sun':
9 A2 }$ V/ N5 Y: K( Z) X6 s& y: d                            that.setData({label7 : '星期日'});% F% x3 ]6 N& K% y
                            break;& ]' [/ p0 A. U; X* ]) Q! g6 n
                        case 'Mon':3 k" n) g% B  X1 a. v( a
                            that.setData({label7 : '星期一'});
3 Y; U6 J1 K. K  b4 n" s" @/ x                            break;
* G3 l6 |/ {' K5 O9 T0 x) @/ N; H                        case 'Tue':6 v$ c0 K3 P0 Q, s8 f
                            that.setData({label7 : '星期二'});
7 E( h6 B9 }  q' R" h                            break;
. @. x# w: n  }                        case 'Wed':' G1 p( i! _$ t5 J0 y, S& L4 |# j+ q
                            that.setData({label7 : '星期三'});
9 C0 h9 s3 x; L                            break;
7 s" k( m* p# t" M                        case 'Thu':
7 H- A# q* n3 S* g; s2 ~4 Y, Y                            that.setData({label7 : '星期四'});
1 c4 Y9 d) y; G8 q* P$ e) i9 ?2 ^                            break;9 [$ V/ B% z5 i: \0 O) U8 o
                        case 'Fri':
) F% T( }, M' J% E6 G7 w                            that.setData({label7 : '星期五'});
  r6 O% Q0 C; N# K! q                            break;
( D) q, g% e7 z                        case 'Sat':/ @2 |2 {" K1 w5 P
                            that.setData({label7 : '星期六'});) I; a' j" Y9 [( l; T
                            break;
, F; Y: b2 f& x/ p                    }
; N3 a( w& Y5 ?* S/ q6 O
5 O& q( [+ E2 e                    that.setData({page1 : {refresh : true}});
! a+ H7 L6 A% X3 I0 h2 K6 K                    });
3 f# J5 p" E/ X" |# U6 h- j: }
" C" B6 Z( x# M7 m        this.client.on("connect", function() {
7 i0 c3 J; C3 S' \0 m+ B8 n            console.log("the client is connected");       
/ ]  P: t  g3 h$ B. E/ U( \            });
2 h/ p! P/ a5 P  T5 m5 H( w0 ^* M9 y* S* @, ]7 y
        this.data.timer = setInterval(function()    ; j  V! }: K" ^1 a
        {
2 J! {7 s* B/ S- @            console.log("update sky info");- }/ t; F* w7 c: W' O% W$ ]
            that.getSkyInfo();
8 A5 }, h% e; i6 l8 Y        }, 1000 * 10);
" v+ P' e, R$ g0 o. S# C+ u$ D) T    },+ B5 p9 `* |. f7 Q2 H8 |9 ]

6 f; A+ ^6 u4 |# q, g$ |    /* 此方法展示窗体前发生 */
0 b1 |: h% B% l* X9 V    onShow:function(event){
; x7 }0 O" m4 R- D* d
7 G/ \- e) O+ M: x+ F% C0 X! Q    },$ M0 c6 y+ Q0 G+ {. l( \2 d
: o) r$ ]7 g3 w; V
    /* 此方法关闭窗体前发生 */
( |$ t6 j' U7 G" H( |* d- p    onExit:function(event){/ c$ |$ W9 g7 j. I# \- m6 m
        //this.uart.close();
" k2 o7 F+ O0 F9 Y1 N& V# v* u+ G    },6 H8 w, L2 I) E0 r% s, |  q. R

+ R' z8 H% Q5 l# C- P1 \9 r    onBtn:function(event){
7 v8 o0 O3 S+ J        console.log('wifi');
# W1 X7 T  T! L/ Y0 Z& G        this.wifi.connect({  ssid: "realthread_VIP",% ~) D+ W* s- L5 J+ p! }- y! r1 v; ^
                            password: "1234567o"});9 a$ D) l+ q& W3 e! v  ]! R
    },+ }/ Y; B; U$ G. W3 n  O
4 N! S4 Y4 l* _: f
    onBtn1:function(event){5 X* }$ n0 d& ~. z, t8 {8 U
        this.client.connect();    ' M; [9 Y6 o/ K( F  B! Z3 c$ m' o0 z
        this.client.subscribe("/public/TEST/Topic_1", { qos: 0 }, function() { console.log("subcribe success") }); 9 G$ p* E7 H) a( |8 h# N
    }," j0 Q3 x0 |- k4 z3 V8 K0 y( Y  g
3 A' _$ H% |( G  B# S
    onTextChange : function(event). T4 x) K8 m0 a1 f. n7 N$ ]: R
    {    
$ B  i/ `+ F; m$ H% C        localname =  event.detail.value;
  W8 y8 s' N' G& ^4 b2 o2 w    }: {9 [) q' D. t3 o% W9 Q
};  \# r/ C6 T$ H  }1 R( {6 z

7 f; O2 P" j% X* n& V1 D) c2 c+ g* dPage(page);
+ \# r6 @0 X; Y/ b4 O7 d, E  J5 v1 F" E; Q4 ]2 K- H* i/ j
page = 0;
3 J( @' Y, @, P6 _/ K7 {
# A  ~; m% Y( w) N% `, g" y5 `

效果:<br>0 E7 D& ~% R5 X( c1 Y mX4bCt.gif) e9 l2 Q; K# o* e! [. X mX5UIA.md.jpg

  N" U. K7 p: M) Y. d; l; m

东西没难度,但是还挺有意思,试试看吧~

: s% ?/ z, E  u8 v  }7 x
使用道具 举报 显示全部楼层 回复
最新评论 | 正序浏览
显示全部楼层 |楼层直达:
发表于 2019-8-30 22:00:18 | 显示全部楼层
柿饼UI挺简单,但挺有意思的吧?脱离板子,编译,下载,调试的苦恼
使用道具 举报 回复
发表于 2019-10-22 16:19:45 | 显示全部楼层
小伙汁很强
使用道具 举报 回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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

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

Powered by RT-Thread

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