Use APICloud to design Iot apps and apps connected to apicloud

Use APICloud to design Iot apps and apps connected to apicloud
0. Preface 1). APP functions:

1. Switch the indoor outlet.

2. view Real-time indoor temperature and humidity trends.

3. Control the walking of the car. Enable, disable, and move the camera of the car.

4. view the camera monitoring screen to take pictures and trace back.

5. view the server resource consumption.

2) The Foundation required to design this APP:

HTML: the front-end framework is used.

Js: basic syntax.

Use of APICloude IDE.

3) APP demonstration

　　 　　

　　

1. Close On APICloud:

Use standard WEB technology to easily develop iOS and Android native applications, covering the full life cycle of apps, including development, API integration, testing, channel packaging, and operation management.

Official Website: http://www.apicloud.com/

2. JSON data format processing server return format:

 

JS to get data:

$. Ajax ({type: "GET", async: false, url: "http://api.php", data :{}, dataType: "json", // return data in the form of jsonsuccess: function (result) {if (result) {data ['uptime'] = result. uptime; data ['mempercent '] = result. memPercent. toFixed (2 );//. toFixed (2) after the decimal point, retain two data ['cputemp '] = result. cpu_temp.toFixed (2); data ['cpupercent '] = result. cpuPercent. toFixed (2); data ['hdpercent '] = result. hdPercent. toFixed (2 );}}});

 

3. ECharts chart component 1) about ECharts

Business-level data charts, a pure Javascript chart library, can run smoothly on PCs and mobile devices, providing intuitive, vivid, interactive, and highly customized data visualization charts. Reference: http://echarts.baidu.com/echarts2/doc/doc.html

2) Prepare a Dom with the size (width and height) for ECharts

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

4) <script> dynamically load echarts and required charts in the tag

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 '); // display the animated GIF (); animated (); pi_mem_gauge.showLoading (); pi_disk_gauge.showLoading (); // dashboard chart format settings, shared style var gauge_option = {tooltip: {formatter: "{a} <br/> {B }:{ c }%"}, series: [{, type: 'gauge', splitNumber: 5, // number of segments. The default value is 5 axisLine: {// axis line lineStyle: {// attribute lineStyle control line style color: [[0.2, '#228b22'], [0.8, '# 48b'], [1,' # ff4500 '], width: 8 }}, axisTick: {// coordinate axis small mark splitNumber: 5, // length of each split segment: 6, // attribute length control line length lineStyle: {// attribute lineStyle control line style color: 'auto' }}, axisLabel: {// axis text label. For details, see axis. axisLabelshow: true, formatter: function (v) {switch (v + '') {case '20': return 'weak '; case '40': return 'low '; case '60': return 'medium'; case '80': return 'high'; default: return '';}, textStyle: {// The Global Text style is used for other attributes by default. For details, see TEXTSTYLEcolor: '# 000000' }}, splitLine: {// delimiter show: true, // displayed by default, attribute show control display length: 20, // attribute length control line length lineStyle: {// attribute lineStyle (see lineStyle) control line style color: 'auto' }}, pointer: {width: 5}, detail: {formatter: '{value} %', textStyle: {// The Global Text style is used by default for other attributes. For details, see TEXTSTYLEcolor: 'auto', fontWeight: 'bolder', fontSize: 20 }}, data: [{value: data ['cpupercent ']}; // change the unit and axis label of the cpu temperature chart to var temp_gauge_option = {series: [{max: 70, min: 30, splitNumber: 4, axisLabel: {// axis text label, for details, see axis. axisLabelshow: true, formatter: function (v) {switch (v + '') {case '40': return 'low'; case '50': return '中 '; case '60': return 'high'; default: return ''' ;}}, detail: {formatter: '{value} °',}, data: [{value: data ['cputemp ']}; // setTimeout (function () {// hide the animation pi_cpu_Percent_gauge.hideLoading (); pi_cpu_temp_gauge.hideLoading () after 2 seconds of delay (); loads (); loads (gauge_option); pi_mem_gauge.setOption (gauge_option); pi_disk_gauge.setOption (gauge_option ); // update the chart data 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 );