Mashups Web APIs | ITP Days

{Tune In, Tune Out}

By jhclaura in Blog, Mashups Web APIs, Spring 2014 May 27, 2014 0 Comment

For the final of Mash-up class, Jeff Ong and I teamed up and made “Tune In, Tune Out”. It’s a webite uses your computer’s on-board microphone, listens to the surrounding environmental sound, and translates it into a musical landscape.

An accompanying visualization appears on-screen, along with options to change the musical fundamentals (key, scale, mode) of the sounds. Build with Web Audio API and Tone.js for audio, and Three.js for visual.

We started idea of filtering out the “sound of the sound”. So much effort and energy has gone into our attempts to “escape” our immediate sonic environment: conversations, distracting noises, and try to drown out the surrounding chaos.

There’s no denying the need to focus, and there’s also no shortage of aural distractions, especially living in urban areas. “Tune In, Tune Out” offers an alternative to the music and tools we use to tune out the noise around us, channeling that very noise into a sonic landscape.

An additional project inspiration and goal is to build some basic tools around making it easier to use music theory concepts in tandem with data representation. There are different types of Key, Mode, Scale, and Sound Wave to choose from. Thank Aaron Arntz for the music theory Fly by!

GitHub here.

css update: Healthy Movie Night

By jhclaura in Blog, Mashups Web APIs, Spring 2014 March 23, 2014 0 Comment

One page web-fantasy UPDATE! GO PLAY.

Type in the movie you’re going to see.
Type in the food you’re going to eat.
Choose which exercise you’re going to take.
Type in your weight, in kg or lbs.
Base on the duration of movie, the calories of the food, the amount of calories born in certain exercise, and your weights, Healthy Movie Night gives you back how much food you can eat without worrying gaining any weights!

e.g. “The Grand Budapest Hotel”, pizza, Jog in Water, 51kg.

e.g. “Wanted”, spaghetti, fishing, 51kg.

e.g. “Alice in Wonderland”, cake, Ballet, 51kg.

HealthyMovieNight

By jhclaura in Blog, Mashups Web APIs, Spring 2014 March 2, 2014 0 Comment

(click pic to enter)

Idea:

choose your movie
choose your food
give me your weight
movie length * calories burn by exercising per min = calories of food in certain amount you have.

Issues:

hard to find regular food calories API
- right now just use the first item in the array
pizza has no serving size unit(null)
id –> name

API:

Source:

Calories Burned During Exercise by NutriStrategy

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> FanGuide </title>
		<link rel="stylesheet" type="text/css" href="style.css"/>

		<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>

	</head>
	<body>
		<p>The Movie Tonight
		<input id="movie" type="text"/></p>
		<p>The Food Tonight
		<input id="food" type="text"/></p>
		<p>Feel Like
		<button id="saw">Forestry</button> 
		<button id="fish">Fishing</button>
		<button id="dance">Ballet</button>
		<button id="jog">Water Jogging</button>
		Tonight</p>
		<p>Your Weight
		<input id="weight" type="text"/>
		<button id="kgButton">kg</button>
		<button id="lbsButton">lbs</button>
		</p>

		<button id="searchButton">Search</button>
		<!-- <button onClick="getFoodData();return false;">ARMS Surveys</button>
		<div id="divResultARMS"></div> -->
		<!-- <button id="update">UPDATE</button> -->
		<div id="articles"></div>
		<div id="articles2"></div>

	</body>
		<script type="text/javascript" src="script_new.js"></script>
</html>

var idMovie;
var movieTitle;
var duration;

var idFood;
var nameFood;
var calories;
var servingSize;
var servingSizeUnit;

var weightUnit;
var exerciseType;	// int
var exerciseTypeText;
var caloriesExercise;

var caloriesBurnAfterExersice;
var amountToEat;

var base_url = "http://image.tmdb.org/t/p/w500";

function getDuration(){
	var url = 'https://api.themoviedb.org/3/',
		mode = 'movie/',
		key = '?api_key=YourKey';

	$.ajax({
		url: url + mode + idMovie + key,
		dataType: 'jsonp',
		success: function(data){
			console.log(data);
			console.log("<img srt="" + base_url + data.backdrop_path + "">");

			movieTitle = data.original_title;

			duration = data.runtime;
			$('#articles').append("<div class='articleBox'>");
			//$('#articles').append("<p>" + movieTitle + "'s runtime: " + duration +"min" + "</p>");
			//$('#articles').append("<img src="" + base_url + data.backdrop_path + "">");
			$('#articles').append("</div>");

			$('#articles').css({
				"color": "white"
			});

			$('body').css({
				"background-image": "url("" + base_url + data.backdrop_path + "")",
				"color": "white"
			});
			getFoodID();
		}
	});

}

