主页 > 硬件 > ARDUINO时钟项目-3

ARDUINO时钟项目-3

2016年5月20日 ARDUINO时钟项目-3无评论 阅读： 12,194 次

当前进展（0520）：

本地温度、湿度、亮度指示

NTP自动对时、时钟显示

网络历史数据存储、历史数据展示

手机查看展示页面：

2016-05-20

数据展示采用HighCharts控件。通过ajax调用PHP来获取MySQL中存储的历史数据，然后通过HighCharts显示出来。

getDatas.php代码：

<?php
$db_name = "idata";
$table_name="data";
$db_host = "localhost";
$db_user = "root";
$db_pass = "PASSWD";
 
$select="";
 
$index = 0;
if(isset($_GET['index'])) {
$index = (int)$_GET['index'];
} 
 
@$nowtime=strtotime("now");
if($index == 0)
$starttime=$nowtime-3600;
else if($index == 1)
$starttime=$nowtime-10800;
else if($index == 2)
$starttime=$nowtime-86400;
else if($index == 3)
$starttime=$nowtime-604800;
else
$starttime=$nowtime-2592000;
 
 
$link = mysql_connect($db_host,$db_user,$db_pass) or die("Can't connect DB");
$db = mysql_select_db($db_name);
mysql_query("set names utf8");
 
$select="";
if($index<2)
$select = "select `index`,UNIX_TIMESTAMP(`time`),`wen`,`shi`,`guang`,`pm25`,`other` from ".$table_name." where UNIX_TIMESTAMP(`time`)>".$starttime;
else if($index==2)
$select = "select `index`,UNIX_TIMESTAMP(`time`),`wen`,`shi`,`guang`,`pm25`,`other` from ".$table_name." where (UNIX_TIMESTAMP(`time`)>".$starttime.") and (`index` mod 5)=0" ;
else if($index==3)
$select = "select `index`,UNIX_TIMESTAMP(`time`),`wen`,`shi`,`guang`,`pm25`,`other` from ".$table_name." where (UNIX_TIMESTAMP(`time`)>".$starttime.") and (`index` mod 30)=0" ;
else 
$select = "select `index`,UNIX_TIMESTAMP(`time`),`wen`,`shi`,`guang`,`pm25`,`other` from ".$table_name." where (UNIX_TIMESTAMP(`time`)>".$starttime.") and (`index` mod 60)=0" ;
 
$result = mysql_query($select);
 
$datas = array();
 
while($row = mysql_fetch_row($result)) {
$datas[] = $row;
}
 
echo json_encode($datas);
?>

HTML代码：

<!DOCTYPE html>
<html>
 <head> 
  <style type="text/css">
li {
float: left;
line-height: 34px;
width: 126px;
list-style: none;
}
 li a {
display: block;
text-align: center;
font-family: 微软雅黑;
color: #666;
}
a:link {
outline: none;
text-decoration: none;
}
li a.cur {
background: url(./images/filter_cur.png) no-repeat;
}
.pic {
width: 1200px;
height: 429px;
background: url(./images/box2.png) no-repeat;
}
ul,li,div {margin: 0;padding: 0;outline: 0;}
.clear {
clear: both;
}
</style> 
  <title>环境监控数据</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
  <script type="text/javascript" src="js/highcharts.js"></script> 
  <script>
 
