JustGage with TemperatureWebPanel and DHT 11 sensor

I am trying to get the "content" of temp, hum, and time to work with justgage here is the code that does not work
index.html

<!DOCTYPE html>
<html>
 <head>
  <title>Control Board</title>
  <script type="text/javascript" src="zepto.min.js"></script>
  <script src="raphael.2.1.0.min.js"></script>
  <script src="justgage.1.0.1.min.js"></script>
  
  <script type="text/javascript">
    function refresh() {
     $('#content').load('/arduino/temp');
     $('#content2').load('/arduino/hum');
     $('#content3').load('/arduino/time');
    }
  </script>
  <script>
    var g1, g2, g3;
    window.onload = function(){
        var g1 = new JustGage({
          id: "g1", 
          value: "content", 
          min: 0,
          max: 100,
          title: "Temperature",
          label: "Fahrenheit"
        });
        
         var g2 = new JustGage({
          id: "g2", 
          value: "content2", 
          min: 0,
          max: 100,
          title: "Humidity",
          label: "Humidity"
        });
        
        var g3 = new JustGage({
          id: "g3", 
          value: "content3", 
          min: 0,
          max: 100,
          title: "Time",
          label: "Time"
        });

         setInterval(function() {
           g1.refresh(getRandomInt(50, 100));
           g2.refresh(getRandomInt(50, 100));          
           g3.refresh(getRandomInt(0, 50));
           }, 2500);
        };

   </script>
  </head>
<body onload="setInterval(refresh, 1000);">
    <div id="g1"></div>
    <div id="g2"></div>
    <div id="g3"></div>
    <div id="content">Waiting for Control Board...</div>
</body>
</html>

and here is the Sketch

#include <Bridge.h>
#include <YunServer.h>
#include <YunClient.h> 

#include "DHT.h"
#define DHTPIN 2     // what pin we're connected to

#define DHTTYPE DHT11   // DHT 11 

// Connect pin 1 (on the left) of the sensor to +3.3V
// Connect pin 2 of the sensor to whatever your DHTPIN is
// Connect pin 4 (on the right) of the sensor to GROUND
// Connect a 10K resistor from pin 2 (data) to pin 1 (power) of the sensor

DHT dht(DHTPIN, DHTTYPE);
 
YunServer server;
 
void setup() {
  Bridge.begin();
  server.listenOnLocalhost();
  server.begin();
  
  dht.begin();
}
 
void loop() {
  YunClient client = server.accept();
  
  // Reading temperature or humidity takes about 250 milliseconds!
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  float h = dht.readHumidity();
  float t = dht.readTemperature(true);
 
  if (client) {
    // read the command
    String request  = client.readString();
    request.trim();   //kill whitespace
     if (request == "temp") {
      //client.print("
Current Temperature: ");
      client.print(t);
      //client.print(" degrees F");
     }
     if (request == "hum") {
      //client.print("
Current Humidity: ");
      client.print(h);
     }
     if (request == "time") {
      // get the time from the server:
      Process time;
      time.runShellCommand("date");
      String timeString = "";
      while (time.available()) {
        char c = time.read();
        timeString += c;
      }
      client.print(timeString);
      }
    client.stop();
  }
  delay(50);
}

All I get is the value of temp. Justgage "g1, g2, and g3" does not show up does anyone have any idea what I have wrong?

  1. Yun configuration page, make sure REST API access set Open.

  2. Use browser access url endpoint directly.

http://arduino_ip_address/arduino/temp
http://arduino_ip_address/arduino/hum
http://arduino_ip_address/arduino/time

  1. Try different browser.
  1. Yun configuration page, make sure REST API access set Open.

  2. Use browser access url endpoint directly.

http://arduino_ip_address/arduino/temp
http://arduino_ip_address/arduino/hum
http://arduino_ip_address/arduino/time

  1. Try different browser.

sonnyyu I tried all above and I still can not pass the values to justGage

I have tried with no luck

var g2 = new JustGage({
          id: "g2", 
          value: $.get('/arduino/temp'), 
          min: 0,
          max: 100,
          title: "Temperature",
          label: "Fahrenheit"
        });

But I can get this to work

<!doctype html>
<html>
  <head>
    <title>Auto-adjust</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      body {
        text-align: center;
      }
      
      #g1 {
        width:400px; height:320px;
        display: inline-block;
        margin: 1em;
      }
      
      p {
        display: block;
        width: 450px;
        margin: 2em auto;
        text-align: left;
      }
    </style>
    
    <script src="resources/js/raphael.2.1.0.min.js"></script>
    <script src="resources/js/justgage.1.0.1.min.js"></script>
    <script>
      var g1;
      
      window.onload = function(){
        var g1 = new JustGage({
          id: "g1", 
          value: getRandomInt(0, 100), 
          min: 0,
          max: 100,
          title: "Big Fella",
          label: "pounds"
        });
      
        setInterval(function() {
          g1.refresh(getRandomInt(50, 100));
        }, 2500);
      };
    </script>

	</head>
  <body>    
    <div id="g1"></div>
  </body>
</html>

