Tanisha Singh
Created February 14, 2015

Flickrize

A simple app that allows you to both browse through all XKCD comics while conveniently finding Flickr images related to them.

Full instructions provided30
Flickrize

Code

file_12966.js

JavaScript
var THEME = require('themes/flat/theme');

var BUTTONS = require('controls/buttons');



var whiteS = new Skin({fill:"white"});

var redS = new Skin({fill:"red"});

var blackS = new Skin({fill:"black"});

var bigText = new Style({font:"bold 25px", color:"#333333"});

var labelStyle = new Style( { font: "bold 40px", color:"white" } );

var first_call = true;

var today = 0

var current = 0

var current_title = []

var comic_url = "http://xkcd.com/info.0.json"

var flikr_base = "http://api.flickr.com/services/feeds/photos_public.gne?tags="



var serviceURL = "https://api.flickr.com/services/feeds/photos_public.gne?";



var mainPicture = new Picture({left:0, right:0, top:5, bottom:5}, "http://imgs.xkcd.com/comics/woodpecker.png");



var buttonBehavior = function(content, data){

	BUTTONS.ButtonBehavior.call(this, content, data);

}

buttonBehavior.prototype = Object.create(BUTTONS.ButtonBehavior.prototype, {

	onTap: { value:  function(button){

		button.behavior.doPerButtonThing();

		//application.invoke(new Message("/getString"));

		//trace("Button was tapped.\n");

	}}

});



var myButtonTemplate = BUTTONS.Button.template(function($){ return{

	top:$.t, height:50, right:$.rp, left:$.lp, width: $.w,

	contents:[

		new Label({left:0, right:0, height:55, string:$.textForLabel, style:bigText})

	],

	behavior: new buttonBehavior

}});





//create all my buttons

var buttonRight = new myButtonTemplate({rp: 5, lp: 290, w:50, t:480, textForLabel:">", name:"buttonRight"});

var buttonLeft = new myButtonTemplate({rp: 290, lp: 5, w: 50, t: 480, textForLabel:"<", id: "right", name:"buttonLeft"});

var flikr = new myButtonTemplate({rp: 180, lp: 40, w: 80, t:480, textForLabel:"Flickr", id: "right", name:"flikr"});

var random = new myButtonTemplate({rp: 40, lp: 150, w: 110, t:480, textForLabel:"Random", id: "right", name:"random"});

var lines = new Container({left:0, right:0, top:0, height:440, skin: redS, name:"comic", contents: [mainPicture]});

var caption = new Container({left:0, right:0, top:430, height:45, skin: blackS, name:"caption",});

var comic_title_string = new Label({left:0, right:0, height: 40, string: "Hello World", style: labelStyle});

var mainCon = new Container({left:0, right:0, top:0, bottom:0, skin: whiteS, string:"yep"});



application.add(mainCon);

mainCon.add(lines);

mainCon.add(caption);

caption.add(comic_title_string);

//mainCon.add (picture);

mainCon.add(buttonRight);

mainCon.add(buttonLeft);

mainCon.add(flikr);

mainCon.add(random);



Handler.bind("/getXKCD", {

	onInvoke: function(handler, message){

		trace(comic_url);

		handler.invoke(new Message(comic_url), Message.JSON);

	},

	onComplete: function(handler, message, json){

		mainPicture.url = json.img

		current = json.num;

		current_title = json.title.split(" ");

		comic_title_string.string = json.title;

		//trace(current_title + '\n');

		if (first_call) {

			today = json.num;

			first_call = false;

		}

		//trace(current);

		trace("http://xkcd.com/" + current + "/info.0.json");

	}

});



Handler.bind("/getFlickr", {

	onInvoke: function(handler, message){

		//trace(comic_url);

		flicker_call = "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + current_title[0] + "&format=json&nojsoncallback=1";

		handler.invoke(new Message(flicker_call), Message.JSON);

		//handler.invoke(new Message("http://api.flickr.com/services/feeds/photos_public.gne?tags=starwars&format=json&nojsoncallback=1"), Message.JSON);

	},

	onComplete: function(handler, message, json){

		trace(json.items.length + '\n');

		trace(JSON.stringify(json));

		if (json.items.length != 0) {

			mainPicture.url = json.items[0].media.m;

		}

		else {

			comic_title_string.string = "Oh no! Try again!";

		}

		

		//trace("complete\n");

	}

});





buttonRight.behavior.doPerButtonThing = function(){

    trace("It was button Right\n");

    var next = current + 1;

    //trace ("next: " + next + " current:" + current + " today:" + today + '\n');

    if (next <= today) {

    	current = next;

   	}

    comic_url = "http://xkcd.com/" + current + "/info.0.json";

    application.invoke(new Message("/getXKCD"));

}



buttonLeft.behavior.doPerButtonThing = function(){

    trace("It was button Left\n");

    current = current - 1;

    comic_url = "http://xkcd.com/" + current + "/info.0.json";

    trace(comic_url);

    application.invoke(new Message("/getXKCD"));

} 



flikr.behavior.doPerButtonThing = function(){

    trace("It was button flikr\n");

    application.invoke(new Message("/getFlickr"));

} 



random.behavior.doPerButtonThing = function(){

    trace("It was button random\n");

    var ran_num = Math.floor(Math.random()*today);

    comic_url = "http://xkcd.com/" + ran_num + "/info.0.json";

    application.invoke(new Message("/getXKCD"));

    trace(ran_num);

} 



application.behavior = Object.create(Behavior.prototype, {  

    onLaunch: { value: function(application, data){

        myParameter = "this is a test";

        myString = "YELLLLLLLLOOOOOOOO";

        application.invoke(new Message("/getXKCD"));

        application.invoke(new Message("/getIP"));

    }}

});

Credits

Tanisha Singh
5 projects • 4 followers

Comments