//图表属性，不包含数据
var options = {
    credits: {
        enabled: false // 禁用版权信息
    },
 
    chart: {
        renderTo: 'container1',
        type: 'spline',
        zoomType: 'x',
        spacingRight: 20
    },
    title: {
        text: '温度曲线',
        style: {
                fontWeight: 'bold',
                               fontFamily: '微软雅黑'
            },
        x: -20 //center
    },
 
    xAxis: {
        type: 'datetime',
 
 
 
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    series: [{
        name: '温度',
 
 
 
    }],
    tooltip: {
 
        formatter: function() {
            return '<b>' + this.series.name + '：' + this.y +'</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x);
        }
    },
 
    plotOptions: {
        spline: {
            dataLabels: {
                enabled: false
            },
            animation: false,
            marker: {
                enabled: false
            },
        },
    },
};
 
 
 
//初始函数，设置定时器，定时取数据
$(function() {
     queryData(0, 0);
     queryData(1, 0);
     queryData(2, 0);
    var i = 0;
 
 
});
 
//Ajax 获取数据并解析创建Highcharts图表
function queryData(num, index) {
    $.ajax({
        url: 'getDatas.php?index=' + index,
        type: 'get',
        dataType: "json",
        success: function(data) {
            var categories = [];
            var val = [];
                        var test= [];
            var count = 0;
            $.each(data,
            function(i, n) {
 
                //加8个时区
                categories[i] = n[1] * 1000 + 28800000;
                                if (num == 0) {
                val[i] = n[2] * 1;
                                } else if(num == 1) {
                val[i] = n[3] * 1;
                } else  {
                                 val[i] = n[4] * 1;
                                 }
                                  test[i]=[categories[i],val[i]];
 
                count++;
            });
            if (num == 0) {
                $(".ts a").removeClass('cur');
                $("#t" + "_" + index).addClass('cur');
                options.chart.renderTo = "container1";
                options.title.text = "温度曲线";
                options.yAxis.title.text = "温度(°C)";
                options.series[0].name = "温度";
 
            } else if (num == 1) {
                $(".ss a").removeClass('cur');
                $("#s" + "_" + index).addClass('cur');
                options.chart.renderTo = "container2";
                options.title.text = "湿度曲线";
                options.yAxis.title.text = "湿度(%)";
                options.series[0].name = "湿度";
 
            } else  {
                $(".gs a").removeClass('cur');
                $("#g" + "_" + index).addClass('cur');
                options.chart.renderTo = "container3";
                options.title.text = "光照强度曲线";
                options.yAxis.title.text = "光照度(LUX)";
                options.series[0].name = "光照度";
 
            }
            options.series[0].data = test;
 
 
            if (count <= 30) options.plotOptions.spline.dataLabels.enabled = true;
            else options.plotOptions.spline.dataLabels.enabled = false;
            chart = new Highcharts.Chart(options);
 
 
        }
    });
}
 
</script> 
 </head> 
 <body> 
  <div class="index"> 
   <ul class="ts" style="margin-left:5px;"> 
    <li><a id="t_0" href="javascript:queryData(0,0)" class="cur">最近1小时</a></li> 
    <li><a id="t_1" href="javascript:queryData(0,1)" class="">最近3小时</a></li> 
    <li><a id="t_2" href="javascript:queryData(0,2)" class="">最近1天</a></li> 
    <li><a id="t_3" href="javascript:queryData(0,3)" class="">最近1周</a></li> 
    <li><a id="t_4" href="javascript:queryData(0,4)" class="">最近1月</a></li> 
    <div class="clear"></div> 
   </ul> 
  </div> 
  <div class="pic"> 
   <br /> 
   <div id="container1" style="min-width:800px;width:1100px;height:400px;margin-top:5px; margin: 0 auto;"></div> 
  </div> 
 
  <br /> 
  <div class="index"> 
   <ul class="ss" style="margin-left:5px;"> 
    <li><a id="s_0" href="javascript:queryData(1,0)" class="cur">最近1小时</a></li> 
    <li><a id="s_1" href="javascript:queryData(1,1)" class="">最近3小时</a></li> 
    <li><a id="s_2" href="javascript:queryData(1,2)" class="">最近1天</a></li> 
    <li><a id="s_3" href="javascript:queryData(1,3)" class="">最近1周</a></li> 
    <li><a id="s_4" href="javascript:queryData(1,4)" class="">最近1月</a></li> 
    <div class="clear"></div> 
   </ul> 
  </div> 
  <div class="pic"> 
   <br /> 
   <div id="container2" style="min-width:800px;width:1100px;height:400px;margin-top:5px; margin: 0 auto;"></div> 
  </div>  
 
  <br /> 
  <div class="index"> 
   <ul class="gs" style="margin-left:5px;"> 
    <li><a id="g_0" href="javascript:queryData(2,0)" class="cur">最近1小时</a></li> 
    <li><a id="g_1" href="javascript:queryData(2,1)" class="">最近3小时</a></li> 
    <li><a id="g_2" href="javascript:queryData(2,2)" class="">最近1天</a></li> 
    <li><a id="g_3" href="javascript:queryData(2,3)" class="">最近1周</a></li> 
    <li><a id="g_4" href="javascript:queryData(2,4)" class="">最近1月</a></li> 
    <div class="clear"></div> 
   </ul> 
  </div> 
  <div class="pic"> 
   <br /> 
   <div id="container3" style="min-width:800px;width:1100px;height:400px;margin-top:5px; margin: 0 auto;"></div> 
  </div>  
 
 </body>
</html>

 

在线演示：

http://blog.iytc.net/iot/iot.html

 

发表评论

新用户的评论需审核后才会显示;

电子邮件地址不会被公开； 必填项已用*标注