While I’ve made almost 10 web application of various sizes using Xojo, I’ve never needed to interact with an external site before. I’m looking at starting a project that utilizes the WorldWideTelescope.com data. They have a lot of excellent examples, including extremely basic ones. One of the examples is below which works perfectly fine if copied into a simple .HTML file. My issue starts when using it within XOJO…
- I’ve tried using this code within an HTMLViewer using the loadPages event…while the form shows up, the main star field data does not. Not being successful I figured I would look into the Web Control SDK (note…head is spinning trying to figure this SDK out).
- I’ve read through the XOJO documentation on this, and followed the documentation…my little demo app built from the documentation works great. Applying it to my situation…more head spinning.
- I’ve looked at the sample applications included with Xojo, and to be honest, I’m even more confused.
Does anyone have a suggestion to:
a) helping me get this working
b) more importantly, get my head around the whole web control SDK situation?
Thank you in advance…
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="chrome=1, IE=edge"/>
<title>Simple WWT Web Client</title>
<script src="http://www.worldwidetelescope.org/scripts/wwtsdk.aspx"></script>
<script>
// declare global Worldwide Telescope object
var wwt;
// Create variables to hold the changeable settings
var bShowCrosshairs = true;
var bShowUI = true;
var bShowFigures = true;
// This function initializes the wwt object and once it is done
// it fires the wwtReady event
function initialize() {
wwt = wwtlib.WWTControl.initControl("WWTCanvas");
wwt.add_ready(wwtReady);
}
// This function is where you would put your custom code for WWT
// following the initForWwt() call
function wwtReady() {
initForWwt();
}
// This is the initialization for Worldwide Telescope
function initForWwt() {
wwt.loadImageCollection("http://www.worldwidetelescope.org/COMPLETE/wwtcomplete.wtml");
// add any wwt object settings changes here
wwt.settings.set_showCrosshairs(bShowCrosshairs);
wwt.settings.set_showConstellationFigures(bShowFigures);
wwt.hideUI(!bShowUI);
}
// A simple function to toggle the settings
// This function is called from the checkbox entries setup in the html table
function toggleSetting(text) {
switch (text) {
case 'ShowUI':
bShowUI = !bShowUI;
wwt.hideUI(!bShowUI);
wwt.set_showExplorerUI(bShowUI);
break;
case 'ShowCrosshairs':
bShowCrosshairs = !bShowCrosshairs;
wwt.settings.set_showCrosshairs(bShowCrosshairs);
break;
case 'ShowFigures':
bShowFigures = !bShowFigures;
wwt.settings.set_showConstellationFigures(bShowFigures);
break;
}
}
// A function to change the view to different constellations
// Note the fov set to 60 (maximum view distance)
// This function is called from the button entries in the html table
function GotoConstellation(text) {
switch (text) {
case 'Sagittarius':
wwt.gotoRaDecZoom(286.485, -27.5231666666667, 60, false);
break;
case 'Aquarius':
wwt.gotoRaDecZoom(334.345, -9.21083333333333, 60, false);
break;
}
}
</script>
</head>
<body onload="initialize()">
<!-- The body section creates a table with two columns. The first contains the -->
<!-- canvas tag that is the WWT web client target. And the second a table within-->
<!-- the table, containing some buttons and checkboxes.-->
<table border="2" bgcolor="lightgrey">
<tr><td>
<div id="WorldWideTelescopeControlHost">
<div id="WWTCanvas" style="width:750px; height:750px; border-style: none; border-width: 0px;"></div>
</div>
</td><td>
<table border="2" cellspacing="4" cellpadding="4" bgcolor="gold">
<tr>
<th colspan="2"><h2>Simple WWT Web Client</h2></th>
</tr>
<tr>
<th colspan = "2">
<input type="button" id="Sagittarius" value="Goto Sagittarius" onclick="GotoConstellation('Sagittarius')"/>
<input type="button" id="Aquarius" value="Goto Aquarius" onclick="GotoConstellation('Aquarius')"/></th>
</tr>
<tr>
<th colspan = "2">Settings</th>
</tr>
<!-- <tr>
<td> Show UI </td>
<td> <input id="UI" type="checkbox" checked="checked" onclick="toggleSetting('ShowUI');"/></td>
</tr>-->
<tr>
<td> Show Crosshairs</td>
<td> <input id="Crosshairs" type="checkbox" checked="checked" onclick="toggleSetting('ShowCrosshairs');"/></td>
</tr>
<tr>
<td> Show Figures </td>
<td> <input id="Figures" type="checkbox" checked="checked" onclick="toggleSetting('ShowFigures');"/></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>