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

发布于 2019-08-30 15:51:02

[md]## [柿饼派] 制作一个极简风格的桌面时钟+气象站
什么都不要多说,直接上手设计UI界面:

![mXBgL6.jpg]()

从图片中可以看出,这是一个可以显示实时时间,日期和城市天气信息的桌面时钟+气象站;那么应该如何获取这些信息呢?我分成两部分来做:
1. 首先是天气信息部分:通过HTTP request接口调用“心知天气”服务(不是打广告哈,因为我本人一直就用这个的免费版,不限制调用次数,但只有天气和温度两个数据,对我来说够了),返回的是json数据,稍稍处理一下下就可以拿到天气和温度两个数据了,再将其显示到屏幕的label上,同时根据天气情况可以显示对应的天气图标;我还在显示城市的地方加了一个textbox,这样整个气象站就更加灵活了,你可以不用在代码里把url写死,而可以随时触屏输入城市拼音更改你想显示的城市天气信息。
2. 第二部分是实时时钟:原本我的想法是跟获取天气一样,找个可以获取世界时间的服务接口,这样一个HTTP request就搞定一切,但是找了一圈不是要钱就是有调用次数限制,所以我另外想了一个骚操作:在esp8266上开启sntp服务,每秒获取一次实际时间;同时开启mqtt服务,将每秒获取到的时间发布到服务器,而柿饼派这边订阅相应的主题,实时接收数据,就这样假装有sntp了;然后还是处理数据,显示。


上代码:

```C
var json_obj = 0;
var localname = 'shanghai';

var page = {

wifi : 0,
time : 0,
client : 0,
data : {timer : 0},

getSkyInfo: function()
{
var that = this;
var str =0;

var rq1 = pm.request
({
url: 'http://api.seniverse.com/v3/weather/now.json?key=6dxwrt9yzsyj3vmr&location=' + localname + '&language=zh-Hans&unit=c',
method : 'GET',
header:{
"Content-Type":"application/json"
},
success: function(res) {
console.log('request success'),
console.log(res.data),
str = res.data.toString('utf8');
json_obj=JSON.parse(str);

that.setData( {local : {value : json_obj.results[0].location.name , refresh : true}});
that.setData( {weather : {value : json_obj.results[0].now.text , refresh : true}});
that.setData( {temp : {value : json_obj.results[0].now.temperature , refresh : true}});

switch(json_obj.results[0].now.text)
{
case '晴':
that.setData({imagebox2 : 'sunny.png'});
break;
case '多云'||'晴间多云'||'大部多云'||'阴':
that.setData({imagebox2 : 'cloud.png'});
break;
case '小雨'||'中雨'||'大雨'||'暴雨'||'大暴雨'||'特大暴雨':
that.setData({imagebox2 : 'rain.png'});
default:
break;
}

},
fail: function(){
console.log('request failed')
}
});
},

onLoad:function(event){
var that = this;

this.wifi = pm.createWifi();
var mqttModule = require("mqtt");
this.client = mqttModule.Client("tcp://120.76.100.197:18831");

this.client.on("message", function(topic, message) {
console.log(topic + " : " + message.toString("ascii"));
that.time = message.toString("ascii");

var day = that.time.slice(0,3);
var month = that.time.slice(4,7);
var date = that.time.slice(8,10);
var year = that.time.slice(20,25);

var clock = that.time.slice(11,13);
var min = that.time.slice(14,16);
var sec = that.time.slice(17,19);

that.setData({label1 : clock});
that.setData({label2 : min});
that.setData({label3 : sec});

that.setData({label8 : month});
that.setData({label9 : date});
that.setData({label10 : year});

switch(day)
{
case 'Sun':
that.setData({label7 : '星期日'});
break;
case 'Mon':
that.setData({label7 : '星期一'});
break;
case 'Tue':
that.setData({label7 : '星期二'});
break;
case 'Wed':
that.setData({label7 : '星期三'});
break;
case 'Thu':
that.setData({label7 : '星期四'});
break;
case 'Fri':
that.setData({label7 : '星期五'});
break;
case 'Sat':
that.setData({label7 : '星期六'});
break;
}

that.setData({page1 : {refresh : true}});
});

this.client.on("connect", function() {
console.log("the client is connected");
});

this.data.timer = setInterval(function()
{
console.log("update sky info");
that.getSkyInfo();
}, 1000 * 10);
},

/* 此方法展示窗体前发生 */
onShow:function(event){

},

/* 此方法关闭窗体前发生 */
onExit:function(event){
//this.uart.close();
},

onBtn:function(event){
console.log('wifi');
this.wifi.connect({ ssid: "realthread_VIP",
password: "1234567o"});
},

onBtn1:function(event){
this.client.connect();
this.client.subscribe("/public/TEST/Topic_1", { qos: 0 }, function() { console.log("subcribe success") });
},

onTextChange : function(event)
{
localname = event.detail.value;
}
};

Page(page);

page = 0;

```

效果:

![mX4bCt.gif](https://s2.ax1x.com/2019/08/30/mX4bCt.gif)
[![mX5UIA.md.jpg](https://s2.ax1x.com/2019/08/30/mX5UIA.md.jpg)](https://imgchr.com/i/mX5UIA)

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

查看更多

关注者
0
被浏览
1.6k
3 个回答
bernard
bernard 2019-08-30
柿饼UI挺简单,但挺有意思的吧?脱离板子,编译,下载,调试的苦恼
jeasey
jeasey 2020-05-17
刚开始学习,有这个项目的完整工程代码有吗?能否提供一下。谢谢!
[email]33470457@qq.com[/email]

撰写答案

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

发布
问题

分享
好友