Project 8
}else if (state == DONE) { noStroke();
fill(255);
rect(0, 150, 700, 50); stroke(0, 10);
long mints = data[0].timestamp;
long maxts = data[ data.length-1].timestamp; for ( int i=0; i<data.length; i++) {
float pos = map( data[i].timestamp, mints, maxts, 0, 700 ); line( pos, 150, pos, 200 );
}
}
}
17.Now when the sketch is starting up, a progress bar as shown in the following screenshot is displayed:
Objective Complete - Mini Debriefing
This task of our current mission was to determine the geo-coordinates for each of our IP addresses and store them in our IpDB class. We downloaded and installed the .csv version of the hostIP database and added it to our sketch. We created a class to store the
geo-coordinates for blocks of IP addresses and created a parseIpDatabase() command to create HashMap filled with the hostIP database. Then we wrote a new method named geocodeIp(), which takes an array of the RowLine objects and enriches them with the latitude and longitude if the IP address can be found, or null otherwise.
Since the loading and parsing in our setup() method slows down the startup of our sketch, we moved the logfile handing and geocoding to a separate thread and made it run in the background. We also added a progress bar in our draw() method to show our users how much of the database is already loaded or how much of the logfile is already processed.
Red Dot Fever
One of the first applications every GIS developer does is drawing red dots on a map. This is the "Hello World" equivalent of geo-information systems, and it's exactly what we are going to do for this task of our current mission. We will take the world map we used as a texture for our neon globe and show red dots on the map for each logfile entry.
201
Logfile Geo-visualizer
The latitude is the coordinate that goes from the North Pole to the South Pole and ranges from -90 degrees to 90 degrees with 0 on the equator. The longitude runs around the globe and ranges from -180 degrees to 180 degrees. Longitude zero is on the so called "Prime Meridian", which runs through the Royal Observatory in Greenwich, London—I guess this answers the question of who invented this coordinate system.
When we think of a map, usually North and South America are on the left, Europe and Africa are in the middle, and Asia is on the right. On such a map, the origin of the geographic coordinate system we are using is at the center of the map.
Engage Thrusters
Let's draw some dots on a map:
1.First we need a map to draw on, so either use the world map we used as a texture for our last task, or download it from www.packtpub.com/support.
2.Now, we open our sketch and add the texture by dragging it onto the sketch window or by using the Sketch | Add File... menu.
3.Then, we add a PImage variable to store our map and load it in the setup() method.
PImage world;
void setup() { size(700,400);
world = loadImage( "world.png" );
Thread t = new Thread() { public void run() {
state = LOADING;
ipdatabase = parseIpDatabase( "hip_ip4_city_lat_lng.csv" ); state = LOGFILE;
String[] log = loadStrings( "access.log" ); data = parseLogfile( log );
state = GEOCODING; geoCode( data ); state = DONE;
}
};
t.start();
}
202
Project 8
4.In our draw() method, we move the timeline to the bottom of the window and show the map above it.
void draw() { background(255);
image( world, 0, 0, width, 350 );
if ( state < DONE ) { stroke( 0, 200 ); strokeWeight(2); fill( 200, 200 );
rect( 25, 150, 650, 50 ); noStroke();
fill( 255 );
rect( 30, 155, map( count, 0, total, 0, 640 ), 40 );
fill( 0 ); String msg="";
if ( state == LOADING ) {
msg = "loading database ...";
}else if ( state == LOGFILE ) { msg = "parsing logfile ...";
}else if ( state == GEOCODING ) { msg = "geocoding ip adresses ...";
}
text( msg, 35, 190 );
}else if (state == DONE) { noStroke();
fill(255);
rect(0,350,700,50); stroke(0, 10);
long mints = data[0].timestamp;
long maxts = data[ data.length-1].timestamp; for( int i=0; i<data.length; i++) {
float pos = map( data[i].timestamp, mints , maxts , 0, 700
);
line( pos, 350, pos,400 );
}
}
}
203
Logfile Geo-visualizer
5. Run the sketch. Our map should look as shown in the following screenshot:
6.When our loading thread has set the state to DONE, we will iterate over the logfile rows and draw a red dot for each pair of geo-coordinates on our map.
void draw() { background(255);
image( world, 0, 0, width, 350 );
if ( state < DONE ) { stroke( 0, 200 ); strokeWeight(2); fill( 200, 200 );
rect( 25, 150, 650, 50 ); noStroke();
fill( 255 );
rect( 30, 155, map( count, 0, total, 0, 640 ), 40 );
fill( 0 ); String msg="";
if ( state == LOADING ) {
msg = "loading database ...";
}
else if ( state == LOGFILE ) { msg = "parsing logfile ...";
}
else if ( state == GEOCODING ) { msg = "geocoding ip adresses ...";
}
204
Project 8
text( msg, 35, 190 );
}else if (state == DONE) { noStroke();
fill(255);
rect(0, 350, 700, 50); stroke(0, 10);
long mints = data[0].timestamp;
long maxts = data[ data.length-1].timestamp; for ( int i=0; i<data.length; i++) {
float pos = map( data[i].timestamp, mints, maxts, 0, 700 ); line( pos, 350, pos, 400 );
}
stroke(255, 0, 0);
for ( int i=0; i < data.length; i++) {
if ( data[i].lat != null && data[i].lon != null ) {
float x = map( float( data[i].lon), -180, 180, 0, width ); float y = map( float( data[i].lat), 90, -90, 0, height -50
);
point(x, y);
}
}
}
}
7.Run the sketch. Our map should now be sprinkled with red dots, as shown in the following screenshot:
205
Logfile Geo-visualizer
8.To make our map look even more fancy, we are now going to replace the red dots by a vector graphic of a small pin. Download the pin.svg file from www.packtpub. com/support.
9.Add the .svg file to our sketch by dragging it on the sketch window or by using the
Sketch | Add File... menu.
10.Now, we need to define a PShape variable for our pin and load the shape in our setup() method.
import java.text.SimpleDateFormat;
PImage world;
PShape pin;
void setup() { size(700, 400);
pin = loadShape( "pin.svg" ); world = loadImage( "world.png" );
Thread t = new Thread() { public void run() {
state = LOADING;
ipdatabase = parseIpDatabase( "hip_ip4_city_lat_lng.csv" ); state = LOGFILE;
String[] log = loadStrings( "access.log" ); data = parseLogfile( log );
state = GEOCODING; geoCode( data ); state = DONE;
}
};
t.start();
}
11. In our draw() method, we replace point() with a call to shape().
void draw() {
...
stroke(255, 0, 0);
for ( int |
i=0; i < |
data.length; i++) { |
if ( data[i].lat |
!= null && data[i].lon != null ) { |
|
float |
x = map( |
float( data[i].lon), -180, 180, 0, width ); |
206
Project 8
float y = map( float( data[i].lat), 90, -90, 0, height -50
);
shape( pin, int(x)-5,int(y)-15);
}
}
}
}
12.Run the sketch, and after loading the database and encoding all the IP addresses, our map now looks as shown in the following screenshot:
Objective Complete - Mini Debriefing
This task of our current mission was to create a Red Dot Fever using the geocoded logfile rows we created in the previous task. We added a schematic representation of the world where the continents are drawn black and the sea is white to our sketch. This map was used as a texture for the globe we created in the last project.
Then we added a loop to our draw() method that iterates over LogRow. For each row, we check whether we have found some geo-coordinates in our database and draw a red dot if we did.
To make our map look even more fancy and, to leave the Red Dot Fever stage of map creation behind us—at least a little bit—we replaced the red dots with a vector graphic of a small red pin. We added aPShape variable for it and loaded a SVG graphic in oursetup() method. The pin is then drawn in thedraw() method using theshape() command.
207