# HG changeset patch # User veltr # Date 1360949683 -3600 # Node ID 26a901771957852c2a66d066eb17d385281d6257 # Parent 7fa607ed7e828a7220bbdbb039886edb9968518a Black Background diff -r 7fa607ed7e82 -r 26a901771957 css/ipadsim.css --- a/css/ipadsim.css Fri Feb 15 12:23:01 2013 +0100 +++ b/css/ipadsim.css Fri Feb 15 18:34:43 2013 +0100 @@ -2,7 +2,7 @@ position: absolute; /* top: 50%; margin-top: -444px; */ left: 50%; margin-left: -572px; width: 1024px; height: 768px; border-radius: 30px; - padding: 0; border: 60px solid #333; + padding: 0; border: 60px solid #101010; } .iPad-simulator:after { diff -r 7fa607ed7e82 -r 26a901771957 css/socialmedia.css --- a/css/socialmedia.css Fri Feb 15 12:23:01 2013 +0100 +++ b/css/socialmedia.css Fri Feb 15 18:34:43 2013 +0100 @@ -1,12 +1,16 @@ @font-face { font-family: "DIN-Mittelschrift"; - src: url('../font/DINMittelschriftSTD.woff') format('woff'); + src: url('../font/DINMittelschriftStd.woff') format('woff'); } body { font-family: "DIN-Mittelschrift", Arial, sans-serif } +.contents { + position: absolute; width: 100%; height: 100%; background: #000; color: #fff; +} + .start-head, .start-second-line { clear: both; } @@ -16,7 +20,7 @@ } .title-block { - float: left; width: 266px; margin: 0 0 8px 8px; + float: left; width: 248px; margin: 0 0 8px 8px; } .start-head h1 { @@ -24,12 +28,12 @@ } .play-block { - width: 242px; height: 66px; + width: 248px; height: 66px; } .play-button { - float: left; margin: 8px; font-size: 38px; color: #fff; - background: #aaa; border-radius: 5px; padding: 0 8px 0 10px; + float: left; margin: 8px; font-size: 38px; + background: #aaa; padding: 0 8px 0 10px; line-height: 50px; } @@ -38,23 +42,23 @@ } .explain-block { - width: 492px; height: 66px; + width: 494px; height: 66px; padding: 0 5px; } .explain-block h3 { - text-align: center; font-size: 18px; line-height: 66px; + font-size: 18px; line-height: 32px; +} + +.keyword-search { + line-height: 26px; padding: 0 5px; border: 1px solid #999; width: 300px; font-size: 18px; } .shadow-block { - float: left; background: #DDDDDD; box-shadow: 1px 1px 2px #000; margin: 0 8px 8px 0; -} - -.video-block { - float: left; background: #000000; width: 266px; height: 166px; margin: 0 8px 8px 0; + float: left; background: #333333; /*box-shadow: 1px 1px 2px #000;*/ margin: 0 8px 8px 0; } .description-block { - width: 242px; height: 166px; + width: 240px; height: 166px; margin-left: 8px; } .description-block p { @@ -62,28 +66,36 @@ } .topwords-block { - width: 486px; height: 166px; overflow: hidden; text-align: center; padding-right: 6px; + width: 754px; height: 166px; overflow: hidden; padding-right: 6px; } -.topwords-block li, .topic-words li { +.topwords-list { + +} + +.topwords-list li, .topic-words li { display: inline-block; background: #999; color: #fff; padding: 0 6px; margin: 6px 0 0 6px; - font-size: 14px; border-radius: 4px; line-height: 26px; + font-size: 14px; line-height: 26px; } .topwords-block li { cursor: pointer; } -.topwords-block li.selected { +.topwords-block li:hover, .topwords-block li.selected, .topic-words li.selected { color: #000000; background: #FFFFFF; } +.topwords-block li.selected:hover { + background: #999; color: #fff; +} + .start-bottom { position: absolute; top: 256px; bottom: 0; overflow: hidden; width: 100%; } .start-dataviz { - float: left; height: 100%; width: 266px; position: relative; + float: left; height: 100%; width: 240px; position: relative; margin-left: 8px; } .start-svg { @@ -91,13 +103,17 @@ } .topics-block { - float: left; width: 750px; padding-left: 8px; + float: left; width: 768px; padding-left: 8px; } .topic-column { - float: left; width: 250px; + float: left; width: 256px; } .topic { - width: 236px; text-align: center; padding: 0 6px 6px 0; cursor: pointer; background: #F0f0f0; + width: 242px; padding: 0 6px 6px 0; cursor: pointer; background: #333333; } + +.highlight { + color: #333333; background: #ffff00; +} diff -r 7fa607ed7e82 -r 26a901771957 js/startscreen-fake.js --- a/js/startscreen-fake.js Fri Feb 15 12:23:01 2013 +0100 +++ b/js/startscreen-fake.js Fri Feb 15 18:34:43 2013 +0100 @@ -1,9 +1,6 @@ -PATH_MODE = false; - $(function() { - var colorset_pastel = ["#FBB4AE", "#B3CDE3", "#CCEBC5", "#DECBE4", "#FED9A6", "#E5D8BD", "#FDDAEC"]; - var colorset_vivid = ["#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#A65628", "#F781BF"]; + var colorset = ["#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#A65628", "#F781BF"]; $(".topics-block").draggable({axis:"y"}) @@ -25,7 +22,7 @@ $(".duration").text(secsToString(data.duration)); - $(".topwords-block").on("click", "li", function() { + $(".topwords-list").on("click", "li", function() { var el = $(this).toggleClass("selected"); wordFilter(); }); @@ -56,38 +53,52 @@ return b.score - a.score; }); - var selectedWords = []; - function wordFilter() { - var selectedLis = $(".topwords-block li.selected"); - selectedWords = []; + var selectedLis = $(".topwords-list li.selected"), + searchString = $(".keyword-search").val() || "", + useSearchString = (searchString.length > 1), + selectedWords = []; selectedLis.each(function() { selectedWords.push($(this).text().trim()); }); - console.log(selectedWords); - if (selectedWords.length) { - showTopics(data.topics.filter(function(topic) { + if (selectedWords.length || useSearchString) { + var topiclist = data.topics.filter(function(topic) { + var found = false, + relevance = 0; var foundWords = selectedWords.map(function() { return false }); topic.words.forEach(function(topicword) { selectedWords.forEach(function(selectedword, k) { - if (!foundWords[k] && selectedword === topicword.word) { - foundWords[k] = true; + if (selectedword === topicword.word) { + found = true; + relevance += (.5 + topicword.weight); } - }) + }); + if (useSearchString && topicword.word.search(searchString) !== -1) { + found = true; + relevance += (.5 + topicword.weight); + } }); - return foundWords.reduce(function(mem, w) { return mem && w}, true); + topic.relevance = relevance; + return found; }).sort(function(a,b) { - return b.score - a.score; - })); + return b.relevance - a.relevance; + }); } else { - showTopics(sortedTopics); + var topiclist = sortedTopics; } - } - - function showTopics(topiclist) { - var topicHtmls = ["", "", ""], - globwords = {}, - topwords = []; + var topicHtmls = ["", "", ""]; + if (useSearchString) { + var searchStringRx = new RegExp('(' + searchString.replace(/(\W)/g,'\\$1') + ')', "gim"); + $(".topwords-list li").each(function() { + var el = $(this); + el.html(el.text().replace(searchStringRx,'$1')); + }); + } else { + $(".topwords-list li").each(function() { + var el = $(this); + el.text(el.text()); + }); + } topiclist.forEach(function(topic,i) { var wordsToShow = topic.words.slice(0,5), max = wordsToShow[0].weight, @@ -95,24 +106,23 @@ scale = 10 / (max - min); var li = '
    • '; topicHtmls[i % 3] += li; - topic.words.forEach(function(word) { - globwords[word.word] = word.weight + (globwords[word.word] || 0) - }); }); var tb = $(".topics-block"); tb.html(topicHtmls.reduce(function(mem,html) { @@ -120,124 +130,105 @@ },"")); tb.css("top",0); - for (var w in globwords) { - topwords.push({ - word : w, - weight : globwords[w] - }); - } - topwords.sort(function(a, b) { - return b.weight - a.weight; - }); - - var wordsToShow = topwords.slice(0,30), - max = wordsToShow[0].weight, - min = Math.min(wordsToShow[wordsToShow.length - 1].weight, max - .01), - scale = 10 / (max - min); - - $(".topwords-block").html(wordsToShow.reduce(function(mem, d) { - return mem - + '
  • ' - + d.word - + '
    • ' - },"")); - showTopicViz(); } + var topwords = [], globwords = {}; + + data.topics.forEach(function(topic) { + topic.words.forEach(function(word) { + globwords[word.word] = word.weight + (globwords[word.word] || 0) + }); + }) + + for (var w in globwords) { + topwords.push({ + word : w, + weight : globwords[w] + }); + } + topwords.sort(function(a, b) { + return b.weight - a.weight; + }); + + $(".keyword-search").autocomplete({ + source: topwords.map(function(w) { return w.word }) + }).on("keyup change paste", wordFilter); + + var wordsToShow = topwords.slice(0,40), + max = wordsToShow[0].weight, + min = Math.min(wordsToShow[wordsToShow.length - 1].weight, max - .01), + scale = 10 / (max - min); + + $(".topwords-list").html(wordsToShow.reduce(function(mem, d) { + return mem + + '
  • ' + + d.word + + '
    • ' + },"")); + function showTopicViz() { var selectedBlocks = $(".topic.selected, .topic.hover"), - sbl = selectedBlocks.length; - if (!sbl) { - selectedBlocks = $(".topic"); + sbl = selectedBlocks.length, + topicBlocks = $(".topic"); + if (!sbl && topicBlocks.length !== data.topics.length) { + topicBlocks.each(function() { + + }) + selectedBlocks = topicBlocks; sbl = selectedBlocks.length; } - if (sbl) { - $(".topic").css("background",""); - selectedBlocks.each(function() { - var el = $(this); - el.css("background",el.attr("data-li-color")); - }); - } else { - $(".topic").each(function() { - var el = $(this); - el.css("background",el.attr("data-li-color")); - }); - } - var topicsAndColors = selectedBlocks.map(function() { + var topicsAndColors = []; + selectedBlocks.map(function() { var el = $(this), - topicid = parseInt(el.attr("data-topic-id")), - vizcolor = el.attr("data-viz-color"); - return { - topic: data.topics[topicid], + topicid = parseInt(el.attr("data-topic-id")); + topicsAndColors.push({ + "$": el, + timestamp: parseInt(el.attr("data-timestamp")), + hovered: el.hasClass("hover"), id: topicid, - color: vizcolor - }; - }); - if (PATH_MODE) { - topicpaths.forEach(function(p) { - p.hide(); - }); - topicsAndColors.each(function(j, t) { - var p = topicpaths[t.id]; - p.attr({ - stroke: t.color, - fill: t.color, - "fill-opacity": .25 - }); - p.show(); + topic: data.topics[topicid] }); - if (sbl > 1 && sbl < data.topics.length) { - var d = "M0,0L" + data.segments.map(function(mmso, i) { - var tweets = 0; - for (var j = 0; j < sbl; j++) { - tweets += topicsAndColors[j].topic.scores[i] - } - x = xscale * tweets / mmso.duration; - return x - + "," - + yscale * (mmso.start + mmso.duration / 3) - + "L" - + x - + "," - + yscale * (mmso.start + 2 * mmso.duration / 3); - }).join("L") + "L0,"+(yscale * data.duration); - sumpatha.attr({ path: d }); - sumpathb.attr({ path: d }); - sumpatha.show(); - sumpathb.show(); + }); + topicsAndColors.sort(function(a,b) { + return (a.hovered + ? 1 + : ( b.hovered + ? -1 + : ( a.timestamp - b.timestamp ) || ( a.id - b.id ) + ) + ) + }); + topicBlocks.css("background",""); + topicsAndColors.forEach(function(topic, i) { + topic.color = colorset[i % colorset.length]; + topic.$.css("background", topic.color); + }); + + for (var i = 0; i < nmmso; i++) { + var opacity = 0, + rgb = [0,0,0]; + topicsAndColors.forEach(function(topic) { + var c = Raphael.getRGB(topic.color), + o = topic.topic.weights[i]; + rgb[0] += c.r * o; + rgb[1] += c.g * o; + rgb[2] += c.b * o; + opacity += o; + }); + if (opacity) { + color = Raphael.rgb.apply(Raphael, rgb.map(function(c) { + return c/opacity; + })); + segmentrects[i].show(); + segmentrects[i].attr({ + fill: color, + opacity: .2 + .8 * opacity + }); } else { - sumpatha.hide(); - sumpathb.hide(); - } - } else { - for (var i = 0; i < nmmso; i++) { - var opacity = 0, - rgb = [0,0,0]; - for (var j = 0; j < sbl; j++) { - var c = Raphael.getRGB(topicsAndColors[j].color), - o = topicsAndColors[j].topic.weights[i]; - rgb[0] += c.r * o; - rgb[1] += c.g * o; - rgb[2] += c.b * o; - opacity += o; - } - if (opacity) { - color = Raphael.rgb.apply(Raphael, rgb.map(function(c) { - return c/opacity; - })); - segmentrects[i].show(); - segmentrects[i].attr({ - fill: color, - opacity: .2 + .8 * opacity - }); - } else { - segmentrects[i].hide(); - } + segmentrects[i].hide(); } } @@ -247,42 +238,16 @@ paper = new Raphael(jqsvg[0]), ph = jqsvg.height(), pw = jqsvg.width(), - yscale = ph / data.duration, + yscale = (ph - 20) / data.duration, mx = Math.max.apply(Math, data.segments.map(function(s) { return s.tweet_rate})), - xscale = (pw - 10)/mx; + xscale = (pw - 50)/mx; + console.log(mx); - if (PATH_MODE) { - var sumpatha = paper.path(); - sumpatha.attr({ - fill: "#f0f0f0", - stroke: "none" - }); - var topicpaths = data.topics.map(function(topic) { - var d = "M0,0L" + topic.scores.map(function(s, i) { - var mmso = data.segments[i], - x = xscale * s / mmso.duration; - return x - + "," - + yscale * (mmso.start + mmso.duration / 3) - + "L" - + x - + "," - + yscale * (mmso.start + 2 * mmso.duration / 3); - }).join("L") + "L0,"+(yscale * data.duration); - return paper.path(d); - }); - var sumpathb = paper.path(); - sumpathb.attr({ - stroke: "#666666", - "stroke-width": 2 - }); - } else { - var segmentrects = data.segments.map(function(mmso) { - var rect = paper.rect(0, yscale * mmso.start, pw - 50, yscale * mmso.duration); - rect.attr({stroke: "none"}); - return rect; - }); - } + var segmentrects = data.segments.map(function(mmso) { + var rect = paper.rect(0, yscale * mmso.start, pw - 50, yscale * mmso.duration); + rect.attr({stroke: "none"}); + return rect; + }); var d = "M" + data.segments.map(function(s) { var x = xscale * s.tweet_rate; @@ -295,8 +260,15 @@ + yscale * (s.start + 2 * s.duration / 3); }).join("L"); - paper.path(d); - + paper.path(d).attr({ + "stroke-width": 4, + "stroke": "#000000", + opacity: .5 + }); + paper.path(d).attr({ + "stroke-width": 1, + "stroke": "#ffffff" + }); for (var i=0; i < data.duration; i += 1800) { var y = yscale * i; @@ -304,26 +276,45 @@ stroke: "#666" }); paper.text(pw - 2, y + 6, secsToString(i)).attr({ - "text-anchor": "end" + "text-anchor": "end", + "fill": "#ffffff" }); } - paper.text(pw-2, ph-6, secsToString(data.duration)).attr({ - "text-anchor": "end" + paper.text(pw-2, ph-14, secsToString(data.duration)).attr({ + "text-anchor": "end", + "fill": "#ffffff" + }); + paper.path("M0," + (ph-20) + "L" + pw + "," + (ph-20)).attr({ + stroke: "#666" + }); + + var x = xscale * 1000 / 60; + paper.path("M" + x + ",0L" + x + "," + (ph - 10)).attr({ + stroke: "#666" + }); + + paper.text(x-2, ph - 14,"1000 tweets/minute").attr({ + "text-anchor": "end", + "fill": "#ffffff" }); wordFilter(); $(".topics-block").on("mouseenter", ".topic", function() { - var topicid = parseInt($(this).attr("data-topic-id")), - color = $(this).attr("data-viz-color"), - topic = data.topics[topicid]; - $(this).addClass("hover"); - showTopicViz(); + var el = $(this); + if (!el.hasClass("selected")) { + el.addClass("hover"); + showTopicViz(); + } }).on("mouseleave", ".topic", function() { $(this).removeClass("hover"); showTopicViz(); }).on("click", ".topic", function() { + var el = $(this); $(this).toggleClass("selected"); + if (el.hasClass("selected")) { + el.attr("data-timestamp", new Date().valueOf()) + } showTopicViz(); }); diff -r 7fa607ed7e82 -r 26a901771957 startscreen.html --- a/startscreen.html Fri Feb 15 12:23:01 2013 +0100 +++ b/startscreen.html Fri Feb 15 18:34:43 2013 +0100 @@ -4,6 +4,7 @@ IRI/ALBLF Social Media + @@ -14,37 +15,37 @@
    - -
    -
    -

    Le débat

    +
    +
    +
    +

    Le débat

    +
    +
    +
    ▶
    +
    2:44:00
    +
    +
    +

    Recherchez les sujets de l'émission par mots-clés

    +

    +
    -
    -
    ▶
    -
    2:44:00
    + +
    +
    +

    Description de la vidéo du débat ici

    +
    +
    +
      +
      -
      -

      Recherchez les sujets de l'émission par mots-clés

      + +
      +
      +
      +
      +
      - -
      -
      -
      -

      Description de la vidéo du débat ici

      -
      -
        -
      • Keyword
        • -
      -
      - -
      -
      -
      -
      -
      -
      -
      \ No newline at end of file