Shiffman Daniel. Learning processing
Подождите немного. Документ загружается.
352 Learning Processing
18.9 The Yahoo API
Loading HTML and XML documents is convenient for pulling information from the web, however,
for more sophisticated applications, many sites off er an API. An API (Application Programming
Interface) is an interface through which one application can access the services of another. ere are
many APIs that can be used with Processing and you might look through the “ Data / Protocols ”
section of the Processing libraries web page ( http:/processing.org/reference/libraries/index.html ) for some
ideas.
In this section, we will look at an example that performs a web search, using the Yahoo API.
Although you can access the Yahoo API directly, I have created a Processing library that makes it a bit
simpler (as well as allowing the search to be performed asynchronously and not cause the sketch
to pause). You will need to download both my Processing library, as well as the Yahoo API fi les (these
are known as an SDK: “ Software Development Kit ” ). Instructions for this can be found at the library
page:
http://www.learningprocessing.com/libraries/yahoo/
Once you have downloaded the fi les, you must fi rst get a Yahoo API key. In many cases, companies will
require that you register and get a key before having access to their API. at way, they can track your
usage and make sure you are not up to anything nefarious. It is a small price to pay for free programmatic
access to Yahoo’s features. You can register for the ID here:
https://developer.yahoo.com/wsregapp/index.php
Once you have the key, you are ready to go. e library works in a similar fashion to simpleML. You
make a YahooSearch object and call the search( ) function. When the search is completed, it will arrive
in an event callback: searchEvent( ) . ere, you can ask for information about the search results, such as
URLs, titles, or summaries (all available as String arrays).
location x = " 102 " y = "53" /
speed x = "0.8000488
" y = " -2.2791147 " /
size w = "25" h = " 95 " /
/blob
blob
location x = "152 " y = " 181 " /
speed x = "1.9928784 " y = " -2.9540048 "/
size w = "74" h = " 19 " /
/blob
/blobs
Data Input 353
Example 18-10: A Yahoo search
import pyahoo.*;
YahooSearch yahoo;
void setup() {
size(400,400);
// Make a search object, pass in your key
yahoo = new YahooSearch(this, "YOUR API KEY HERE ");
}
void mousePressed() {
yahoo.search( "processing.org");
}
void draw() {
noLoop();
}
// When the search is complete
void searchEvent(YahooSearch yahoo) {
// Get Titles and URLs
String[] titles = yahoo.getTitles();
String[] urls = yahoo.getUrls();
for (int i = 0; i titles.length; i + + ){
println( "___________");
println(titles[i]);
println(urls[i]);
}
}
e library can be used to perform a simple visualization. e following example searches for fi ve names
and draws a circle for each one (with a size tied to the total number of results available).
Example 18-11: Yahoo search visualization
import pyahoo.*;
YahooSearch yahoo;
PFont f;
// The names to search, an array of "Bubble" objects
String[] names = { " Aliki","Cleopatra","Penelope","Daniel","Peter" } ;
Bubble[] bubbles = new Bubble[names.length];
int searchCount = 0;
void setup() {
size(500,300);
yahoo = new YahooSearch(this, "YOUR APPI HERE ");
f = loadFont( "Georgia-20.vlw");
textFont(f);
smooth();
// Search for all names
for (int i = 0; i names.length; i + + ){
yahoo.search(names[i]);
}
}
Create a YahooSearch object. You have to
pass in the API key given to you by Yahoo.
Search for a String. By default you will get
back 10 results. If you want more (or less),
you can request a specifi c number by saying:
yahoo.search("processing.
org", 30);
Search results arrive as an array of Strings.
You can also get the summaries with
getSummaries().
The search() function is called for each
name in the array.
354 Learning Processing
void draw() {
background(255);
// Show all bubbles
for (int i = 0; i searchCount; i + + ){
bubbles[i].display();
}
}
// Searches come in one at a time
void searchEvent(YahooSearch yahoo) {
// Total # of results for each search
int total = yahoo.getTotalResultsAvailable();
// Scale down the number so that it can be viewable
float r = sqrt(total)/75;
// Make a new bubble object
Bubble b = new Bubble(yahoo.getSearchString(), r,50 + searchCount*100,height/2);
bubbles[searchCount] = b;
searchCount + + ;
}
// Simple " Bubble " class to represent each search
class Bubble {
String search;
float x,y,r;
Bubble(String search_, float r_, float x_, float y_) {
search = search_;
r = r_;
x = x_;
y = y_;
}
void display() {
stroke(0);
fill(0,50);
ellipse(x, y, r, r);
textAlign(CENTER);
fill(0);
text(search,x,y);
}
}
18.10 Sandbox
When running your program locally from within the Processing development environment, you are free
to reach out across ports and networks. However, when running your program as an applet within a web
browser, there are certain security requirements, just as we noticed with connecting to a video camera in
Chapter 16.
Requesting a URL on the same domain is allowed. For example, if your applet is stored on your web site:
http://www.myrockindomain.com you are in the clear with:
// Will work in the browser
String[] lines = loadStrings( " http://www.myrockindomain.com/data.html " );
fi g. 18.14
getTotalResultsAvailable() returns
the total number of web pages
that Yahoo found containing the
search phrase. These numbers
can be quite large so they are
scaled down before being used as
an ellipse size.
The search data is used to make a
Bubble object for the visualization.
Data Input 355
However, if you request a URL on a diff erent domain, you are out of luck.
// Will not work in the browser
String[] lines = loadStrings( " http://www.yourkookoodomain.com " );
A solution for this problem is to create a proxy script that lives on the server with your applet, connects to
an external URL and passes that information back to the applet—in essence, you are tricking your applet
into thinking it is retrieving only local information.
Another solution is to “ sign ” your applet. Signing an applet is the process of saying “ Hello, my name is
Daniel Shiff man and I made this applet. If you trust me say ‘ yes ’ to let this applet access resources it might
not normally be allowed to access. ”
Again, if you are just developing sketches locally on your computer in the Processing development
environment you will not have an issue. If you need to get your applet working on a web server
and need to make requests to pages not on that server, please visit this book’s web site
( http://www.learningprocessing.com/sandbox/ ) for an example PHP proxy script as well as tips on how
to sign your applets.
This page intentionally left blank
Data Streams 357
19 Data Streams
“ I’m mad as hell and I’m not going to take this anymore! ”
—Howard Beale, Network
In this chapter:
– Sockets.
– Servers.
– Clients.
– Multi-user processing.
– Serial input.
19.1 Synchronous vs. Asynchronous
In Chapter 18, we looked at how we can request the raw source of a URL using loadStrings( ), the
simpleML library, or the XML library. You make the request, sit back, and await the results. You may have
noticed that this process does not happen instantaneously. Sometimes the program may pause for seconds
(or even minutes) while a web page or XML document loads. is is due to the length of time required for
what Processing performs behind the scenes—an HTTP request. HTTP stands for “ Hypertext Transfer
Protocol, ” a request/response protocol for the transfer of information on the world wide web.
Let’s consider, for a moment, what we mean by “ request/response. ” Perhaps you wake up one morning
and think to yourself that a vacation, say in Tuscany, is in order. You turn on your computer, launch a web
browser, type www.google.com in the address bar, and enter “ romantic getaway Tuscany villa ” . You, the
client , made a request, and it is the job of google, the server , to provide a response.
The Client :
Just to introduce myself, I'm Firefox, the web browser, and I have a
request
. I was
wondering if you might be so kind as to send me your web page about vacation villas in
Tuscany?
[Dramatic Pause]
The Server:
Sure, no problem, here is my
response
. It's really just a whole lot of bytes, but if you
read it as html you'll see it's a nicely formatted page about Tuscany vacation rentals.
Enjoy! Oh, can you let me know that you received it ok?
The Client:
Got it, thanks!
[The Client and the Server shake hands.]
e above process is known as an asynchronous request and response, bi-directional communication
between a server and a client where the server responds at its leisure. e connection is established
temporarily in order to transfer the web page after which it is promptly closed.
In terms of sending information along the world wide web, this methodology is perfectly adequate.
Nevertheless, imagine if you were to use asynchronous communication in a multiplayer game. It would
358 Learning Processing
be a disaster. Having to open and close the connection every time one player sends a message to another
would result in huge delays and lag between movements. For multiuser applications in Processing where
we need near real-time communication, a diff erent type of connection is used, a synchronous one known as
a socket connection. Synchronous communication is also necessary for live performance applications that
need real-time interaction between elements. See Figure 19.1 .
fi g. 19.1
SERVER
response
response
response
response
request
request
request
request
Client
Client
Client
Client
Asynchronous Request
(e.g., asking for a web page)
SERVER
Client
Continuous
Socket,
bi = 2 directional
Socket Connection
(e.g., chat)
A network socket connection is a continuous connection between two programs across a network. Sockets
are used for multi-user applications, such as games, instant messenger, and chat (among other things).
ey consist of an IP address—the numeric address of a machine on the network—and a port number—
a number used to route information from one program to another.
We can use sockets in Processing to write programs that can communicate with each other in real-time.
To do this, we will use the built-in net library ( processing.net ) to create servers and clients connecting via
sockets.
19.2 Creating a Server
In order to create a server, we need to choose a port number. Any client that wants to connect to the
server will need to know this number. Port numbers range from 0 to 65,536 and any number is fair game,
however, ports 0 through 1,024 are usually reserved for common services, so it is best to avoid those. If
you are unsure, a google search will turn up information on whether the port is likely used by another
application. For our purposes, we will use the port 5,204 (this is the same port used in the Processing net
library reference that you would fi nd at processing.org ).
To create a server, we must fi rst import the library and create an instance of a Server object.
Data Streams 359
import processing.net.* ;
Server server;
e server is initialized via the constructor, which takes two arguments: “ this ” (a reference to this applet as
explained in Chapter 16) and an integer value for a port number.
server = new Server(this, 5204);
e Server starts and waits for connections as soon as it is created. It can be closed at any time by calling
the stop( ) function.
server.stop();
You may recall from our discussion of video capturing in Chapter 16 that we used a callback function
(captureEvent( )) to handle a new frame of video available from the camera. We can fi nd out if a new
client has connected to our server with the same technique, using the callback function serverEvent( ).
serverEvent( ) requires two arguments, a server (the one generating the event) and a client (that has
connected). We might use this function, for example, to retrieve the IP address of the connected client.
// The serverEvent function is called whenever
// A new client connects
void serverEvent(Server server, Client client) {
println( "A new client has connected: " + client.ip());
}
When a client sends a message (after having connected), a serverEvent( ) is not generated. Instead, we
must use the available( ) function to determine if there is a new message from any client available to be
read. If there is, a reference to the client broadcasting the method is returned and we can read the content
using the readString( ) method. If nothing is available, the function will return the value null, meaning no
value (or no client object exists).
void draw() {
// If a client is available, we will find out
// If there is no client, it will be "null"
Client someClient = server.available();
// We should only proceed if the client is not null
if (someClient! = null) {
println( "Client says: " + SomeClient.readString());
}
}
e function readString( ) is useful in applications where text information is sent across the network. If
the data should be treated diff erently, for instance, as a number (as we will see in future examples), other
read( ) methods can be called.
A server can also send messages out to clients, and this is done with the write( ) method.
server.write( "Great, thanks for the message!\n ");
Depending on what you are doing, it is often a good idea to send a newline character at the end of your
messages. e escape sequence for adding a newline character to a String is ‘ \n ’ (for a reminder about
escape characters see Chapter 18).
Server events occur only
when a new client connects.
360 Learning Processing
Putting all of the above together, we can write a simple chat server. is server replies to any message it
receives with the phrase “ How does ‘ that ’ make you feel? ” See Example 19-1, Figure 19.2 .
Example 19-1: Simple therapy server
// Import the net libraries
import processing.net.*;
// Declare a server
Server server;
// Used to indicate a new message has arrived
float newMessageColor = 255;
PFont f;
String incomingMessage = " " ;
void setup() {
size(400,200);
// Create the Server on port 5204
server = new Server(this, 5204);
f = createFont( " Arial " ,16,true);
}
void draw() {
background(newMessageColor);
// newMessageColor fades to white over time
newMessageColor = constrain(newMessageColor + 0.3,0,255);
textFont(f);
textAlign(CENTER);
fill(255);
text(incomingMessage,width/2,height/2);
// If a client is available, we will find out
// If there is no client, it will be " null "
Client client = server.available();
// We should only proceed if the client is not null
if (client!
= null) {
// Receive the message
incomingMessage = client.readString();
incomingMessage = incomingMessage.trim();
// Print to Processing message window
println( " Client says: " + incomingMessage);
// Write message back out (note this goes to ALL clients)
server.write( " How does " + incomingMessage + " make you feel?\n "
);
// Reset newMessageColor to black
newMessageColor = 0;
}
}
// The serverEvent function is called whenever a new client connects.
void serverEvent(Server server, Client client) {
incomingMessage = " A new client has connected: " + client.ip();
println(incomingMessage);
// Reset newMessageColor to black
newMessageColor = 0;
}
This sketch runs a Server on port 5204.
The most recent incoming message
is displayed in the window.
The message is read using
readString(). The trim()
function is used to remove
the extra line break that
comes in with the message.
A reply is sent using write().
Data Streams 361
Once the server is running, we can create a client that connects to the server. Ultimately, we will look at
an example where we write both the server and client in Processing . However, just to demonstrate that
the server is in fact working, we can connect to it using any telnet client application. Telnet is a standard
protocol for remote connections and all machines generally come with built-in telnet abilities. On a Mac,
launch terminal, on Windows, go to the command prompt. I also recommend using PuTTY, a free telnet
client: http://www.chiark.greenend.org.uk/~sgtatham/putty/ .
Since we are connecting to the server from the same machine that the server is running on, the address
we telnet to is localhost , meaning the local computer, port 5,204. We could also use the address 127.0.0.1 .
is is a special address reserved for programs on a computer to speak to each other locally (i.e., on the
same machine) and is the equivalent of localhost . If we were connecting from a diff erent computer, we
would have to know the network IP address of the machine running the server.
fi g. 19.2
Telnet clients traditionally send messages to the server when the user types enter. e carriage return and
line feed are included in the message and therefore when the server sends back the reply, you will notice
that “ How does processing ” and “ make you feel ” appear on separate lines.
Exercise 19-1: Using String manipulation techniques from Chapter 15, fi x Example 19-1
so that if the client sends newline characters, the server removes them before replying back to
the client. You will want to alter the “ incomingMessage ” variable.
incomingMessage = client.readString();
incomingMessage = incomingMessage.
______ (______, ______);
19.3 Creating a Client
Once we have written a server and tested it with telnet, we can then develop our own client in Processing.
We start off the same way we did with a server, importing the net library and declaring an instance of a
Client object.