Get the Flash Player to see the slideshow.

Meet TweetChime

Posted: December 3rd, 2009 | Author: Cindy | Filed under: ITP | Tags: , , , | No Comments »

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

Read the rest of this entry »


TweetChime in Progress!

Posted: December 2nd, 2009 | Author: Cindy | Filed under: ITP | Tags: , | No Comments »

TweetChime in Progress! from cindy wong on Vimeo.

I managed to make it work! Here’s it in action: Five Servomotors using the servo library within Arduino to function within sequence with room for a delay so each servomotor can complete their action before proceeding to the next action.

New things I learned:

1) Servo library can be used on non-PWM slots on the Arduino. You are not limited by slots 3, 5, 6, 9, 10, 11.

2) Heat shields are a must-have on a voltage regulator where you plan to have your device on for anything above 5 minutes (IMHO)

Photo of my breadboard setup -

img_6987


TweetChime Status Report

Posted: December 1st, 2009 | Author: Cindy | Filed under: ITP | Tags: | No Comments »

photo

About a week left before finals are due. Here’s where I stand:

Construction: 90% done. I learned how to use a power drill, the wood shop, and cut saw for all this work! Amazing. Tom Igoe recommended a good way for me to mount my servo motors by using included metal screws with the servo motors to these wood planks.  Now, I just need to staple chimes in place, mount a headboard to the front, and plant my arduino and breadboard to the back.

TweetChime Website: Interaction is in place. Can tweak more with JAVAscript, CSS to make it more pretty but the basic interaction is there. Updated the Twitter parsing so friends and family don’t have to use previously formatted message (ex: @tweetchime 65 #tweetchime). Now, they can send a brief message that cues the melodies like this: “@tweetchime [thinking of you]“.  So far, I have coded messages such as thinking of you, holla, congratulations, and missing you.

Arduino Coding: Unfortanately, the servo library I was using can only handle up to 3 servomotors. After testing the 4th servo motor, the TweetChime started acting up with servo motors working erratically, out of order, and sometimes randomly without input from my website. Not good. So, I have to redo Arduino coding to use PULSE method (with MILLIS) and not use the servo library. :(


Meet TweetChime, ITP Final Project

Posted: November 10th, 2009 | Author: Cindy | Filed under: ITP | Tags: , , | No Comments »

pcompgraphic1

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.

pcompmotorlayout1

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.


Week 8 Lab: Transistor Lab + HBridge Lab

Posted: November 4th, 2009 | Author: Cindy | Filed under: ITP | Tags: | No Comments »

This series of labs were a two-part process. First, we had to learn how to control a DC motor which uses a high current load.  Then, we used H-bridges to control the spin direction of the DC motor.

Transistor Lab

Using DC Motor with Arduino from cindy wong on Vimeo.

So how do you control a high-current DC load such as a DC motor? Transistors, in this case the  TP120 transistor which acts as an electrical switch between the Arduino and power to make the higher current load (in current, voltage)doesn’t overwhelm it. In this scenario, I used a potentiometer to control the spin intensity of the DC Motor. FYI, I learned that soldering a DC motor is easy since the order of the wires, power or ground, doesn’t matter! Check out the video above.

Update: Note that clickety, jerky motion of the DC motor above? Apparently, that is the result of the DC motor receiving too much power. Looks like that DC Motor is meant to run between 3-5V power. The Arduino is blinking (resetting itself) each time as an indicator for us (according to Igoe).

Here’s the Breadboard setup.

img_9913

Read the rest of this entry »


Midterm Project: Etch Yo Sketch Machine

Posted: November 3rd, 2009 | Author: Cindy | Filed under: ITP | Tags: | 1 Comment »

For the Physical Computing midterm, Rune Madsen, Benji Canning Pereira, and myself  decided to focus on a whimsical, fun project. Using Arduino and Processing, Etch Yo Sketch is a digital twist on the nostalgic kid’s toy, Etch-a-Sketch. Rather then focusing solely on software, we wanted to mimic the tactile feel and imaginative play in an old-school format – so we constructed “Etch Yo Sketch” within an arcade-machine setup. Underneath the arcade machine is a Mac Book Pro reading the serial communication between our sensors and an Arduino which is displayed on screen.

Play Interaction:

Twirl the 360-degree Potentiometers to draw lines along the screen canvas. Twist the regular potentiometers to select your choice of color for the lines. Hit the reset button to restart from scratch. Hit the upload button to see your work saved and presented on our Etch Yo Sketch gallery. Watch the Making of Etch Yo Sketch, below.

Read the rest of this entry »


Observation of Interactive Technology: MetroCard Ticket Machine

Posted: October 19th, 2009 | Author: Cindy | Filed under: ITP | Tags: | No Comments »

img_2957

For my observation study, I decided to choose a common device that millions of people use in New York daily — the MTA ticket machine.
The MTA ticket machine handles dispensing new subway ticket cards, card renewals, and checking ticket balances. My observation took place at the R/Q/W train stop on NYU/8th St. Around 5PM, I saw a small mix of mostly New Yorkers with a tourist or two.
Most interactions appeared to be New Yorkers buying new cards. The tourists also appeared to buy new cards. I stayed about 5-10 feet away to be unobtrusive so I wasn’t able to see which type of cards were bought.

img_2953

After selecting the language screen, most users punch which type of card to get. The regular subway riders took about 10 seconds to finish a transaction when it came to selecting a new card, paying, and retrieving a fresh MTA subway card. This is with the understanding that most purchase the 1-Month, MTA card since the other cards seem to cater to visitors rather then residents. So, if you were a tourist or a new resident and wanted an unlimited pass (whether for 1-day, 7-day, or for a month) where would you go? There’s no real indication on the main page, above. You just have to click on METROCARD above where you see below your options.

img_2954

Still can’t find that 30-day, 7-day, 14-day unlimited ride pass? If you select, Get New Card, you are asked to select among 1-Day card, 7-Day, 14-Day or 30-Day Unlimited Ride MetroCard. Why is this buried? The few tourists I did see hesitate when looking at this selection. Why does the first page on the MetroCard kiosk offer:  Pay $8, Get 4 Rides Free, MetroCard, or Single Fare? What does Pay $8, Get 4 Rides Free mean to the average tourist who probably is unaware of a single fare?

Based on the massive amount of New York tourism, it makes sense to make the first screen offer: Single Ride, 1-Day card, 7-Day, 14-Day or 30-Day Unlimited Ride MetroCard. On a smaller button, they should offer sub-services like refill cards, etc. While the MetroCard kiosk offers a variety of payment options, the physical payment interface is color coded separately for credit/debit payment (coded in blue) vs. money payment (coded in green). Why the separation? The payment information should be located in the same vicinity to avoid confusion. The tourists added on their transaction times by about 30-40 seconds more, taking time to read, double check purchase information, and confirm their cards before walking away.

img_2955

Under a sub-menu, you  can chose to add credits to your existing MetroCard. So far, I have not and still haven’t seen anyone use that feature intentionally. The person photographed at the top mistakenly selected this feature and pressed back to the main menu. Furthermore, there’s no indication on the Refill MetroCard on how much money generates how many fare trips the passenger can take. It would be helpful if a diagram (on the outside) or on the screen indicates: $20 = 10 Rides. $10 = 5 Rides, etc. Also, the machine assumes you know where to insert your card to refill. Some people could spend time searching where. A helpful color-coded (yellow for MTA card) arrow pointing in the general direction could help.

Overall, I think the physical interface for the MetroCard kiosk does a good job of communicating certain areas for ticket buyers with color coding. However, I think the screen interface for the MetroCard system needs a redesign so that purchase ticket times can be reduced.


Serial Out with Arduino (Javascript Edition)

Posted: October 14th, 2009 | Author: Cindy | Filed under: ITP | Tags: , | No Comments »

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>


Stupid Pet Trick: ITP Voo Doo Doll

Posted: October 6th, 2009 | Author: Cindy | Filed under: ITP | Tags: | No Comments »

img_2898

Meet the ITP Voo Doo Doll, a creation inspired for the Physical Computingignment – the Stupid Pet Trick. That’s right, my professor, Tom Igoe, wanted us to demonstrate our knowledge via a gimmicky blinky, bleepy schtick. Thus the name, Stupid Pet Trick.

Physical Computing: ITP Voo Doo Doll in Action from cindy wong on Vimeo.

Since ITP is throwing a Halloween Haunted House, I decided to stick (pun intended) to the gothic theme. Right now, I’m nicknaming my ITP Voo Doo Doll, Mr. Arduino. During these stressful weeks of grad school, it’s been a  very therapeutic toy shall we say. Stab, stab, stab.

What’s it made of?

Black felt, steel wool, insulation padding, 22-gauge wires, 2 alligator clips.

How does it work?

Stick a needle in the Voo Doo Doll and it starts blinking and sounding off crazy beeps. Sensor-wise: I turned the doll into the sensor itself. Inside is two pads of steel wool wrapped in insulation. Clipped to them are alligator clips wired back to the breadboard. The action of stabbing the doll with a metal needle acts as a conduit to turning the switch (doll) ON, completing the electrical circuit.

Here’s my initial test video where I’m making sure the concept works.

ITP Voo Doo Doll from cindy wong on Vimeo.

Code?

At this moment, I don’t have my Arduino code available since my computer crashed shortly after I finished the project (eerie, right?). When I recover my hard drive, I’ll see if I can get it out on to this blog.

At the moment, here’s a setup of my breadboard.

img_2896


PComp Week 4: Servo Motor Control, Tone Output with Arduino

Posted: October 2nd, 2009 | Author: Cindy | Filed under: ITP | Tags: | No Comments »

img_2857

First Lab: Servo Motor Control with Arduino.

Program an Arduino to make motion with a microcontroller called servo motor. The Arduino controlls the servomotor’s position with values returned from an analog sensor.

Disclaimer : Having no prior mechanical/tinkering knowledge prior to ITP, I was absolutely clueless to how to assemble the dissembled Servo Motor that came with my NYU lab parts kit. Instructions, please! Apparently, I spent nearly 2 hours thinking I had a coding or hardware issue that prevented me from completing this lab properly. The cause of misery? A servo motor whose top propeller head was attached too “loosely” to the screw and prevented it from circling it’s top.

Lesson learned: Set up the breadboard like a conventional circuit layout. Connected an analog input sensor (force sensor seen above) to Analog Pin 0 and a servo motor to Digital Pin 2. Don’t forget to supply the Servo Motor with a resistor and access to power bus row.

Read the rest of this entry »