Arduino Ethernet Values (stand-alone)

by SamFent

HTML

<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>
</head>
<body>
    <p>To make your Arduino into a multi-probe sensor that can stream data right into your browser, simply:
    </p>
    <p>
        <ol>
            <li>
              Upload the tiny <a href="https://gist.github.com/2126328">server sketch</a> to your Arduino
            </li>
            <li>
              Plug in your ethernet shield and connect the Arduino to your computer with an ethernet cable and wait about 30 seconds for the Arduino server to boot up
            </li>
            <li>
              Optionally connect sensors to the analog pins. (The demo below is scaled for a L35 temperature sensor, but you don't need it &mdash; you might need to rescale the graph by dragging on the axis to see the plot, though)
            </li>
            <li>
              Click the "Start Reading" button below
            </li>
          </ol>
    </p>
    <p>See <a href="https://blog.concord.org/streaming-arduino-data-to-a-browser">this blog post</a> for more information.
    </p>
    <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>
               ...

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;
    margin: 12px;
}
      
      table { border: 1px solid gray;
        border-spacing: 0px;
        border-collapse: collapse;
        font: 10px/24px Verdana, Arial, Helvetica, sans-serif; }
        table th {
          border: 1px solid gray;
          padding: 0em 1em;
          text-align: center; }
        table td {
          font-size: 0.9em;
          border: 1px solid gray;
          padding: 0em 1em;
          text-align: right;
          width: 15em; }
        table td.left {
          padding: 0em 1em 0em 2em;
    text-align: left; }

ol {
    padding: 20px;
    margin: 3px;
    list-style: decimal;
}

p {
    margin: 5px;
}

JavaScript

(function() {
    var graph = null,
        formatter = null,
        dataSet = [],
        graphPin = null;

    $(function() {
        formatter = d3.format("2.2f");
        graph = simpleGraph()
            .title("Arduino Data")
            .xmax(100).ymax(35)
            .xLabel("Time")
            .yLabel("Value");

        d3.select("#graph").call(graph);

        $('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);
    };

    //...