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

2019-8-30 15:51 [复制链接] 3 1464

1 c4 {: r0 @4 K. S* h' t5 @6 i

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

* r3 l) e. F" Z' F8 K5 M

什么都不要多说,直接上手设计UI界面:<br>3 s% m0 [5 }' `. x8 x mXBgL6.jpg<br>
0 y& [; h' d1 R从图片中可以看出,这是一个可以显示实时时间,日期和城市天气信息的桌面时钟+气象站;那么应该如何获取这些信息呢?我分成两部分来做:

; ^5 y& ?9 D# n
    - x/ o2 W# i0 C; y
  1. 首先是天气信息部分:通过HTTP request接口调用“心知天气”服务(不是打广告哈,因为我本人一直就用这个的免费版,不限制调用次数,但只有天气和温度两个数据,对我来说够了),返回的是json数据,稍稍处理一下下就可以拿到天气和温度两个数据了,再将其显示到屏幕的label上,同时根据天气情况可以显示对应的天气图标;我还在显示城市的地方加了一个textbox,这样整个气象站就更加灵活了,你可以不用在代码里把url写死,而可以随时触屏输入城市拼音更改你想显示的城市天气信息。
  2. 7 K$ v6 X+ }3 [' ^
  3. 第二部分是实时时钟:原本我的想法是跟获取天气一样,找个可以获取世界时间的服务接口,这样一个HTTP request就搞定一切,但是找了一圈不是要钱就是有调用次数限制,所以我另外想了一个骚操作:在esp8266上开启sntp服务,每秒获取一次实际时间;同时开启mqtt服务,将每秒获取到的时间发布到服务器,而柿饼派这边订阅相应的主题,实时接收数据,就这样假装有sntp了;然后还是处理数据,显示。<br>
  4. - r* m$ T; }8 q( g- W3 ^
1 l# O/ H/ F6 v4 ~2 m2 `- n6 x6 x

上代码:

9 m. {2 \; @1 U; |$ r  w+ `1 z
var json_obj = 0;
* [- Z# f; X; Z- t1 A% qvar localname = 'shanghai';2 t  F4 }; `, E- Z6 ?
: m( W) x) k0 ~: p$ x6 W
var page = {
& f9 n$ Q. [. d! t8 |, x' d- a& \7 {, I
    wifi : 0,( B: {9 f4 W& p$ t) {: F4 U
    time : 0,
+ S2 l  g3 J3 m, T$ m    client : 0,
4 X8 L3 B2 M, w    data : {timer : 0},# ?4 ~# i3 x7 q6 I6 _& {* ]

1 g/ y) p! p% a0 ^    getSkyInfo: function()/ I4 _& {2 Y9 q
    {
# d6 j5 M  p8 G' t" a# O' h        var that = this;) R$ ~, y* S: ~) g3 `5 S: O
        var str =0;
" T9 r# q+ ~9 E' a/ W- h5 y4 n$ C5 O! _; p" y
        var rq1 = pm.request
) D+ D" B, T7 @, |: G        ({0 T' h) `1 Z* [/ c- H  I- m4 O: g
            url: 'http://api.seniverse.com/v3/weather/now.json?key=6dxwrt9yzsyj3vmr&location=' + localname + '&language=zh-Hans&unit=c', 
6 U4 C3 X- b7 g* Y            method : 'GET',% f8 u+ p7 g7 o: R
            header:{+ v2 k9 s: @9 d: E0 K; y
                "Content-Type":"application/json"
0 S* R5 N" t: F# b8 k1 B6 _            },
- V9 c% n3 W5 ^+ ]& d            success: function(res) {    
6 t9 ~" S( w% Q) ?8 B0 o                console.log('request success'),      
5 P  ]$ {/ \2 H                console.log(res.data),- F- H/ Z( ]/ ?: q4 ^
                str = res.data.toString('utf8');  8 X& w2 [2 V& D, F/ T
                json_obj=JSON.parse(str); 
$ n5 K/ X, y" Z0 \6 E: }! P2 y& H% B2 c2 c
                that.setData( {local : {value : json_obj.results[0].location.name , refresh : true}}); * B6 ~8 @+ E0 s3 ]6 @9 A
                that.setData( {weather : {value : json_obj.results[0].now.text , refresh : true}}); 
9 F. ^( q" M" _6 P# W7 w4 f                that.setData( {temp : {value : json_obj.results[0].now.temperature , refresh : true}});4 Q3 W( k, `! R( q+ h7 J

) `! Z# T. ^8 `; j, k% J2 h                switch(json_obj.results[0].now.text)3 ^) Y3 a. n" Y
                {) S: m1 o" R& G7 n/ b3 G& e4 _* s
                    case '晴':
! P8 ?& d+ H1 f5 P7 G( h. J$ T6 @                        that.setData({imagebox2 : 'sunny.png'});1 [) ]; r0 d% l1 e3 J* J
                        break;& I; W5 ?; c# H/ X: A' x; l( X
                    case '多云'||'晴间多云'||'大部多云'||'阴':3 d; D; c7 s, R; ?1 c1 h
                        that.setData({imagebox2 : 'cloud.png'});
4 y' ^' W- u- F, r: R' }                        break;4 v% }5 s+ f/ T$ m3 y
                    case '小雨'||'中雨'||'大雨'||'暴雨'||'大暴雨'||'特大暴雨':7 ?! z, L% i+ j; K8 O/ L2 t
                        that.setData({imagebox2 : 'rain.png'});% U2 I  q% I/ L0 r0 n  p
                    default:
6 S% i# E8 C- [! {4 [                        break;
4 ~  a( u$ y8 o8 \                }
( g5 n' B/ c6 N$ @
) B7 t# n$ d. s3 o( ?" ]  g            },
: {* R, ]+ R! O' `3 G+ S; d            fail: function(){
$ N. y3 U3 x! `5 U, i( A. P" O" O                console.log('request failed')
1 S* K* G1 T+ h6 W            }
! E! Q7 K1 V1 j3 h4 ]7 _" D        });
7 P9 P" {3 _1 X! V4 A% m& S2 M    },4 a" n# o; l9 x

) I2 a% R' B* q& t) J7 Y    onLoad:function(event){. b* S" ]6 v- l; p$ [' ]) ~2 i
        var that = this; & a9 U' z! F+ z$ X# ^
0 ]7 a) T) u+ V9 E; A
        this.wifi = pm.createWifi();2 Z" I) ?" k3 D8 a9 {
        var mqttModule = require("mqtt");5 O; V1 A+ a! B4 q7 h
        this.client = mqttModule.Client("tcp://120.76.100.197:18831"); 
+ N$ A9 `- V$ }9 [  x
( S" t: f1 i+ l* j$ A( }        this.client.on("message", function(topic, message) {
  W) P3 r) p. o4 [& n, ]                    console.log(topic + " : " + message.toString("ascii"));  ! ]3 ~3 O9 |: F1 c" [9 X  X
                    that.time = message.toString("ascii");" Q6 Z7 [) S1 Z" V! A  c
6 z) m* N: J6 N. A, r5 Z
                    var day = that.time.slice(0,3);/ ^' b4 v2 [) L1 y$ m
                    var month = that.time.slice(4,7);1 M9 o4 a! s/ ]. l. w
                    var date = that.time.slice(8,10);. c- w: `( V4 t, ~) ^4 W# n4 z2 m  G) M
                    var year = that.time.slice(20,25);
/ f; A! Z7 a# {) A& Y, A
: k7 o% u# ~4 Y9 a                    var clock = that.time.slice(11,13);" v: Z2 N' \8 w
                    var min = that.time.slice(14,16);
, y* M8 G  q: B8 D. y0 j                    var sec = that.time.slice(17,19);$ t3 r. r, p5 S& f7 h' @7 I: i# N% Y
0 \2 t, H6 a8 k, [' E& F5 L# f% j
                    that.setData({label1 : clock});: l  o! _$ `, h4 l& i4 l$ R
                    that.setData({label2 : min});* }5 e0 t* {, \: J- @8 b
                    that.setData({label3 : sec});2 Y. b1 l& k' O+ H0 s
# k1 z* K! T1 L& f
                    that.setData({label8 : month});
$ L! B1 Z# r4 Z4 s# B                    that.setData({label9 : date});
/ ~9 v6 |. W4 C6 o6 J" @% L6 h9 R5 Z                    that.setData({label10 : year});$ Z( `4 K/ o; T, ]8 S

' Y" C+ y( x9 ^5 B5 H/ ~                    switch(day)7 }2 O3 O. Q; l
                    {
$ v& b: ^; a: w                        case 'Sun':. M+ G- Y% z; x7 V1 {
                            that.setData({label7 : '星期日'});
! F! U* o  z+ K+ n2 l                            break;
. w! h( O6 y3 D                        case 'Mon':
9 \5 ]" z5 _7 I' n9 a- i8 P                            that.setData({label7 : '星期一'});
0 S0 \, t! m' h                            break;
+ W( t0 {2 ]3 i4 l; B                        case 'Tue':' c$ e, }: I* m- f; ?
                            that.setData({label7 : '星期二'});
4 y/ ^& M1 x1 x8 z/ U" L3 P                            break;1 Q: z; F9 U  A7 v
                        case 'Wed':
, s* u! Z7 Z! m                            that.setData({label7 : '星期三'});
2 ]/ b# Q8 K+ ?2 o3 L                            break;0 P+ w/ {& u+ \5 m/ J; W" E' _
                        case 'Thu':
. l- t0 Q9 _; d0 v' Q- R                            that.setData({label7 : '星期四'});9 g/ Q+ L  }2 h6 B6 ?5 ^1 x
                            break;
, u8 t& e0 V! P                        case 'Fri':
8 n# ?0 c2 o- X2 H5 V2 d                            that.setData({label7 : '星期五'});
" b4 C8 _; A- Y6 i7 B5 |                            break;
& x2 d+ Z! {9 e                        case 'Sat':5 w* y7 `, G7 R+ A, L& c
                            that.setData({label7 : '星期六'});
/ t- |: Z/ U0 U  P                            break;
- d6 P* ~' i, @! |/ m7 |& B                    }
' p5 Z5 a# i6 m$ J: ]3 `6 Z( |; I1 A; t  H# s. x2 L  C
                    that.setData({page1 : {refresh : true}});( q( \+ Y9 {3 v
                    });* A1 {/ z; S3 [2 y+ n* ?2 h) K
* W0 j- i; c) }7 M
        this.client.on("connect", function() {
- P  D/ U' O6 ?' Z, B$ H! b& P6 R* f            console.log("the client is connected");       
  a. x7 i- F$ [1 g            });6 b3 m. P4 }# @7 j/ u: f. S, z
4 }" B6 b# d3 x8 _7 ~, _7 u* K
        this.data.timer = setInterval(function()    
: \+ d1 }1 I, H' E8 Z( a9 T0 y/ S        {
) O* U: f$ Y! Y! {$ ~2 W( h            console.log("update sky info");
- R5 a( d0 G5 N4 q" S- k, j5 D  t! ^            that.getSkyInfo();" |# U4 M* v  u% U" H" _, ]
        }, 1000 * 10);) `  W8 S" g2 t' D4 D- {
    },2 W: Q3 Z5 P/ C5 B$ H, n% v

1 E$ d( N9 W. r' v$ V, Z    /* 此方法展示窗体前发生 */
+ J7 g% t  w, {, B; [4 d. B    onShow:function(event){
! d) \, o- Y5 p  x  f  s' P$ D* u
: i: q/ M& e5 u+ i    },
+ T1 e' m& y6 Z- F  O& M9 w% v
9 P0 r! k) S, L& j4 W# q6 |    /* 此方法关闭窗体前发生 */
" s& _% C# f6 S/ z7 X( _/ r    onExit:function(event){
8 i% z& H3 O" y: [        //this.uart.close();
) P7 g2 \& |8 D    },
# m3 a6 N/ Z: W, F  L2 f& I, A  Y) h2 L- N+ ]
    onBtn:function(event){
! v9 Y& l% [' z8 j0 F        console.log('wifi');6 P4 D( I) }: }
        this.wifi.connect({  ssid: "realthread_VIP",
  j8 @+ x/ M! U) I; B                            password: "1234567o"});# \( o2 c1 t1 D
    },& ~" z# U% P- t; S  R

- }, s3 V1 v; q    onBtn1:function(event){7 v$ f- w1 {8 M9 |6 L
        this.client.connect();    
7 F: l6 I6 I2 ?        this.client.subscribe("/public/TEST/Topic_1", { qos: 0 }, function() { console.log("subcribe success") }); ) u4 T/ p- b" _2 a! T
    },! @: N$ n! q& @* N% P

- i% s' O+ v; u) j/ b' m    onTextChange : function(event)
" S' p* L! d, ?! h& d    {    ) }5 d; @, h0 x" ~; w! q: H
        localname =  event.detail.value;
) {  \% S8 x3 n* F    }
  @. ?! x3 P" F& h5 C% V};$ _9 Q4 p  P3 x3 ]1 P: n

7 N) e. A& G( [/ lPage(page);& u; J/ Z( Q5 w6 ?/ T/ j0 }
7 O% H2 I$ e2 F0 a& v6 u+ j
page = 0;
. y  ]6 }* Y3 I3 M7 U  k
7 e% T# P. b8 o! i& C. V7 O6 E* V

效果:<br>
) s( }! i' [/ t; P0 f, }mX4bCt.gif8 T$ D8 n* b' E1 b! q mX5UIA.md.jpg

. I& A% R3 q" I. {0 a+ v  c3 O4 i

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

0 I7 F9 A: p- V1 a% h7 ~
使用道具 举报 显示全部楼层 回复
最新评论 | 正序浏览
显示全部楼层 |楼层直达:
发表于 2019-8-30 22:00:18 | 显示全部楼层
柿饼UI挺简单,但挺有意思的吧?脱离板子,编译,下载,调试的苦恼
使用道具 举报 回复
发表于 2019-10-22 16:19:45 | 显示全部楼层
小伙汁很强
使用道具 举报 回复
发表于 2020-5-17 15:32:21 | 显示全部楼层
刚开始学习,有这个项目的完整工程代码有吗?能否提供一下。谢谢!
% X  q* T1 o7 b' a$ f7 Q33470457@qq.com
使用道具 举报 回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  1. 11 主题
  2. 605 帖子
  3. 605 积分

Ta的主页 发消息

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

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

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

Powered by RT-Thread

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