Xiaoyang's ITP Life

Nick want me to run a workshop for students about openLog and sensors. I use one photocell and ultrasonic range finder sensor as an example. Since most time people use sensors, either record sensor value constantly, or record whenever a big change happens. These two sensor are perfectly for this application.

Openlog are dataloggers taking serial values, so  I use software library to get a screen monitor as well, super useful for debugging. And for the distance sensor, I write some algorithms to catch the peak value whenver a change happens, it average 100 samples at the beginning, and record changes with timeline encoded. I attached all the codes in the download links.

The I realized google have javascript visualization code available, so I start to play with them. For the photocell, since I print only sensor values line by line in arduino, so I use the sample rate as a timer, time coded in processing to print java like code for google viz – using image line chart.

function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Lights of Room');
data.addRows(10);
data.setCell(0,0,[12,25,37]);
data.setCell(0,1,23);
... ...
data.setCell(9,0,[12,25,46]);
data.setCell(9,1,23);
new google.visualization.ImageLineChart(document.getElementById('visualization')).
draw(data, null);
}
​

For the distance sensor, I remember saw a new about a bike project in copenhagen, they have a sensor installed on the bike lane, with a giant LED screen on it, every time one bike passes, the screen show a number increase. So I use this idea to test the sensor. Every time the distance is shorter, I catch the change and print time encoded message into the datalogger, eg (12:53:17 one bike). For viz on the google chart,  I take the time, count the number in every minutes, and print jave like code for google viz – using column chart.

function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday','Time');
data.addColumn('number', 'Number of Bikes');
data.addRows(42);
data.setCell(0,0,[12,25,0]);
data.setCell(0,1,0);
......
data.setCell(41,0,[12,6,0]);
data.setCell(41,1,0);
new google.visualization.ColumnChart(document.getElementById('visualization_ultrasonic')).
draw(data,
{title:"Bike Lane Analytics",
width:600, height:300}
);
}
google.setOnLoadCallback(drawVisualization);


download

ps: to use google viz in your wordpress page, use ‘custom field shortcode‘ plugin.