Toggle navigation
首页
问答
文章
积分商城
专家
专区
更多专区...
文档中心
返回主站
搜索
提问
会员
中心
登录
注册
柿饼_PersimmonUI
[柿饼派] 制作一个极简风格的桌面时钟+气象站
发布于 2019-08-30 15:51:02 浏览:6558
订阅该版
[tocm] ## [柿饼派] 制作一个极简风格的桌面时钟+气象站 什么都不要多说,直接上手设计UI界面:
![mXBgL6.jpg]([https://s2.ax1x.com/2019/08/30/mXBgL6.jpg](https://s2.ax1x.com/2019/08/30/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](https://s2.ax1x.com/2019/08/30/mX4bCt.gif)) [![mX5UIA.md.jpg]([https://s2.ax1x.com/2019/08/30/mX5UIA.md.jpg](https://s2.ax1x.com/2019/08/30/mX5UIA.md.jpg))]([https://imgchr.com/i/mX5UIA](https://imgchr.com/i/mX5UIA)) 东西没难度,但是还挺有意思,试试看吧~
查看更多
3
个回答
默认排序
按发布时间排序
bernard
2019-08-30
这家伙很懒,什么也没写!
柿饼UI挺简单,但挺有意思的吧?脱离板子,编译,下载,调试的苦恼
WillianChan
2019-10-22
-
小伙汁很强{:2_26:}
jeasey
2020-05-17
这家伙很懒,什么也没写!
刚开始学习,有这个项目的完整工程代码有吗?能否提供一下。谢谢! [email]33470457@qq.com[/email]
撰写答案
登录
注册新账号
关注者
0
被浏览
6.6k
关于作者
霹雳大乌龙
这家伙很懒,什么也没写!
提问
11
回答
53
被采纳
0
关注TA
发私信
相关问题
1
【PersimmonUI柿饼学习营】+ A Byte of China + 环境搭建&20W年薪广告
2
【柿饼学习营】+werrysuzhen+20W年薪作业
3
【PersimmonUI柿饼学习营】+ meetwit + 20W年薪广告&lesson01
4
【PersimmonUI柿饼学习营】+ DaZhou + 20W年薪作业+视频有彩蛋
5
【PersimmonUI柿饼学习营】+ DMY+ lesson01 20W年薪广告
6
【PersimmonUI柿饼学习营】+ Bigmagic+20W年薪广告&day01
7
【PersimmonUI柿饼学习营】+ chowguohua+年薪广告
8
【柿饼学习营】+werrysuzhen+脚本及事件学习
9
【PersimmonUI柿饼学习营】+ DaZhou+ 手把手教你做计算器
10
【PersimmonUI柿饼学习营】+ A Byte of China + 2048游戏
推荐文章
1
RT-Thread应用项目汇总
2
玩转RT-Thread系列教程
3
国产MCU移植系列教程汇总,欢迎查看!
4
机器人操作系统 (ROS2) 和 RT-Thread 通信
5
五分钟玩转RT-Thread新社区
6
【技术三千问】之《玩转ART-Pi》,看这篇就够了!干货汇总
7
关于STM32H7开发板上使用SDIO接口驱动SD卡挂载文件系统的问题总结
8
STM32的“GPU”——DMA2D实例详解
9
RT-Thread隐藏的宝藏之completion
10
【ART-PI】RT-Thread 开启RTC 与 Alarm组件
最新文章
1
使用RC522软件包驱动FM1722
2
常量数据类型和表达式陷阱分享
3
进行i2c驱动移植的经验总结
4
在VSCode中使用clang-format
5
我该如何使用这个微雪的WIFI400 WIFI-LPB-100在rtt里或者我该怎样为它开发驱动
热门标签
RT-Thread Studio
串口
Env
LWIP
SPI
AT
Bootloader
Hardfault
CAN总线
FinSH
ART-Pi
USB
DMA
文件系统
RT-Thread
SCons
RT-Thread Nano
线程
MQTT
STM32
RTC
FAL
rt-smart
ESP8266
I2C_IIC
UART
WIZnet_W5500
ota在线升级
freemodbus
PWM
flash
cubemx
packages_软件包
BSP
潘多拉开发板_Pandora
定时器
ADC
GD32
flashDB
socket
中断
编译报错
Debug
rt_mq_消息队列_msg_queue
SFUD
msh
keil_MDK
ulog
C++_cpp
MicroPython
本月问答贡献
踩姑娘的小蘑菇
4
个答案
1
次被采纳
红枫
4
个答案
1
次被采纳
张世争
4
个答案
1
次被采纳
Ryan_CW
4
个答案
1
次被采纳
xiaorui
1
个答案
1
次被采纳
本月文章贡献
catcatbing
3
篇文章
5
次点赞
qq1078249029
2
篇文章
2
次点赞
xnosky
2
篇文章
1
次点赞
Woshizhapuren
1
篇文章
5
次点赞
YZRD
1
篇文章
2
次点赞
回到
顶部
发布
问题
分享
好友
手机
浏览
扫码手机浏览
投诉
建议
回到
底部