(function() {
var graph = null,
formatter = null,
dataSet = [],
graphPin = null;
$(function() {
formatter = d3.format("2.2f");
graph = simpleGraph('#graph')
.title("Arduino Data")
.xmax(100).ymax(35)
.xLabel("Time")
.yLabel("Value");
$('input').change(startGraphing);
$('#run-button').click(function() {
setInterval(getData, 250);
$('#run-button').html("Running...")
.attr("disabled", true)
.unbind();
});
});
function getData() {
$.getJSON("http://169.254.1.1/&callback=?", window.arduinoEthernetComCallback);
/* comment-out the above and uncomment the code below to generate random data */
// r = formatter(40 + (Math.random() * 50));
// callback('{"A0":' + r + ',"A1":30,"A2":20,"A3":10,"A4":30,"A5":20}');
};
window.arduinoEthernetComCallback = function(jsonData) {
data = JSON.parse(jsonData);
for (pin in data) {
var val = data[pin],
voltage = (val * 5.0) / 1024.0,
conv = $("#" + pin + "-conversion").val(),
convValue = convert(voltage, conv);
$("#" + pin).html(val);
$("#" + pin + "-volts").html(formatter(voltage));
$("#" + pin + "-convValue").html(convValue ? formatter(convValue) : "");
}
if (window.graphPin) {
value = $("#" + window.graphPin + "-convValue").html() ?
$("#" + window.graphPin + "-convValue").html() :
$("#" + window.graphPin).html();
dataSet.push(value);
graph.set_data(dataSet);
}
};
function startGraphing() {
dataSet = [];
window.graphPin = this.value;
};
function convert(value, type) {
return convos[type](value);
};
// set of conversion functions
var convos = {
none: function(volts) {
return "";
},
L35: function(volts) {
return volts * 100;
},
TMP36: function(volts) {
return (volts - 0.5) * 100;
},
A1301: function(volts) {
return ((volts - 2.5) / 2.5) * 1000;
},
};
})()
<html>
<head>
<script src="https://d3js.org/d3.v2.js"></script>
<script src="https://rawgithub.com/stepheneb/netlogo-gcc/master/lib/simple-graph.js"></script>
</head>
<body>
<button id="run-button">Start Reading</button>
<div>
The current readings are:
<div id="values">
<table>
<tr>
<th>
Pin
</th>
<th>
Value
</th>
<th>
Volts
</th>
<th>
Conversion
</th>
<th>
Converted
</th>
<th>
Graph this?
</th>
<tr>
<th>A0</th>
<td id="A0" class="value"></td>
<td id="A0-volts" class="volts"></td>
<td>
<select id="A0-conversion">
<option value="none"></option>
<option value="L35">L35 temperature</option>
<option value="TMP36">TMP36 temperature</option>
<option value="A1301">A1301 Hall Effect</option>
</select>
</td>
<td id="A0-convValue">
</td>
<td>
<input type="radio" name="graphSelection" value="A0" />
</td>
</tr>
<tr>
<th>A1</th>
<td id="A1"></td>
<td id="A1-volts" class="volts"></td>
<td>
<select id="A1-conversion">
<option value="none"></option>
<option value="L35">L35 temperature</option>
<option value="TMP36">TMP36 temperature</option>
<option value="A1301">A1301 Hall Effect</option>
</select>
</td>
<td id="A1-convValue">
</td>
<td>
<input type="radio" name="graphSelection" value="A1" />
</td>
</tr>
<tr>
<th>A2</th>
<td id="A2"></td>
<td id="A2-volts" class="volts"></td>
<td>
<select id="A2-conversion">
<option value="none"></option>
<option value="L35">L35 temperature</option>
<option value="TMP36">TMP36 temperature</option>
<option value="A1301">A1301 Hall Effect</option>
</select>
</td>
<td id="A2-convValue">
</td>
<td>
<input type="radio" name="graphSelection" value="A2" />
</td>
</tr>
<tr>
<th>A3</th>
<td id="A3"></td>
<td id="A3-volts" class="volts"></td>
<td>
<select id="A3-conversion">
<option value="none"></option>
<option value="L35">L35 temperature</option>
<option value="TMP36">TMP36 temperature</option>
<option value="A1301">A1301 Hall Effect</option>
</select>
</td>
<td id="A3-convValue">
</td>
<td>
<input type="radio" name="graphSelection" value="A3" />
</td>
</tr>
<tr>
<th>A4</th>
<td id="A4"></td>
<td id="A4-volts" class="volts"></td>
<td>
<select id="A4-conversion">
<option value="none"></option>
<option value="L35">L35 temperature</option>
<option value="TMP36">TMP36 temperature</option>
<option value="A1301">A1301 Hall Effect</option>
</select>
</td>
<td id="A4-convValue">
</td>
<td>
<input type="radio" name="graphSelection" value="A4" />
</td>
</tr>
<tr>
<th>A5</th>
<td id="A5"></td>
<td id="A5-volts" class="volts"></td>
<td>
<select id="A5-conversion">
<option value="none"></option>
<option value="L35">L35 temperature</option>
<option value="TMP36">TMP36 temperature</option>
<option value="A1301">A1301 Hall Effect</option>
</select>
</td>
<td id="A5-convValue">
</td>
<td>
<input type="radio" name="graphSelection" value="A5" />
</td>
</tr>
</table>
</div>
</div>
<div id="graph">
</div>
</body>
</html>