var createSelector = function(canvas) {
var sel = new Selector({canvas:canvas});
var imgset = new Preloader;
imgset
.add('img/selector_left.png')
.add('img/selector_right.png')
.add('img/selector_left_hover.png')
.add('img/selector_right_hover.png')
.add('img/selector_left_down.png')
.add('img/selector_right_down.png')
.success(function(images) {
sel.setImages(images);
sel.draw();
})
.error(function(msg) { console.log("Error:" + msg) })
.done();
return sel;
};
var createPositionBar = function(canvas) {
var bar = new PositionBar({canvas:canvas,selector:selector});
var imgset = new Preloader;
imgset
.add('img/play.png')
.add('img/play_light.png')
.add('img/pause.png')
.add('img/pause_light.png')
.add('img/positionbar.png')
.success(function(images) {
bar.setImages(images);
bar.draw();
})
.error(function(msg) {
console.log(msg)
})
.done();
return bar;
};
$(window).ready(function() {
var focus = document.getElementById('focus');
var focusctx = focus.getContext('2d');
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var dataslider = new DataSlider;
dataslider.to(canvas);
dataslider.onchange(function(params) {
var pos = params.pos;
var ctx = focusctx;
ctx.clearRect(0,0,focus.width,focus.height);
ctx.strokeRect(0,0,focus.width,focus.height);
ctx.fillStyle = '#000000';
var width = pos.right.pos - pos.left.pos;
var data = dataslider.getData();
var unitwidth = canvas.width / data.length;
var unitsize = focus.width * (unitwidth / width);
ctx.font = Math.round(unitsize) + "px Courier";
for (var i = 0; i < data.length; i++) {
ctx.fillText(data[i],Math.floor(unitsize*i) - (focus.width/width)*(pos.left.pos),focus.height);
}
});
var imgset = new Preloader;
imgset
.add('img/selector_left.png')
.add('img/selector_right.png')
.add('img/selector_left_hover.png')
.add('img/selector_right_hover.png')
.add('img/selector_left_down.png')
.add('img/selector_right_down.png')
.success(function(images) {
dataslider.setImages(images);
})
.error(function(msg) { console.log("Error:" + msg) })
.done();
dataslider.load("Jameson",function(canvas,data) {
var basesize = Math.floor(canvas.width / data.length);
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#000000';
ctx.font = basesize + "px Courier";
for (var i = 0; i < data.length; i++) {
ctx.fillStyle = '#000000';
ctx.fillText(data[i],basesize*i,canvas.height);
}
});
dataslider.listen(datasource,'data');
dataslider.setAddFn(function(old,newdata) {
return old.concat(':').concat(newdata);
})
dataslider.setDisplayAddFn(function(canvas,old,newdata) {
var basesize = Math.floor(canvas.width / old.length);
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.font = basesize + "px Courier";
for (var i = 0; i < old.length; i++) {
ctx.fillStyle = '#000000';
ctx.fillText(old[i],basesize*i,canvas.height);
}
dataslider.draw();
});
dataslider.draw();
var words = ['Buffalo Trace', 'Laphroaig', 'Glennfiddich', 'Glenlivet', 'Bullit', 'Woodford Reserve'];
var give = function() {
if (words.length > 1) {
datasource.emit('data',words.pop());
setTimeout(give,3000);
}
}
setTimeout(give,3000)
});
$(window).ready(function() {
var chart = new Chart;
chart.series(datasource);
var myCropData = function(list,windowsize,boundaries) {
if (list.length < windowsize)
return list
var indices = lib.getIndicesByTimestamp(list,boundaries);
var newlist = list.slice(indices.left);
if (newlist.length > windowsize) {
return newlist.slice(0,windowsize);
} else
return newlist;
};
chart.custom.cropFn = myCropData;
var focus = document.getElementById('focus');
chart.to(focus);
var focusctx = focus.getContext('2d');
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var dataslider = new DataSlider;
// panorama data .. global cross function sad face ><
// it is rekeyed across on displayaddfn to store
// new locations of where each point lives
// and accessed in onchange.
var data = [];
dataslider.to(canvas);
var imgset = new Preloader;
imgset
.add('img/selector_left.png')
.add('img/selector_right.png')
.add('img/selector_left_hover.png')
.add('img/selector_right_hover.png')
.add('img/selector_left_down.png')
.add('img/selector_right_down.png')
.success(function(images) {
dataslider.setImages(images);
})
.error(function(msg) { console.log("Error:" + msg) })
.done();
dataslider.load([], function(canvas,data){
});
dataslider.listen(datasource,'data');
dataslider.setAddFn(function(old,newdata) {
old.push(newdata);
return old;
});
dataslider.onchange(function(params) {
var pos = params.pos;
/*
var indices = lib.getIndices(data,pos);
$('#data').html('Left:' + indices.left + ' right:' + indices.right);
*/
});
dataslider.setDisplayAddFn(function(canvas,old,newdata) {
if (old.length > 50) {
dataslider.thin();
old = dataslider.getData();
}
if ((old.length - 1) == 0)
return
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
var range = lib.rangeY(old,'y');
var step = canvas.width / (old.length - 1);
data = [];
ctx.moveTo(0,canvas.height);
for (var i = 0; i < old.length; i++) {
var normalized = (old[i].y / range.max) * canvas.height;
var obj = {};
obj.x = Math.floor(i*step);
obj.y = Math.floor(canvas.height - normalized);
obj.date = old[i].date;
data.push(obj);
ctx.lineTo(obj.x,obj.y);
}
ctx.lineTo(canvas.width,canvas.height);
ctx.lineTo(0,canvas.height);
ctx.fillStyle = '#d6e7f2';
ctx.fill();
ctx.strokeStyle = '#517ea5';
ctx.stroke();
// dots
for (var i = 0; i < old.length; i++) {
var normalized = (old[i].y / range.max) * canvas.height;
var obj = {};
obj.x = Math.floor(i*step);
obj.y = Math.floor(canvas.height - normalized);
ctx.beginPath();
ctx.arc(obj.x,obj.y, 3, 0, Math.PI*2, false);
ctx.stroke();
}
// find out UI.left -> data[i] and UI.right -> data[j]
var pos = dataslider.getConfig();
var indices = lib.getIndices(data,pos);
chart.custom.boundaries.left = indices.left;
chart.custom.boundaries.right = indices.right;
var ldate = lib.getDateString(indices.left);
var rdate = lib.getDateString(indices.right);
$('#data').html('Left:' + ldate + ' right:' + rdate);
});
var idx = 0;
var step = 0.1;
setInterval(function() {
var random = Math.abs(Math.floor(Math.sin(Math.PI*(idx+step))*100));
var random2 = Math.floor(Math.random()*200);
idx += step;
datasource.emit('data',{x:random,y:random2});
},1000);
});