Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

221 lines (211 sloc) 7.663 kB
<!DOCTYPE html>
<html>
<head>
<title>18 Cities Real Time Average Color Geo flickr with Sound</title>
</head>
<body>
<canvas id="myDrawing" width="960" height="600">
<p>Your browser doesn't support canvas.</p>
</canvas>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="cross-domain-requests.js"></script>
<script type="text/javascript">//<![CDATA[
(function($){
$.ajaxSetup({
cache: false // turn off AJAX caching
});
if (typeof console === 'undefined' || !console.log) {
var console = { log: function () {}};
};
var drawingCanvas = document.getElementById('myDrawing');
var context = drawingCanvas.getContext('2d');
function drawCross(x,y,color_index) {
if (color_index ) {
context.strokeStyle = "#FF00CC"; // "pink";
}
else {
context.strokeStyle = "#3300CC"; // bright blue
}
context.beginPath();
context.moveTo(x-8, y);
context.lineTo(x+8,y)
context.stroke();
context.beginPath();
context.moveTo(x, y-8);
context.lineTo(x,y+8);
context.stroke();
};
function drawCircle(x,y,radius,colour) {
console.log("x:"+x+" y:"+y+" radius:"+radius+" colour:"+colour);
context.strokeStyle = "#000000";
context.fillStyle = colour;
context.beginPath();
context.arc(x,y,radius,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
};
woeid_index_cache={};
var noJoy_sound = new Audio("http://dl.dropbox.com/u/361757/SOUNDS/no-joy.wav");
var geo_sound = new Audio("http://dl.dropbox.com/u/361757/SOUNDS/geo.wav");
function getPhotos(woeID,row,name,refresh_cycle) {
var y = row*32+16;
var max_d = new Date();
var index = 'id'+woeID;
var max_s = Math.round(max_d.getTime() * 0.001);
var max_str = max_s + '';
var min_d = max_s - (60 * 15); // 15 minutes ago
var min_str = min_d + '';
var apiKey = 'a3b9e1fec66dfb1797c7414dfbb81974';
var hh,mm,ss;
var h = max_d.getHours();
if (h<10) {
hh = "0"+h;
}
else {
hh = h + "";
}
var m =max_d.getMinutes();
if (m<10) {
mm = "0"+m;
}
else {
mm = m + "";
}
var s =max_d.getSeconds();
if (s<10) {
ss = "0"+s;
}
else {
ss = s + "";
}
if (woeid_index_cache[index] == null) {
context.fillStyle = "white";
context.fillRect(800, y, 960-800, 20);
context.textBaseline = "top";
var circle_color;
if (refresh_cycle % 2) {
context.fillStyle = 'black';
circle_color = 'black';
}
else {
context.fillStyle = 'red';
circle_color = 'red';
}
context.fillText(name+" "+hh+":"+mm+":"+ss,800,y);
drawCircle(800+6*name.length+56,y+7,4,circle_color);
}
$.getJSON("http://api.flickr.com//services/rest/?method=flickr.photos.search"+
"&api_key="+apiKey+
"&format=json&content_type=1&woe_id="+woeID+
"&per_page=250&min_upload_date="+min_str+
"&extras=geo,url_s,date_upload"+
"&max_upload_date="+max_str+
"&page=1"+"&sort=date-posted-asc&jsoncallback=?",
function(flickrjs) { //flickrjs is the JSON object from flickr
total_photos = parseInt(flickrjs.photos.total);
console.log("Total Photos:"+total_photos);
if (total_photos == 0) {
console.log("NO geotagged PHOTOS for time:"+max_str+"name:"+
name+" uploaded in last 40 minutes"+
"status:"+flickrjs.stat);
noJoy_sound.play();
if (woeid_index_cache[index] != null) {
context.fillStyle = "white";
context.fillRect(800, y, 960-800, 20);
context.textBaseline = "top";
if (refresh_cycle % 2) {
context.fillStyle = 'green';
circle_color = 'green';
}
else {
context.fillStyle = 'orange';
circle_color = 'orange';
}
context.fillText(name+" "+hh+":"+mm+":"+ss+"#pics:"+woeid_index_cache[index]["id_array"].length,800,y);
drawCircle(800+6*name.length+100,y+7,4,circle_color);
}
}
else {
$.each(flickrjs.photos.photo,function(i,photo) {
var id = photo.id;
var photo_url = photo.url_s;
var dateupload = photo.dateupload;
var lon = photo.longitude;
var hours = new Date(parseInt(dateupload) * 1000).getHours();
console.log("name:"+name+ " id:"+id+" Date Uploaded"+dateupload+" hours:"+hours+" url:"+photo_url);
if (woeid_index_cache[index] == null) {
woeid_index_cache[index] = {};
woeid_index_cache[index]["x"] = -1;
woeid_index_cache[index]["id_array"] = [];
}
var photoid_index = woeid_index_cache[index]["id_array"].indexOf(id);
if (photoid_index == -1) {
geo_sound.play();
woeid_index_cache[index]["x"]++;
woeid_index_cache[index]["id_array"].push(id);
var x = ((woeid_index_cache[index]["x"] % 24) * 32) + 16;
var y = row*32+16;
var rgb_str;
if (refresh_cycle % 2) {
rgb_str = "#FF00CC";
}
else {
rgb_str = "#3300CC";
}
drawCircle(x,y,16,rgb_str);
context.fillStyle = rgb_str;
context.fillRect(800, y, 960-800, 20);
context.strokeStyle = "#ffffff";
context.textBaseline = "top";
context.strokeText(name+" "+hh+":"+mm+":"+ss+" #pics:"+woeid_index_cache[index]["id_array"].length,800,y);
var url_str = "http://mkweb.bcgsc.ca/color_summarizer?xml=1&url="+photo_url+"&precision=medium";
requestCrossDomain(url_str, function(xml) {
pattern=/[0-9a-f]{6}/gi; // 6 hex digits, xml has lost its tags
var avg_rgb_str = "#"+xml.match(pattern)[24]; // kludge!
var avg_rgb = parseInt(avg_rgb_str);
console.log("Average colour:"+avg_rgb_str);
context.fillStyle = avg_rgb_str;
context.fillRect(800, y, 960-800, 20);
context.strokeStyle = "#ffffff";
context.textBaseline = "top";
context.strokeText(name+" "+hh+":"+mm+":"+ss+" #pics:"+woeid_index_cache[index]["id_array"].length,800,y);
drawCircle(x,y,16,avg_rgb_str);
}); // requestCrossDomain
} // photoid_index
else {
noJoy_sound.play();
var x = ((woeid_index_cache[index]["x"] % 24) * 32) + 16;
var y = row*32+16;
drawCross(x, y, refresh_cycle % 2);
} // photoid_index
}); // each flickrjs.photos.photo
}
}); // getJSON
setTimeout(function () {getPhotos(woeID,row,name,++refresh_cycle);}, 1000*2);
};
function get18CitiesPhotos() {
getPhotos("9807",0,"Vancouver",0);
getPhotos("2487956",1,"San Francisco",1);
getPhotos("2459115",2,"NYC",2);
getPhotos("727232",3,"Amsterdam",3);
getPhotos("2475687",4,"Portland,OR",4);
getPhotos("2345496",5,"Berlin",5);
getPhotos("615702",6,"Paris",6);
getPhotos("44418",7,"London",7);
getPhotos("20070333", 8,"Taipei",8);
getPhotos("2151330", 9,"Beijing",9);
getPhotos("2151849", 10,"Shanghai",10);
getPhotos("12581062", 11,"Rio de Janeiro",11);
getPhotos("29375205",12,"Toronto",12);
getPhotos("2379574",13,"Chicago",13);
getPhotos("2490383",14,"Seattle",14);
getPhotos("2442047",15,"Los Angeles",15);
getPhotos("1118370",16,"Tokyo",16);
getPhotos("3534",17,"Montréal",17);
};
get18CitiesPhotos();
})(jQuery);
//]]></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.