But the value is not passed from the "Yun" it is just random
Any idea what I am doing wrong? Thanks

  1. Use browser access url endpoint directly.

http://arduino_ip_address/arduino/temp
http://arduino_ip_address/arduino/hum
http://arduino_ip_address/arduino/time

Did you get any thing form them? test one by one. post the result here.

2. Use browser access url endpoint directly.

http://arduino_ip_address/arduino/temp
http://arduino_ip_address/arduino/hum
http://arduino_ip_address/arduino/time

Did you get any thing form them? test one by one. post the result here.

When I type the url
http://192.168.1.103/ardunio/temp
http://192.168.1.103/ardunio/hum
http://192.168.1.103/ardunio/time

I get

Not Found
The requested URL /ardunio/temp was not found on this server.

on all of them

But if I type the url "http://192.168.1.103/sd/TemperatureWebPanel"

I get

Waiting for Control Board...

then "68"

Ok I unpluged the Yun and then made sure that the REST API access is set Open and uploaded the sketch again and now I get thei error

Could not connect to YunServer 146 Connection refused

when I type
http://192.168.1.103/arduino/temp
http://192.168.1.103/arduino/hum
http://192.168.1.103/arduino/time

O, I think that I have found one problem

In my sketch I have

   void setup() {
  Bridge.begin();
  server.listenOnLocalhost();
  server.begin();
  
  dht.begin();
}

I changed that to

  void setup() {
  Bridge.begin();
  server.begin();
  
  dht.begin();
}

And now the

http://192.168.1.103/arduino/temp
http://192.168.1.103/arduino/hum
http://192.168.1.103/arduino/time

return the right values! Next I well try to get the JustGage to work

Good, rest is your JavaScript skill. :slight_smile:

Ok this is what I have right now

<!doctype html>

<html>
  <head>
    <title>Auto-adjust</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      body {
        text-align: center;
      }
      
      #g1 {
        width:400px; height:320px;
        display: inline-block;
        margin: 1em;
      }
      
      p {
        display: block;
        width: 450px;
        margin: 2em auto;
        text-align: left;
      }
    </style>

    <script type="text/javascript" src="zepto.min.js"></script>
    <script src="raphael.2.1.0.min.js"></script>
    <script src="justgage.1.0.1.min.js"></script>
    <script>
      var g1;
      
      window.onload = function(){
        var g1 = new JustGage({
          id: "g1", 
          value: getRandomInt(0, 100), 
          min: 0,
          max: 100,
          title: "Temperature",
          label: "Fahrenheit"
        });
      
        setInterval(function() {
          g1.refresh($.get('http://192.168.1.103/arduino/temp'));
        }, 2500);
      };
    </script>

	</head>
  <body>    
    <div id="g1"></div>
  </body>
</html>

But I get this error

[object XMLHttpRequest]

Any idea what I have wrong?

<!DOCTYPE html>
<html>
	<head>
	<script type="text/javascript" src="zepto.min.js"></script>
	  <script type="text/javascript">
	   	function refresh() {
		  	$('#content').load('/arduino/temperature');
	  	}
</script>

	</head>
	<body onload="setInterval(refresh, 2000);">
		<span id="content">0</span>
	</body>
</html>

official code from Yun team.

/arduino/temperature => /arduino/temp

Yes I have that code and it works great!
The issue is how to take that "content" and insert it into "justGage"
here

window.onload = function(){
        var g1 = new JustGage({
          id: "g1", 
          value: getRandomInt(0, 100),   // g1.refresh($('#content').load('/arduino/temp'));
          min: 0,
          max: 100,
          title: "Temperature",
          label: "Fahrenheit"
        });

and here

setInterval(function() {
          g2.refresh(getRandomInt(50, 100));          //g1.refresh($('#content').load('/arduino/temp'));
        }, 2500);
<!doctype html>
<html>
  <head>
    <title>Auto-adjust</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      body {
        text-align: center;
      }      
      #g1 {
        width:400px; height:320px;
        display: inline-block;
        margin: 1em;
      }
    </style> 
    <script src="raphael.2.1.0.min.js"></script>
    <script src="justgage.1.0.1.min.js"></script>
    <script src="zepto.min.js"></script>
    <script>
      var g1;
  window.onload = function(){
    var g1 = new JustGage({
      id: "g1", 
      value: 0, 
      min: 0,
      max: 100,
      title: "Temperature",
      label: "Temperature"
    });
    setInterval(function() {
        $.get('/arduino/temp', function (newValue) { g1.refresh(newValue); });         
    }, 2000);
  };
    </script>
  </head>
  <body>    
    <div id="g1"></div>
  </body>
</html>

Thank you this works great!

I am using Arduino Yun So my code would not help you and I have not used the EtherCard shield
you should repost here for Programming Questions:
http://forum.arduino.cc/index.php?board=4.0

Mi problema es como actualizar la variable , value dentro de la pagina en HTML. segun,

Var g = new JustGage ({
Id: "gauge"
Value: 6, // variable Temperature , ej. Temp1, Temp2, Tempx... siendo Tempx sensores
Min: -10,
Max: 30,
Title: "Temperature"
});