BoneScript Flot Demo

Put a BeagleBone on your network with a potentiometer (between 0 and 1.8V) on P9_36 to see a simple jQuery Flot graph.

by Jason Kridner

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://beagleboard.org/static/bonescript.js"></script>
<h1>BoneScript Flot Demo</h1> 
<div id="myplot" style="width:500px;height:300px;"></div>

JavaScript

setTargetAddress('beaglebone.local', {
    initialized: run
});
setTargetAddress('192.168.7.2', {
    initialized: run
});

function run() {
    var b = require('bonescript');
    var POT = 'P9_36';

    var container = $("#myplot");
    var totalPoints = container.outerWidth() / 2 || 250;
    var data = [];
    var plotOptions = {
        series: {
            shadowSize: 0
        },
        yaxis: {
            min: 0,
            max: 1
        },
        xaxis: {
            min: 0,
            max: totalPoints,
            show: false
        }
    };
    var plot = $.plot(container, getData(), plotOptions);

    drawGraph();

    function drawGraph() {
        plot.setData(getData());
        plot.draw();
        b.analogRead(POT, onAnalogRead);
    }

    // Handle data back from potentiometer
    function onAnalogRead(x) {
        if (!x.err && typeof x.value == 'number') {
            pushData(x.value);
        }
        setTimeout(drawGraph, 20);
    }

    function pushData(y) {
        if (data.length && (data.length + 1) > totalPoints) {
            data = data.slice(1);
        }
        if (data.length < totalPoints) {
            data.push(y);
        }
    }

    function getData() {
        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]]);
        }
        var series = [{
            data: res,
            lines: {
                fill: true
            }
        }];
        return series;
    }
}