你的位置:首页 > 操作系统

[操作系统]使用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" ></div><div id="pi_cpu_temp_gauge" ></div><div id="pi_mem_gauge" ></div><div id="pi_disk_gauge" ></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);