Using an external SDK

  1. 11 months ago

    Robert L

    12 Sep 2017 Pre-Release Testers, Xojo Pro
    Edited 11 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!