--- a/client/controlpanel.html Wed Feb 15 18:59:57 2012 +0100
+++ b/client/controlpanel.html Thu Feb 16 12:24:18 2012 +0100
@@ -23,7 +23,7 @@
<input id="btv-cp-champ-filtre" />
<a href="#" id="btv-cp-clear-filtre">x</a>
</div>
- <div class="btv-cp-element">
+ <div class="btv-cp-element btv-cp-cont-liste">
<h3>Derniers tweets</h3>
<ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-tout">
<li>
@@ -76,7 +76,7 @@
</li>
</ul>
</div>
- <div class="btv-cp-element">
+ <div class="btv-cp-element btv-cp-cont-liste">
<h3>Tweets sélectionnés</h3>
<ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-tout">
<li>
--- a/client/css/base-metric.css Wed Feb 15 18:59:57 2012 +0100
+++ b/client/css/base-metric.css Thu Feb 16 12:24:18 2012 +0100
@@ -25,4 +25,4 @@
}
body {
font-family: Metric; background: #000000;
-}
\ No newline at end of file
+}
--- a/client/css/controlpanel.css Wed Feb 15 18:59:57 2012 +0100
+++ b/client/css/controlpanel.css Thu Feb 16 12:24:18 2012 +0100
@@ -1,47 +1,46 @@
#btv-cp-container {
- position: absolute; top: -65px; width: 100%;
- background-image: linear-gradient(bottom, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
- background-image: -o-linear-gradient(bottom, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
- background-image: -moz-linear-gradient(bottom, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
- background-image: -webkit-linear-gradient(bottom, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
- background-image: -ms-linear-gradient(bottom, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
- height: 70px;
- border-bottom: 2px solid #666666;
+ position: absolute; left: -315px; width: 320px;
+ background-image: linear-gradient(right, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
+ background-image: -o-linear-gradient(right, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
+ background-image: -moz-linear-gradient(right, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
+ background-image: -webkit-linear-gradient(right, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
+ background-image: -ms-linear-gradient(right, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
+ top: 0; height: 100%;
+ border-right: 4px solid #666666;
}
#btv-cp-container:hover {
- top: 0;
+ left: 0;
}
.btv-cp-line {
- position: relative; width: 1160px; height: 100%; margin: 0 auto;
+ position: relative; width: 100%; height: 100%; margin: 0 auto;
}
.btv-cp-element {
- float: left;
- height: 66px;
- padding: 2px 4px; border-right: 1px solid #cccccc;
+ float: left; text-align: center;
+ width: 312px;
+ padding: 4px; border-bottom: 1px solid #cccccc;
}
.btv-cp-element h2 {
- font-size: 24px; margin: 18px 0 0;
+ font-size: 28px; margin: 10px 0;
}
.btv-cp-element h3 {
- font-size: 14px; margin: 3px 0; text-align: center; line-height: 12px;
+ font-size: 18px; margin: 4px 0; line-height: 12px;
}
.btv-cp-element h4 {
- font-size: 24px; font-weight: bold; text-align: center;
+ font-size: 28px; font-weight: bold;
}
#btv-cp-champ-filtre {
- width: 100px;
+ width: 180px;
}
.btv-cp-liste-tweets {
- width: 280px; max-height: 45px; background: #fefefe; overflow: auto;
-}
-.btv-cp-liste-tweets:hover {
- max-height: 150px;
+ width: 310px; height: 160px; border: 1px solid #b0b0b0;
+ background: #fefefe; overflow: auto; margin: 4px 0;
}
.btv-cp-liste-tweets li {
- padding: 1px; border-bottom: 1px solid #ddd; font-size: 12px; font-family: Arial, Helvetica, sans-serif;
+ padding: 1px; border-bottom: 1px solid #ddd; font-size: 12px;
+ font-family: Arial, Helvetica, sans-serif; text-align: left;
}
.btv-cp-tweet-button {
display: inline-block; margin: -1px 0; width: 15px; height: 14px; background: url("../img/addshow.png");
@@ -59,21 +58,21 @@
background: #00f; color: #fff;
}
+.btv-cp-highlight {
+ background: #ffff00;
+}
+
.btv-cp-cont-pause {
- width: 60px;
+ width: 152px;
}
.btv-cp-play-pause {
- display: block; margin: 0 12px; width: 32px; height: 35px; background: url("../img/playpause.png");
+ display: block; margin: 5px 60px; width: 32px; height: 35px; background: url("../img/playpause.png");
}
.btv-cp-status-play {
background-position: -32px 0;
}
.btv-cp-compteur {
- width: 75px; position: relative;
-}
-
-.btv-cp-compteur h4 {
- width: 100%; position: absolute; left: 0; top: 40px;
+ width: 152px;
}
\ No newline at end of file
--- a/client/podium-cp-tweets.html Wed Feb 15 18:59:57 2012 +0100
+++ b/client/podium-cp-tweets.html Thu Feb 16 12:24:18 2012 +0100
@@ -9,72 +9,98 @@
<link rel="stylesheet" href="css/controlpanel.css" />
<style type="text/css">
#podium-container {
- width: 800px;
- margin: 200px auto 0;
+ position: absolute;
+ width: 1480px;
+ top: 600px;
+ left: 400px;
}
#podium {
width: 100%;
height: 300px;
- cursor: pointer;
}
#podium-labels {
- float: left;
+ position: absolute;
width: 100%;
- clear: both;
- margin-top: 20px;
+ top: 320px;
}
#podium-labels li {
float: left;
- width: 200px;
+ width: 25%;
color: #ffffff;
text-align: center;
- font-size: 28px;
+ font-size: 42px;
+ }
+ #podium-chiffres {
+ position: absolute;
+ width: 100%;
+ top: 240px;
+ }
+ #podium-chiffres li {
+ float: left;
+ width: 25%;
+ color: #000000;
+ text-align: center;
+ font-size: 50px;
font-weight: bold;
}
+
+
+ #btv-tweet {
+ position: absolute;
+ left: 775px;
+ top: 250px;
+ width: 650px;
+ background: #0031ff;
+ padding: 40px;
+ color: #ffffff;
+ font-size: 42px;
+ display: none;
+ }
+ .btv-tweet-image {
+ width: 100px;
+ height: 100px;
+ margin: 0 30px 30px 0;
+ float: left;
+ }
+ .btv-tweet-screen-name {
+ font-weight: bold;
+ }
+ .btv-tweet-name {
+ margin: 10px 0;
+ }
+ .btv-tweet-text {
+ clear: both;
+ }
</style>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="js/podium.js"></script>
<script type="text/javascript" src="js/tweetsource.js"></script>
<script type="text/javascript">
- var tzero = new Date();
- $(function() {
- setInterval(function() {
- var _t = Math.floor((new Date() - tzero)/1000),
- _s = _t % 60,
- _m = Math.floor(_t/60) % 60,
- _h = Math.floor(_t/3600);
- $("#btv-cp-temps").html(
- _h + ':' + (_m < 10 ? '0' : '') + _m + ':' + (_s < 10 ? '0' : '') + _s
- )
- }, 500);
- var _keywords = ['Sarkozy', 'Hollande', 'candidat', 'politique']
- myTweetSource = new Btv_TweetSource({
- keywords: _keywords
- });
- myPodium = new Btv_Podium([0,0,0,0]);
- myTweetSource.setTweetsCallback(function() {
- var _filtered = this.afterDate(tzero);
- $("#btv-cp-nb-tweets").html(_filtered.count());
- var _counts = [];
- for (var _i = 0; _i < _keywords.length; _i++) {
- _counts.push(_filtered.search(_keywords[_i]).count());
- }
- myPodium.update(_counts);
- $('#btv-cp-liste-tweets-tout').html(
- _filtered.reverse().slice(0,20).map(function(_t) {
- return '<li onclick="addTweet(\''
- + _t.id_str
- + '\'); return false;"><a title="Ajouter à la sélection" href="#"><span class="btv-cp-tweet-date">'
- + _t.created_at.match(/\d+:\d+:\d+/)[0]
- + '</span> <span class="btv-cp-tweet-from">@'
- + _t.from_user
- + '</span> <span class="btv-cp-tweet-text">'
- + _t.text
- + '</span><div class="btv-cp-tweet-button btv-cp-tweet-add"></div></a></li>'
- }).join('')
- )
- });
- });
+ var tzero = new Date() - 120000;
+
+ function updateLastTweets() {
+ var _filtered = myTweetSource.afterDate(tzero),
+ _txtFilter = $("#btv-cp-champ-filtre").val(),
+ _reFilter = null;
+ if (_txtFilter.length > 1) {
+ _filtered = _filtered.search(_txtFilter);
+ _reFilter = new RegExp('(' + _txtFilter.replace(/\W/gim,'\\$1') + ')','gim');
+ }
+ $('#btv-cp-liste-tweets-tout').html(
+ _filtered.reverse().slice(0,20).map(function(_t) {
+ return '<li onclick="addTweet(\''
+ + _t.id_str
+ + '\'); return false;"><a title="Ajouter à la sélection" href="#"><span class="btv-cp-tweet-date">'
+ + _t.created_at.match(/\d+:\d+:\d+/)[0]
+ + '</span> <span class="btv-cp-tweet-from">'
+ + ( _reFilter ? ('@' + _t.from_user).replace(_reFilter, '<span class="btv-cp-highlight">$1</span>') : ('@' + _t.from_user) )
+ + '</span> <span class="btv-cp-tweet-text">'
+ + ( _reFilter ? _t.text.replace(_reFilter, '<span class="btv-cp-highlight">$1</span>') : _t.text )
+ + '</span><div class="btv-cp-tweet-button btv-cp-tweet-add"></div></a></li>'
+ }).join('')
+ );
+ }
+
function addTweet(tweetId) {
var _t = myTweetSource.tweetById(tweetId);
if (_t) {
@@ -91,55 +117,124 @@
);
}
}
+
+ function showTweet(tweetId) {
+ var _t = myTweetSource.tweetById(tweetId);
+ if (_t) {
+ $("#btv-tweet").html('<img class="btv-tweet-image" src="'
+ + _t.profile_image_url
+ + '" /><p class="btv-tweet-screen-name">'
+ + _t.from_user
+ + '</p><p class="btv-tweet-name">'
+ + _t.from_user_name
+ +'</p><p class="btv-tweet-text">'
+ + _t.text
+ +'</p>').show();
+ $(".btv-cp-hide-tweets").show();
+ }
+ }
+
+ $(function() {
+ setInterval(function() {
+ var _t = Math.floor((new Date() - tzero)/1000),
+ _s = _t % 60,
+ _m = Math.floor(_t/60) % 60,
+ _h = Math.floor(_t/3600);
+ $("#btv-cp-temps").html(
+ _h + ':' + (_m < 10 ? '0' : '') + _m + ':' + (_s < 10 ? '0' : '') + _s
+ )
+ }, 500);
+ myPodium = new Btv_Podium([0,0,0,0]);
+
+ var _keywords = ['Sarkozy', 'Hollande', 'candidat', 'France'];
+
+ $("#podium-labels").html(_keywords.map(function(_w) {
+ return '<li>' + _w + '</li>'
+ }).join(""));
+
+ myTweetSource = new Btv_TweetSource({
+ keywords: _keywords
+ });
+
+ myTweetSource.setTweetsCallback(function() {
+ var _filtered = this.afterDate(tzero);
+ $("#btv-cp-nb-tweets").html(_filtered.count());
+ var _counts = [];
+ for (var _i = 0; _i < _keywords.length; _i++) {
+ _counts.push(_filtered.search(_keywords[_i]).count());
+ }
+ updateLastTweets();
+ myPodium.update(_counts);
+ $("#podium-chiffres").html(_counts.map(function(_c) {
+ return '<li>' + _c + '</li>'
+ }).join(""));
+ });
+
+ $("#btv-cp-champ-filtre").keyup(function() {
+ updateLastTweets();
+ });
+ $("#btv-cp-clear-filtre").click(function() {
+ $("#btv-cp-champ-filtre").val("");
+ updateLastTweets();
+ return false;
+ });
+ $("#btv-tweet, .btv-cp-hide-tweets").click(function() {
+ $("#btv-tweet, .btv-cp-hide-tweets").hide();
+ })
+ });
+
</script>
</head>
<body>
- <div id="btv-cp-container">
- <div class="btv-cp-line">
- <div class="btv-cp-element">
- <h2>Bubble <b>TV</b></h2>
- </div>
- <div class="btv-cp-element" id="btv-cp-cont-filtre">
- <h3>Rechercher/Filtrer</h3>
- <input id="btv-cp-champ-filtre" />
- <a href="#" id="btv-cp-clear-filtre">x</a>
- </div>
- <div class="btv-cp-element">
- <h3>Derniers tweets</h3>
- <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-tout">
- </ul>
- </div>
- <div class="btv-cp-element">
- <h3>Tweets sélectionnés</h3>
- <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-selection">
- </ul>
- </div>
- <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-amont">
- <h3>Arrivée des tweets</h3>
- <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
- </div>
- <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-aval">
- <h3>Purge des colonnes</h3>
- <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
- </div>
- <div class="btv-cp-element btv-cp-compteur">
- <h3>Nombre de tweets</h3>
- <h4 id="btv-cp-nb-tweets"></h4>
- </div>
- <div class="btv-cp-element btv-cp-compteur">
- <h3>Temps écoulé</h3>
- <h4 id="btv-cp-temps">0:00:00</h4>
+ <div id="btv-global-container">
+ <div id="btv-cp-container">
+ <div class="btv-cp-line">
+ <div class="btv-cp-element">
+ <h2>Bubble <b>TV</b></h2>
+ </div>
+ <div class="btv-cp-element" id="btv-cp-cont-filtre">
+ <h3>Rechercher/Filtrer</h3>
+ <input id="btv-cp-champ-filtre" />
+ <a href="#" id="btv-cp-clear-filtre">x</a>
+ </div>
+ <div class="btv-cp-element btv-cp-cont-liste">
+ <h3>Derniers tweets</h3>
+ <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-tout">
+ </ul>
+ </div>
+ <div class="btv-cp-element btv-cp-cont-liste">
+ <h3>Tweets sélectionnés</h3>
+ <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-selection">
+ </ul>
+ <a class="btv-cp-hide-tweets" href="#" style="display: none;">Cacher le tweet à l'écran</a>
+ </div>
+ <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-amont">
+ <h3>Arrivée des tweets</h3>
+ <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
+ </div>
+ <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-aval">
+ <h3>Purge des colonnes</h3>
+ <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
+ </div>
+ <div class="btv-cp-element btv-cp-compteur">
+ <h3>Nombre de tweets</h3>
+ <h4 id="btv-cp-nb-tweets"></h4>
+ </div>
+ <div class="btv-cp-element btv-cp-compteur">
+ <h3>Temps écoulé</h3>
+ <h4 id="btv-cp-temps">0:00:00</h4>
+ </div>
</div>
</div>
- </div>
- <div id="podium-container">
- <div id="podium"></div>
- <ul id="podium-labels">
- <li>Sarkozy</li>
- <li>Hollande</li>
- <li>candidat</li>
- <li>politique</li>
- </ul>
+ <div id="podium-container">
+ <div id="podium"></div>
+ <ul id="podium-chiffres">
+ </ul>
+ <ul id="podium-labels">
+ </ul>
+ </div>
+ <div id="btv-tweet">
+ </div>
</div>
</body>
</html>