Toggle navigation
首页
问答
文章
积分商城
专家
专区
更多专区...
文档中心
返回主站
搜索
提问
会员
中心
登录
注册
柿饼_PersimmonUI
[柿饼派] 制作一个极简风格的桌面时钟+气象站
发布于 2019-08-30 15:51:02 浏览:5332
订阅该版
[tocm] ## [柿饼派] 制作一个极简风格的桌面时钟+气象站 什么都不要多说,直接上手设计UI界面:

从图片中可以看出,这是一个可以显示实时时间,日期和城市天气信息的桌面时钟+气象站;那么应该如何获取这些信息呢?我分成两部分来做: 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; ``` 效果:
 []([url]https://imgchr.com/i/mX5UIA[/url]) 东西没难度,但是还挺有意思,试试看吧~
查看更多
3
个回答
默认排序
按发布时间排序
bernard
2019-08-30
这家伙很懒,什么也没写!
柿饼UI挺简单,但挺有意思的吧?脱离板子,编译,下载,调试的苦恼
WillianChan
2019-10-22
我不是专家,每天也在学习 ^_^ 难题问谷歌、简单的去百度、玄学问热心网友
小伙汁很强{:2_26:}
jeasey
2020-05-17
这家伙很懒,什么也没写!
刚开始学习,有这个项目的完整工程代码有吗?能否提供一下。谢谢! [email]33470457@qq.com[/email]
撰写答案
登录
注册新账号
关注者
0
被浏览
5.3k
关于作者
霹雳大乌龙
这家伙很懒,什么也没写!
提问
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
机器人操作系统 (ROS2) 和 RT-Thread 通信
4
五分钟玩转RT-Thread新社区
5
国产MCU移植系列教程汇总,欢迎查看!
6
【技术三千问】之《玩转ART-Pi》,看这篇就够了!干货汇总
7
关于STM32H7开发板上使用SDIO接口驱动SD卡挂载文件系统的问题总结
8
STM32的“GPU”——DMA2D实例详解
9
RT-Thread隐藏的宝藏之completion
10
【ART-PI】RT-Thread 开启RTC 与 Alarm组件
最新文章
1
RT-Thread 学习笔记:memheap 死机问题的分析与解决
2
pkgs --update 踩坑记录
3
没有menuconfig的bsp如何添加.config Kconfig
4
开源之夏 2023 | RT-Thread 邀你参与开源,项目奖金最高达12000元!
5
如何快速向RT-Thread提一个PR:以CI为例
热门标签
RT-Thread Studio
串口
LWIP
Env
SPI
AT
FinSH
ART-Pi
Bootloader
CAN总线
Hardfault
文件系统
USB
DMA
RT-Thread
线程
SCons
RT-Thread Nano
stm32
MQTT
ESP8266
ota
RTC
WIZnet_W5500
rt-smart
UART
flash
rtthread
packages_软件包
freemodbus
潘多拉开发板_Pandora
I2C
cubemx
FAL
定时器
PWM
BSP
AB32VG1
ADC
中断
消息队列_msg_queue
SDIO
msh
keil
Debug
socket
SFUD
LVGL
编译报错
C++_cpp
本月问答贡献
宇宙码蚁
11
个答案
3
次被采纳
rcp
9
个答案
3
次被采纳
张世争
24
个答案
2
次被采纳
用户名由3_15位
3
个答案
2
次被采纳
出出啊
3
个答案
2
次被采纳
本月文章贡献
IcyFeather
4
篇文章
9
次点赞
chejia12
4
篇文章
1
次点赞
燕十三
3
篇文章
22
次点赞
zhjylzh
3
篇文章
4
次点赞
RTT_逍遥
2
篇文章
10
次点赞
回到
顶部
发布
问题
分享
好友
手机
浏览
扫码手机浏览
投诉
建议
回到
底部