WWT HTML5 SDK
WEB CONTROL
WEB CLIENT
DEVELOPMENT 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
In the wild
Full Web
Client
ADS Example:
http://www.adsass.org/
wwt/
wwt.org/webclient
“Interact”
Web Control
wwt.org/interact
Embedded Control
wwt.org/interact/embed
Live working example:
http://planck.ipac.caltech.edu/wwt
WorldWide Telescope
WEB CLIENT BRIEF TECHNICAL OVERVIEW
Custom HTML/CSS/JS +
Angular - Bootstrap
HTML5 SDK
• Most robust feature set
• Deep integration with SDK
Internals
• Key focus for future of
WWT
• Fully Open Source on
GitHub
WorldWide Telescope
INTERACT WEB CONTROL TECHNICAL OVERVIEW
WebControl.js + jQuery
Only within WWT Web site
HTML5 SDK
wwt.org/interact
• Tour Player
• Spectral Interactive
• Planet Viewer
• Great Observatories
• 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
WorldWide Telescope
EMBEDDED WEB CONTROL TECHNICAL OVERVIEW
AnySite.com adds code directly into page
Embed Code
wwt.org/embedded-webcontrol.js
IFRAME
(hosting wwt.org embed control page)
WebControl.js
HTML5 SDK
• 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
• See wwt.org/interact/embed to
generate embed code.
WorldWide Telescope
WWT PUBLIC USAGES TECHNICAL OVERVIEW
Any Framework, HTML, Script
HTML5 SDK
• 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
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 crossdomain 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…
WorldWide Telescope