【PersimmonUI学习营】+ DaZhou + ’央式‘天气预报/串口交互

发布于 2018-10-08 11:25:46 浏览：2246 订阅该版

这次作业要求从天气API获得未来几天的天气，并以图表分析的形式展现出来。还要求串口输入日期，设备返回当天的天气情况。我感觉不管是UI绘制，还是JS代码编写，这次都很综合，有一定的难度。下面，就让敝人拙计小秀，带领大家看看怎么去实现上述功能。还是先附上这次的工程代码和视频效果。
       [GitHub工程代码、视频仓](https://github.com/2SCZhou/PersimUI_learn)

第一部分：效果

还是先上几张效果图，有图好说话。
       ![1.jpg](/uploads/201810/08/102521qzc555xlm332q2ve.jpg)
       这是主界面，长这么大，我还没有吃过这么好看的柿饼呢，但是RT-Thread的柿饼UI各位真的要尝尝，这是咱们家乡的特色UI，悠悠一口，思君不忘。

![1538965978(1).png](/uploads/201810/08/103346ucx8jzolk7oglb7m.png)
      这是二界面，朴实无华，看见还想笑，lowb. 哎，美工不懂程序员的心，您知道这个page程序员用了多少技术吗？后面慢慢道来！

![3.png](/uploads/201810/08/103712hde09d9d76djqelo.png)
       惊不惊喜？意不意外？你们根本不懂我那闷骚奔腾的心。这就是作业要求实现的第一个效果。

![4.jpg](/uploads/201810/08/103949kk875dssak7dusdd.jpg)
       这图不多说了，串口输入今明后三天任意一天日期，设备返回当天的气温情况。这个工具不支持中文，当天的天气情况我就省略了。

第二部分：原理实现

先讲串口交互实现，由于此次固件串口接收数据，会把原数据截取为两部分，第一部分通常为3-5个字符。所以，需要一种机制，把串口调试助手发来的数据拼接在一起。我用的办法自我感觉挺实用，但是有点土。代码如下：
       app.js代码：

```var app = {
page : "page1/page1",
serialData: '',
i : 2,

onLaunch: function (event) //app加载回调函数
{
 console.log('app onLaunch');
 uart = pm.openSerialPort({device: "uart5"}); //打开串口设备uart5
 if (uart)
 {
 console.log('pm.openSerialPort OK');
 uart.write(Buffer("Please enter the date(e.g. 2018-01-01) ", 'ascii')); //串口发送数据，一个ascii字符串数据BUFF
 uart.onData(this.onUart, this); //设置串口接收函数为 onUart 
 
 }
},

getWeatherInfo: function(serialData) {
	var thiz = this;
	var rq1 = pm.request({
	url: 'http://api.seniverse.com/v3/weather/daily.json?key=hfvxxp7oq0w4dmso&location=shanghai&language=zh-Hans&unit=c&start=0&days=5', 	//开发者服务器接口地址
	method : 'GET',						//请求方式
	header:{								//设置请求的header
		"Content-Type":"application/json"
	},
	success: function(res) { //与开发者服务器连接成功后，执行的回调函数
		var str = 0;
		console.log('request success');
		
		str = res.data.toString('utf8');
		json_obj = JSON.parse(str);
		
		switch(serialData){
			case json_obj.results[0].daily[0].date:
				var buf = json_obj.results[0].daily[0].date + ' ' + 'Max temperature:' + json_obj.results[0].daily[0].high + ' ' + 'Min temperature:' + json_obj.results[0].daily[0].low + ' ';
				uart.write(Buffer(buf, 'ascii')); 
				break;
			case json_obj.results[0].daily[1].date:
				var buf = json_obj.results[0].daily[1].date + ' ' + 'Max temperature:' + json_obj.results[0].daily[1].high + ' ' + 'Min temperature:' + json_obj.results[0].daily[1].low + ' ';
				uart.write(Buffer(buf, 'ascii'));
				break;
			case json_obj.results[0].daily[2].date:
				var buf = json_obj.results[0].daily[2].date + ' ' + 'Max temperature:' + json_obj.results[0].daily[2].high + ' ' + 'Min temperature:' + json_obj.results[0].daily[2].low + ' ';
				uart.write(Buffer(buf, 'ascii'));
				break;								
			default:
				console.log('Date Error!');
				uart.write(Buffer('Please enter the date from today to the day after tomorrow. ', 'ascii'));
				break;
			}
		},
	complete: function(){ //当http request操作完成后，执行的回调函数，无论连接成功还是失败都会执行
		console.log('request complete') 
		},
	fail: function(){ //与开发者服务器连接失败后，执行的回调函数
		console.log('request failed')
		}
	});
},

onUart: function(data)
{	
	this.serialData += data.toString('ascii');
	this.i--;
	if(this.i == 0)
	{
		console.log(this.serialData);
		this.getWeatherInfo(this.serialData);
		this.i = 2;
		this.serialData = '';	
	}
}

};
App(app);```       这部分代码是实现串口交互的关键代码，我用全局变量接收两次数据，拼接到一起。

然后是实时时间和天气预报的实现。这两个功能都有相应的API调用，通过HTTP 的GET方法获取服务器返回的JSON数据，然后再对这些数据处理就可以了。上述代码中有这部分的实现，这里我就不再贴代码了，具体可以在github上面查看。另外一点，套用ABC大佬的一句话：“贫穷限制了我的想象力”，很多API都是收费了，价格不菲，比如我界面上的“历史上的今天”和“老黄历”我都只能按404处理了。换句话说，您手上的可用API资源越多，您做的功能越丰富。包括我用的实时时间的API，都是由次数限制了。为了拍视频，苦等1小时，都是没钱的病，得治！

界面二，用了自定义面板的技术，在之前的仿MacOS里面有详细的介绍，不同的是，这次里面嵌套的是button，可以按下触发页面跳转。个人感觉自定义面板是非常有用的组件，用好了真的能用出来花。

界面三，有著名央视主持人帮我们播报天气，这里其实是一张背景图片，真正能动起来的是panel里面的label和canvas，在这里面实现数据的动态显示和处理。

第三部分：总结

中肯的讲，目前柿饼UI工具还有很多bug，易用性有待提高。但是，这并不影响柿饼的强大，我这三脚猫的功夫，能做出来让我自己都很陶醉的作品，一方面有灵魂，另一方面得有柿饼的加持。相信在不久的将来，柿饼UI会成为大家做相关项目的首选。也非常荣幸，我能成为十三亿人民中，首先吃柿饼的那一小撮人。感谢RT-Thread！感谢帮助我进步的人！

DaZhou