TweetChime Live Demo from cindy wong on Vimeo.

Helping people overcome long distances, TweetChime is a melodic chime that communicates people’s sentiments and transmits them into melody. So, no matter where you are, you can let your loved ones know you’re thinking of them and they can hear your sentiment in real-time in sound. By using Twitter, you can send your preferred sentiment, anytime and anywhere at your convenience.

In this case, in the video above, my brother, Pat has sent me this coded message: “@tweetchime [dinnertime] awww yeah!” Why? Because he has an odd sense of humor  from living in Mobile, Al. which somehow is lost on me  in New York City. Ah, family.

Who Could Use TweetChime?

TweetChime is great for ambient contact technology. In other words, you can keep yourself open to others without them having to actively message you (through phone/IM/email). Vice versa, they can quickly tweet you and have the satisfaction of knowing that you will hear their tweet melody in real time on your side.  The TweetChime is unobtrusive and (if prototyped further) can blend into your household.

• Long distance friends/family
• Parents who want to communicate with their kids (who can’t read time, distinguish technology)
• Visually Impaired

Interact with TweetChime:

Would you like to send a sentiment to me? Please tweet to @tweetchime, the TweetChime’s Twitter account.

How to Send: TweetChime recognizes the coded message within the brackets [ ]. The TweetChime website will scan Twitter’s search results looking for messages aimed at @tweetchime.

I have programmed a reply that TweetChime can recognize from a Twitter message. Choose your choice below:

• @tweetchime [be happy]
• @tweetchime [congratulations]
• @tweetchime [missing you]
• @tweetchime [holla]
• @tweetchime [coming home]
• @tweetchime [dinner time]

ex: cwong08 says: “@tweetchime [dinner time] Mom is serving mashed potatoes and turkey! Mmmm!

Where Does My Tweet Go?

TweetChime will be searching for all mentions of itself (@tweetchime) through Twitter’s public search time line. When it finds the coded tweet (1 of the 6 above), it’ll understand it and output into a short melody that the TweetChime owner will understand.

See It In Action

Continue Reading »

For my  web development final, I knew I wanted to pursue my interests in social media, interactive design, and multimedia.  I’m pretty interested in technology that helps bring people together over the web to communicate/interact. So, how can I make it fun?

FireChat is an interactive video website that serves as a hub for friends to deliver greeting card messages. Rather then have friends sign a paper card, why not have an electronic card where your friends can all personally deliver a video message to your intended recipient on 1 screen? Go to the website. Sign in. Create an e-card page. Upload your video message. Invite your friends and family to your e-card webpage so that they can upload their video messages too! When you’re ready, you can email your video-card recipient and they will get to see everyone’s well-wishes on 1 page in video! You know how some people hate having to sign cards? Sometimes, it’s easier to just say what you want outloud. Don’t worry, unlike handwritten notes, you can just re-record your message till you get it right.

Examples:

For my Final Project, I decided to combine my ICMW and PComp classes together and produce a single idea: Meet TweetChime. TweetChime is an interactive music chime that  that will take specially coded Twitter messages people send to you and transforms them into melody where you are. What makes that so special?

Whether a friend wants to express “Good Luck!”, “Congratulations!”, “Have a Great Day” or “Thinking Of You”, TweetChime transforms their greeting in a harmonious patterned musical chime melody in real time. Be pleasantly surprised when you hear the ringing of notes and know that someone – out there– is thinking of you. As an owner, you can decipher what people are messaging you based on the musical melody overheard.

Interaction: Person tweets a message through a special code setup. Example: @cwong08 says, “@tweetchime 65 #tweetchime.
Among the selected messages are examples like “Have a Good Day!” “Miss You,” “Good Luck!”, “I Love You,” that are given specific number codes etc. Currently, numbers 65-68 are coded. The owner of the TweetChime machine will log on to the TweetChime website and activate their device. From there, the TweetChime website scans an RSS feed for impending tweets  for @tweetchime and refreshes your website with appropriate melody when triggered by friends and family’s tweets.

Under the Hood: TweetChime is powered by Javascript, PHP, and an Arduino. The TweetChime website is built with Javascript to interact serially with the Arduino (via USB port). TweetChime website uses AJAX to scoop data from a PHP script that reads a Twitter RSS feed and parses numerical codes from people’s submitted tweets.  From there, it passes those byte values to the Arduino which then outputs it into the message’s cued  melody.

