Skip to content

Commit a3d6b6d

Browse files
baspetebaspete
committed
added tweetboard
 - got rid of up and down arrows on sprite and replaced them with colon and @ - added twitter plugin
1 parent f60ddb2 commit a3d6b6d

9 files changed

Lines changed: 248 additions & 9 deletions

File tree

‎css/base.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,8 @@ a {
132132
.splitflap .full span.capo { background-position: -1075px 0px; } /* ' */
133133
.splitflap .full span.cplu { background-position: -1100px 0px; } /* + */
134134
.splitflap .full span.cmin { background-position: -1125px 0px; } /* - */
135-
.splitflap .full span.cup { background-position: -1150px 0px; } /* ↑ */
136-
.splitflap .full span.cdn { background-position: -1175px 0px; } /* ↓ */
135+
.splitflap .full span.ccol { background-position: -1150px 0px; } /* ↑ */
136+
.splitflap .full span.cat { background-position: -1175px 0px; } /* ↓ */
137137
/* NUMBERS ONLY DRUM */
138138
.splitflap .number span.csp { background-position: -25px 0px; } /* space */
139139
.splitflap .number span.c0 { background-position: -700px 0px; } /* 0 */

‎data/airport_schedule.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
// "results": [
66
// {
77
// "source" : "arrivals",
8-
// "data" : {
9-
// "101" : {"scheduled":"0728", "city":"London", "airline":"0", "gate":"C21", "status":"1", "remarks":"est 2130+"}
10-
// }
8+
// "data" : [
9+
// {"flight:101", "scheduled":"0728", "city":"London", "airline":"0", "gate":"C21", "status":"1", "remarks":"est 2130+"}
10+
// ]
1111
// }
1212
// ]
1313
// }

‎flights.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@
176176
flights.update(container);
177177
setInterval(function(){
178178
flights.update(container);
179-
}, 30000); // refresh inteval
179+
}, 30000); // refresh interval
180180

181181
});
182182

‎img/split-flap-letters-yellow-sm.png‎

-29.8 KB
Loading

‎img/split-flap-letters-yellow-sm.psd‎

934 KB
Binary file not shown.

