diff -r 738594562e44 -r 4389fd4ae58f tweetcast/nodejs/client/js/script.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/tweetcast/nodejs/client/js/script.js Tue Oct 25 09:20:07 2011 +0200 @@ -0,0 +1,336 @@ +var socket, + tlPaper, + twPaper, + tweetData = { + "tweetcount" : 0, + "position" : 0, + "followLast" : true, + "zoomLevel" : 3, + "timeLevel" : 2, + "tweets" : [], + "posIndex" : [], + "tlChanged" : true + }, + colors = { + 'positive' : "#1D973D", + 'reference' : "#C5A62D", + 'negative' : "#CE0A15", + 'question' : "#036AAE", + 'neutre' : "#585858" + }, + annotations = { + 'positive' : '++', + 'negative' : '--', + 'reference' : '==', + 'question' : '??' + }, + displaySplitting = [ + { + positions : [ 10, 20, 22, 24, 25, 26, 27, 28, 29, 31, 33, 43, 53 ], + classNames : [ 'icons fade', 'icons', 'quarter fade', 'quarter', 'half fade', 'half', 'full', 'half', 'half fade', 'quarter', 'quarter fade', 'icons', 'icons fade' ] + }, + { + positions : [ 1, 3, 5, 7, 13, 33, 53 ], + classNames : [ 'full', 'half', 'half fade', 'quarter', 'quarter fade', 'icons', 'icons fade' ] + } + ], + blockUpdate = false, + waitUpdate = true, + wheeldelta = 0; + +function placeHolder(className) { + return '
  • '; +} + +function tweetToHtml(tweet, className) { + html = '
  • '; + } + html += ''; + } + html += '
    '; + a_user = ''; + if (tweet.user.profile_image_url) { + html += a_user + ''; + } + html += '

    ' + a_user + '@' + tweet.user.screen_name + '

    ' + new Date(tweet.created_at).toLocaleTimeString() + '

    '; + lastend = 0; + txt = ''; + entities = []; + for (var i in tweet.entities.hashtags) { + entities.push({ + "start" : tweet.entities.hashtags[i].indices[0], + "end" : tweet.entities.hashtags[i].indices[1], + "html" : '#' + tweet.entities.hashtags[i].text + '' + }); + } + for (var i in tweet.entities.urls) { + entities.push({ + "start" : tweet.entities.urls[i].indices[0], + "end" : tweet.entities.urls[i].indices[1], + "html" : '' + tweet.entities.urls[i].display_url + '' + }); + } + for (var i in tweet.entities.user_mentions) { + entities.push({ + "start" : tweet.entities.user_mentions[i].indices[0], + "end" : tweet.entities.user_mentions[i].indices[1], + "html" : '@' + tweet.entities.user_mentions[i].screen_name + '' + }); + } + entities.sort(function(a, b) { return a.start - b.start }); + for (var i in entities) { + txt += tweet.text.substring(lastend, entities[i].start) + entities[i].html; + lastend = entities[i].end; + } + txt += tweet.text.substring(lastend); + html += txt + '

  • '; + return html; +} + + +function getUpdate() { + tweetData.posToDisplay = []; + if (tweetData.followLast) { + for (var i = tweetData.tweetcount; i >= tweetData.tweetcount - 52; i--) { + tweetData.posToDisplay.push( i > 0 ? i : -1 ); + } + tweetData.end = tweetData.tweetcount; + tweetData.start = Math.max(1, tweetData.end - 52); + } else { + for (var i = tweetData.position + 26; i >= tweetData.position - 26; i--) { + tweetData.posToDisplay.push( i > 0 && i <= tweetData.tweetcount ? i : -1 ); + } + tweetData.end = Math.min(tweetData.tweetcount, tweetData.position + 26 ); + tweetData.start = Math.max(1, tweetData.position - 26); + } + var tweetsToGet = []; + for (var i = tweetData.start; i <= tweetData.end; i++) { + if (!tweetByPos(i)) { + tweetsToGet.push(i); + } + } + if (tweetsToGet.length) { + socket.emit('updateTweets', { + "tweets" : tweetsToGet + }); + } else { + drawTweetList(); + //drawDisplay(); + } + if (tweetData.tlChanged) { + socket.emit('updateTimeline', { + "level" : tweetData.timeLevel + }); + } else { + drawTimeLine(); + } +} + +function tweetByPos(pos) { + var index = tweetData.posIndex.indexOf(pos); + return (index == -1 ? false : tweetData.tweets[index]); +} + +function delayedUpdate() { + blockUpdate = false; + if (waitUpdate) { + updateDisplay(); + } +} + +function updateDisplay() { + if (blockUpdate) { + waitUpdate = true; + } else { + waitUpdate = false; + getUpdate(); + blockUpdate = true; + setTimeout(delayedUpdate, 100); + } +} + +function setTimeZoom(level) { + if (level >= 0 && level <= 4) { + tweetData.timeLevel = level; + tweetData.tlChanged = true; + updateDisplay(); + } +} + +function drawTweetList() { + html = ''; + var i = 0; + while (i < tweetData.posIndex.length) { + if (tweetData.posToDisplay.indexOf(tweetData.posIndex[i]) == -1) { + tweetData.posIndex.splice(i,1); + tweetData.tweets.splice(i,1); + } else { + i++; + } + } + for (var i in tweetData.posToDisplay) { + var ds = displaySplitting[tweetData.followLast ? 1 : 0]; + for (var j in ds.positions) { + if (ds.positions[j] > i) { + var className = ds.classNames[j]; + break; + } + } + html += ( tweetData.posToDisplay[i] != -1 ? tweetToHtml(tweetByPos(tweetData.posToDisplay[i]), className) : placeHolder(className) ); + } + $("#tweetlist").html(html); + if (tweetData.followLast) { + $("#tweet_" + tweetData.position).fadeIn(500); + } + drawTimeWindow(); +} + +function drawTimeWindow() { + twPaper.clear(); + if (!tweetData.timeline || !tweetData.timeline.length) return; + + var dtfintl = new Date ( tweetData.timeline[ tweetData.timeline.length - 1 ].end ), + dtdebtl = new Date ( tweetData.timeline[0].start ), + dtfintw = new Date( tweetByPos( tweetData.end ).created_at ), + dtdebtw = new Date( tweetByPos( tweetData.start ).created_at ), + scY = 600 / ( dtfintl - dtdebtl ); + twPaper.rect( 0, scY * ( dtfintl - dtfintw ), 300, scY * ( dtfintw - dtdebtw )).attr({"stroke":"none","fill":"#8080ff","fill-opacity":.2}); + var dtcour = new Date( tweetByPos( tweetData.position ).created_at ), + posY = scY * ( dtfintl - dtcour ); + twPaper.path("M0 "+posY+"L300 "+posY).attr({"stroke":"#ff0"}); +} + +function drawTimeLine() { + tlPaper.clear(); + if (!tweetData.timeline || !tweetData.timeline.length) return; + tweetData.tlTweetRects = []; + var scaleY = 600 / tweetData.timeline.length, + max = 0; + for (var i = 0; i < tweetData.timeline.length; i++) { + max = Math.max(max, tweetData.timeline[i].tweets); + } + var scaleX = 160 / max; + + // dessin de l'axe vertical + + tlPaper.path("M160 0L160 600").attr({"stroke":"#ccc"}); + + // dessin de la date de début + + tlPaper.text(165, 592, new Date(tweetData.timeline[0].start).toLocaleTimeString()).attr({ "text-anchor" : "start", "font-size": "12px" }); + + // dessin de la date de fin + + tlPaper.text(165, 7, new Date(tweetData.timeline[tweetData.timeline.length - 1].end).toLocaleTimeString()).attr({ "text-anchor" : "start", "font-size": "12px" }); + for (var i = 0; i < tweetData.timeline.length; i++) { + var posY = 600 - (i * scaleY); + + // Si on est à une demi-heure, on trace un axe secondaire + heure + + if (i && !(new Date(tweetData.timeline[i].start).valueOf() % 1800000)) { + tlPaper.path("M0 "+posY+"L165 "+posY).attr({"stroke":"#ccc"}); + tlPaper.text(165, posY, new Date(tweetData.timeline[i].start).toLocaleTimeString()).attr({ "text-anchor" : "start", "font-size": "12px" }); + } + var anz = { + "neutre" :tweetData.timeline[i].tweets + }; + for (var j in tweetData.timeline[i].annotations) { + anz.neutre -= tweetData.timeline[i].annotations[j]; + anz[j] = tweetData.timeline[i].annotations[j]; + } + var posX = 0; + for (var j in anz) { + var largX = scaleX * anz[j]; + tlPaper.rect(posX, 600 - scaleY * (i+1), largX, scaleY).attr({"stroke": "none", "fill": colors[j]}); + posX += largX; + } + } + + drawTimeWindow(); +/* for (var i = 0; i < tweetData.arcs.length; i++) { + var x1 = scaleX * (tmptw[tweetData.arcs[i].from].x + .5), + x2 = scaleX * (tmptw[tweetData.arcs[i].to].x + .5), + y1 = 600 - scaleY * (tmptw[tweetData.arcs[i].from].y + .5), + y2 = 600 - scaleY * (tmptw[tweetData.arcs[i].to].y + .5), + d = "M"+x1+" "+y1+"C"; + if (y1 == y2) { + d += x1+" "+(y1 - 30)+" "+x2+" "+(y2 - 30); + } else { + d += (x1 + 60)+" "+y1+" "+(x2 + 60)+" "+y2; + } + paper.path(d+" "+x2+" "+y2); + } */ +} + +$(document).ready(function() { + tlPaper = Raphael("timeline", 220, 600); + twPaper = Raphael("timewindow", 220, 600); + socket = io.connect('http://' + S_IO_HOST + ':' + S_IO_PORT ); + socket.on('tweetSummary', function (data) { + if (tweetData.tweetcount != data.tweetcount) { + tweetData.tweetcount = data.tweetcount; + tweetData.tlChanged = true; + if (tweetData.followLast) { + tweetData.position = data.tweetcount; + } + updateDisplay(); + } + }); + socket.on('tweets', function (data) { + for (var i in data) { + if (tweetData.posIndex.indexOf(data[i].pos) == -1) { + tweetData.tweets.push(data[i]); + tweetData.posIndex.push(data[i].pos); + } + } + drawTweetList(); + }); + socket.on('timeline', function (data) { + tweetData.timeline = data; + drawTimeLine(); + }); + socket.on('display', function (data) { + tweetData.tlChanged = false; + for (var i in data.tweets) { + if (tweetData.posIndex.indexOf(data.tweets[i].pos) == -1) { + tweetData.tweets.push(data.tweets[i]); + tweetData.posIndex.push(data.tweets[i].pos); + } + } + if (data.timeline) { + tweetData.timeline = data.timeline + } + tweetData.arcs = data.arcs; + drawDisplay(); + }); + $("#tweetlist").mousewheel(function(e, d) { + wheeldelta += d; + if (Math.abs(wheeldelta) >= 1) { + tweetData.position = Math.min( tweetData.tweetcount, Math.max(1, parseInt(wheeldelta) + tweetData.position ) ); + tweetData.followLast = (tweetData.position == tweetData.tweetcount); + updateDisplay(); + wheeldelta = 0; + } + return false; + }); + $("#timewindow").mousewheel(function(e, d) { + wheeldelta += d; + if (Math.abs(wheeldelta) >= 1) { + if (wheeldelta > 0) { + setTimeZoom(tweetData.timeLevel + 1); + } else { + setTimeZoom(tweetData.timeLevel - 1); + } + wheeldelta = 0; + } + return false; + }); +}); \ No newline at end of file