Setup: Arduino, PHP, Javascript, 5 wind chime tubes, servo motors, 5 mini metal tubes (strikers)

Each wind chime is paired with a servo motor that is wired to the Arduino.  When the Arduino checks for digital read messages, it will receive the values and trigger the servo motor to tap the chime in series. A message like “Have a Good Day!” would sound differently then a message like “Miss You.”

Here’s a video of me testing the sensor motors against the wind chimes I purchased to see if they’d resonate.

Testing Servo Motor for Final Project Use from cindy wong on Vimeo.

Testing Prototype: TweetChime Web/ServoMotor Interaction from cindy wong on Vimeo.

Physical Construction of TweetChime from cindy wong on Vimeo.

So, for my midterm, I decided to expand on my original PHP application, WearCaster. It was originally a little PHP app that pulled up New York City temperature readings (from Yahoo! Weather RSS feed). Based on my temperature parameters, WearCaster would let me know what I needed to wear before I step out the door. Here’s my original blog post documenting it. For the midterm, to avoid potential conflict with another company/individual, I changed the name (apparently, wearcaster.com, has been bought/squatted).

Please follow this link to see my presentation of Fashion Forecast for Intro to Computational Media for the Web.

http://docs.google.com/present/view?id=df35f6dh_111dq37wjhh

This time….

1. Plug your Zip Code anywhere in the US
2. Choose a Wardrobe based on your personal fashion preference
3. It’s Guy + Girl friendly so nobody get’s left out!
4. More choices: Keep hitting that refresh button to see new outfits!

So, during my brainstorming for Fashion Forecast, here were features I wanted to implement. However, due to the 1-week Midterm deadline turnaround, I wasn’t able to get them all here. However, it’s something to think about for future implementation.

1.  Wardrobe Selection based on fashion brand [Was able to implement]

2. Ability for user to customize Fashion Forecast with their own closet selections (via uploaded photo content). [PHP/Database creation, user accounts required. Haven't explored/learned that yet]

3. More weather variables (precipitation). [Found weather RSS feeds to be more complicated to parse, still haven't found a good service quite yet]

Continue Reading »

For my ICM Web proposal, I want to expand on my original Javascript/PHP application, Wearcaster. It’s designed to help users quickly see what outfits they should wear based on their destination weather/temperature conditions. As a South Floridian, I was clueless about how to dress for New York’s changing seasons from the hot summer to colder autumn. Living up on a 5th floor walk-up apartment, I often quickly glanced at the weather websites, figured out an outfit, and walked downstairs to start my day. Oftentimes, I was underprepared and was too far in my commute to go back home and change. After sharing Wearcaster with friends and acquaintances, I heard similar stories and also received feedback that let me think of how to expand its original application.

For my Midterm, I’d like to expand on WearCaster in a few ways:

1) Expand it outside New York City: Make the website and it’s weather suggestions  accessible to users in other destinations within the United States. Using PHP, Wearcaster would have a zip code submit form so users can get customized weather/wardrobe information, whether it’s New York, San Francisco, or Miami.

2) Guy or Girl Friendly: WearCaster would give you different results depending if you identified yourself as a guy or girl.

3) User Clothing Input: Website visitors would have the option to either see Wearcaster’s suggested clothing (through a sponsored fashion brand, like Anthropologie, Urban Outfitters, Gap, etc.) or they can use Wearcaster to upload photos of their own clothing items and tag them appropriately (“jacket”, “coat”, “dress”, “blouse”). That way, users can define for themselves what clothing is appropriate for which temperature climate.

4) Fine tune Weather variables: So far, Wearcaster pulls Yahoo! Weather’s API data for temperature alone. I had roughly made 4 classifications but I will have to expand to take into account more temperature variations around the US. For example, hot weather is only currently defined for anything above 70degrees! It should also take into account rain predictions so people would know to bring an umbrella with them before they leave the house also.

Addendum?  May choose to offer multi-day wardrobe suggestion pending what RSS data is available through other weather provider websites.

Ideal users for Wearcaster: Travelers, New City residents (unused to the cold), People who dislike spending time assembling outfits for themselves

Purpose: The web app allowed users to see very easily what they should wear today based on the weather/temperature conditions.

Applications: Wardrobe suggestions, Weather reader, Travel Packing

Here are the wireframes I’ve generated for the different interactions below:

Home Page: PHP
1. Select Your Gender
// Generate Radio Buttons.
2. Enter Zip Code to see your local Wearcast report. Press GO button.
// Generate Submit Form, Go Button. GO () function works when all fields are selected/filled out.

// This information is generated via a process.php + display.php combined on same php file.

GO function = Sources Yahoo! API weather. Checks for temperature, rain precipitation, UV(?) factors.

Processes results to display page next.

Display Page Results:

1. Variables are organized in arrays: temperature readings, location, advice.
Based on temperature/weather conditions, the arrays will present the wardrobe needed. For variety, the images may be randomized per their category (“shirts”, “jackets”, etc). Not sure to go that route.

//Set up variables, set up arrays for advice generated, city name displayed, temperature/date/time displayed. May

2. Set up links for alternate wardrobe selections to display: GAP vs. Urban Outfitters wardrobe.
//Same formula. Just set up different arrays (Gap, Anthropolgie) on a new page clicked.

3. Optional (May Work for a Final?): If users could upload their own wardrobe photos to a database that recognizes
their unique ID (sign-in?) that way users can get their own randomized wardrobe suggestions based on weather factors.

For this lab assignment, I learned how to set up an interaction between my Arduino and my computer.  This is called serial communication.  I hooked up a variable resistor, my pentiometer, to my breadboard. From there, I set up my USB between my computer and  Arduino. Data from my pentiometer travels to the Arduino who transmits it to my computer to display in a visual interface on my web browser (via a Javascript applet).  This Javascript applet graphs my sensor’s output corresponding with my action with my pentiometer . See the screenshots above from multiple takes.

FYI:

Prof. Shawn Van Every created the Javascript application. Links and installation steps here.

Tip: When it comes to sensing your data over  serial communication, it’s a good idea to troubleshoot your setup. On my Arduino, I input this code below:

int analogPin = 0;
 int analogValue = 0;

 void setup()
 {
   // start serial port at 9600 bps:
   Serial.begin(9600);
 }

 void loop()
 {
   // read analog input, divide by 4 to make the range 0-255:
   analogValue = analogRead(analogPin);
   analogValue = analogValue / 4;
   Serial.print(analogValue, BYTE);
   // pause for 10 milliseconds:
   delay(10);
 }

From there, I check my serial monitor to see the ASCII characters in play when I twist my pentiometer. I, then modify the code from BYTE to DEC to see the numerical values. Is it working? Yes?

Problems Encountered: Faulty/Buggy Javascript app code that was later modified by Prof Shawn + that later allowed me to show the different feedback results from my Pentiometer test.

REVISED: Prof. Shawn Van Every released an updated version of Javascript applet here that is much more sensitive to the Arduino output. New Serial Graph link.

Future tip: If I plan to do any visual display work with Javascript and Arduino, I need to include  the following files: JSSerial.jar and jsserial-applet.jnlp along with my HTML/JavaScript.

For ICM Web, we had to create our own Javascript web applet. Here’s my output with my pentiometer.

Serial Communication with the Arduino from cindy wong on Vimeo.

<pre class=”postCode”>

<html>
	<head>
		<title> Serial Communication: Experimenting with Pentiometer, Loops </title>
		<!-- Change Colors -->

		<style type = "text/css">

		body	{
		font-family: Arial Black, Arial, Helvetica, Sans-Serif;
		font-size: 55pt;
		}

		#body	{
		background-color: #000000; /* starts black */
		}

		</style>

<script type = "text/javascript">

		function initVars()
			{
				thecolordiv = document.getElementById("colordiv"); //swap words
			}
		function openPort()
		{
		document.JSSerial.startSerial("/dev/tty.usbserial-A6008nhi");
		//hardwires the USB serial port connection 

		//myinterval = setInterval("readSerial()",5);
		//sets Interval delay, PC delay has to be faster then Arduino code delay

		startTimer();
		}

		function startTimer()
		// function to kick off timer.
		{
			var timer = setInterval("timerran()",5);
			//PC has shorter delay then Arduino
		}

		function timerran()
		{
			//tests if data is available
			if (document.JSSerial.available() > 0)
			{
				//var outputdivtimer = document.getElementById("outputdivtimer");
				//turns it into a variable

				// reads the sensor's bytes from the serial port
				var inByte = document.JSSerial.last();

				// write sensor values (bytes) to the output div
				//outputdivtimer.innerHTML = inByte;

	// pseudo code time!

			if ((inByte >= 0) && (inByte < 50))
			{
			// Change the "style" of the body and set the background color to red
			document.body.style.backgroundColor = "#FF0000";
			colordiv.innerHTML = "RED";
			//SAY RED, CHANGE TO RED
			}

			if ((inByte >= 50) && (inByte < 60))
			{
			document.body.style.backgroundColor = "#FF3300";
			colordiv.innerHTML = "ORANGE";
			//say ORANGE, TURN ORANGE
			}

 			if ((inByte >= 60) && (inByte < 70))
 			{

 			document.body.style.backgroundColor = "#FFCC00";
			colordiv.innerHTML = "YELLOW";
			//say YELLOW, TURN YELLOW
 			}

 			if ((inByte >= 70) && (inByte < 80))
 			{
 			document.body.style.backgroundColor = "#99FF00";
			colordiv.innerHTML = "GREEN";
 			// say GREEN, TURN GREEN
 			}

			if ((inByte >= 80) && (inByte < 90))
			{
			document.body.style.backgroundColor = "#00CCFF";
			colordiv.innerHTML = "BLUE";
			// say BLUE, turn BLUE
			}

			if ((inByte >= 90) && (inByte < 100))
			{
			document.body.style.backgroundColor = "#6600CC";
			colordiv.innerHTML = "PURPLE";
			// say PURPLE, turn PURPLE
			}

			if ((inByte >= 100) && (inByte <110))
			{
			document.body.style.backgroundColor = "#666666";
			colordiv.innerHTML = "GRAY";
			//say GRAY, turn GRAY
			}

			if ((inByte >= 110) && (inByte < 127))
			{
			document.body.style.backgroundColor = "#000000";
			colordiv.innerHTML = "BLACKNESS";
			// say BLACK, turn BLACK
			}
		}
		}
</script>
</head>

<body onload="initVars()">
		<!-- The Applet which provides serial port access, should be in the body -->
		<script src="http://www.java.com/js/deployJava.js"></script>
		<script>
			var attributes = { code:'JSSerial.class', archive:'JSSerial.jar',  width:1, height:1, id:'JSSerial'};
			var parameters = {jnlp_href: 'jsserial-applet.jnlp'};
			deployJava.runApplet(attributes, parameters, '1.5');
		</script>

		<!-- Done with the applet -->

<!-- START Button IGNITES COLOR CHANGE CONTROLLED BY POT VALUES -->
<input type="button" name="start me up" value="start" onclick="openPort()";>

<!-- Serial Read Output:
<div id="outputdivtimer"> </div> --> 

<h1> Color Output: </h1>
<div id= "colordiv"> Black </div>

</body>
</html>

</pre>

So, for learning PHP, I decided to make a little fashion/weather mashup. Meet Wearcaster, the app that pulls up New York City temperature readings (from Yahoo! Weather RSS feed) and based on my parameters, let’s me know what I need to wear before I step out the door.

Now, you may ask, Cindy, aren’t you lazy? Can’t you just tell from the weather temperature reading alone? And I say, no. I’m a Florida girl. My understanding of cold weather is still developing. What’s the difference between 65 vs 55? Cardigan or hoodie or coat? Plus, I live on the 5th floor so if I’m walking a few blocks down and I realize I’m under dressed, I’m way too lazy to walk back and put on a thicker jacket. It’s 5 floors people!

Thus, why for people who are unused to the cold, and all the fashion gradients in between, I’ve made this for you (meaning me).

Feeling down? Need an encouraging note while you’re down in the dumps? Try the ITP Fortune Cookie Teller. Designed to test my knowledge of arrays within Javascript, my class assignment was to make something fun. Hello, positive encouragement! Who doesn’t like a free cookie?