Tutorial

...now browsing by tag

 
 

Arrr! Today We Be Makin a Pirate Map!

Friday, September 19th, 2008

Arrr, since today be talkn like a pirate day, as others have mentioned.  I figured ye scurvy dogs needed a post on on to make ye own pirate map!  This also be something ye can do with the little bilge rats as well.

What Ye Be Needin:

  • A paper grocery bag – Ye need to tear out to be makin a large piece, no need to be makin it look pretty
  • Permanent markers – Any colors be just fine

What Ye Does Next:

  • Ye can be as fancy as ye wants to be or a plain as ye wants to be but ye does have to be creative!
  • Features ye can add to yer map can be:
    • A black ‘X’ to mark ye treasure
    • A red ‘X’ to mark where ye starts
    • Mountains
    • Curvy lines for waves in the ocean
    • Blue lines and shape for water bodies and rivers
    • Palm trees
    • Islands
    • Sea monsters
    • Fish
    • Ships / Ship Wrecks
    • A compass rose
  • It be best to put all the features on ye map first before you put the ‘X’’s down and then you can draw a dotted line to show how to get from the start all the way to the treasure.
  • Now ye can add some names to the map.  Remember that pirates are an unimaginative lot that can’t write or spell well.  Some suggestions:
    • Cave of Death
    • Bloody Beach
    • Skull Mountain
    • Dead Man’s Reef
    • Waterfalls of Doom
    • Edge of the Worlds
    • Whirlpool
    • The Sirens
    • Desert of Death
    • Ye gets the idea
  • Now that ye has yer map done, now be time to make it look old.  Crumple it up and flatten it out a few times, get it wet, add some rips and worn out spots.

Now ye has yer very own pirate map!  What ye does with it now, is up to ye!


Captain Barbosa enjoys teaching Map Making 101 classes

  • Share/Bookmark

Tutorial 4: Performance Improvements

Wednesday, September 17th, 2008

This tutorial post will be more a rehash of Tutorial 1 to make it better.  This tutorial is built on the work of WorldWind forum member Nicolas Castel and his changes that have made some noticeable changes for the better.  For these changes to work, you need Java SE update 10 installed (Otherwise nothing will show).

The first change will be in the applet code block, it goes from 9 lines down to three lines:

<applet id="wwjApplet" name="wwjApplet" mayscript code="gov.nasa.worldwind.examples.applet.WWJApplet" width=100% height=70% >
<param name="jnlp_href" value="wwjapplet.jnlp">
</applet>

All the settings for the applet are now called by the wwjapplet.jnlp file, and that file looks like this:

<?xml version="1.0" encoding="utf-8"?>
<jnlp href="wwjapplet.jnlp">
  <information>
    <title>World Wind Java New Plugin Applet Demo</title>
    <vendor>NASA</vendor>
    <homepage href="http://worldwind.arc.nasa.gov"/>
    <description>World Wind Java New Plugin Applet Demo</description>
    <description kind="short">World Wind Java New Plugin Applet Demo</description>
    <offline-allowed/>
  </information>
  <security>
    <all-permissions/>
  </security>

  <resources>
    <j2se href="http://java.sun.com/products/autodl/j2se" version="1.5+" initial-heap-size="512m"
max-heap-size="512m"/>
    <property name="sun.java2d.noddraw" value="true"/>
    <jar href="http://worldwind.arc.nasa.gov/java/demos/WWJApplet.jar" main="false"/>
    <jar href="http://worldwind.arc.nasa.gov/java/demos/worldwind.jar" main="false"/>
    <extension name="jogl"
href="http://download.java.net/media/jogl/builds/archive/jsr-231-webstart-current/jogl.jnlp"/>
  </resources>
  <applet-desc
    name="My Applet"
    main-class="gov.nasa.worldwind.examples.applet.WWJApplet"
    width="300"
    height="300">
    <param name="MAYSCRIPT" value="true"/>
  </applet-desc>
</jnlp>

