Last active
August 29, 2015 14:04
-
-
Save afonsomota/b509e2096f8c613e0299 to your computer and use it in GitHub Desktop.
Johnny-Five Analog HTTP Plottter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var http = require('http'), | |
| five = require('johnny-five'), | |
| board = new five.Board(), | |
| server = http.createServer().listen(8000), //I donnot serve the file (YET), run the HTML file directly | |
| io = require('socket.io')(server); | |
| var values = []; | |
| board.on('ready',function(){ | |
| console.log('ready'); | |
| var lux = new five.Sensor('A0'), | |
| var i = 1; | |
| lux.on('data',function(){ | |
| values.push({ | |
| x: i++, | |
| y: lux.raw | |
| }); | |
| io.emit('values',values.slice(-300)); //300 is the amount of last samples to see | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> | |
| <script src="http://localhost:8000/socket.io/socket.io.js"></script> | |
| <script src="plot.js"></script> | |
| </head> | |
| <body> | |
| <svg id="visualisation" width="1000" height="500"></svg> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Note: Due to d3 capabilities I know this to be a really hammered solution, but works and does not flicker much. | |
| // I soon will edit the code to make it more efficient. | |
| // The plot function is from Jay Raj in http://www.sitepoint.com/creating-simple-line-bar-charts-using-d3-js/ | |
| var values = []; | |
| function plot(lineData){ | |
| var lineData = values; | |
| console.log(lineData) | |
| document.getElementById('visualisation').innerHTML=""; | |
| var vis = d3.select('#visualisation'), | |
| WIDTH = 1000, | |
| HEIGHT = 500, | |
| MARGINS = { | |
| top: 20, | |
| right: 20, | |
| bottom: 20, | |
| left: 50 | |
| }, | |
| xRange = d3.scale | |
| .linear() | |
| .range([MARGINS.left, WIDTH - MARGINS.right]) | |
| .domain([d3.min(lineData, function(d) { | |
| return d.x; | |
| }), d3.max(lineData, function(d) { | |
| return d.x; | |
| })]), | |
| yRange = d3.scale | |
| .linear() | |
| .range([HEIGHT - MARGINS.top, MARGINS.bottom]) | |
| .domain([d3.min(lineData, function(d) { | |
| return d.y; | |
| }), d3.max(lineData, function(d) { | |
| return d.y; | |
| })]), | |
| xAxis = d3.svg.axis() | |
| .scale(xRange) | |
| .tickSize(5) | |
| .tickSubdivide(true), | |
| yAxis = d3.svg.axis() | |
| .scale(yRange) | |
| .tickSize(5) | |
| .orient('left') | |
| .tickSubdivide(true); | |
| vis.append('svg:g') | |
| .attr('class', 'x axis') | |
| .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')') | |
| .call(xAxis); | |
| vis.append('svg:g') | |
| .attr('class', 'y axis') | |
| .attr('transform', 'translate(' + (MARGINS.left) + ',0)') | |
| .call(yAxis); | |
| var lineFunc = d3.svg.line() | |
| .x(function(d) { | |
| return xRange(d.x); | |
| }) | |
| .y(function(d) { | |
| return yRange(d.y); | |
| }) | |
| .interpolate('linear'); | |
| vis.append('svg:path') | |
| .attr('d', lineFunc(lineData)) | |
| .attr('stroke', 'blue') | |
| .attr('stroke-width', 2) | |
| .attr('fill', 'none'); | |
| } | |
| var socket = io("http://localhost:8000"); | |
| socket.on('values',function(vals){ | |
| values = vals; | |
| plot(values); | |
| console.log("updated"); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment