Smilie-O-Mat
twitter.updateStatus( status );
}catch ( Exception e ) { e.printStackTrace();
}
}
20.Run the sketch and click on the window to generate some tweets. This is what the application window looks like:
Objective Complete - Mini Debriefing
Task 3 of our current mission was to implement a tweeting sketch. In steps 1 to 5, we registered our application on the Twitter developer site and generated the required consumer and consumer secret keys. To actually post on behalf of a Twitter user, we |need two more keys: an access token and an access token secret. To get these, we opened a browser window in step 12.
After the user grants the requested permission to our application, we need the pin that is shown in the browser window to finish our authorization process. We therefore open a swing input dialog and ask the user to enter the pin.
The access token keys are reusable, so we only need to acquire them once and then store them to the same text file where our consumer keys are kept. If this file already contains the four keys, we can create our Twitter objects directly and start tweeting right away.
We used Twitter4J to access the Twitter API, and to actually tweet something, we implemented a mouseClicked() method, which sends a random tweet to the world. We defined an array of strings for these tweets and chose a random one every time, because Twitter doesn't allow the exact same text to be posted twice via the API (for spam prevention).
Tweet your mood
The final task in this mission is to combine tweeting with the mood faces we created earlier to tell the world how we currently feel. We extend the GUI section of our Smilie-O-Mat with a button and implement a status update method that doesn't just tweet a text message, but also uploads our current smiley.
102
Project 4
Engage Thrusters
Let's tweet our mood:
1.Open the Smilie-O-Mat sketch from task 2, Let me change it.
2.The first thing we are going to add is a button to tweet the face, so let's reduce the size of the sliders to make room for it. Change the drawSliders() method like this:
void drawSliders() { fill(0); strokeWeight(1);
rect( 20,315,width-130,2 );
rect( 15 + map( mouth, 0, 1024, 0, width-130 ), 310, 10, 12 );
rect( 20,345,width-130,2 );
rect( 15 + map( eye, 0, 1024, 0, width-130 ), 340, 10, 12 ); rect( 20,375,width-130,2 );
rect( 15 + map( col, 0, 1024, 0, width-130 ), 370, 10, 12 );
}
3.We also need to adjust our mousePressed() and mouseDragged() methods to make the mapping of the mouse coordinates work with the shorter sliders.
void mousePressed() {
if ( mouseY > 310 && mouseY < 322 ) { mclick = true;
mouth = constrain( int(
map( mouseX, 20, width - 110, 0, 1024 )), 0, 1024 );
}
if ( mouseY > 340 && mouseY < 352 ) { eclick = true;
eye = constrain( int(
map( mouseX, 20, width - 110, 0, 1024 )), 0, 1024 );
}
if ( mouseY > 370 && mouseY < 382 ) { cclick = true;
col = constrain( int(
map( mouseX, 20, width - 110, 0, 1024 )), 0, 1024 );
}
}
void mouseDragged() {
if (mclick) mouth = constrain(
int( map( mouseX, 20, width - 110, 0, 1024 )), 0, 1024 );
103
Smilie-O-Mat
if (eclick) eye = constrain(
int( map( mouseX, 20, width - 110, 0, 1024 )), 0, 1024 ); if (cclick) col = constrain(
int( map( mouseX, 20, width - 110, 0, 1024 )), 0, 1024 );
}
4.Now add a drawButton() method and a Boolean variable that will indicate if the button is currently being pressed.
boolean bclick = false; void drawButton() {
fill( bclick ? 128 : 255); stroke( 0 ); strokeWeight(2);
rect( width - 90, 310, 70, 70 ); fill(0);
text( "tweet", width-83, 353 );
}
5.Call the drawButton() method from the draw() method to make our button show up.
void draw() { background(255);
color c = color(map(col, 0, 1024, 0, 255), 255, 255 ); fill(c);
ellipse(150,150,250,250);
strokeWeight(3);
fill(255);
ellipse( 120, 140, 60, 60); ellipse( 180, 140, 60, 60); fill(0);
ellipse( 125, 150, 20, 20); ellipse( 175, 150, 20, 20);
line( 100, 100 + map( eye, 0, 1024, -10, 10), 140, 100 - map( eye, 0, 1024, -10, 10) );
line( 160, 100 - map( eye, 0, 1024, -10, 10), 200, 100 + map( eye, 0, 1024, -10, 10) );
noFill();
beginShape(); curveVertex(100, 200); curveVertex(100, 200);
curveVertex(150, 180 + map( mouth, 0, 1024, 0, 50));
104
Project 4
curveVertex(200, 200); curveVertex(200, 200); endShape();
drawSliders();
drawButton();
}
6.To make the button clickable, we need to handle the mouse events; so add the following code to our mousePressed() method:
void mousePressed() {
if ( mouseY > 310 && mouseY < 380
&& mouseX > width - 90 && mouseX < width - 20 ) { bclick = true;
return;
}
if ( mouseY > 310 && mouseY < 322 ) { mclick = true;
mouth = constrain( int(
map( mouseX, 20, width - 110, 0, 1024 )), 0, 1024 );
}
if ( mouseY > 340 && mouseY < 352 ) { eclick = true;
eye = constrain( int(
map( mouseX, 20, width - 110, 0, 1024 )), 0, 1024 );
}
if ( mouseY > 370 && mouseY < 382 ) { cclick = true;
col = constrain( int(
map( mouseX, 20, width - 110, 0, 1024 )), 0, 1024 );
}
}
7.The click event is generated when the mouse button is released again. So, add the following code to the mouseReleased() method:
void mouseReleased() { if (bclick) {
println( "button clicked" );
}
bclick = false; mclick = false; eclick = false; cclick = false;
}
105
Smilie-O-Mat
8.Now drag the twitter4j-core.jar file and the keys.txt file that we generated in the last task for our Smilie-O-Mat.
9.We need to import the Twitter4J library; we also need an array of tweets to send. Add the import statement and the variable definitions to the beginning of the sketch.
import twitter4j.*;
Twitter twitter; String[] tweets = {
"I feel like so #SmilieOMat",
"I currently feel like this #SmilieOMat", "This is how I feel #SmilieOMat"
};
10.Add an initTwitter() method and copy the initialization code from our Twitter test application.
void initTwitter() {
String[] keys = loadStrings( "keys.txt" );
if (keys.length <= 2) { try {
twitter = TwitterFactory.getSingleton(); twitter.setOAuthConsumer( keys[0], keys[1] );
RequestToken requestToken = twitter.getOAuthRequestToken(); AccessToken at = null;
if ( System.getProperty("os.name").toLowerCase(). indexOf("win")>=0) {
link(requestToken.getAuthorizationURL());
}
else { open(requestToken.getAuthorizationURL());
}
String preset="";
String pin=javax.swing.JOptionPane. showInputDialog(frame,"Enter your pin",preset);
at = twitter.getOAuthAccessToken(requestToken, pin);
String[] newKeys = new String[4]; newKeys[0] = keys[0];
newKeys[1] = keys[1]; newKeys[2] = at.getToken();
106
Project 4
newKeys[3] = at.getTokenSecret();
saveStrings( "data/keys.txt", newKeys |
); |
}catch ( Exception e ) { e.printStackTrace();
}
}else {
ConfigurationBuilder cb = new ConfigurationBuilder(); cb.setOAuthConsumerKey( keys[0] ); cb.setOAuthConsumerSecret( keys[1] ); cb.setOAuthAccessToken( keys[2] ); cb.setOAuthAccessTokenSecret( keys[3] );
twitter = new TwitterFactory( cb.build()).getInstance();
}
}
11. Now we call the initTwitter() method from our setup() method.
void setup() { size(300,390); smooth(); background(255); colorMode(HSB);
textFont( createFont( "Georgia", 20 )); initTwitter();
}
12.To tweet the current smiley, we add a new method named tweet(). Since we only want to tweet the image of the smiley and not the GUI elements, we need to copy the section of the window we want to a PImage object and then save it to a file. We will use this file as a media object for our status updates to upload to Twitter.
void tweet() {
PImage image = get( 0, 0, 300,300); image.save( "smilie.png");
java.io.File f = new java.io.File( sketchPath( "smilie.png" )); StatusUpdate status = new StatusUpdate( tweets[int(random(
tweets.length ))]); status.setMedia(f); try {
twitter.updateStatus(status);
107
Smilie-O-Mat
}
catch ( Exception e ) { e.printStackTrace();
}
}
13.Now change the mouseReleased() method to make it call the new tweet() method instead of making it print a message.
void mouseReleased() { if (bclick) {
tweet();
}
bclick = false; mclick = false; eclick = false; cclick = false;
}
14.Run your sketch, create a smiling happy smiley, and tweet it using our tweet button. In the following screenshot, you can see our Smilie-O-Mat and the resulting tweet:
Objective Complete - Mini Debriefing
In task 4, we combined all the sketches we have written for this mission and added the Twitter functionality to our Smilie-O-Mat. We added a button to trigger the tweeting and added the key setup mechanism we implemented in task 3.
108