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?
sonnyyu
February 26, 2014, 5:23pm
2
Yun configuration page, make sure REST API access set Open.
Use browser access url endpoint directly.
http://arduino_ip_address/arduino/temp
http://arduino_ip_address/arduino/hum
http://arduino_ip_address/arduino/time
Try different browser.
Yun configuration page, make sure REST API access set Open.
Use browser access url endpoint directly.
http://arduino_ip_address/arduino/temp
http://arduino_ip_address/arduino/hum
http://arduino_ip_address/arduino/time
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
sonnyyu
February 26, 2014, 7:44pm
4
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
sonnyyu
February 26, 2014, 10:13pm
8
Good, rest is your JavaScript skill.
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?
sonnyyu
February 26, 2014, 11:04pm
10
<!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);
sonnyyu
February 27, 2014, 1:18am
12
<!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"
});