一步步搭建物联网系统16 前端显示
上一篇:15 RESTful Ever...
下一篇:17 构建基于CoAP协议的物...
16 前端显示
16.1 库与车轮子
在多数的情况下我们都没有理由也没有必要去重新发明我们的车轮,在这时使用库会是一个比较好的做法。
16.2 库
16.2.1 jQuery Mobile
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。
16.3 网站前台显示
16.3.1 Highcharts
Highcharts有以下的特点
- 兼容性:兼容当今所有的浏览器,包括 iPhone、IE 和火狐等等;
- 对个人用户完全免费;
- 纯JS,无BS;
- 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;
- 跨语言:不管是 PHP、Asp.net 还是 Java 都可以使用,它只需要三个文件:一个是Highcharts 的核心文件 highcharts.js,还有 a canvas emulator for IE 和 Jquery类库或者 MooTools 类库;
- 提示功能:鼠标移动到图表的某一点上有提示信息;
- 放大功能:选中图表部分放大,近距离观察图表;
- 易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;
- 时间轴:可以精确到毫秒;
在这里只需将需要处理的数据存储到数组中,便可以将其渲染成为图形,下面的温度走势图便是基于Highcharts的结果:
var dataLength = [];
function drawTemp() {
var zero = [];
$.getJSON('/athome/', function(json) {
var items = [];
dataLength.push(json.length);
$.each(json, function(key, val) {
zero.push(val.temperature);
});
chart = new Highcharts.Chart({
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y1: 1
},
stops: [
[0, '#003399'],
[1, '#3366AA']
]
},
chart: {
renderTo: 'Tchart',
type: 'spline'
},
title: {
text: '本月温度情况'
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
title: {
text: ''
}
},
yAxis: {
title: {
text: '温度 (°C)'
}
},
tooltip: {
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderRadius: 10,
borderWidth: 1,
enabled: true,
formatter: function() {
return '' + this.series.name + '
' + this.x + ': ' + this.y + '°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: '本月',
data: zero
}, {
name: '对比',
data: [26.0]
}]
});
});
};
function showTemper() {
var length = dataLength[0];
$.ajax({
url: '/athome/' + length,
type: 'GET',
dataType: 'json',
async: true,
timeout: 1000,
error: function() {},
success: function(sdata) {
$('.temperStatus').empty();
$('.temperStatus').append(sdata.temperature);
}
});
};
$(document).ready(function() {
setInterval("drawTemp();", 5000);
setInterval("showTemper();", 800);
drawTemp();
showTemper();
});
- 一步步搭建物联网系统
- 前言
- 第一部分
- 1 无处不在的HTML
- 2 无处不在的Javascript
- 3 无处不在的CSS
- 4 无处不在的三剑客
- 5 GNU/Linux 强大且Free
- 6 Arduino 极客的玩具
- 7 Python 代码如散文
- 8 Raspberry Pi 极客的盛宴
- 9 Server 一切皆为服务
- 10 Web服务
- 11 HTTP 熟悉&陌生
- 12 设计RESTful API
- 第二部分
- 13 环境准备
- 14 创建REST服务
- 15 REST与不同语言
- 16 前端显示
- 17 RESTful的CoAP协议
- 第三部分
- 18 简单物联网
- 19 Android简单示例
- 尾声
上一篇:15 RESTful Ever...
下一篇:17 构建基于CoAP协议的物...