‎js/split-flap.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ sf.display = {
3232
// a character and when prepended by "c" gives the class name which will
3333
// be applied to display that character.
3434
FullDrum: function() {
35-
this.order = [' ','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','0','1','2','3','4','5','6','7','8','9','.',',','?','!','/','\'','+','-','↑','↓'];
35+
this.order = [' ','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','0','1','2','3','4','5','6','7','8','9','.',',','?','!','/','\'','+','-',':','@'];
3636
},
3737
CharDrum: function() {
3838
this.order = [' ','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','.',','];
@@ -179,8 +179,8 @@ sf.display = {
179179
case "'": c = "capo"; break;
180180
case "+": c = "cplu"; break;
181181
case "-": c = "cmin"; break;
182-
case "↑": c = "cup"; break;
183-
case "↓": c = "cdn"; break;
182+
case ":": c = "ccol"; break;
183+
case "@": c = "cat"; break;
184184
}
185185
container.fadeOut(50, function(){
186186
container.removeClass().addClass(c);

‎plugins/twitter/custom.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.splitflap {
2+
width: 1440px;
3+
overflow: none;
4+
white-space: nowrap;
5+
margin: 0px;
6+
}
7+
.splitflap .group {
8+
margin-right: 30px;
9+
}

‎plugins/twitter/custom.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
2+
sf.plugins.twitter = {
3+
4+
dataType: 'jsonp',
5+
6+
// get tweets
7+
url: function(id){
8+
var base_url = "http://search.twitter.com/search.json";
9+
var from = "from:"+id;
10+
console.log(id)
11+
var data = {
12+
"q": from,
13+
"rpp": 6
14+
};
15+
return base_url + "?" + $.param(data);
16+
},
17+
18+
formatData: function(response){
19+
var newResponse = [];
20+
for(var i=0;i<response.results.length;i++){
21+
22+
// get the timestamp
23+
var timestamp = new Date(response.results[i].created_at);
24+
var hrs = timestamp.getHours();
25+
if(hrs < 10){
26+
hrs = "0"+hrs;
27+
}
28+
var mins = timestamp.getMinutes();
29+
if(mins < 10){
30+
mins = "0"+mins;
31+
}
32+
timestamp = hrs.toString() + mins.toString();
33+
34+
// split the tweet text into rows of 40 chars each
35+
// with a timestamp only on the first one
36+
var text = response.results[i].text;
37+
var rows = text.match(/.{1,40}/g);
38+
for(var j=0;j<rows.length;j++){
39+
var row = {
40+
"timestamp":timestamp,
41+
"text":rows[j]
42+
};
43+
timestamp = "";
44+
newResponse.push(row);
45+
}
46+
var blankRow = {
47+
"text":" "
48+
}
49+
newResponse.push(blankRow);
50+
}
51+
return newResponse;
52+
}
53+
};

‎tweetboard.php‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="css/base.css"/>
4+
<link rel="stylesheet" href="plugins/twitter/custom.css"/>
5+
</head>
6+
<body>
7+
8+
9+
<!-- ============================================ -->
10+
<!-- CHART CONTAINER -->
11+
<div id="display1" class="chartContainer splitflap">
12+
13+
<!-- parameters -->
14+
<div class="chartPrefs" style="display:none;">
15+
<input type="hidden" name="id" value="<?php echo $_GET["id"] ?>" /> <!-- the type of data you want from the service -->
16+
</div>
17+
18+
<ul id="chart1" class="chart">
19+
20+
<h1>@<?php echo $_GET["id"] ?></h1>
21+
22+
<!-- Header: 30px/char, 15px/separator, 120px/logo -->
23+
<div class="header" style="width:120px;margin-left:0px;">Time</div>
24+
<div class="header" style="width:120px;margin-left:0px;">Tweet</div>
25+
26+
<!-- rows will be placed here dynamically from #row_template -->
27+
28+
</ul>
29+
30+
</div>
31+
<!-- END CHART CONTAINER -->
32+
<!-- ============================================ -->
33+
34+
<script type="text/javascript" src="js/jquery-1.7.1-min.js"></script>
35+
<script type="text/javascript" src="js/underscore.js"></script>
36+
<script type="text/javascript" src="js/backbone.js"></script>
37+
<script type="text/javascript" src="js/split-flap.js"></script>
38+
<script type="text/javascript" src="plugins/twitter/custom.js"></script>
39+
40+
<!-- ============================================ -->
41+
<!-- ROW TEMPLATE -->
42+
<script type="text/template" id="row_template">
43+
<li class="row">
44+
<div class="group timestamp"> <!-- timestamp -->
45+
<div class="number"><span></span></div>
46+
<div class="number"><span></span></div>
47+
<div class="number"><span></span></div>
48+
<div class="number"><span></span></div>
49+
</div>
50+
<div class="group text"> <!-- tweet -->
51+
<div class="full"><span></span></div>
52+
<div class="full"><span></span></div>
53+
<div class="full"><span></span></div>
54+
<div class="full"><span></span></div>
55+
<div class="full"><span></span></div>
56+
<div class="full"><span></span></div>
57+
<div class="full"><span></span></div>
58+
<div class="full"><span></span></div>
59+
<div class="full"><span></span></div>
60+
<div class="full"><span></span></div>
61+
62+
<div class="full"><span></span></div>
63+
<div class="full"><span></span></div>
64+
<div class="full"><span></span></div>
65+
<div class="full"><span></span></div>
66+
<div class="full"><span></span></div>
67+
<div class="full"><span></span></div>
68+
<div class="full"><span></span></div>
69+
<div class="full"><span></span></div>
70+
<div class="full"><span></span></div>
71+
<div class="full"><span></span></div>
72+
73+
<div class="full"><span></span></div>
74+
<div class="full"><span></span></div>
75+
<div class="full"><span></span></div>
76+
<div class="full"><span></span></div>
77+
<div class="full"><span></span></div>
78+
<div class="full"><span></span></div>
79+
<div class="full"><span></span></div>
80+
<div class="full"><span></span></div>
81+
<div class="full"><span></span></div>
82+
<div class="full"><span></span></div>
83+
84+
<div class="full"><span></span></div>
85+
<div class="full"><span></span></div>
86+
<div class="full"><span></span></div>
87+
<div class="full"><span></span></div>
88+
<div class="full"><span></span></div>
89+
<div class="full"><span></span></div>
90+
<div class="full"><span></span></div>
91+
<div class="full"><span></span></div>
92+
<div class="full"><span></span></div>
93+
<div class="full"><span></span></div>
94+
</div>
95+
</li>
96+
</script>
97+
<!-- END ROW TEMPLATE -->
98+
<!-- ============================================ -->
99+
100+
<script type="text/javascript">
101+
102+
// This View generates the empty markup for the rows
103+
// It is only called once, at document.ready()
104+
var Board = Backbone.View.extend({
105+
el: $("#chart1"),
106+
template: _.template($('#row_template').html()),
107+
initialize: function(){
108+
this.render();
109+
this.el.find(".row").each(function(){
110+
sf.display.initRow($(this));
111+
})
112+
},
113+
render: function() {
114+
this.el.find(".row").remove();
115+
for(var i=0;i<(sf.local.numRows?sf.local.numRows:3);i++){
116+
this.el.append(this.template());
117+
}
118+
return this;
119+
}
120+
});
121+
122+
// This Collection is used to hold the datset for this board.
123+
var Rows = Backbone.Collection.extend({
124+
update: function(container){
125+
this.fetch({
126+
success: function(response){
127+
sf.display.loadSequentially(response.toJSON(), container) // TODO: should this know about this method?
128+
}
129+
});
130+
},
131+
parse: function(json){
132+
return(sf.plugins.twitter.formatData(json)); // normalize this data
133+
}
134+
});
135+
136+
// Utility method to clear the board
137+
$("#clear").click(function(){
138+
sf.display.clear($('#display1'));
139+
});
140+
141+
$(document).ready(function() {
142+
143+
// Set the number of rows to create (defaults to 3).
144+
sf.local.numRows = 13;
145+
146+
// generate the empty rows markup (a backbone View)
147+
var board = new Board;
148+
149+
var container = $("#display1");
150+
var id = container.find("input[name=id]").val();
151+
152+
var dataOptions = {
153+
"sort": container.find("input[name=sort]").val(),
154+
"order": container.find("input[name=order]").val()
155+
};
156+
157+
// create the chart object (a backbone Collection)
158+
var tweets = new Rows;
159+
tweets.dataOptions = dataOptions;
160+
tweets.url = sf.plugins.twitter.url(id);
161+
tweets.sync = function(method, model, options){
162+
options.timeout = 10000;
163+
options.dataType = "jsonp";
164+
return Backbone.sync(method, model, options);
165+
};
166+
// update the chart (and set a refresh interval)
167+
tweets.update(container);
168+
setInterval(function(){
169+
tweets.update(container);
170+
}, 30000); // refresh interval
171+
172+
});
173+
174+
</script>
175+
176+
</body>
177+
</html>

0 commit comments

Comments
 (0)