Advertisement
frankiepankie

Arduino temperature logger Highcharts graph

Jul 26th, 2014
676
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.   <meta http-equiv="refresh" content="300"> <!-- reload page every 5 minutes !-->
  6.   <title>Temperaturen</title>
  7.   <?php
  8.   $link = mysql_connect("localhost", "YOUR_MYSQL_USER_HERE", "YOUR_MYSQL_PASSWORD_HERE") or die("Error verbinden met DB: " . mysql_error());
  9.  
  10.   $db = mysql_select_db("artemp", $link);
  11.   if (!$db) {
  12.     mysql_close($link);
  13.     die("Error selecteren DB: " . mysql_error());
  14.   }
  15.  
  16. // Alle waardes ophalen voor AANVOER. Query haalt nu alle resultaten op. Met 'DATE_SUB' in query kunnen waarden beperkt worden.
  17. $result = mysql_query("SELECT unix_timestamp (event) AS ts, celsius AS 'sensor_1' FROM temperature WHERE sensor = '28 92 19 a8 04 00 00 65'"); //AND event >= DATE_SUB(CURDATE(), INTERVAL 1 WEEK)");
  18.  if (!$result) {
  19.   mysql_close($link);
  20.   die("Error met query: " . mysql_error());
  21. }
  22. while ($row = mysql_fetch_array($result)) {
  23.   $datetime = (($row['ts']) * 1000) + 7200000; // convert from Unix timestamp to JavaScript time
  24.   $value1   = $row['sensor_1'];
  25.   if (!$meting1)
  26.     $meting1 = $value1;
  27.   $data1[] = "[$datetime, $value1]";
  28.  
  29. }
  30.  
  31. $data_1 = join($data1, ',');
  32.  
  33.  
  34. // Alle waardes ophalen voor RETOUR. Query haalt nu alle resultaten op. Met 'DATE_SUB' in query kunnen waarden beperkt worden.
  35. $result = mysql_query("SELECT unix_timestamp (event)AS ts, celsius AS 'sensor_3', event FROM temperature WHERE sensor = '28 f3 86 b5 04 00 00 ec'"); //AND event >= DATE_SUB(CURDATE(), INTERVAL 1 WEEK)");
  36.  if (!$result) {
  37.   mysql_close($link);
  38.   die("Error met query: " . mysql_error());
  39. }
  40. while ($row = mysql_fetch_array($result)) {
  41.   $latest_measure = $row['event'];
  42.   $datetime       = (($row['ts']) * 1000) + 7200000; // convert from Unix timestamp to JavaScript time
  43.   $value3         = $row['sensor_3'];
  44.  
  45.   if (!$meting3)
  46.     $meting3 = $value3;
  47.   $data2[] = "[$datetime, $value3]";
  48. }
  49.  
  50. $data_2 = join($data2, ',');
  51.  
  52. // Alle waardes ophalen voor WOONKAMER. Query haalt nu alle resultaten op. Met 'DATE_SUB' in query kunnen waarden beperkt worden.
  53. $result = mysql_query("SELECT unix_timestamp (event)AS ts, celsius AS 'sensor_4', event FROM temperature WHERE sensor = '28 66 df a8 04 00 00 75'"); //AND event >= DATE_SUB(CURDATE(), INTERVAL 1 WEEK)");
  54.  if (!$result) {
  55.   mysql_close($link);
  56.   die("Error met query: " . mysql_error());
  57. }
  58. while ($row = mysql_fetch_array($result)) {
  59.  
  60.   $datetime = (($row['ts']) * 1000) + 7200000; // convert from Unix timestamp to JavaScript time
  61.   $value4   = $row['sensor_4'];
  62.  
  63.   if (!$meting4)
  64.     $meting4 = $value4;
  65.   $data4[] = "[$datetime, $value4]";
  66. }
  67. $data_4 = join($data4, ',');
  68.  
  69. ?>
  70.  
  71. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  72. <script type="text/javascript">
  73. $(function () {
  74.   $('#container').highcharts({
  75.     chart: {
  76.       zoomType: 'x'
  77.     },
  78.     title: {
  79.       text: 'Arduino temperatuurlogger'
  80.     },
  81.     subtitle: {
  82.       text: document.ontouchstart === undefined ?
  83.       'Klik en sleep in de grafiek om in te zoomen' :
  84.                       'Maak een knijpbeweging om in te zoomen' //only shown on touch (tablet) devices
  85.                     },
  86.                     xAxis: {
  87.                       type: 'datetime',
  88.                   minRange: 5 * 60 * 1000 // Smallest zoominterval (in miliseconds). 5 min. This is matched to the Arduino temperature interval. If your interval is 1 min, change first number to 1
  89.                 },
  90.                 yAxis: {
  91.                   //min: 10,    // Schaal instellen, uncomment de min en max voor automatisch    
  92.                   //max: 80,
  93.                   title: {
  94.                     text: 'Temperatuur (°C)'
  95.                   }
  96.                 },
  97.                 tooltip: {
  98.                   valueSuffix: '°C'
  99.                 },
  100.                 legend: {
  101.                   layout: 'vertical',
  102.                   align: 'right',
  103.                   verticalAlign: 'middle',
  104.                   borderWidth: 0
  105.                 },
  106.                 plotOptions: {
  107.                   area: {
  108.                     fillColor: {
  109.                       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
  110.                       stops: [
  111.                       [0, Highcharts.getOptions().colors[0]],
  112.                       [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
  113.                       ]
  114.                     },
  115.                     marker: {
  116.                       radius: 2
  117.                     },
  118.                     lineWidth: 1,
  119.                     states: {
  120.                       hover: {
  121.                         lineWidth: 1
  122.                       }
  123.                     },
  124.                     threshold: null
  125.                   }
  126.                 },
  127.                 series: [{
  128.                   name: 'Aanvoer',
  129.                   pointInterval: 24 * 3600 * 1000,
  130.                   color: '#FF0000',
  131.                   marker: {
  132.                     enabled: false
  133.                   },
  134.                   data: [<?php
  135.                   echo ($data_1);
  136.                   ?>]
  137.                 },
  138.                 {
  139.                   name: 'Retour',
  140.                   color: '#0000FF',
  141.                   marker: {
  142.                     enabled: false
  143.                   },
  144.                   data: [<?php
  145.                   echo ($data_2);
  146.                   ?>]
  147.                 },
  148.                 {
  149.                   name: 'Woonkamer',
  150.                   color: '#008000',
  151.                   marker: {
  152.                     enabled: false
  153.                   },
  154.                   data: [<?php
  155.                   echo ($data_4);
  156.                   ?>]
  157.                 },
  158.                 ]
  159.  
  160.               });
  161. });
  162.  <?
  163.  
  164.  
  165. // Nieuwste enkele waarde voor AANVOER ophalen
  166.  $result = mysql_query("SELECT id as LATEST, celsius FROM temperature WHERE sensor = '28 92 19 a8 04 00 00 65' ORDER BY id DESC LIMIT 1");
  167.  if (!$result) {
  168.   mysql_close($link);
  169.   die("Error met query: " . mysql_error());
  170. }
  171. while ($row = mysql_fetch_array($result)) {
  172.   $nieuwste_from_aanvoer = $row['celsius'];
  173.  
  174.  
  175. }
  176.  
  177.  
  178. // Nieuwste enkele waarde voor RETOUR ophalen
  179. $result = mysql_query("SELECT id as LATEST, celsius FROM temperature WHERE sensor = '28 f3 86 b5 04 00 00 ec' ORDER BY id DESC LIMIT 1");
  180. if (!$result) {
  181.   mysql_close($link);
  182.   die("Error met query: " . mysql_error());
  183. }
  184. while ($row = mysql_fetch_array($result)) {
  185.   $nieuwste_from_retour = $row['celsius'];
  186.  
  187.  
  188. }
  189.  
  190. // Nieuwste enkele waarde voor WOONKAMER ophalen
  191. $result = mysql_query("SELECT id as LATEST, celsius FROM temperature WHERE sensor = '28 66 df a8 04 00 00 75' ORDER BY id DESC LIMIT 1");
  192. if (!$result) {
  193.   mysql_close($link);
  194.   die("Error met query: " . mysql_error());
  195. }
  196. while ($row = mysql_fetch_array($result)) {
  197.   $nieuwste_from_woonkamer = $row['celsius'];
  198.  
  199. }
  200.  
  201. ?>    
  202. </script>
  203. <style type="text/css">
  204. body {
  205.   background-color: #FFFFFF;
  206.   font-family: 'Helvetica, Arial, sans-serif';
  207.   color: black;
  208.   font-size: 20px;
  209.   text-align: center;
  210. }
  211. p {
  212.   font-family: 'helvetica, arial, sans-serif';
  213. }
  214. </style>
  215. </head>
  216. <body>
  217.   <script src="js/highcharts.js"></script>
  218.   <script src="js/modules/exporting.js"></script>
  219.  
  220.   <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  221.   <p style="font-family:helvetica, tahoma, sans-serif;">
  222.     <span style="color: #000000";>Actueel:</span> <br />
  223.     <span style="color: #FF0000";>Aanvoer: <?php echo (number_format($nieuwste_from_aanvoer, 1)); ?> &deg;C</span>
  224.     <span style="color: #0000FF";>&nbsp;Retour: <?php echo (number_format($nieuwste_from_retour, 1)); ?> &deg;C</span>
  225.     <span style="color: #FFA500";>&nbsp;DeltaT: <?php echo (number_format($nieuwste_from_aanvoer - $nieuwste_from_retour, 1)); ?> &deg;C</span>
  226.     <span style="color: #008000";>&nbsp;Woonkamer: <?php echo (number_format($nieuwste_from_woonkamer, 1)); ?> &deg;C</span><br />
  227.     <br />
  228.     <span style="color: #000000";><font size="2">Laatste meting opgehaald om:</span> <br /> <?php echo $latest_measure; ?></font><br>
  229. </p>
  230.  
  231. <?php
  232. mysql_close($link);
  233. ?>
  234.  
  235. </body>
  236. </html>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement