柿饼M之串口
本节文章将向大家介绍如何在JS代码中打开一个串口设备并对其进行数据发送和接收。本文代码建议在PC端查看。
首先，在上位机设计器上创建好一个新的工程，拖放MultiTextBox控件与Button控件即可。
MultiTextBox控件用于显示从串口收发到的信息。
Button控件用于清空MultiTextBox控件中的信息。
它们的属性信息如下：
将串口5连接指计算机上，连接方式如下:
脚本代码编辑
在设计器中双击打开JS代码文件,进行编辑。代码如下（代码建议在PC端查看）：
app.js
var app = {
page : "page1/page1",
//app加载回调函数
onLaunch: function (event)
{
console.log('app onLaunch');
//打开串口设备uart5
uart = pm.openSerialPort({port: "uart5"});
if (uart)
{
console.log('pm.openSerialPort OK');
//串口发送数据，一个ascii字符串数据BUFF
uart.write(Buffer(" pm.openSerialPort OK!!! ", 'ascii'));
//设置串口接收函数为 onUart
uart.onData(this.onUart, this);
}
},
//串口接收数据回调函数，data 为串口数据
onUart : function (data)
{
//以十六进制方式打印串口接收到的数据
console.log('Uart data : ', data.toString('hex'));
//串口接收到的数据长度
console.log('Data len : ', data.length);
uart.write(Buffer(" onUart ", 'ascii'));
//{type : 'uart', value : data} 对象广播到所有窗口的 onUpdate 函数
this.onUpdate({type : 'uart', value : data});
}
};
App(app);page1.js
var page = {
str : '',
onUpdate: function (data)
//数据更新回调
{
console.log(data.value.toString('utf8'));
if (data.type == 'uart')
{
this.str += data.value.toString('utf8');
console.log(this.str);
//设置MultiTextBox控件显示内容
this.setData({
MultiTextBox1 : {value : this.str, refresh : true}
})
}
},
//Button 点击回调函数
onBtn : function()
{
this.str = '';
//清空MultiTextBox控件显示内容
this.setData({
MultiTextBox1 : {clear : true, refresh : true}
})
}
};
Page(page);实际效果
-
串口调试小助手信息
-
设备显示信息
-
实际演示
柿饼M之网络
本节向大家介绍如何在JS代码中使用Http Request。后续柿饼M还会支持更多网络连接协议，如Net,MQTT等
注：与网络相关的功能，无法在PC上模拟运行，需要开发者下载至开发板中，直接调试。
首先，在上位机设计器上创建好一个新的工程，并加入一个MultiTextBox控件，用于显示开发者服务器返回的数据。再加入两个button来对MultiTextBox的内容进行控制。
其中，把button的tap事件绑定到函数onButton
脚本代码编辑
在设计器中双击打开JS代码文件,进行编辑。代码如下（代码建议在PC端查看）：
var page = {
onButton: function(e) {
var thiz = this;
console.dir(e);
if(e.target.id == "connect")
{
var rq1 = pm.request({
//开发者服务器接口地址
url: 'http://www.rt-thread.com/service/rt-thread.txt',
//请求方式
method : 'POST',
//设置请求的header
header:{
"Content-Type":"application/json"
},
//请求的参数
data: {
x: '',
y: ''
},
//与开发者服务器连接成功后，执行的回调函数
success: function(res) {
console.log('request success'),
//从开发者服务器收到的数据类型为Buffer，可以API转换成指定编码格式
console.log(res.data.toString('utf8')),
//从开发者服务器收到的状态码
console.log(res.statusCode),
//从开发者服务器收到的header
console.dir(res.header),
//把返回的数据显示在MultiTextBox1中
thiz.setData({
MultiTextBox1: { value : res.data , refresh : true}
})
},
//当http request操作完成后，执行的回调函数，无论连接成功还是失败都会执行
complete: function(){
console.log('request complete')
},
//与开发者服务器连接失败后，执行的回调函数
fail: function(){
console.log('request failed'),
thiz.setData({
MultiTextBox1: { value : "connect failed" , refresh : true}
})
}
});
}else if(e.target.id == "clean")
{
console.log("ready to clean"),
//清除MultiTextBox1的内容
thiz.setData({
MultiTextBox1: { clear : true , refresh : true}
})
}
}
};
Page(page);实际效果
天气预报
上一小节，向大家介绍了http request的基本用法。现在我们就来使用它做一个天气预报的板块。
1.首先，我们得找一些关于天气预报的http API。
在接下来的Demo中，我们使用了这个API:
http://mobile.weather.com.cn/data/sk/101010100.html?_=1381891661455可以直接通过浏览器打开链接，看看能够获取什么样的数据。
2.打开我们的PersimmonUI创建工程，并完成以下UI布局，具体布局方法就不细说了，请参考之前柿饼相关文章。
3.最后，我们可以这样写JS脚本。代码（代码建议在PC端查看):
//定义一个全局对象，用来保存http request返回的JSON对象
var json_obj =0; var page = {
data : {timer : 0},
//定时器
//更新日期，根据json_obj中日期的数据，来更新指定ImageBox的图片
onSetDate : function(e)
{
var k=10000000;
var data ={};
for(var i=8,j=e; i>0 ;i--)
{
data['number'+i] = {value: parseInt(j/k)+".png",refresh:true}; this.setData(data);
j=j%k;
k=k/10;
}
},
//根据json_obj中的数据，来设定对应Label的值
onUpdate : function(){
this.onSetDate(json_obj.sk_info.date);
this.setData({
temp : {value : json_obj.sk_info.temp , refresh : true}
});
this.setData({
wind : {value : json_obj.sk_info.wd , refresh : true}
});
this.setData({
windlevel : {value : json_obj.sk_info.ws , refresh : true}
});
this.setData({
humidity : {value : json_obj.sk_info.sd , refresh : true}
});
},
getSkyInfo: function(e) {
var thiz = this;
var str =0;
var rq1 = pm.request
({
// 获取天气预报的API，返回伪数据
url: 'http://mobile.weather.com.cn/data/sk/101010100.html?_=1381891661455',
method : 'GET',
header:{
"Content-Type":"application/json"
},
//与开发者服务器连接成功后，执行的回调函数
success: function(res) {
// 把data从Buffer转成string
str = res.data.toString('utf8');
//把JSON格式的string转成JSON对象，以便获取数据
json_obj=JSON.parse(str);
//更新各个控件的值
thiz.onUpdate();
},
fail: function(){
console.log('request failed')
}
});
},
onLoad : function(e) {
var thiz = this;
//设置定时器，每十秒更新天气预报数据
this.data.timer = setInterval(function()
{
console.log("update sky info");
thiz.getSkyInfo();
}, 1000 * 10);
}
};
Page(page);实际效果
除了显示三天内的天气状况，还能通过串口获取将当前显示城市的气温信息
RT-Thread
让物联网终端的开发变得简单、快速，芯片的价值得到最大化发挥。GPLv2+协议，可免费在商业产品中使用。
长按二维码，关注我们
????点击报名发布会
