Skip to content

Instantly share code, notes, and snippets.

Last active Aug 29, 2015
What would you like to do?
Smooths in 10 rows of data below your current sample row, and averages them. Saves! No ability yet to choose how many rows to smooth, but not hard to add.
// based on
setup: function() {
// code to run on startup
$W.dialog('Smooth your data',
'You can sample more than one row of your source image and average these rows to "smooth" your data. This can remove noise and make comparison easier. </p><p>The defaults are to average in the 10 rows just below your chosen cross-section.</p>',
$W.macros['smooth_save'] = function() {
// construct a canvas to store the image on while we get the data
var rows = 10
var orig_img = $('#image')[0]
$('body').append("<canvas id='tmp_canvas'></canvas>")
var img = new Image()
img.src = orig_img.src
var canvas = $('#tmp_canvas')[0]
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext("2d")
var pixels = ctx.getImageData(0,$W.sample_row,canvas.width,rows).data
// now, overwrite existing pixel rows in $W.spectrum
$.each($W.spectrum['lines'],function(index,line) {
// clear out existing data
line['r'] = 0
line['g'] = 0
line['b'] = 0
// for each row of data, add new data
for (var i=0;i<rows;i++) {
line['r'] += pixels[i*canvas.width*4+index*4]
line['g'] += pixels[i*canvas.width*4+index*4+1]
line['b'] += pixels[i*canvas.width*4+index*4+2]
// divide to get average per channel
line['r'] = line['r']/rows
line['g'] = line['g']/rows
line['b'] = line['b']/rows
// average colors to get overall
line['average'] = (line['r'] + line['g'] + line['b'])/3
// graph smoothed data:
var graph_data = []
$.each($W.spectrum.lines,function(index,line) {
if (line.wavelength == null) {
line.wavelength = index
${label: "Smoothed", data: graph_data})
$W.plot = $.plot($("#graph"),$,flotoptions);
// we might prompt to save rather than do it automatically? Split up the method if so:
// upload and save
var postable_data = $W.spectrum
// we have to replace wavelengths with "null" if it's not calibrated
if (!$W.calibrated) {
postable_data.lines[i]['wavelength'] = null
postable_data = JSON.stringify(postable_data)
url: '/spectrums/save/'+$W.spectrum_id,
type: 'POST',
data: {
data: postable_data,
tags: 'smoothed:'+$W.sample_row+'+'+rows,
authenticity_token: $W.form_authenticity_token
success: function(res) {
if (res == "true") {
// display notice and the new tags
$('#alerts').append('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button> Smoothed by '+rows+' pixels below sample row, and saved.</div>')
// remove old "smoothed:" tags? do this in JS - server shouldn't have to care. We'll need a way to access tagnames and IDs in JS
} else {
failure: function(res) {
alert("There was an error.")
draw: function() {
// code to run every frame
Copy link


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment