<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>controlpanel</title>
<meta name="description" content="" />
<link rel="stylesheet" href="css/base-metric.css" />
<link rel="stylesheet" href="css/controlpanel.css" />
<style type="text/css">
#podium-container {
position: absolute;
width: 1480px;
top: 600px;
left: 400px;
}
#podium {
width: 100%;
height: 300px;
}
#podium-labels {
position: absolute;
width: 100%;
top: 320px;
}
#podium-labels li {
float: left;
width: 25%;
color: #ffffff;
text-align: center;
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="lib/protoclass.js"></script>
<script type="text/javascript" src="lib/box2d.js"></script>
<script type="text/javascript" src="js/tweetanim.js"></script>
<script type="text/javascript" src="js/tweetvote-anim.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() - 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) {
$("#btv-cp-liste-tweets-selection").prepend(
'<li onclick="showTweet(\''
+ _t.id_str
+ '\'); return false;"><a title="Afficher sur l\'écran" 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-show"></div></a></li>'
);
}
console.log(_t);
TweetAnim.queueTweet(_t);
TweetAnim.shiftQueue();
}
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="canvas" width="6000" height="2000" style="background-color:#333333;" ></div>
<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 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>