pklaus/index.html

## index.html
<html>
<head>
    <script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
$(function() {
    var graph = null,
        formatter = null,
        dataSet = [],
        graphPin = null;

    $(function() {
        formatter = d3.format("2.2f");

        $('#run-button').click(function() {
            setInterval(getData, 250);
            $('#run-button').html("Running...")
                .attr("disabled", true)
                .unbind();
        });
    });

    function getData() {
        $.getJSON("http://193.149.10.108/&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}');
    };

    var step = 0;

    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) : "");
        }
console.log("{step:"+step+", a0Reading: "+data.A0+"}");

            step++;
            //dgApi.addTick({step: step, a0Reading: data.A0});
    };


    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;
        },
    };

});
</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>
          <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>
          </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>
          </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>
          </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>
          </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>
          </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>
          </tr>
        </table>
      </div>
  </div>
</body>
</html>
	<html>
	<head>
	<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
	var graph = null,
	formatter = null,
	dataSet = [],
	graphPin = null;

	$(function() {
	formatter = d3.format("2.2f");

	$('#run-button').click(function() {
	setInterval(getData, 250);
	$('#run-button').html("Running...")
	.attr("disabled", true)
	.unbind();
	});
	});

	function getData() {
	$.getJSON("http://193.149.10.108/&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}');
	};

	var step = 0;

	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) : "");
	}
	console.log("{step:"+step+", a0Reading: "+data.A0+"}");

	step++;
	//dgApi.addTick({step: step, a0Reading: data.A0});
	};


	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;
	},
	};

	});
	</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>
	<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>
	</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>
	</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>
	</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>
	</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>
	</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>
	</tr>
	</table>
	</div>
	</div>
	</body>
	</html>