worldwide telescope wwt html5 sdk web control web client development overview ron gilchrist (web...
TRANSCRIPT
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…