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);

使用APICloud设计物联网APP的更多相关文章

  1. 移动端UI界面设计:APP字体排版设计的七个原则

    移动端UI界面设计:APP字体排版设计的七个原则 发布于: 2015 年 2 月 9 日 by admin 再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP ...

  2. 用APICloud开发iOS App Clip详细教程

    App Clip是苹果公司在WWDC20开发者大会上发布的新功能,用户可以只访问应用程序的一小部分,而无需下载整个应用,被称为苹果小程序.本文主要介绍如何通过APICloud开发App Clip. 一 ...

  3. 如何设计一个 App 的注册登录流程?

    移 动设备发力之前的登录方式很简单:用户名/邮箱+密码+确认密码,所有的用户登录注册都是围绕着邮箱来做.随着移动设备和社交网络的普及,邮箱不再是唯 一,渐渐的出现了微博,QQ,微信等第三方登录方式,手 ...

  4. 通过设计让APP变快的6个方法

    我们都知道不管网页还是移动应用,响应速度都是最重要的体验指标之一,并且移动应用的网络环境不稳定,速度的体验显得尤为重要.其实速度优化不仅是程序员的事,设计,也能够让APP变得更快. 1. 后台执行 这 ...

  5. iPhone App开发实战手册学习笔记(9)之设计IOS App的目标

    1 前言 如果我们要做一个属于自己的App需要达到那些目标呢,今天就来介绍一下. 2 详述 2.1 关注用户及其需求 你的主要目标永远都是在设计方案之前先想好用户用例.有些开发人员喜欢编写用户故事来确 ...

  6. ThinkPHP5+Apicloud+vue商城APP实战

    ThinkPHP5+Apicoud+vue商城APP实战 目录 章节1:项目概述 课时1apicloud平台介绍.04:38 课时2知识体系架构介绍.16:10 章节2:apicloud50分钟快速入 ...

  7. 用例设计之APP用例覆盖准则

    基本原则 本文主要讨论APP功能用例的覆盖,基本原则: 用户场景闭环(从哪来到哪去) 遍历所有的实现逻辑路径 需求点覆盖 覆盖维度 APP功能用例设计主要使用传统的黑盒用例设计方法.同时,作为移动AP ...

  8. 设计移动App的十大技巧

    编写一款Android或iOS应用也许很容易,但是若想设计的成功却不是一件简单的事,用户界面对于一款移动应用的成功是至关重要的.也许你会说,为何界面那么糙的Flappy Bird可以大红大紫,可那毕竟 ...

  9. Processing设计Android APP(1) - 安装

    1.安装环境: A. Android Studio B. Processing 3.4 (64bit) 首先,直接安装Android Studio,我这里版本是3.2.1. 然后,新建一个Sample ...

随机推荐

  1. magento站点还原到本地

    问题描述 首先将网站文件夹解压到xampp/htdocs/wenjianjia目录下,然后替换sql文件里的域名为localhost/wenjianjia.然后访问前台,正常.访问后台,出问题了 Ma ...

  2. Day10 网络编程(续)

    作用域 Python的作用域是函数,没有块级作用域 if 1 == 1: name = 'wang' print(name) #wang   for i in range(10): name = i ...

  3. [r]Seven habits of effective text editing

    Seven habits of effective text editing(via) Bram Moolenaar November 2000 If you spend a lot of time ...

  4. 枚举宏(Adopting Modern Objective-C)

    使用NS_ENUM 和 NS_OPTIONS宏定义枚举.Adopting Modern Objective-C 使用NS_ENUM宏定义一组互斥的枚举值: typedef NS_ENUM(NSInte ...

  5. C语言知识总结

    明白一些变量 熟悉一些语句 组合一些函数 C语言——>库  帮你写好放在库中 魔数 凭空变出来的数字,不知道 数字表示的含义,影响代码的可读性. C语音的参数传递 非常特殊,传递的是一个替身. ...

  6. sql的执行顺序

    sql的一般执行顺序(8)SELECT (9)DISTINCT (11)<Top Num> <select list>(1)FROM [left_table](3)<jo ...

  7. 转:PHP开发者应了解的24个库

    原文来自于:http://blog.jobbole.com/54201/ 作为一个PHP开发者,现在是一个令人激动的时刻.每天有许许多多有用的库分发出来,在Github上很容易发现和使用这些库.下面是 ...

  8. C语言位运算

    C语言位运算详解    位运算是指按二进制进行的运算.在系统软件中,常常需要处理二进制位的问题.C语言提供了6个位操作运算符.这些运算符只能用于整型操作数,即只能用于带符号或无符号的char,shor ...

  9. [BZOJ 2165] 大楼 【DP + 倍增 + 二进制】

    题目链接:BZOJ - 2165 题目分析: 这道题我读了题之后就想不出来怎么做,题解也找不到,于是就请教了黄学长,黄学长立刻秒掉了这道题,然后我再看他的题解才写出来..Orz 使用 DP + 倍增 ...

  10. js singleton

    方案一:利用闭包的两个作用,可以变通地读到内部的变量. 方案二: 是可以让这些变量始终在内存中. 方案一 var SingletonTester = (function () { //单例方法 fun ...