function getFoodID(){
	var url = 'https://api.nutritionix.com/v1_1/',
		search = 'search/',
		appId = '&appId=YourId',
		appKey = '&appKey=YourKey',
		setUp = 'results=0%3A10&cal_min=0&cal_max=50000&fields=item_name%2Cbrand_name%2Citem_id%2Cbrand_id';

	var input = $('#food').val(),
		foodName = encodeURI(input);

	$.ajax({
		url: url + search + foodName + '?' + setUp + appId + appKey,
		dataType: 'json',

		error: function(data){
			console.log("Something wrong!");
		},
		success: function(data){
			console.log(data);

			idFood = data.hits[0]._id;
			nameFood = data.hits[0].fields.brand_name + "'s " + data.hits[0].fields.item_name;

			console.log(idFood + nameFood);

			getNutrition();
		}
	});

}

function getNutrition(){
	var url = 'https://api.nutritionix.com/v1_1/',
		item = 'item?',
		appId = '&appId=YourId',
		appKey = '&appKey=YourKey';

	// nutrition search
	$.ajax({
		url: url + item + 'id=' + idFood + appId + appKey,
		dataType: 'json',

		error: function(data){
			console.log("Something wrong!");
		},
		success: function(data){
			console.log(data);

			// calories = data.nf_calories;
			// servingSize = data.nf_serving_size_qty;
			if(data.nf_serving_size_unit !== null){
				servingSizeUnit = data.nf_serving_size_unit;
			}

			if(data.nf_serving_size_qty !== null){
				calories = data.nf_calories / data.nf_serving_size_qty;
			} else {
				calories = data.nf_calories;
			}

			$('#articles').append("<div class='articleBox'>");
			//$('#articles').append("<p>" + nameFood + "'s calories: " + calories + " per 1 " + servingSizeUnit + "</p>");
			$('#articles').append("</div>");

			calculateEat();
		}
	});
}

function caloriesSetUp(){

	$('#jog').click(function(){
		exerciseType = 363;
		exerciseTypeText = "jog in water";
	});

	$('#saw').click(function(){
		exerciseType = 318;
		exerciseTypeText = "saw trees";
	});

	$('#fish').click(function(){
		exerciseType = 114;
		exerciseTypeText = "fish";
	});

	$('#dance').click(function(){
		exerciseType = 205;
		exerciseTypeText = "dance ballet";
	});

	// unit set-up
	$('#kgButton').click(function(){
		weightUnit = "kg";
	});

	$('#lbsButton').click(function(){
		weightUnit = "lbs";
	});

}

function caloriesBurn(){

	var input = $('#weight').val();
	if (weightUnit == "lbs") {
		caloriesExercise = exerciseType / 100 * input;
	} else {
		caloriesExercise = exerciseType / 100 * (input*2.20462);
	}

	return caloriesExercise;
}

function calculateEat(){

	caloriesBurn();

	// how many calories it will burn after exercising
	caloriesBurnAfterExersice = caloriesExercise / 60 * duration;

	// for certain calories, how many I can eat(per 1 serving size)
	amountToEat = caloriesBurnAfterExersice / calories;
	amountToEat = Math.round( amountToEat *10)/10;

	console.log(amountToEat);

	$('#articles2').append("<div class='articleBox'>");
	if(servingSizeUnit !== null){
		$('#articles2').append("<p>During " + movieTitle + ", if you " + exerciseTypeText + " all the way through it, you can eat " + amountToEat + " " + servingSizeUnit + " of " + nameFood + " without worrying gaining any weights!</p>");
	} else {
		$('#articles2').append("<p>During " + movieTitle + ", if you " + exerciseTypeText + " all the way through it, you can eat " + amountToEat + " " + nameFood + " without worrying gaining any weights!</p>");
	}
	$('#articles2').append("<p>Calories burnnnnnn.</p>");
	// $('#articles').append("<img src="" + base_url + data.backdrop_path + "">");
	$('#articles2').append("</div>");
}

$(document).ready(function(){
	var url = 'https://api.themoviedb.org/3/',
		mode = 'search/movie',
		input,
		movieName,
		//var url = "https://api.themoviedb.org/3/movie/550?api_key=";
		key = '?api_key=YourKey';

	caloriesSetUp();

	$('#searchButton').click(function(){
		var input = $('#movie').val(),
			movieName = encodeURI(input);

		$.ajax({
			url: url + mode + key + '&query=' + movieName,
			dataType: 'jsonp',
			success: function(data){
				console.log(data);

				idMovie = data.results[0].id;

				getDuration();

			}
		});

	});

});

css

.searchButton{
	width: 100px;
	height: 50px;
	text-align: center
}

.articles {
	text-align: center;

}

Eat w/o Quilt.

By jhclaura in Blog, Mashups Web APIs, Spring 2014 February 24, 2014 0 Comment

Happy Movie Night Woohoo! Let’s enjoy the lovely film with your nom nom food, without quilt.

Type in the movie you want to watch. Type in the food you want to eat. Choose the workout you want to do.

BANG. Just have the exact portion you get from website, and enjoy the film without even noticing you’re exercising.

API: Nutritionixn, OMDB

webbbb {self_documentary}

By jhclaura in Blog, Fun, Mashups Web APIs, Spring 2014 February 16, 2014 0 Comment

Ok pal, THIS is the absolutely non-sense web page about my super basic experiment about WEB.

So -_-, so non-sense. But since the class is called “Meshups”, I guess it makes sense, kind of.

