Skip to content

Instantly share code, notes, and snippets.

@troyth

troyth/gist:5105256

Forked from ebberly/gist:5105240
Last active December 14, 2015 15:08
Show Gist options
  • Save troyth/5105256 to your computer and use it in GitHub Desktop.
Save troyth/5105256 to your computer and use it in GitHub Desktop.
Download ZIP
added FACE_COUNT, which is the size of the bldgList array, and CALLBACK_COUNTER. CALLBACK_COUNTER initializes to 0 and is incremented every time an $.ajax() call returns successfully. At the bottom of the getTweetsAll() function, I added a setInterval, which will loop every 200ms looking to see if CALLBACK_COUNTER has incremented its way up to F…
Raw
gistfile1.txt
var timeActivity = 864000;
var tweetObj = {};
tweetObj.test = "ReturnTestProperty";
var bldgList = new Array(
west = new Array( '273bowery', '269bowery', '267bowery', '265bowery', '263bowery', '261bowery', '259bowery', '257bowery', '255bowery', '2stanton', '245bowery', '243bowery', '241bowery', '239bowery', '235bowery', '231bowery', '229bowery', '227bowery', '225bowery', '223bowery', '221bowery', '219bowery', '217bowery', '215bowery', '213bowery', '209bowery', '207bowery', '199bowery', '197bowery', '195bowery', '193bowery', '191bowery', '189bowery', '187bowery', '185bowery', '183bowery'),
north = new Array('273bowery'),
east = new Array( '18delancey', '155chrystie','157chrystie', '159chrystie', '163chrystie','165chrystie','167chrystie','169chrystie', '173chrystie', '17rivington', '16rivington', '181chrystie',
'183chrystie', '187chrystie', '189chrystie', '191chrystie', '195chrystie', '199chrystie',
'201chrystie', '203chrystie', '205chrystie','273bowery'),
south = new Array( '183bowery','6delancey','10delancey', '12delancey','14delancey','16delancey','18delancey')
);
var activityArray = new Array();
var testArray = new Array ("This is test tweet number 1", "This is the second test tweet....", "Here we have the third test tweet");
//$(document).ready(function()
$(window).load(function(){
console.log('doc ready!');
getTweetsAll(0);
//getTweetsAll(1);
//getTweetsAll(2);
//getTweetsAll(3);
//getTweetActivity();
//getBubblePoints();
//drawTweetsFace(0);
$('#mySvg1').hide();
$('#mySvg3').hide();
});
$(window).load(function(){
$('#button1').click(function() {
$('.TweetText').toggle();
console.log("TOGGLE TEXT")
})
})
function bubbles() {
console.log("bubbles() Called.");
for (var i=0; i <15 ; i++) {
$('body').prepend( '<img src="bubble.png" style="width:auto; height:auto; position:absolute; z-index:100;left:' + 300+i*5 + 'px;top:'+ 300 +'px" />');
//$('body').append( '<p style="width:250px; height:auto; position:absolute; z-index:101;left:' + bubbleArray[i][0] + 'px;top:'+ bubbleArray[i][1] + 'px" >#123Bowery THIS IS A TEST TO SEE ONE HUNDRED AND FORTY CHARACTERS MAXED OUT IN THE SPEECH BUBBLE TO SEE IF WE NEED MORE ROOM IN THE BUBBLESS</p>');
var nameTemp = "10" + String(i) + "bowery";
//getTweet(nameTemp);
}
};
function getBubblePoints () {
console.log("getBubblePoints called");
for (var i = 0; i < 8; i++) {
var mySvg = document.getElementById("mySvg");
console.log(mySvg);
//mySvg.addEventListener("load", function() {
console.log("SVGLoaded ");
var svg = mySvg.getSVGDocument();
console.log("SVGLoaded 2");
var ptx = svg.getElementById("183bowery").childNodes[3].getAttribute('x2');
var pty = svg.getElementById("183bowery").childNodes[3].getAttribute('y2');
$('body').append( '<p style="width:100px; height:auto; color:blue; position:absolute; z-index:101;left:' + ptx + 'px;top:'+ pty + 'px" >'+'asdfasdf'+'</p>');
console.log("Line Pts: X:"+ptx+" Y:"+pty);
// }
//);
};
};
function drawTweetsFace(face) {
console.log("drawTweetsFaceCalled");
for (var i = 0; i <bldgList[face].length; i++) {
var samplestring = "SAMPLE";
var bldgTemp = bldgList[face][i];
console.log("bldgTemp: " + bldgTemp);
if (tweetObj[bldgTemp] !=null) {
var mySvg = document.getElementById("mySvg");
//console.log(mySvg);
//mySvg.addEventListener("load", function() {
//console.log("SVGLoaded ");
var svg = mySvg.getSVGDocument();
console.log("SVGLoaded 2");
if (svg.getElementById(bldgTemp) != null){
var ptx = svg.getElementById(bldgTemp).childNodes[3].getAttribute('x2');
var pty = svg.getElementById(bldgTemp).childNodes[3].getAttribute('y2');
$('body').append( '<p id="'+bldgTemp+'Text" class="TweetText" style="width:200px; height:auto; color:blue; position:absolute; z-index:101;left:' + ptx + 'px;top:'+ pty + 'px" >'+tweetObj[bldgTemp]+'</p>');
//$('#'+bldgTemp+'Text').hide();
ptx = ptx-30;
pty = pty-40;
$('body').append( '<img src="bubble.png" style="width:auto; height:auto; position:absolute; z-index:100;left:' + ptx + 'px;top:'+ pty +'px" />');
console.log("Tweet Appended at line Pts: X:"+ptx+" Y:"+pty);
}
//);
}
}
// $('body').prepend( '<img src="bubble.png" style="width:auto; height:auto; position:absolute; z-index:100;left:' + 300+i*5 + 'px;top:'+ 300 +'px" />');
};
function getTweetsAll(face) {
console.log("getTweetsAll() Called.");
var FACE_COUNT = bldgList.length;
var CALLBACK_COUNTER = 0;
$.each(bldgList[face], function(i,name) {
var target_url = 'http://webassite.com/util/twitter-api/REST/tweets/movements/hashtag/'+name+'/limit/10';
$.ajax({
type : "GET",
dataType : "jsonp",
url : target_url, // ?callback=?
success: function(data){
console.log('success');
//console.log(data);
//console.log(data.length);
if (data.length != 0) {
var BldgTweetArrayTemp = new Array();
//console.log ("For Building:" + name);
for (var j = 0; j <data.length; j++) {
//console.log("Tweet: " + data[j]['text']);
BldgTweetArrayTemp[j]=data[j]['text'];
}
tweetObj[name] = BldgTweetArrayTemp;
}
CALLBACK_COUNTER++;
},
error: function(e){
console.log('error');
console.dir(e);
},
complete: function(data){
}
});
});
//should be ON LOAD-------------------------
var iterations = 0;
var intervalID = setInterval(function(){
iterations++;
if( (iterations >= 10) || (CALLBACK_COUNTER >= FACE_COUNT) ){
clearInterval(intervalID);
drawTweetsFace(0);
console.log(tweetObj);
}
}, 200);
};
function getTweetActivity() {
for (var i = 1; i <4; i++) {
console.log("getTweetActivity() for block " +i+".");
var target_url = 'http://webassite.com/util/twitter-api/REST/tweets/movements/block/'+i+'/recent/'+timeActivity+'/count';
$.ajax({
type : "GET",
dataType : "jsonp",
url : target_url, // ?callback=?
success: function(data){
console.log('success');
console.log(data);
//console.log(data.length);
if (data!= 0) {
activityArray[i]=data;
}
},
error: function(e){
console.log('error');
console.dir(e);
},
complete: function(data){
}
});
}
};
/*
function checkNewTweets(seconds) {
console.log("checkNewTweets() called.");
var target_url = 'http://webassite.com/util/twitter-api/REST/tweets/movements/recent/'+seconds;
$.ajax({
type : "GET",
dataType : "jsonp",
url : target_url, // ?callback=?
success: function(data){
console.log('success');
//console.log(data);
if (data.length != 0) {
tweetObj[name] = BldgTweetArrayTemp;
}
}
},
error: function(e){
console.log('error');
console.dir(e);
},
complete: function(data){
}
});
}
function drawBldgBubble(face){
for (var i=0; i <face.length ; i++) {
console.log(face[i]);
$('body').append(face[i]);
}
};
*/
Raw
gistfile2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Bowery Movements</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="twitter.js"></script>
<style type="text/css">
/*html {
background: url(BG-01.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}*/
#jstwitter {
width: 300px;
font-family: georgia;
font-size: 15px;
color: #333333;
padding: 10px;
}
#jstwitter .tweet {
margin: 0 auto 15px auto;
padding: 0 0 15px 0;
border-bottom: 1px dotted #ccc;
}
#jstwitter .tweet a {
text-decoration: none;
color: #13c9d0;
}
#jstwitter .tweet a:hover {
text-decoration: underline;
}
#jstwitter .tweet .time {
font-size: 10px;
font-style: italic;
color: #666666;
}
.container {
height: 800px;
width:900px;
margin-top:200px;
margin-left: auto;
margin-right: auto;
position:relative;
}
.container img{
padding-bottom: 40px;
}
.textcontainer {
width: 1000px;
height: 40px;
margin-top:0px;
margin-left: auto;
margin-right: auto;
}
.text {
width:80px;
height:40px;
text-align: left;
}
.bldg {
width:180px;
height:200px;
float:left;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<body>
<!--h1>NEW TWEETS</h1>
<ol id="tweets"></ol>
<a href="#" id="submit">get tweets</a-->
<div id="wrapper">
<a href = "#"><h1 id="button1" >TOGGLE</h1></a>
<!--div class="svgholder" style="width:auto; height:1500px; z-index:40;" -->
<embed src="testSvg1.svg" id="mySvg" />
<embed src="testSvg3.svg" id="mySvg3" />
</div>
<!--img src="BG-01.png" style="z-index:-10; "-->
</div>
<!--div class="container" style="position:absolute; ;" >
<div id="0" class="bldg">
<img id="100bowery" class="box" src="square.png" onClick="getTweet(this.id)"></img>
<div id="100boweryT" class="text"> </div>
</div>
<div id="1" class="bldg">
<img id="101bowery" class="box" src="square.png" onClick="getTweet(this.id)"></img>
<div id="101boweryT" class="text"> </div>
</div>
<div id="2" class="bldg">
<img id="102bowery" class="box" src="square.png" onClick="getTweet(this.id)"></img>
<div id="102boweryT" class="text"> </div>
</div>
<div id="3" class="bldg">
<img id="103bowery" class="box" src="square.png" onClick="getTweet(this.id)"></img>
<div id="103boweryT" class="text"></div>
</div>
<div id="4" class="bldg">
<img id="104bowery" class="box" src="square.png" onClick="getTweet(this.id)"></img>
<div id="104boweryT" class="text"></div>
</div>
</div-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment