|
Creating Custom HTML Viewers
Want to add a custom 3D window to your own web page? Here's how
to do it.
Not sure what a custom 3D window means? See an example here.
Note that you can only have one 3D window open at a time on your
computer, so if you have TerraExplorer or another custom HTML viewer
open, you will get an error when launching this.
Adding a 3D window to a web page is easy. All it requires in the
simplest case is a bit of code from the Skyline's API, which is
available through EarthSLOT. That is, everytime you view content
on EarthSLOT, you are automatically checked out a license to the
API. So if your MPT or TBP (the Earth Models) are not being served
from EarthSLOT (say you downloaded one completely or something),
then you will not have access to the API and you web page viewer
will not work. That being said, to incorporate the viewer into your
own web page, you need to cut and paste some cryptic commands that
manage the API license server and tell your computer that you are
about to use ActiveX controls. For a full list of the API commands
and usage, see the last several chapters of the TerraExplorer
Pro Help pages on TerraDeveloper and the API (Chapters 21-25).
Here is the simplest HTML implementation -- just cut and paste
this code into your web page, and it should work. To see what this
code does, click here.
To see what it looks like embedded in our own web page, click here.
==========================================================================
<p>
<OBJECT ID="TEInformationWindow" CLASSID="CLSID:3a4f9193-65a8-11d5-85c1-0001023952c1"
width=167 height=400 VIEWASTEXT>
</OBJECT>
<!--Define the TerraExplorer 3D Window Object-->
<OBJECT ID="TE3DWindow" CLASSID="CLSID:3a4f9192-65a8-11d5-85c1-0001023952c1"
width=500 height=400 VIEWASTEXT>
</OBJECT>
<!--Define the TerraExplorer Object-->
<OBJECT id=TE classid=CLSID:3a4f9191-65a8-11d5-85c1-0001023952c1>
</OBJECT>
<script language="vbscript">
Sub window_onLoad
TE.Load "http://www.earthslot.org/flyfiles/interns/nsidc_gpc.fly"
end sub
</script>
</p>
==========================================================================
Here is the code for a more sophisticted page, complete with information
tree, flight instructions, and the ability to change FLY files.
Click here
to launch it and see what it looks like.
==========================================================================
<HTML>
<HEAD>
<TITLE>EarthSLOT - Web Interface</TITLE>
<META NAME="NetLicenseServer" CONTENT="http://werc-eslot01.engr.uaf.edu:8080">
</HEAD>
<BODY>
<!--Define the TerraExplorer Object-->
<OBJECT id=TE classid=CLSID:3a4f9191-65a8-11d5-85c1-0001023952c1></OBJECT>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="bottom" width="200"> </font></td>
<td><font face="Verdana"><h1>EarthSLOT
Web Interface </h1></font></td>
</tr>
<tr>
<td colspan='2'><FORM name="form0">
<font face="Verdana"><strong>Select Data Set:
</strong></font>
<!--Text area to type in a FLY file name to load-->
<SELECT name="FlyFile">
<option value="http://www.earthslot.org/flyfiles/web_interface/eslot_tbp.fly">Generic
EarthSLOT Globe</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/eslot_shaded_dem.fly">Shaded
Relief Globe</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_january.fly">Blue
Marble Next Generation January</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_february.fly">Blue
Marble Next Generation February</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_march.fly">Blue
Marble Next Generation March</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_april.fly">Blue
Marble Next Generation April</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_may.fly">Blue
Marble Next Generation May</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_june.fly">Blue
Marble Next Generation June</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_july.fly">Blue
Marble Next Generation July</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_august.fly">Blue
Marble Next Generation August</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_september.fly">Blue
Marble Next Generation September</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_october.fly">Blue
Marble Next Generation October</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_november.fly">Blue
Marble Next Generation November</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/bmng_december.fly">Blue
Marble Next Generation December</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/eslot_bm2000.fly">BlueMarble
2000 Composite</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/eslot_tbp_cavm.fly">Generic
EarthSLOT Globe - CAVM Alaska Vegetation Overlay</option>
<option value="http://www.earthslot.org/flyfiles/web_interface/eslot_bm2000_cavm.fly">BlueMarble
2000 Composite - CAVM Alaska Vegetation Overlay</option>
</SELECT>
<!--Button to execute TerraExplorer Load() method with the FLY
file above-->
<INPUT type=button value="Load Data" name="Load
Fly" onclick="TE.Load (document.form0.FlyFile.value)">
</FORM></td>
</tr>
</table>
<script language="jscript" type="text/jscript">
var screenWidth = 0;
if(typeof(screen) == "object")
screenWidth = screen.width;
if(screenWidth < 1000)
loadLowRes();
else if (screenWidth < 1200)
loadMedRes();
else if (screenWidth > 1199)
loadHiRes();
function loadLowRes()
{
var terraExplorerStr = "";
terraExplorerStr += "<!--Define the TerraExplorer Information
Window Object-->";
terraExplorerStr += "<OBJECT ID='TEInformationWindow' CLASSID='CLSID:3a4f9193-65a8-11d5-85c1-0001023952c1'
width='200' height='420' VIEWASTEXT></OBJECT>";
terraExplorerStr += "<!--Define the TerraExplorer 3D Window
Object-->";
terraExplorerStr += "<OBJECT ID='TE3DWindow' CLASSID='CLSID:3a4f9192-65a8-11d5-85c1-0001023952c1'
width='560' height='420' VIEWASTEXT></OBJECT>";
document.write(terraExplorerStr);
}
function loadMedRes()
{
var terraExplorerStr = "";
terraExplorerStr += "<!--Define the TerraExplorer Information
Window Object-->";
terraExplorerStr += "<OBJECT ID='TEInformationWindow' CLASSID='CLSID:3a4f9193-65a8-11d5-85c1-0001023952c1'
width='250' height='540' VIEWASTEXT></OBJECT>";
terraExplorerStr += "<!--Define the TerraExplorer 3D Window
Object-->";
terraExplorerStr += "<OBJECT ID='TE3DWindow' CLASSID='CLSID:3a4f9192-65a8-11d5-85c1-0001023952c1'
width='720' height='530' VIEWASTEXT></OBJECT>";
document.write(terraExplorerStr);
}
function loadHiRes()
{
var terraExplorerStr = "";
terraExplorerStr += "<!--Define the TerraExplorer Information
Window Object-->";
terraExplorerStr += "<OBJECT ID='TEInformationWindow' CLASSID='CLSID:3a4f9193-65a8-11d5-85c1-0001023952c1'
width='300' height='660' VIEWASTEXT></OBJECT>";
terraExplorerStr += "<!--Define the TerraExplorer 3D Window
Object-->";
terraExplorerStr += "<OBJECT ID='TE3DWindow' CLASSID='CLSID:3a4f9192-65a8-11d5-85c1-0001023952c1'
width='860' height='660' VIEWASTEXT></OBJECT>";
document.write(terraExplorerStr);
}
var flightControlStr = "";
flightControlStr += "<table cellpadding='2' cellspacing='10'
border='0' bgcolor='#d9ddf9'>";
flightControlStr += "<tr><td align='center'><font
face='Verdana'><h2>Flight Controls</h2></font></td></tr>";
flightControlStr += "<tr><td><img src='flight_key.gif'
alt='' border='0'><img src='flight_mouse.gif' alt='' border='0'></td></tr></table>";
document.write(flightControlStr);
</script>
</BODY>
</HTML>
==========================================================================
|
