Using an external SDK

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. :frowning:

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>