Arduino Ethernet Values (Embeddable)
HTML
<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>
...
CSS
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
line {
stroke: black;
}
text {
font-family: Arial;
font-size: 9pt;
}
div {
margin: 10px
}
button {
padding: 5px;
}
table { border: 1px solid gray;
border-spacing: 0px;
margin-left: 25px;
border-collapse: collapse;
font: 10px/24px Verdana, Arial, Helvetica, sans-serif; }
table th {
border: 1px solid gray;
padding: 0em 0.6em;
text-align: center; }
table td {
font-size: 0.9em;
border: 1px solid gray;
padding: 0em 1em;
text-align: right;}
table td.left {
padding: 0em 1em 0em 2em;
text-align: left; }
#graph {
width: 480px;
height: 300px;
}
JavaScript
(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
...