使用APICloud设计物联网APP

0、前言

1)、APP功能：

1、控制室内插座的开关。

2、查看室内实时温湿度和温湿度趋势。

3、控制小车的行走，小车摄像头的开启/关闭、移动。

4、查看摄像头监控画面，可拍照并追溯。

5、查看服务器资源消耗情况。

2)、设计此APP所需基础：

HTML:会使用前端框架。

js:基本语法。

APICloude IDE的使用。

3)、APP演示

　　 　　

　　

1、关于APICloud：

使用标准WEB技术轻松开发iOS、Android原生应用；覆盖APP全生命周期，包括开发、API集成、测试、渠道打包、运营管理等.

官网：http://www.apicloud.com/

 

2、JSON数据格式处理

服务器返回格式：

 

JS获取数据：

$.ajax({
	type : "GET",
	async : false,
	url : "http://api.php",
	data : {},
	dataType : "json", //返回数据形式为json
	success : function(result) {
		if (result) {
			data['uptime'] = result.uptime;
			data['memPercent'] = result.memPercent.toFixed(2);//.toFixed(2)小数点后保留两位
			data['cputemp'] = result.cpu_temp.toFixed(2);
			data['cpuPercent'] = result.cpuPercent.toFixed(2);
			data['hdPercent'] = result.hdPercent.toFixed(2);
		}
		}
	});

3、ECharts图表组件

1)、关于ECharts

商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。参考手册：http://echarts.baidu.com/echarts2/doc/doc.html

2)、为ECharts准备一个具备大小（宽高）的Dom

<div id="pi_cpu_Percent_gauge" style="height:200px"></div>
<div id="pi_cpu_temp_gauge" style="height:200px"></div>
<div id="pi_mem_gauge" style="height:200px"></div>
<div id="pi_disk_gauge" style="height:200px"></div>

 　　3)、引入文件echarts.js

<script type="text/javascript" src="../script/echarts-all.js"></script>

 　　4)、<script>标签内动态加载echarts和所需图表

var pi_cpu_Percent_gauge = echarts.init(document.getElementById('pi_cpu_Percent_gauge'));
			var pi_cpu_temp_gauge = echarts.init(document.getElementById('pi_cpu_temp_gauge'));
			var pi_mem_gauge = echarts.init(document.getElementById('pi_mem_gauge'));
			var pi_disk_gauge = echarts.init(document.getElementById('pi_disk_gauge'));
//显示加载图画动画
pi_cpu_Percent_gauge.showLoading();
pi_cpu_temp_gauge.showLoading();
pi_mem_gauge.showLoading();
pi_disk_gauge.showLoading();
//仪表盘图表格式设置，4个图表共用样式
var gauge_option = {
		tooltip : {
		formatter : "{a} <br/>{b} : {c}%"
			},
		series : [{,
			type : 'gauge',
			splitNumber : 5, // 分割段数，默认为5
			axisLine : {// 坐标轴线
			lineStyle : {// 属性lineStyle控制线条样式
			color : [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],width : 8}},
			axisTick : {// 坐标轴小标记
			splitNumber : 5, // 每份split细分多少段
			length : 6, // 属性length控制线长
			lineStyle : {// 属性lineStyle控制线条样式
			color : 'auto'
			}
					},
			axisLabel : {// 坐标轴文本标签，详见axis.axisLabel
			show : true,
			formatter : function(v) {
			switch (v+'') {
								case '20':
									return '弱';
								case '40':
									return '低';
								case '60':
									return '中';
								case '80':
									return '高';
								default:
									return '';
							}
						},
						textStyle : {// 其余属性默认使用全局文本样式，详见TEXTSTYLE
							color : '#333'
						}
					},
					splitLine : {// 分隔线
						show : true, // 默认显示，属性show控制显示与否
						length : 20, // 属性length控制线长
						lineStyle : {// 属性lineStyle（详见lineStyle）控制线条样式
							color : 'auto'
						}
					},
					pointer : {
						width : 5
					},
					detail : {
						formatter : '{value}%',
						textStyle : {// 其余属性默认使用全局文本样式，详见TEXTSTYLE
							color : 'auto',
							fontWeight : 'bolder',
							fontSize : 20
						}
					},
					data : [{
						value : data['cpuPercent']
					}]
				}]
			};
//cpu温度图表单位和坐标轴标签更改
			var temp_gauge_option = {
				series : [{
					max : 70,
					min : 30,
					splitNumber : 4,
					axisLabel : {// 坐标轴文本标签，详见axis.axisLabel
						show : true,
						formatter : function(v) {
							switch (v+'') {
								case '40':
									return '低';
								case '50':
									return '中';
								case '60':
									return '高';
								default:
									return '';
							}
						}
					},
					detail : {
						formatter : '{value}°',
					},
					data : [{
						value : data['cputemp']
					}]
				}]
			};
//延时2秒后加载图表
			setTimeout(function() {
				//隐藏加载动画
				pi_cpu_Percent_gauge.hideLoading();
				pi_cpu_temp_gauge.hideLoading();
				pi_mem_gauge.hideLoading();
				pi_disk_gauge.hideLoading();
				//加载图表
				pi_cpu_Percent_gauge.setOption(gauge_option);
				pi_cpu_temp_gauge.setOption(gauge_option);
				pi_mem_gauge.setOption(gauge_option);
				pi_disk_gauge.setOption(gauge_option);
				//更新图表数据
				pi_cpu_Percent_gauge.setOption({
					series : [{
						data : [{
							value : data['cpuPercent']
						}]
					}]
				});
				pi_cpu_temp_gauge.setOption(temp_gauge_option);
				pi_mem_gauge.setOption({
					series : [{
						data : [{
							value : data['memPercent']
						}]
					}]
				});
				pi_disk_gauge.setOption({
					series : [{
						data : [{
							value : data['hdPercent']
						}]
					}]
				});
			}, 2000);