Live Video and Annotation

diff -r ad151a86046f -r eb7c2cff1816 web/sweet-tweet/pt_logo.gif Binary file web/sweet-tweet/pt_logo.gif has changed diff -r ad151a86046f -r eb7c2cff1816 web/sweet-tweet/script.js --- a/web/sweet-tweet/script.js Fri Dec 16 10:39:51 2011 +0100 +++ b/web/sweet-tweet/script.js Fri Dec 16 15:57:23 2011 +0100 @@ -1,12 +1,10 @@ -var AVATARWIDTH = 35, - COLUMNWIDTH = 2, - COLUMNHEIGHT = 420, - THRESHOLD = 24, +var THRESHOLD = 12, DROPCOUNT = 12; var swTw = { "keyword" : "#enmi", "columns_words" : [ + "politique", "confiance", "croyance", "crédit", @@ -17,58 +15,57 @@ "démocratie", "expertise", "catastrophe", - "transparence", - "politique" + "transparence" ], "tweets" : [], "tweetsIndex" : [], + "twInCol" : [], "firstDisplayedTweet" : 0, "cursor" : -1, -/* "annotations" : { + "annotations" : { "positive" : { "keyword" : "+", "colors" : { "tweet" : "#c5e7cd", - "timeline" : "#00ff00" + "timeline" : "#1D973D" } }, "negative" : { "keyword" : "-", "colors" : { "tweet" : "#f6ced0", - "timeline" : "#ff0000" + "timeline" : "#CE0A15" } }, "reference" : { - "keyword" : "#", + "keyword" : " #", "colors" : { "tweet" : "#efefa1", - "timeline" : "#ffff00" + "timeline" : "#C5A62D" } }, "question" : { "keyword" : "?", "colors" : { "tweet" : "#bfdbec", - "timeline" : "#0000ff" + "timeline" : "#036AAE" } } -} */ + } } -function highlightKeyword(stra, strb) { +function highlightKeyword(stra, strb, color) { var rgxp = RegExp( '(' + strb.replace(/(\W)/gm, '\\$1') + ')', "gim"); - return stra.replace(rgxp, '$1'); + return stra.replace(rgxp, '$1'); } function highlightText(txt) { - var res = highlightKeyword(txt, swTw.keyword); res = swTw.columns_words.reduce(function(a, b) { - return highlightKeyword(a,b); + return highlightKeyword(a,b, '#333333'); + }, txt); + res = _(swTw.annotations).reduce(function(a, b) { + return (b.keyword ? highlightKeyword(a,b.keyword,b.colors.timeline) : a); }, res); -/* res = _(swTw.annotations).reduce(function(a, b) { - return (b.keyword ? highlightKeyword(a,b.keyword) : a); - }, res); */ return res; } @@ -78,31 +75,21 @@ } if (swTw.cursor < swTw.tweets.length - 1) { swTw.cursor = Math.max(swTw.cursor + 1, swTw.tweets.length - 120); - var nTweet = swTw.cursor; + var tweet = swTw.tweets[swTw.cursor], + html = '

@' + + tweet.from_user + + ' (' + + tweet.from_user_name + + ')' + + '

' + + highlightText(tweet.text) + + '

'; + $("#tweetcont").html(html) } else { - var nTweet = swTw.tweets.length - 1 - ~~( Math.random() * Math.min(swTw.tweets.length,50) ); + $("#tweetcont").html("") } - var tweet = swTw.tweets[nTweet]; - $("#tweetcont").html('

@' - + tweet.from_user - + ' (' - + tweet.from_user_name - + ')' - + '

' - + highlightText(tweet.text) - + '

'); -/* var bgcolor = ''; - for (var i in swTw.annotations) { - if (swTw.annotations[i].keyword) { - if (tweet.text.indexOf(swTw.annotations[i].keyword) != -1) { - bgcolor = swTw.annotations[i].colors.tweet; - break; - } - } - } */ - $("#tweetcont").css("background",bgcolor); } function dropOldTweets() { @@ -112,26 +99,15 @@ return _(col).without(tweet.id_str); }); _(tweet.elements).each(function(elid) { - $("#" + elid).fadeOut(2000, function() { + $("#" + elid).animate({ + "width": "0px" + }, + 2000, + function() { $(this).detach(); - }); + }) }); }); - - _(swTw.tweets.slice(_newPos)).each(function(tweet) { - _(tweet.elements).each(function(elid) { - var iword = parseInt(elid.split('_')[2]), - iel = swTw.twInCol[iword].indexOf(tweet.id_str), - posx = COLUMNHEIGHT - AVATARWIDTH * (1 + ~~( iel / COLUMNWIDTH)), - posy = AVATARWIDTH * (iel % COLUMNWIDTH); - $("#" + elid).delay(500).animate({ - "top" : posy + "px", - "left" : posx + "px" - }, - 500); - }); - }); - console.log("fin"); swTw.firstDisplayedTweet = _newPos; } @@ -144,36 +120,30 @@ tweet.elements = []; _(tweet.columns).each(function(word) { var iword = swTw.columns_words.indexOf(word), - tcl = swTw.twInCol[iword], - tclen = tcl.length; - var posx = COLUMNHEIGHT - AVATARWIDTH * (1 + ~~( tclen / COLUMNWIDTH)), - posy = AVATARWIDTH * (tclen % COLUMNWIDTH), + icol = ( swTw.twInCol[iword*2+1].length < swTw.twInCol[iword*2].length ? iword*2+1 : iword*2 ), elid = 'avatar_' + tweet.id_str + '_' + iword, - bgcolor = '#999999'; -/* for (var i in swTw.annotations) { - if (swTw.annotations[i].keyword) { - if (tweet.text.indexOf(swTw.annotations[i].keyword) != -1) { - bgcolor = swTw.annotations[i].colors.timeline; - break; - } - } - } */ - $('#column_' + iword).append( + colA = swTw.colAnnot[iword], + ttl = 0; + _(swTw.annotations).each(function(v,k) { + if (tweet.text.indexOf(v.keyword) != -1) { + colA[k]++; + ttl++; + } + }); + colA.total += Math.max(1,ttl); + $('#tube_' + icol).append( '

' ); tweet.elements.push(elid); - tcl.push(tweet.id_str); + swTw.twInCol[icol].push(tweet.id_str); $("#" + elid).animate({ - "left" : posx + "px" - }, 2000); + "margin-right" : "0px" + }, + 2000); }) swTw.tweets.push(tweet); swTw.tweetsIndex.push(tweet.id_str); @@ -183,6 +153,11 @@ })) { dropOldTweets(); } + _(swTw.colAnnot).each(function(colA, i) { + _(swTw.annotations).each(function(v, k) { + $("#polemic_" + i + "_" + k).css("width", ~~(100 * colA[k] / colA.total) + "%"); + }); + }) } function retrieveTweets() { @@ -191,7 +166,7 @@ "lang" : "fr", // "keyword" : "#enmi", "pages" : 1, - "rpp" : 50, + "rpp" : 100, "cbEnd" : function() { callbackTweets(this.tweets); } @@ -240,20 +215,42 @@ function(mot, i) { return '

' + + '">
' + + _(swTw.annotations).map(function(v,k) { + return '
' + }).join('') + +'
' + mot + '

' } ).join("") ); - - swTw.twInCol = swTw.columns_words.map(function() { - return []; + + for (var i = 0; i < swTw.columns_words.length * 2; i++) { + swTw.twInCol.push([]); + } + + swTw.colAnnot = swTw.columns_words.map(function() { + var res = { "total" : 0 } + _(swTw.annotations).map(function(v,k) { + res[k] = 0; + }); + return res; }); retrieveTweets(); - setInterval(retrieveTweets,5000); + setInterval(retrieveTweets, 5000); - setInterval(nextTweet, 3000); + setInterval(nextTweet, 6000); }); diff -r ad151a86046f -r eb7c2cff1816 web/sweet-tweet/small.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web/sweet-tweet/small.html Fri Dec 16 15:57:23 2011 +0100 @@ -0,0 +1,34 @@ + + + + + + Sweet Tweet + + + +

+ +

+ + + \ No newline at end of file diff -r ad151a86046f -r eb7c2cff1816 web/sweet-tweet/style.css --- a/web/sweet-tweet/style.css Fri Dec 16 10:39:51 2011 +0100 +++ b/web/sweet-tweet/style.css Fri Dec 16 15:57:23 2011 +0100 @@ -2,12 +2,20 @@ margin: 0; font-family: Helvetica, Arial, sans-serif; } +body.jour { + background: #ffffff; +} + +body.nuit { + background: #000000; +} + img { border: none; } .highlight { - background: #ffff80; + font-weight: bold; padding: 0 2px; color: #ffffff; } #container { @@ -15,52 +23,73 @@ height: 1280px; margin: 0 auto; position: relative; + overflow: hidden; } #tweetcont { - float: left; width: 780px; height: 72px; background: #dddddd; - padding: 15px 10px; + float: left; width: 760px; height: 96px; background: #dddddd; + padding: 20px; } #tweetcont img { - float: left; width: 72px; height: 72px; + float: left; width: 96px; height: 96px; } #tweetcont p { - margin: -2px 5px 10px 82px; padding: 0; font-size: 18px; + margin: -2px 5px 10px 106px; padding: 0; font-size: 20px; } p.tweet_text { color: #666; } +#ptimg { + position: absolute; top: -5px; right: -10px; +} + #columncont { float: left; width: 800px; margin-top: 20px; } .column { - float: left; width: 780px; height: 70px; margin: 8px 10px; overflow: hidden; position: relative; + float: left; width: 780px; height: 70px; margin: 8px 10px; position: relative; } .column-tube { - float: left; width: 420px; height: 70px; background: #eeeeee; + float: left; width: 420px; height: 70px; +} + +.tube { + width: 1000px; height: 35px; margin-left: -580px; overflow: hidden; } .column-title { - float: left; margin-left: 10px; width: 350px; height: 70px; background: #eeeeee; + float: left; margin-left: 10px; width: 350px; height: 70px; +} + +.polemicvol { + float: right; height: 70px; } .column-title h3 { - margin: 10px; padding: 0; font-size: 40px; line-height: 50px; - height: 50px; text-transform: uppercase; color: #666; + position: absolute; margin: 10px; padding: 0; font-size: 40px; line-height: 50px; + height: 50px; text-transform: uppercase; } +.jour .column-tube, .jour .column-title { + background: #cccccc; color: #ffffff; +} + +.nuit .column-tube, .nuit .column-title { + background: #eeeeee; color: #000000; +} + div.avatar { - display: block; position: absolute; width: 35px; height: 35px; z-index: 2; + float: right; width: 35px; height: 35px; overflow: hidden; } .avatar img { - width: 35px; height: 35px; + width: 100%; height: 100%; } div#logos {

_("ClientTitle1 :"); ?>

_('config__title')); ?>

_('keywords')); ?>

_('suggested')); ?>

_('contextual')); ?>

- Visualisation par thèmes "Sweet Tweets" -

_("ClientTitle1 :"); ?>

_('config__title')); ?>

_('keywords')); ?>

_('suggested')); ?>

_('contextual')); ?>

_("ClientTitle1 :"); ?>

' + + '">
' + + _(swTw.annotations).map(function(v,k) { + return '
' + }).join('') + +'
' + mot + '

' + mot + '

_("ClientTitle1 :"); ?>

_('config__title')); ?>

_('keywords')); ?>

_('suggested')); ?>

_('contextual')); ?>

- Visualisation par thèmes "Sweet Tweets" -

_("ClientTitle1 :"); ?>

_('config__title')); ?>

_('keywords')); ?>

_('suggested')); ?>

_('contextual')); ?>

_("ClientTitle1 :"); ?>

' + + '">' + + _(swTw.annotations).map(function(v,k) { + return '' + }).join('') + +'' + mot + '

' + mot + '

' + + '">
' + + _(swTw.annotations).map(function(v,k) { + return '
' + }).join('') + +'
' + mot + '