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

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to Freeware/Shareware Chapter Four Essential Tools for Web Page Authors.
Advertisements

Samsung Smart TV is a web-based application running on an application engine installed on digital TVs connected to the Internet.
Web Toolkit Julie George & Ronald Lopez 1. Requirements  Java SDK version 1.5 or later  Apache Ant is also necessary to run command line arguments 
Extreme User Interfaces for Alfresco Kevin Dorr Sr. Solutions Engineer Americas Channel.
North Shore.NET User Group Our Sponsors. North Shore.NET User Group Check out our new web site Next Meeting
Macromedia Dreamweaver 4 Foundation Level Course.
MSc. Publishing on WWW JavaScript. What is JavaScript? A scripting language devised by Netscape Adds functionality to web pages by: Embedding code into.
1 A Web-Based Integral Evaluator: A Demonstration of the Successful Integration of WebEQ, Maple, and Java Wanda M. Kunkle Department of Mathematics & Computer.
Microsoft ASP.NET AJAX - AJAX as it has to be Presented by : Rana Vijayasimha Nalla CSCE Grad Student.
UNC Webmasters Meeting March 2, An amazing range of possibilities, covering virtually every aspect involved in web page/site development!
UNIT-V The MVC architecture and Struts Framework.
Presented by…. Group 2 1. Programming language 2Introduction.
Computer Concepts 2014 Chapter 7 The Web and .
DYNAMICS CRM AS AN xRM DEVELOPMENT PLATFORM Jim Novak Solution Architect Celedon Partners, LLC
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
Additional Topics. Tutorial #9 Review – Forms Forms Legend and fieldset Fields Text Password Radio buttons, check box, text area, select lists Buttons.
Lightning Talk Fred Rodriguez Nguyen Do CPSC 473 May 6, 2012.
Yahoo! User Interface (YUI) Library Natly Mekdara.
Sofia, Bulgaria | 9-10 October Large-Scale Client Script Development in ASP.NET "Atlas“ Tools, Tips, And Techniques Hristo Deshev telerik Hristo Deshev.
Introduction to ArcGIS API for JavaScript
Java Mobile Apps with GWT & PhoneGap Josh Marinacci, webOS Developer Advocate.
Chapter 19: Adding JavaScript
JQUERY | INTRODUCTION. jQuery  Open source JavaScript library  Simplifies the interactions between  HTML document, or the Document Object Model (DOM),
WORLDWIDE TELESCOPE USING THE WWT HTML5 WEB CONTROL IN YOUR APPLICATIONS JONATHAN FAY MICROSOFT RESEARCH.
Strategies for Building Mobile Apps Using ArcGIS API for JavaScript Andy Gup, Lloyd Heberlie.
Getting the most out of ArcGIS Web Application Templates
Introduction to Web AppBuilder for ArcGIS: JavaScript Apps Made Easy
DEV337 Modeling Distributed Enterprise Applications Using UML in Visual Studio.NET David Keogh Program Manager Visual Studio Enterprise Tools.
Ventsislav Popov Crossroad Ltd.. 1. What is AJAX?  AJAX Concept  ASP.NET AJAX Framework 2. ASP.NET AJAX Server Controls  ScriptManager, UpdatePanel.
1 Geospatial and Business Intelligence Jean-Sébastien Turcotte Executive VP San Francisco - April 2007 Streamlining web mapping applications.
Extend the Operations Dashboard with Custom Widgets (and more)
Webview and Web services. Web Apps You can make your web content available to users in two ways in a traditional web browser in an Android application,
Crazy New CSS Tools MIS 424 MIS 424 Professor Sandvig Professor Sandvig.
Esri UC 2014 | Technical Workshop | Operations Dashboard for ArcGIS: Extending the Functionality Jay Chen Kylie Donia Tif Pun.
Extending the Operations Dashboard
WORLDWIDE TELESCOPE ECO- SYSTEM OVERVIEW JONATHAN FAY WORLDWIDE TELESCOPE DEVELOPER WORKSHOP NOV 7 TH, 2015.
ASP.NET User Controls. User Controls In addition to using Web server controls in your ASP.NET Web pages, you can create your own custom, reusable controls.
Web Components with Polymer Jeff Tapper Digital
UNDERSTANDING YOUR OPTIONS FOR CLIENT-SIDE DEVELOPMENT IN OFFICE 365 Mark Rackley
1.
Google Map API The Google Maps API lets you embed Google Maps in your own web pages with JavaScript The API provides a number of utilities for manipulating.
 Can access all API’s made available by OS vendor.  SDK’s are platform-specific.  Each mobile OS comes with its own unique tools and GUI toolkit.
Excel Services Displays all or parts of interactive Excel worksheets in the browser –Excel “publish” feature with optional parameters defined in worksheet.
Modern Development Technologies in SharePoint SHAREPOINT SATURDAY OMAHA APRIL, 2016.
Wes Preston DEV 202. Audience: Info Workers, Dev A deeper dive into use-cases where client-side rendering (CSR) and SharePoint’s JS Link property can.
Customizing Share Document Previews Will Abson Senior Integrations Engineer and Share Extras Project Lead
#SummitNow Lessons Learnt From Share Extras Alfresco Summit 2013 Will Abson
Extreme User Interfaces for Alfresco Kevin Dorr Sr. Solutions Engineer Americas Channel.
AngularJS and SharePoint
Kaltura Player Platform 2.0 August Key Advantages of Player Platform High performance full featured lead with HTML5 Most players display in 1 second.
Build Hybrid Mobile Apps with Ionic, Angular, & Cordova Brian
© Copyright SELA software & Education Labs Ltd Baruch Hirsch St.Bnei Brak Israel
Web Technologies Computing Science Thompson Rivers University
Building Custom Application With Office Add-Ins for OneNote
Videos.
Use Office UI Fabric React to Build Beauty with SharePoint
COP3530- Data Structures JSFiddle
Use Office UI Fabric React to Build Beauty with SharePoint
Responsive browser-based video recording and playback
SharePoint-Hosted Apps and JavaScript
Top Reasons to Choose Angular. Angular is well known for developing robust and adaptable Single Page Applications (SPA). The Application structure is.
SPA Revolution with WebAssembly and Blazor Rainer Stropek | software
SPA Revolution with WebAssembly and Blazor Rainer Stropek | software
Modern web applications
Modern web applications
Office 365 Development.
Videos.
Web Technologies Computing Science Thompson Rivers University
Web Client Side Technologies Raneem Qaddoura
PyWBEM Python WBEM Client: Overview #2
Presentation transcript:

WorldWide Telescope WWT HTML5 SDK WEB CONTROL WEB CLIENT DEVELOPMENT OVERVIEW RON GILCHRIST (WEB 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

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: Embedded Control wwt.org/interact/embed Live working example: In the wild ADS Example: wwt/ In the wild ADS Example: 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 + jQuery Only 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 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: See wwt.org/interact/embed to generate embed code.wwt.org/interact/embed WebControl.js HTML5 SDK

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

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/embedwwt.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…