var searchTerm = 'freekashmir',
cloudStarted = false,
numOfCharsToShowInCloud = 25, //How many characters of each tweet to be shown in cloud
numOfTweets = 100,
n = 0,
maxLimitOfTweetsToShow = 500,
canvas = document.getElementById('myCanvas'),
$list = $('#tags ul'),
$info = $('#info'),
$num = $('#num'),
timeInSecondsToGetNewTweets = 5,
searchPart = '?q=' + searchTerm + '+exclude:retweets&include_entities=false&count=' + numOfTweets,
orgSearch = searchPart,
url = 'http://aamirafridi.com/twitter/',
g1 = {
0: 'red',
0.5: 'orange',
1: 'rgba(0,0,0,0.1)'
},
cloudOptions = { //options list at: http://www.goat1000.com/tagcanvas-options.php
weight: true,
weightMode:'colour',
weightGradient:g1,
weightFrom: 'data-weight',
tooltip: 'div',
interval: 10,
minSpeed: 40,
initial: [0.2, -0.1],
fadeIn: 2000,
//textColour: '#65B3B5',
textFont: 'Helvetica, Verdana',
outlineColour: '#28FFF6',
outlineThickness: 3,
pulsateTo: 0.4,
shape: 'sphare',//'vcylinder',
pulsateTime: 2,
freezeActive: false,
reverse: true,
zoom: 1,
tooltipClass: 'tooltip'
}
//Set height and width of cloud to the size of window
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function loadTweets() {
if (!searchPart) searchPart = orgSearch
$.get(url + searchPart, function (data) {
$('.loader').fadeIn(4000, function(){ $(this).remove(); });
//update the searchPart for next search
searchPart = data.search_metadata.next_results;
var newTweetsAdded = 0;
$.each(data.statuses, function () {
if ($list.find('#' + this.id_str).length == 0) { //don't ad tweet which is already there
$('<li>').attr('id', this.id_str).append(
'<a data-weight="'+getRandomInt(10,30)+'" title="<img src="'
+ this.user.profile_image_url + '"/> '
+ this.text + '" href="https://twitter.com/'
+ this.user.screen_name + '/status/' + this.id_str
+ '" target="_blank">' + this.text.substring(0, numOfCharsToShowInCloud)
+ '...</a>').appendTo($list);
newTweetsAdded++;
}
n++;
});
function limitCheck() {
//console.log($list.find('li').length > maxLimitOfTweetsToShow)
return $list.find('li').length > maxLimitOfTweetsToShow;
}
//remove some tweets if limit is over
if (limitCheck()) {
$list.find('li').slice(0, newTweetsAdded).remove();
}
//now the cloud thing
if (!cloudStarted) {
cloudStarted = true;
TagCanvas.Start('myCanvas', 'tags', cloudOptions);
//shape changer
$('select').change(function(){
cloudOptions.shape = $(this).val();
TagCanvas.Start('myCanvas', 'tags', cloudOptions);
});
//dragable
$(':checkbox').click(function(){
isTrue = $(this).is(':checked');
TagCanvas[isTrue ? 'Pause' : 'Resume']('myCanvas');
});
} else {
TagCanvas.Update('myCanvas');
}
setTimeout(loadTweets, timeInSecondsToGetNewTweets * 1000);
});
}
//start
loadTweets();
var i = 0;
setInterval(function () {
if (i + 1 < n) {
$num.html(i + 1);
i++;
}
}, 150);
<!--[if lt IE 9]>
<script type="text/javascript" src="https://rawgithub.com/arv/ExplorerCanvas/master/excanvas.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,200' rel='stylesheet' type='text/css'>
<div class='loader'>
<div class="bubblingG">
<span id="bubblingG_1">
</span>
<span id="bubblingG_2">
</span>
<span id="bubblingG_3">
</span>
</div>
</div>
<div id="info" class="info">
<h1>#FreeKashmir twitter storm</h1>
<strong>Live tweets count:</strong> <span id="num">0</span>
</div>
<div id="info2" class="info">
<small>User mouse wheel to zoom in/out<br/>
Shape:
<select>
<option selected value="sphere">Sphere</option>
<option value="vcylinder">Vertical cylinder</option>
<option value="hcylinder">Horizontal cylinder</option>
<option value="hring">Horizontal ring</option>
<option value="vring">Vertical ring</option>
</select>
<br/>
<label id="lbl" for='toggle'>Pause: <input id="toggle" type="checkbox"/></label>
</small>
</div>
<div id="myCanvasContainer">
<canvas width="300px" height="300px" id="myCanvas">
<p>Your browser doesn't support canvas. Get a new browser :|</p>
</canvas>
</div>
<div id="tags">
<ul></ul>
</div>
html, body {
background: black;
width:100%;
height:100%;
margin: 0;
font-family:'Helvetica, Verdana';
}
/* just to be sure these are full screen*/
h1 {
margin: 0;
padding:0;
font-size: 16px;
}
#info * {
color: white;
}
canvas {
display:block;
}
/* To remove the scrollbars */
.tooltip {
background: #C8FDFF;
border: 1px solid #428183;
padding: 5px;
width: 400px;
font-size: 13px;
font-family:'Exo 2', sans-serif;
}
.tooltip img {
float: left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
select, select option {
color: black !important;
font-size: 10px;
margin-top: 6px;
width: 100px;
}
.info {
position: absolute;
top:0;
left:0;
padding: 10px;
background: rgba(95, 95, 95, 0.39);
color:#28FFF6;
font-size: 11px;
font-family:'Alegreya Sans SC', sans-serif;
}
#info {
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
#info2 {
left: auto;
right: 0;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
small {
display: block;
color: rgb(151, 151, 151) !important;
font-size: 12px;
}
#num {
font-size: 20px;
}
#lbl input {
margin-top: -13px;
float: left;
margin-left: 35px;
}
#lbl {
float: left;
margin-top: 8px;
}
.loader {
height: 100px;
width: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 10000;
}
/*ignore following*/
.bubblingG {
text-align: center;
width:160px;
height:100px;
}
.bubblingG span {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin: 50px auto;
background: #000000;
-moz-border-radius: 100px;
-moz-animation: bubblingG 0.8s infinite alternate;
-webkit-border-radius: 100px;
-webkit-animation: bubblingG 0.8s infinite alternate;
-ms-border-radius: 100px;
-ms-animation: bubblingG 0.8s infinite alternate;
-o-border-radius: 100px;
-o-animation: bubblingG 0.8s infinite alternate;
border-radius: 100px;
animation: bubblingG 0.8s infinite alternate;
}
#bubblingG_1 {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
#bubblingG_2 {
-moz-animation-delay: 0.24s;
-webkit-animation-delay: 0.24s;
-ms-animation-delay: 0.24s;
-o-animation-delay: 0.24s;
animation-delay: 0.24s;
}
#bubblingG_3 {
-moz-animation-delay: 0.48s;
-webkit-animation-delay: 0.48s;
-ms-animation-delay: 0.48s;
-o-animation-delay: 0.48s;
animation-delay: 0.48s;
}
@-moz-keyframes bubblingG {
0% {
width: 20px;
height: 20px;
background-color:#000000;
-moz-transform: translateY(0);
}
100% {
width: 48px;
height: 48px;
background-color:#FFFFFF;
-moz-transform: translateY(-42px);
}
}
@-webkit-keyframes bubblingG {
0% {
width: 20px;
height: 20px;
background-color:#000000;
-webkit-transform: translateY(0);
}
100% {
width: 48px;
height: 48px;
background-color:#FFFFFF;
-webkit-transform: translateY(-42px);
}
}
@-ms-keyframes bubblingG {
0% {
width: 20px;
height: 20px;
background-color:#000000;
-ms-transform: translateY(0);
}
100% {
width: 48px;
height: 48px;
background-color:#FFFFFF;
-ms-transform: translateY(-42px);
}
}
@-o-keyframes bubblingG {
0% {
width: 20px;
height: 20px;
background-color:#000000;
-o-transform: translateY(0);
}
100% {
width: 48px;
height: 48px;
background-color:#FFFFFF;
-o-transform: translateY(-42px);
}
}
@keyframes bubblingG {
0% {
width: 20px;
height: 20px;
background-color:#000000;
transform: translateY(0);
}
100% {
width: 48px;
height: 48px;
background-color:#FFFFFF;
transform: translateY(-42px);
}
}
External resources loaded into this fiddle: