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.
Choose a Wardrobe based on your personal fashion preference
It’s Guy + Girl friendly so nobody get’s left out!
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]
“The medium is the message” – Marshall McLuhan, Understanding Media:
In reading recent news articles about artists, their appropriation of Internet photos, and lawsuits filed against them by their original owners, I find McLuhan’s words to ring true. What does it say about our culture when content is no longer considered valuable or attributed to its original creators? Everything is seemingly free on the Internet — photos, music, video, et.c. — and all a user has to do is hit right-click, “Save Target As”, and possess a copy for themselves.
When is the issue about Fair Use and when is it a case of piracy? Fair Use, is the legal framework, that allows use of copyright work within a certain framework such as criticism, commentary, news reporting, teaching, scholarship or research.
According to Cornell law, the factors to be considered shall include:
the purpose and character of the use, including whether such use is of a commercial nature or is for nonprofit educational purposes;
the nature of the copyrighted work;
the amount and substantiality of the portion used in relation to the copyrighted work as a whole; and
the effect of the use upon the potential market for or value of the copyrighted work.
“The fact that a work is unpublished shall not itself bar a finding of fair use if such finding is made upon consideration of all the above factors”
For Serial Communication lab, we’re using multiple sensors to interact between the Arduino and the computer. Just like with the first lab, since I’m in ICM-web, I’m using a Javascript applet as prescribed by Prof. Shawn Van Every to display that interaction visually on a web browser. In this case, we’re using 2 Potentiometer, 1 Switch (button) in the below setup.
The web interface is using HTML 5 <canvas> within Javascript to display the interaction.
Here’s the Arduino code that I uploaded:
int heat = 65; int light = 65; int onOff = 0;
void setup() {
Serial.begin(9600);
pinMode(4, INPUT);
Serial.println("Start");
}
void loop() {
if (Serial.available() > 0){ //only send if you have hear back
int input = Serial.read();
heat = analogRead(5); // Potentiometer
light = analogRead(0); // Potentiometer
onOff = digitalRead(4); // Button Switch
Serial.print(heat); Values (0:1020)
Serial.print(","); // inserts a comma to distinguish the different values for HEAT, LIGHT, onOFF,
Serial.print(light); Values (0:1020)
Serial.print(",");
Serial.print(onOff); Values (O:1)
Serial.print(",");
Serial.print(10, BYTE); //send a return (when user presses button ONSEND transmits an 'A' character)
Serial.flush();//Flushes the buffer of incoming serial data.Any call to Serial.read() or Serial.available()
//will return only data received after all the most recent call to Serial.flush().
delay(20); //you might use this instead of if available
}
}
On the Javascript side....
// Do some graphing in the canvas
//https://developer.mozilla.org/en/Canvas_tutorial
var parts = String(input).split(','); // parses out the values
var light = parts[0];
var breath = parts[1];
var onOff = parts[2];
canvascontext.clearRect(0,0,500,255); //draws the rectangle
canvascontext.fillStyle = "rgb(" + breath + ",0,0)"; // changes the hue of the rectangle?
if (onOff == "1")
{
canvascontext.fillRect (10, light, 50, 50); // changes the color of the rectangle ?
}
else
{
canvascontext.drawEllipse(10, light, 50, 50); // changes the y-axis movement of rectangle
}
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.
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.
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.
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.
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.
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.
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;
voidsetup()
{
// start serial port at 9600 bps:Serial.begin(9600);
}
voidloop()
{
// 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.
<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>
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?
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.
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.
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.
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.
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.
