1. WorldWide Telescope WWT HTML5 SDK WEB CONTROL WEB CLIENT DEVELOPMENT OVERVIEW RON GILCHRIST (WEB ARCHITECT) @THEWEBKID ON GITHUB NOV 7, 2015

2. WorldWide Telescope HTML5 SDK OVERVIEW Essentially WWT – Light. Designed to render most common WWT features within the browser. Written by Jonathan Fay in 2010 in c# compiled into javascript using scriptsharp It is an engine that renders WWT objects/imagery into canvas element. Very complex and robust. Still incomplete support of layers, tour authoring, and web gl API Documentation at http://www.worldwidetelescope.org/Developers/HTML5SDK http://www.worldwidetelescope.org/Developers/HTML5SDK

3. WorldWide Telescope HTML5 SDK – 4 FUNDAMENTAL USAGES HTML5 SDK Full Web Client wwt.org/webclient Full Web Client wwt.org/webclient “Interact” Web Control wwt.org/interact “Interact” Web Control wwt.org/interact Embedded Control wwt.org/interact/embed Live working example: http://planck.ipac.caltech.edu/wwt Embedded Control wwt.org/interact/embed Live working example: http://planck.ipac.caltech.edu/wwt In the wild ADS Example: http://www.adsass.org/ wwt/ In the wild ADS Example: http://www.adsass.org/ wwt/

4. WorldWide Telescope WEB CLIENT BRIEF TECHNICAL OVERVIEW Most robust feature set Deep integration with SDK Internals Key focus for future of WWT Fully Open Source on GitHub Custom HTML/CSS/JS + Angular - Bootstrap HTML5 SDK

5. WorldWide Telescope INTERACT WEB CONTROL TECHNICAL OVERVIEW Not well documented or broken out into reusable pieces (yet) Could be cleaned up and put online with web client as sample implementations of HTML5 SDK Needs documenting WebControl.js + jQuery Only within WWT Web site HTML5 SDK wwt.org/interact Tour Player Spectral Interactive Planet Viewer Great Observatories

6. WorldWide Telescope AnySite.com adds code directly into page EMBEDDED WEB CONTROL TECHNICAL OVERVIEW Embed Code wwt.org/embedded-webcontrol.js IFRAME (hosting wwt.org embed control page) Simpler way to utilize SDK, but not necessary for anyone wanting to embed WWT functionality Includes Bottom bar, UI controls, and Full screen button Examples: http://planck.ipac.caltech.edu/wwt/ http://thewebkid.com http://planck.ipac.caltech.edu/wwt/ http://thewebkid.com See wwt.org/interact/embed to generate embed code.wwt.org/interact/embed WebControl.js HTML5 SDK

7. WorldWide Telescope WWT PUBLIC USAGES TECHNICAL OVERVIEW A few custom implementations, but not many Harvard is most notable usage Harvard Anyone can implement their own and are encouraged to do so. Use documentation on wwt.org or reverse engineer the web client / other web control code Any Framework, HTML, Script HTML5 SDK

8. WorldWide Telescope WEBCONTROL.JS - PART 1 It is a wrapper for most common functions Has a basic api and UI chrome. Has mechanism to talk to embed containing page (which should be abstracted). Controls include play/stop button crossfader open in wwt button zoom buttons WWT logo (which links to wwt.org home page)

9. WorldWide Telescope WEBCONTROL.JS - PART 2 When used in wwt.org/interact pages there is always the base webcontrol.js and a custom page / supplementary js to accompany it. Depends on jquery/bootstrap/bootbox.js – very hard to decouple from wwt.org as a standalone script. Code is currently disorganized and needs cleanup. Basic chrome can be (and currently is) extended by individual page scripts Script written for internal WWT.org dev efforts, not ready for public use as a standalone script. Need to write a clean API and create good demo code

10. WorldWide Telescope COMPONENTS – EMBEDDED-WEBCONTROL.JS This script creates a wwt namespace on the containing page and spawns an iframe (wwt.org/webcontrol.aspx) which hosts the control Script reads from the options on the containing div and passes them to the iframe via a postMessage api (for cross- domain scripting) Code-gen tool on wwt.org/interact/embedwwt.org/interact/embed Look at live code?

11. WorldWide Telescope COMPONENTS – WEBCONTROL.ASPX This is the page the embedded-webcontrol.js spawns in an iframe. It is a full-screen web control. WebControl.aspx contains script that calls the webcontrol.js with options from the containing page. It creates a dropdown in the chrome if a wtml file is passed into it. Future: Page should have script abstracted into a single js file and it should take the embed api OUT of the webcontrol.js and put within itself.

12. WorldWide Telescope CODE DIVE OR QUESTIONS Please comment/ask questions… Workshop notes to follow…