baby

answers to hw and hopely to project

By jhclaura in Blog, Mashups Web APIs, Spring 2014 February 13, 2014 0 Comment

Answer#1

var print = "#";
for(var i=0; i<7; i++){

	console.log(print);
	print += "#";	
}

Answer#2

for(var i=0; i<100; i++){

	if((i+1)%3==0 || (i+1)%5==0){
		console.log("FizzBuzz");
	} else {
	console.log(i+1);
	}
}

Answer#3

var size = 8;
var print1 = "#";
var print2 = " ";
var printFinal1 = "";
var printFinal2 = "";
for(var i=1; i<size+1; i++){
	if (i%2==1){
		printFinal1+=print1;
		printFinal2+=print2;
	}
	else{
		printFinal1+=print2;
		printFinal2+=print1;
	}
}

for(var i=0; i<printFinal.length; i++){
	if(i%2==0){
		console.log(printFinal1);
	} else {
		console.log(printFinal2);
	}
}

Yeah hay.

As for the project that

Create a single web page experience that, upon user input, responds with data from at least 2 web apis. (1) a user needs to “trigger” an event, (2) data needs to be requested via AJAX from two APIs, (3) and the page should update appropriately.

I’m not sure yet… stiill tuning!

Gif-Overload {Giphy API}

By jhclaura in Blog, Fun, Mashups Web APIs, Spring 2014 February 5, 2014 0 Comment

Last semester, for my final project for Comm Lab: Web, I made an API meshup website LOST, using Youtube, TheCatAPI, Iheartquotes API.

LOST_homepage

LOST_”No, I’m not.” page

It’s interesting to see images animated in the stop-motion way, so I want to do more with GIFs first, and then later maybe develop into video with sound. For an assignment to build single web page that displays (some of) the data you found with some basic css styling, I found an API from Giphy, a animated GIFs search website. On the Github of Giphy, the API is well documented and has following functions: search, GIF by id, translate, random, trending. And also, according to their Github,

The Giphy API implements a REST-like interface. Connections can be made with any HTTP enabled programming language. The Giphy API also implements CORS, allowing you to connect to Giphy from JavaScript / Web browsers on your own domain.

To warm up my API-skill for new semester, I use search function, and give 3 choices: Cat, Grilled Cheese, and Coding to display 25 related GIFs from Giphy API, and also a reset button to display pure background. Unfortunately the search function gives you fixed searching result. Might need to twig the offset parameter… Check it out!

And here are the codes.

php file

<!DOCTYPE HTML>

<html> 
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

		<title>Giffff</title>
	</head>
	<body>
	<!-- white words-->
	<h1>Gif-Overload!</h1>
	<!-- rainbow words -->
	<!-- <h1><span class="rainbow">Gif-Overload!</span></h1> -->
	<form align="center" method="post">
    	<div class="button">
        	<button type="submit" value="clear" name="choice"> Reset </button>
	    </div>
	</form>

	<form align="left" method="post">
    	<div class="button1">
        	<button type="submit" value="cat" name="choice"> Cat </button>
	    </div>
	</form>

	<form align="center" method="post">
    	<div class="button">
        	<button type="submit" value="grilled+cheese" name="choice"> Grilled Cheese </button>
	    </div>
	</form>	

	<form align="right" method="post">
    	<div class="button2">
        	<button type="submit" value="coding" name="choice"> Coding </button>
	    </div>
	</form>

	<p align="center">
		<?php

		$choice = $_POST['choice'];

		// mode: search
		$url = 'http://api.giphy.com/v1/gifs/search?q='.$choice.'&api_key=dc6zaTOxFJmzC';

		// mode: translate
		//$url = 'http://api.giphy.com/v1/gifs/translate?s='.$choice.'&api_key=dc6zaTOxFJmzC';

		// mode: random
		// $url = 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag='.$choice.'';

		// Get the document at this url
		$response = file_get_contents($url); 
		// echo $response; //debug

		// Parse XML with SimpleXML in PHP http://www.php.net/manual/en/simplexml.examples-basic.php
		$pics = json_decode($response);
		//var_dump($pics); // take a look at this to see what data you get back

		if ($choice == 'clear') {
			echo '';
		} else {
			for ($i=0; $i<25; $i++) {
				// mode: search
				echo '<img src="'.$pics->data[$i]->images->fixed_height->url.'">';
			}
		}

		// mode: translate
		//echo '<img src="'.$pics->data->images->fixed_height->url.'">';

		// mode: random
		//echo '<img src="'.$pics->data->image_url.'">';

		?>
	</p	>
		
</body> 
</html>

css file

body{
	background-image: url('galaxy.png');
}

h1{
	text-align: center;
	font-family: 'Reenie Beanie', cursive;
	font-size: 50px;
	font-weight: bold;
	color: white;
}


.button1 {
	position: absolute;
	top: 140px;
	left: 20%;
}

.button2 {
	position: absolute;
	top: 140px;
	left: 80%;
}

ITP Days

Laura Juo-Hsin Chen's everything in ITP graduate school.

Category Archives: Mashups Web APIs