WorldWide Telescope

WWT HTML5 SDKWEB CONTROLWEB CLIENTDEVELOPMENT OVERVIEW

RON GILCHRIST (WEB ARCHITECT) @THEWEBKID ON GITHUB

NOV 7, 2015

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

WorldWide Telescope

HTML5 SDK – 4 FUNDAMENTAL USAGES

HTML5 SDK

Full Web Client

wwt.org/webclient

“Interact” Web

Controlwwt.org/interact

Embedded Control

wwt.org/interact/embedLive working example:

http://planck.ipac.caltech.edu/wwt

In the wildADS Example:

http://www.adsass.org/

wwt/

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

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 + jQueryOnly within WWT Web site

HTML5 SDK

wwt.org/interact • Tour Player• Spectral Interactive• Planet Viewer• Great Observatories

WorldWide Telescope

AnySite.com adds code directly into page

EMBEDDED WEB CONTROL TECHNICAL OVERVIEW

Embed Codewwt.org/embedded-webcontrol.js

IFRAME (hosting wwt.org embed control

page)

• Simpler way to utilize SDK, but not necessaryfor anyone wanting to embed WWT functionality

• Includes Bottom bar, UI controls, and Full screenbutton

• Examples: http://planck.ipac.caltech.edu/wwt/http://thewebkid.com

• See wwt.org/interact/embed to generate embed code.

WebControl.js

HTML5 SDK

WorldWide Telescope

WWT PUBLIC USAGES TECHNICAL OVERVIEW

• A few custom implementations, but not many

• Harvard is most notable usage• 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

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)

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

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/embed

• Look at live code?

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.

WorldWide Telescope

CODE DIVE OR QUESTIONS

Please comment/ask questions…

Workshop notes to follow…