Temperature sensor value in Google Gauge

1,294 views
Skip to first unread message

Lennart Kuhlmeier

unread,
May 8, 2014, 10:57:58 AM5/8/14
to web...@googlegroups.com
Hi I'm trying to get a Google gauge to show the value of a temperature sensor.
So far I can get the sensor valued displayed as a number on my web page
In the script part:
    //temp_out is the DS18B20 device name specified in config file
    tmp = new Temperature("temp_out");{
      setInterval(updateUI, 1000);
    }
     function updateUI() {
      tmp.getCelsius(temperatureCallback);
    }
     // callback function used to display the temperature
     function temperatureCallback(tmp, data) {
      // jQuery functions
      //$("#bt_heater").text(data + " °C");
      $("#temp_o").text(data);
 
In the body part:
<div id="temp_o"></div>
 
But the google gauge requires a number as input inside a Java function.
    google.load('visualization', '1', {packages:['gauge']});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
   var data = google.visualization.arrayToDataTable([
     ['Label', 'Value'],
     ['T out', xxxx],
   ]);
Where xxxx is a real number.
 
How do I get the temperature reading in there!?

Lennart Kuhlmeier

unread,
May 9, 2014, 5:53:04 AM5/9/14
to web...@googlegroups.com
Got it working!
Below index.htlm will display a single google gauge on the screen with temperature readings every 1000 milliseconds from a temperature device set in the config file.
 
This is how:
 
<html>
  <head>
 <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
  webiopi().ready(function() {
   //temp2 is the DS18B20 device name specified in config file
   tmp = new Temperature("temp2");{
    setInterval(updateUI,1000);

   }
    function updateUI() {
     tmp.getCelsius(temperatureCallback);
     }
    // callback function used to display the temperature
    function temperatureCallback(tmp, data) {
    // jQuery functions
    gaugeData.setValue(0, 0, data);
    gauge.draw(gaugeData, gaugeOptions);
    }
   });
 </script>
 <script type="text/javascript">
 google.load('visualization', '1', {packages: ['gauge']});
 google.setOnLoadCallback(drawGauge);
 var gaugeOptions = {min: 0, max: 110, yellowFrom: 50, yellowTo: 70,
  redFrom: 70, redTo: 110, minorTicks: 5};
 var gauge;
 function drawGauge() {
   gaugeData = new google.visualization.DataTable();
   gaugeData.addColumn('number', 'T Out');
   gaugeData.addRows(1);
   gaugeData.setCell(0, 0, 0);
   gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));{
   gauge.draw(gaugeData, gaugeOptions);
   }
 }
 </script>
</head>
  <body>
 <div id="gauge_div" style="width:560px; height: 280px;"></div>
  </body>
</html>

Dave Reynolds

unread,
May 27, 2014, 4:54:51 AM5/27/14
to web...@googlegroups.com
Works for me too :) .... thnx

Paul P

unread,
Oct 11, 2015, 3:53:25 AM10/11/15
to WebIOPi
Hi, thanks for this info. I realise that this post is rather old but I have a question. Can you please advise me how to specify my DS18B20 serial number in the config file? I new to this so pleaSe excuse. Paul

trevor olexy

unread,
Mar 9, 2016, 8:59:25 AM3/9/16
to WebIOPi
This is also late and you probably figured it out Paul P. But you must know the serial number first. assuming you do (if not I can show you how...) you run the following...

sudo nano /etc/webiopi/config    #this opens the text editor on the pi 

once inside scroll down to [Devices]
you should see a short list of devices commented out with #
delete the # from the line listing a DS18B20 slave
use the slave to specify the serial number of your temp sensor: 28-xxxxxxxxxxx or whatever yours is.

Sorry this is so late! I just found this post because I couldnt get hte temp gauge to work so thank you, it works great now!!


Reply all
Reply to author
Forward
0 new messages