Desk Clock+Corona-virus Data Display!
Main Features:
- Weather data(Includes weather conditions, temperature, humidity ) in designated areas can be updated in real time.
- The clock can be updated in real time through the network calibration clock data.
- Coronavirus data in designated provinces are available in real time.
- After the first successful networking, Persimmon UI Builder will record the information of the WIFI connection, so it will be automatically reconnected when every time it powered on.
This application is built with RT-Thread persimmon GUI. Persimmon Pie is a set of graphical user component interfaces running on the RT-Thread embedded open-source real-time operating system to provide user interaction on the graphical interface.
Hardware：RT-Thread Persimmon
Software：RT-Thread Persimmon UI Builder
Data Source：
1.Get a weather data API
2.Get a network time API
3.Get a Coronavirus data API
Main Features:
- Weather data(Includes weather conditions, temperature, humidity ) in designated areas can be updated in real time.
- The clock can be updated in real time through the network calibration clock data.
- Coronavirus data in designated provinces are available in real time.
- After the first successful networking, Persimmon UI Builder will record the information of the WIFI connection, so it will be automatically reconnected when every time it powered on.
Implementation
UI Design
The UI interface takes 2 pages where the DotIndicator card control is placed in page1 and 3 panels are placed in the card control, panel 1 for displaying the desk clock and weather information, panel 2 for showing the WIFI connection, placing the listctrl control in panel2 to display the nearby WiFi information and it supports using the button to trigger the WIFI connection, enter the page 2 and fill in the WIFI password to connect the network, the listctrl control is placed in panel3 is to show the Coronavirus data, you can switch to the different panel by swiping left and right, page2 switching is triggered by the button in the panel2 of page1.
The relevant interface is as follows:
Data Update:
The timer is used to send the request on a regular basis, obtain the original data and parse it, then present the analyzed data to the corresponding page. Here's the core code for fetching the data.
Fetch Weather Data
//1.Fetch Weather Data
getWeathearInfo:function(event)
{
var that = this;
var str = 0;
console.log("getWeathrerInfo....")
var req1 = pm.request({
url: 'https://tianqiapi.com/api?version=v6&appid=31972938&appsecret=e3fvZnAN&city='+localcity,
data:{
x:'',
y:''
},
header:{
"Content-Type":"application/json",
},
success:function(res)
{
console.log('request success'),
console.log(res.data),
console.log(res.statusCode)
console.log("json_par")
str = res.data.toString('utf8');
console.log(str)
json_obj = JSON.parse(str);
console.log(json_obj)
week = json_obj.week;
that.tempdataupdate();
},
complete:function()
{
console.log('request complete')
},
fail:function(){
console.log('request failed')
}
})
},
//Corresponding data of the updated interface
tempdataupdate:function(){
console.log("<< tempdataupdate")
this.setData({img_weather:{value:json_obj.wea_img+'.png',refresh : true}})
this.setData({hum_label :{value : json_obj.humidity,refresh : true}});
this.setData({tem_label :{value : json_obj.tem+"°C",refresh : true}});
this.setData({weather_label :{value : json_obj.wea,refresh : true}});
this.setData({week_label :{value : week,refresh : true}});
},
Fetch Time Data
getNetTimeInfo:function(){
var that = this;
var str = 0;
console.log("Get NetTimeInfo....")
var req1 = pm.request({
url: 'http://quan.suning.com/getSysTime.do',
data:{
x:'',
y:''
},
header:{
"Content-Type":"application/json",
},
success:function(res)
{
console.log('request success'),
console.log(res.data),
console.log(res.statusCode)
console.log("json_par")
str = res.data.toString('utf8');
console.log(str)
json_obj1 = JSON.parse(str);
console.log(json_obj1)
console.log("systemtime:"+json_obj1.sysTime2)
var temp = json_obj1.sysTime2.toString();
console.log("length:"+temp.length)
console.log(temp)
year = temp.substring(0,4);
console.log(year)
month = temp.substring(5,7);
console.log(month)
day = temp.substring(8,10);
console.log(day)
console.log(year+':'+month+':'+day);
var nethour = temp.substring(11,13);
hours = parseInt(nethour, 10);
console.log(nethour);
var netminutes = temp.substring(14,16);
minutes = parseInt(netminutes, 10);
console.log(netminutes);
var netseconds = temp.substring(17,19);
seconds = parseInt(netseconds, 10);
console.log(netseconds)
that.updateDate();
},
complete:function()
{
console.log('request complete')
},
fail:function(){
console.log('request failed')
}
})
},
//Update the data for the interface
updateDate:function()
{
this.setData({year_label :{value : year,refresh : true}});
this.setData({month_label :{value : month,refresh : true}});
this.setData({day_label :{value : day,refresh : true}});
},
Fetch Coronavirus Data
getrealData:function(){
var that = this;
var str = 0;
console.log("Get RealData....")
var req1 = pm.request({
url: 'https://lab.isaaclin.cn/nCoV/api/area?latest=1&province=%E5%B9%BF%E4%B8%9C%E7%9C%81',
data:{
x:'',
y:''
},
header:{
"Content-Type":"application/json",
},
success:function(res)
{
console.log('request success'),
console.log(res.data),
console.log(res.statusCode)
str = res.data.toString('utf8');
console.log(str)
json_obj2 = JSON.parse(str);
console.log('Province'+json_obj2.results[0].provinceName)
console.log('Confirmed cases'+json_obj2.results[0].currentConfirmedCount)
console.log('Total cases'+json_obj2.results[0].confirmedCount)
console.log('Recovered cases'+json_obj2.results[0].curedCount)
console.log('Deaths'+json_obj2.results[0].deadCount)
that.updataShow();
},
complete:function()
{
console.log('request complete')
},
fail:function(){
console.log('request failed')
}
})
},
// Update the data for the UI interface
updataShow:function(){
console.log(">> updataShow" + "length="+json_obj2.length);
var dataList = new Array();
var ProvinceItem = new Object();
ProvinceItem.cityname = {value :json_obj2.results[0].provinceName };
ProvinceItem.currentConfirmedCount = { value: json_obj2.results[0].currentConfirmedCount };
ProvinceItem.confirmedCount = { value: json_obj2.results[0].confirmedCount };
ProvinceItem.curedCount = { value: json_obj2.results[0].curedCount };
ProvinceItem.deadCount = { value: json_obj2.results[0].deadCount };
dataList.push(ProvinceItem);
for(var i = 0 ; i < 20; i++)
{
var item = json_obj2.results[0].cities;
console.log(item.cityName);
var realdataItem = new Object();
realdataItem.cityname = {value : item.cityName};
realdataItem.currentConfirmedCount = {value : item.currentConfirmedCount};
realdataItem.confirmedCount = {value : item.confirmedCount};
realdataItem.curedCount = {value :item.curedCount };
realdataItem.deadCount = {value : item.deadCount};
dataList.push(realdataItem);
}
listPage.setData({listctrl1 : {empty : true}});
listPage.setData({listctrl1:{page : listPage, xml : "Panels/realdata", items : dataList, refresh:true}})
console.log("datalist refresh")
Done! Thanks to RT-Thread Community for the support.
Any questions can leave me a comment.