diff -r 411c8eb7f574 -r 1f6b7dce650c integ/iri/js/iri-buzz.js --- 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));