<html>
<head>
<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
<script src="https://rawgithub.com/stepheneb/netlogo-gcc/master/lib/simple-graph.js"></script>
<script>
var graph = null,
dataSet = [],
tempFormatter = d3.format("2.1f");
$(function() {
graph = simpleGraph()
.title("Arduino Temperature Graph")
.xmax(100).ymax(35)
.xLabel("Time")
.yLabel("Temperature");
d3.select("#graph").call(graph);
$('#run-button').click(function() {
setInterval(getData, 250);
$('#run-button').html("Running...")
.attr("disabled", true)
.unbind();
});
});
function getData() {
$.getJSON("http://169.254.1.1/&callback=?", arduinoEthernetComCallback);
}
function arduinoEthernetComCallback(jsonData) {
var a0 = JSON.parse(jsonData).A0,
temperatureC = ((a0 * 5.0) / 1024.0) * 100;
$("#currTemp").html(tempFormatter(temperatureC) + "°C");
dataSet.push(temperatureC);
graph.set_data(dataSet);
};
</script>
</head>
<body>
<button id="run-button">Start Reading</button>
<div id="graph">
</div>
<div class="reading-box">
The current temperature is <span id="currTemp">—</span>°C
</div>
</body>
</html>