JNLP (Java Network Launch Protocol) is an XML-based protocol that can be used to deploy Java and JavaFX applications on the Internet.

One of the benefits of this is the ability to manage the memory allocated to the applet using this line:

<j2se href="http://java.sun.com/products/autodl/j2se" version="1.5+" initial-heap-size="512m"
max-heap-size="512m"/>

With using the JNLP syntax, I have noticed that the WWJava applet does load faster and is more stable.

The final applet web page now look like this:

<html>
<head>
<title>NASA World Wind Java Applet</title>
</head><body>

<applet id="wwjApplet" name="wwjApplet" mayscript code="gov.nasa.worldwind.examples.applet.WWJApplet" width=600 height=380 >
<param name="jnlp_href" value="wwjapplet.jnlp">
</applet>

</body>
</html>

See this tutorial in use.

  • Share/Bookmark

WWJava Tutorials Have a Home Now

Wednesday, September 10th, 2008

Ok, finally got around to making a home for my WWJava tutorials on my Wiki pages.  (Forgot I even had a Wiki?  So did I, I think ;) ) I just finished the move and reformatting today, and you can now get to all my WWJava Tutorials, as I finish them, on their new home.

  • Share/Bookmark

How to Setup WWJava

Sunday, August 31st, 2008

Herve on the World Wind forum has taken it apon himself to start working on a newbies guide to setting up and using WorldWind Java.

It is a very good start for someone brand new to WWJava (which looking at the download stats, is thousands of people a day).

  • Share/Bookmark

Tutorial 3: Label Thy Earth

Wednesday, August 13th, 2008

This will be a smaller than usual demo, we already have the basics down.  So now we will be adding some labels to the globe.

We will be building on the prior tutorials (though I have made some slight changes to clean the code and make for a better final demo).

We already have what we need for a lable with the variable line we used in the “goto”:

var GOTO_OVERVIEW = "Columbia County;41.039;-76.4615;50000;0;45";

All that is needed, is the function to make it display on the applet, and the call to that function.  That code looks like this:

addLocationLabel(GOTO_OVERVIEW, 14);

This calls the label function, what variable to use and what font size to use.  Next is the function to display.

function addLocationLabel(locationString, fontSize) {
var params = locationString.split(';');
document.getElementById('wwjApplet').getSubApplet().addLabel(params[0], parseFloat(params[1]), parseFloat(params[2]), 'Arial-BoldItalic-' + fontSize, '#33ff00');
}

This function pases the information to get the text to display, the location it should be displayed at, the font to use and what size it should be and finally, what color to use.

This is how it looks:

Now, suppose we want to add more labels and use a different color and font size.  Lets add 23 more labels:

var LOC_01 = "Shoemaker Bridge;41.15317;-76.53743;5000;0;45";
var LOC_02 = "Sam Eckman Bridge;41.17624;-76.48955;5000;0;45";
....
var LOC_23 = "Davis Bridge;40.9152;-76.43485;5000;0;45";

And for those 23 labels, we need to call the addLocationLabel, but this will be a slightly different version, displaying a different font and font color.

addLocationLabel2(LOC_01, 10);
addLocationLabel2(LOC_02, 10);
....
addLocationLabel2(LOC_23, 10);

And the function looks like this:

function addLocationLabel2(locationString, fontSize) {
   var params = locationString.split(';');
   document.getElementById('wwjApplet').getSubApplet().addLabel(params[0], parseFloat(params[1]), parseFloat(params[2]), 'Arial-' + fontSize, '#ff0000');
}

And the output:

You can see all the examples, live at this location.

  • Share/Bookmark

Tutorial 2: Making Embeded WWJava Zoom to a Location

Sunday, August 10th, 2008

In Tutorial 1, we went into just how to embed a WWJava applet into a web page.  In this tutorial I will expand the scope and use Javascript to make the globe move to a preset location after the applet loads.  Note: I have noticed a bug while working on this tutorial with Firefox 3.x.  Javascript interaction with the WWJava globe does not seem to work. It did work in FF 2.x, I am not sure if it is a FF issue or a WWJava issue though.

First off open up your web page that has the WWJava applet code in and we will be adding the following Javascript to it:

<script language="javascript">
<!--
// Author: Patrick Murris
// Version:

// Applet init, start and stop - called from java at the end of applet init() and start()
// and at the begining of stop()

function appletInit() {
}

function appletStart() {
// Fly to a location after a delay
setTimeout("startup()", 5000); // 5 seconds
}

This part of the code starts the startup function after a delay of 5 seconds.

function startup() {
// Move to show overview
gotoLocation(GOTO_OVERVIEW);
}

In this tutorial, startup will be calling the gotoLocation function, this loads the function and also the variable that defines what the goto location is.

function appletStop() {
}

var GOTO_OVERVIEW = "Detroit;42.46;-83.16;260000;0;40";

This is where you define your zoom to location.

Location strings contain the following information separated by ‘;’:

  • name displayed on the globe
  • latitude in decimal degrees
  • longitude in decimal degrees
  • eye distance from location in meters
  • heading angle in decimal degrees, clockwise from north
  • pith angle from vertical in decimal degrees
function gotoLocation(locationString) {
var params = locationString.split(';');
if(params.length == 3)    // Lat/lon
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]));
else if(params.length == 4)    // Lat/lon and zoom
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), 0, 0);
else if(params.length == 5)    // Lat/lon/zoom and heading
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), parseFloat(params[4]), 0);
else if(params.length == 6)    // Lat/lon/zoom/heading and pitch
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), parseFloat(params[4]), parseFloat(params[5]));
}

// -->
</script>

This function is what processes the goto location values and then displays the location on the WWJava globe.

This is the finished HTML page now:

<html>
<head>
<title>NASA World Wind Java Applet</title>
</head>

<script language="javascript">
<!--
// Author: Patrick Murris
// Version:

// Applet init, start and stop - called from java at the end of applet init() and start()
// and at the begining of stop()

function appletInit() {
}

function appletStart() {
// Fly to a location after a delay
setTimeout("startup()", 5000); // 5 seconds
}

function startup() {
// Move to show overview
gotoLocation(GOTO_OVERVIEW);
}

function appletStop() {
}

var GOTO_OVERVIEW = "Detroit;42.46;-83.16;260000;0;40";

function gotoLocation(locationString) {
var params = locationString.split(';');
if(params.length == 3)    // Lat/lon
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]));
else if(params.length == 4)    // Lat/lon and zoom
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), 0, 0);
else if(params.length == 5)    // Lat/lon/zoom and heading
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), parseFloat(params[4]), 0);
else if(params.length == 6)    // Lat/lon/zoom/heading and pitch
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), parseFloat(params[4]), parseFloat(params[5]));
}

// -->
</script>

<body>

<applet id="wwjApplet" name="wwjApplet" mayscript code="org.jdesktop.applet.util.JNLPAppletLauncher" width=600 height=380
archive="applet-launcher.jar, http://worldwind.arc.nasa.gov/java/demos/worldwind.jar, WWJApplet.jar, http://download.java.net/media/jogl/builds/archive/jsr-231-webstart-current/jogl.jar, http://download.java.net/media/gluegen/webstart/gluegen-rt.jar">
<param name="codebase_lookup" value="false" />
<param name="subapplet.classname" value="gov.nasa.worldwind.examples.applet.WWJApplet" />
<param name="subapplet.displayname" value="WWJ Applet" />
<param name="noddraw.check" value="true" />
<param name="progressbar" value="true" />
<param name="jnlpNumExtensions" value="1" />
<param name="jnlpExtension1" value="http://download.java.net/media/jogl/builds/archive/jsr-231-webstart-current/jogl.jnlp" />
</applet>

</body>
</html>

The output looks like this:


wwJava applet first loaded


Globe zooming into the defined location after 5 seconds


Final stopping point

  • Share/Bookmark