--- a/integ/iri/js/iri-buzz.js Thu May 02 15:09:41 2013 +0200
+++ b/integ/iri/js/iri-buzz.js Thu May 02 18:28:52 2013 +0200
@@ -15,10 +15,11 @@
movieCount: 10,
opinionsPerPage: 100,
colors: [ "#f62a43", "#f3c000", "#2d9252"],
- refreshRate: 500,
+ refreshRate: .25 * SECONDS,
columnSpacing: 40,
columnWidth: 150,
- tokenHeight: 16
+ tokenHeight: 16,
+ disappearAfter: 8 * SECONDS
}
$(function() {
@@ -49,7 +50,7 @@
}
function resizeTimer() {
- var w = Math.max(80, $(window).width() - 170),
+ var w = Math.max(80, $(window).width() - 272),
n = Math.min(12, Math.floor(w / 80));
$('.timer-bar').width(w);
var html = '';
@@ -72,8 +73,54 @@
$("#data-viz").css('height', vsHeight);
$('.posters').css('width', vsWidth);
+ var timeAtPause = 0, paused = true;
+
+ function currentVizTime() {
+ if (paused) {
+ return timeAtPause;
+ } else {
+ return new Date().valueOf() - timeStart;
+ }
+ }
+
+ function vizTimeToOriginalTime(t) {
+ return originalStart + t / timeScale;
+ }
+
+ function originalTimeToVizTime(t) {
+ return (t - originalStart) * timeScale;
+ }
+
+ function play() {
+ if (!paused) {
+ return;
+ }
+ timeStart = new Date().valueOf() - timeAtPause;
+ paused = false;
+ $(".play-pause").removeClass("play").addClass("pause").text("Pause");
+ }
+
+ function pause() {
+ if (paused) {
+ return;
+ }
+ timeAtPause = currentVizTime();
+ paused = true;
+ $(".play-pause").removeClass("pause").addClass("play").text("Lecture");
+ }
+
+ $(".play-pause").click(function() {
+ if (paused) {
+ play();
+ } else {
+ pause();
+ }
+ });
+
function startViz() {
+ timeAtPause = 0;
+
opinions.sort(function(a,b) {
return a._timestamp > b._timestamp;
});
@@ -88,7 +135,7 @@
height: vsHeight
},
options : {
- layout: false
+ layout: true
},
data : {
model : movies.map(function(movie) {
@@ -133,81 +180,8 @@
return res;
},
stream : {
- provider : "tokens",
- refresh: config.refreshRate,
- now : 0
- },
- tokens: opinions.map(function(opinion) {
- return {
- category: opinion._column,
- datetime: opinion.datetime,
- timestamp: opinion._timestamp,
- movie: opinion._movie,
- colorId: opinion._colorId,
- fillStyle: opinion._color,
- avatar: (typeof opinion.actor.user.avatar === "undefined" ? "http://fr.web.img6.acsta.net/r_50_x/commons/emptymedia/AvatarAllocineMr.gif" : resizeAcPicture( opinion.actor.user.avatar, 50, "x" )),
- username: opinion.actor.user.userName,
- actiontype: opinion.action.type,
- actionvalue: opinion.action.value,
- content: ( opinion.action.type === "userreview" ? opinion.content.$ : (opinion.action.type === "wanttosee" ? "veut voir ce film." : "" ) ),
- size: 30,
- texture: {
- src: "iri/img/logo-iri.png"
- },
- strokeStyle: "rgba(255,255,255,.2)",
- t: Math.floor((opinion._timestamp - originalStart) * timeScale / config.refreshRate),
- shape:{
- type:'box',
- width: config.columnWidth / 2 - 1,
- height: config.tokenHeight / 2
- },
- callback:{
- mouseover: function(token) {
- if (token !== lastShownToken) {
- var h = "Il y a ",
- deltaT = Date.now() - token.attr("timestamp"),
- deltaH = Math.round(deltaT / HOURS);
- if (deltaH) {
- h += deltaH + " heure";
- if (deltaH > 1) {
- h += "s";
- }
- } else {
- var deltaM = Math.round(deltaT / MINUTES);
- h += deltaM + " minute";
- if (deltaM > 1) {
- h += "s";
- }
- }
- commentDiv.find(".comment-content").removeClass("userreview wanttosee rate").addClass(token.attr("actiontype"));
- commentDiv.find(".stars-rating").attr("className","stars-rating rate-"+token.attr("actionvalue"));
- commentDiv.find(".review-content").text(token.attr("content"));
- commentDiv.find(".date").text(h);
- commentDiv.find(".avatar img").attr("src", token.attr("avatar"));
- commentDiv.find(".username").text(token.attr("username"));
- commentDiv.show();
- lastShownToken = token;
- }
- },
- mouseout: function(token) {
- lastShownToken = null;
- setTimeout(function() {
- if (!lastShownToken) {
- commentDiv.hide();
- }
- }, 200);
- },
- suspension: function(token) {
- var currentT = config.refreshRate * token.attr("t");
- deltaT = Date.now() - currentT;
- setTimeout(function() {
- token.flocculate();
- barChart.strata.update(barChart);
- }, 8000);
- }
- }
- }
- })
+ provider : "direct"
+ }
},
sedimentation: {
token: {
@@ -228,19 +202,112 @@
}
}
+ function onTokenMouseover(token) {
+ //if (token !== lastShownToken) {
+ var h = "Il y a ",
+ deltaT = Date.now() - token.attr("timestamp"),
+ deltaH = Math.round(deltaT / HOURS);
+ if (deltaH) {
+ h += deltaH + " heure";
+ if (deltaH > 1) {
+ h += "s";
+ }
+ } else {
+ var deltaM = Math.round(deltaT / MINUTES);
+ h += deltaM + " minute";
+ if (deltaM > 1) {
+ h += "s";
+ }
+ }
+ commentDiv.find(".comment-content").removeClass("userreview wanttosee rate").addClass(token.attr("actiontype"));
+ commentDiv.find(".stars-rating").attr("className","stars-rating rate-"+token.attr("actionvalue"));
+ commentDiv.find(".review-content").text(token.attr("content"));
+ commentDiv.find(".date").text(h);
+ commentDiv.find(".avatar img").attr("src", token.attr("avatar"));
+ commentDiv.find(".username").text(token.attr("username"));
+ commentDiv.show();
+ lastShownToken = token;
+ //}
+ }
+
+ function onTokenMouseout(token) {
+ /* lastShownToken = null;
+ setTimeout(function() {
+ if (!lastShownToken) { */
+ commentDiv.hide(); /*
+ }
+ }, 200); */
+ }
+
console.log(barChartSettings);
var barChart = $("#data-viz").vs(barChartSettings).data('visualSedimentation');
$(".timer-bar-value").width(0);
+ play();
+
clearInterval(clockInterval);
- deltaT = Date.now();
+
+ var lastTimestamp = 0;
+
clockInterval = setInterval(function() {
- var t = Date.now() - deltaT,
- w = $('.timer-bar').width() * Math.min(1, t / config.vizDuration);
+ var vizT = currentVizTime();
+ var originalT = vizTimeToOriginalTime(vizT),
+ tokensToAdd = opinions.filter(function(o) {
+ return o._timestamp > lastTimestamp && o._timestamp <= originalT
+ });
+ lastTimestamp = originalT;
+
+ tokensToAdd.forEach(function(opinion) {
+ barChart.addToken({
+ category: opinion._column,
+ datetime: opinion.datetime,
+ timestamp: opinion._timestamp,
+ viztime: originalTimeToVizTime(opinion._timestamp),
+ movie: opinion._movie,
+ colorId: opinion._colorId,
+ fillStyle: opinion._color,
+ avatar: (typeof opinion.actor.user.avatar === "undefined" ? "http://fr.web.img6.acsta.net/r_50_x/commons/emptymedia/AvatarAllocineMr.gif" : resizeAcPicture( opinion.actor.user.avatar, 50, "x" )),
+ username: opinion.actor.user.userName,
+ actiontype: opinion.action.type,
+ actionvalue: opinion.action.value,
+ content: ( opinion.action.type === "userreview" ? opinion.content.$ : (opinion.action.type === "wanttosee" ? "veut voir ce film." : "" ) ),
+ size: 30,
+ texture: {
+ src: "iri/img/logo-iri.png"
+ },
+ strokeStyle: "rgba(255,255,255,.2)",
+ shape:{
+ type:'box',
+ width: config.columnWidth / 2 - 1,
+ height: config.tokenHeight / 2
+ },
+ callback: {
+ mouseover: onTokenMouseover,
+ mouseout: onTokenMouseout
+ }
+ })
+ });
+
+ var deleteT = vizT - config.disappearAfter;
+
+ barChart.selectAll("state",1)
+ .filter(function(t) {
+ return t.attr("viztime") <= deleteT;
+ }).forEach(function(t) {
+ t.flocculate();
+ });
+
+ if (deleteT > config.vizDuration) {
+ pause();
+ }
+
+ barChart.strata.update(barChart);
+
+ var w = $('.timer-bar').width() * Math.min(1, vizT / config.vizDuration);
$(".timer-bar-value").width(w);
- }, 200);
+ }, config.refreshRate);
}
function loadMovie(movie) {
@@ -363,7 +430,7 @@
return Math.floor(0x100000000 * Math.random()).toString(16) + "-" + (Date.now() % 0x100000000).toString(16);
}
- $(".rejouer").click(function() {
+ $(".restart").click(function() {
startViz();
return false;
});
@@ -374,7 +441,7 @@
commentDiv
.css({
left: e.pageX,
- top: e.pageY
+ top: e.pageY + 2
})
.attr("className", (e.pageX < $(window).width() / 2 ? "left" : "right"))
}, 50));