Using an external SDK

  1. 2 months ago

    Robert L

    Sep 12 Pre-Release Testers, Xojo Pro
    Edited 2 months ago

    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>

or Sign Up to reply!