Free Kashmir

live tweets cloud for twitter store #FreeKashmir

by Alex Azuero

HTML

<script src="http://www.goat1000.com/tagcanvas.min.js?2.2"></script>
<!--[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>

CSS

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;
   ...

JavaScript

var searchTerm = 'cubs',
    cloudStarted = false,
    numOfCharsToShowInCloud = 25, //How many characters of each tweet to be shown in cloud
    numOfTweets = 100,
    n = 0,
    maxLimitOfTweetsToShow = 50000,
    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
              ...