lunedì, agosto 12, 2013

Page for monitor real-time values ​​that uses graphs gauge with Google api

Hello everyone, here I will explain how to have a php page on some raspberry to monitor real-time values ​​that uses graphs gauge with Google api:

Requirements: php and apache2 without any particular configuration



This will be the final result with a marker that moves in real time:


The project is based on two files: data.php and index.html

data.php: collects the values ​​returning a standard json string with "tags" (example: temp, memory, cpu …). The name of the tag is important because it is used to retrieve the values ​​of the graphics

code:

  1. <?php
  2. $data["mem_used"]=intval(exec('free -m | grep Mem | awk \'{print $3}\''));
  3. $data["temperature"]=floatval(exec('/opt/vc/bin/vcgencmd measure_temp | cut -c6-9'));
  4. $data["cpu"]=floatval(exec('vmstat | egrep -v \'cpu|us\' | awk \'{ print $13 }\''));
  5. $json=json_encode($data);
  6. echo $json;
  7. ?>


launching “php data.php” from terminal

result:

{"mem_used":144,"temperature":56.2}

You can add almost all the commands of the terminal (remember that the commands will be launched with www-data user), if the result of json string is 0 for one parameter, check this command from the terminal with user www-data and check error or permission denied


example: If you add this code (vmstat | egrep -v \'cpu|us\' | awk \'{ print $13 }\') for check cpu percentage you must add www-data user to “video” and “plugdev” linux groups


index.html: if data.php is correct display a gauge graph :)

in the documentation on the internet I have not found a way to dynamically change the graphics so I created a function

code:


  1. <!--
  2. You are free to copy and use this sample in accordance with the terms of the
  3. Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
  4. -->
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7.   <head>
  8.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  9.     <title>
  10.       standard title page
  11.     </title>
  12. <!--
  13. google api don’t change
  14. -->
  15.  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  16.         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  17.     <script type="text/javascript">
  18.       google.load('visualization', '1', {packages: ['gauge']});
  19.           google.setOnLoadCallback(drawVisualization);
  20.           $(document).ready(function() {
  21.                 chart = new google.visualization.Gauge(document.getElementById('visualization'));
  22.                 chart2 = new google.visualization.Gauge(document.getElementById('visualization2'));
  23.                 chart3 = new google.visualization.Gauge(document.getElementById('visualization3'));
  24. // first graph (temperature proc)
  25.         data = google.visualization.arrayToDataTable([
  26.           ['Label', 'Value'],
  27.           ['Temp', 0],
  28.         ]);
  29.                 options = {
  30.           width: 250, height: 250,
  31.           max:100, min:0,
  32.                   animation:{duration: 500},
  33.                   redFrom:70, redTo:100,
  34.                   yellowFrom:50, yellowTo:70,
  35.                   greenFrom:0, greenTo:50,
  36.           minorTicks: 10,
  37.           majorTicks: ["0",,20,,40,,60,,80,,100]
  38.         };
  39. // second graph (ram used)
  40.         data2 = google.visualization.arrayToDataTable([
  41.           ['Label', 'Value'],
  42.           ['Memory', 0],
  43.         ]);
  44.                 options2 = {
  45.           width: 250, height: 250,
  46.           max:512, min:0,
  47.                   animation:{duration: 500},
  48.                   redFrom:400, redTo:512,
  49.                   yellowFrom:300, yellowTo:400,
  50.                   greenFrom:0, greenTo:300,
  51.           minorTicks: 10,
  52.           majorTicks: ["0",,128,,,256,,,384,,512]
  53.         };
  54. // third graph (cpu percentage used)
  55.         data3 = google.visualization.arrayToDataTable([
  56.           ['Label', 'Value'],
  57.           ['Cpu', 0],
  58.         ]);
  59.                 options3 = {
  60.           width: 250, height: 250,
  61.           max:100, min:0,
  62.                   animation:{duration: 500},
  63.                   redFrom:60, redTo:100,
  64.                   yellowFrom:30, yellowTo:60,
  65.                   greenFrom:0, greenTo:60,
  66.           minorTicks: 10,
  67.           majorTicks: ["0",,20,,,50,,,80,,100]
  68.         };
  69.           });
  70. // function to update data automatically
  71.       function drawVisualization() {
  72.                 chart.draw(data,options);
  73.                 chart2.draw(data2,options2);
  74.                 chart3.draw(data3,options3);
  75.       }
  76.           function test(ajaxdata) {
  77.                         var memused=ajaxdata.mem_used;
  78.                         var temperature=ajaxdata.temperature;
  79.                         var cpu=ajaxdata.cpu;
  80.                         console.log(ajaxdata);
  81.                         data.setValue(0,1,temperature);
  82.                         data2.setValue(0,1,memused);
  83.                         data3.setValue(0,1,cpu);
  84.                         chart.draw(data,options);
  85.                         chart2.draw(data2,options2);
  86.                         chart3.draw(data3,options3);
  87.           }
  88.           function status_update() {
  89.                  var jqxhr = $.getJSON('data.php?' + 'random=' + Math.random(), function() {
  90.                 })
  91.                 .fail(function() {
  92.                 })
  93.                 .done(function(ajaxdata) {
  94.                 test(ajaxdata);
  95.                 });
  96.           }
  97.       var refreshId = setInterval('status_update()', 1000);
  98.           $.ajaxSetup({ cache: false });
  99.     </script>
  100.   </head>
  101. <!--
  102. html standard for view a graph
  103. -->
  104. <body style="font-family: Arial;border: 0 none;">
  105. <div id="visualization" style="float: left; width: 250px; height: 250px;"></div>
  106. <div style="clear:both"></div>
  107. <div id="visualization2" style="float: left; width: 250px; height: 250px;"></div>
  108. <div id="visualization3" style="float: left; width: 250px; height: 250px;"></div>
  109.   </body>
  110. </html>




I hope I have been helpful, in the future will add the code to save the values in line chart for historical values (temperature e humidity sensor...) and button to take actions through gpio only via php page. Thx to my friend Luca Soltoggio (http://arduinoelectronics.wordpress.com) for the code support

Posta un commento