Simple and Intuitive Visualization with the Web Automation and Translation

Toolkit (WATT) Client

Simple and Intuitive Visualization with the Web Automation and Translation

Toolkit (WATT) Client

Minnesota Supercomputing Institute Undergraduate Internship Program

Adam R. Momsenin collaboration with Professor David Yuen and the Virtual

Laboratory for Earth and Planetary Materials (VLAB)

Minnesota Supercomputing Institute Undergraduate Internship Program

Adam R. Momsenin collaboration with Professor David Yuen and the Virtual

Laboratory for Earth and Planetary Materials (VLAB)

Project GoalsProject Goals

Create an online service for easy data visualization

Support fast development updates to limit service downtime

“Write once, install anywhere” using Java Webstart

Create an online service for easy data visualization

Support fast development updates to limit service downtime

“Write once, install anywhere” using Java Webstart

WATT Client - Introductionhttp://webis.msi.umn.edu:8080/WattClientWebApp/start_page.jsf

WATT Client - Introductionhttp://webis.msi.umn.edu:8080/WattClientWebApp/start_page.jsf

Consists of two

parts:- Manipulator

Window- Swing GUI

Consists of two

parts:- Manipulator

Window- Swing GUI

Current start page upon WATT Client launch

How the Client WorksHow the Client Works

Send Update RequestSend Update Request

CLIENT- can be any computer with a working Internet connection User works on this end

SERVER- MSI’s supercomputer or other server machine Handles rendering of dataset

Returns new “snapshot”

Setup allows user to focus on data manipulation while server does the heavy lifting

Manipulator WindowManipulator Window

Manipulator box based on GLEEM (“GL Extremely Easy-to-use Manipulator) by Kenneth B. Russell

Clicking corners scales, outside handles rotate, faces translate

JPEG “snapshot” of 3D rendered data mapped to plane within manipulator

Manipulator box based on GLEEM (“GL Extremely Easy-to-use Manipulator) by Kenneth B. Russell

Clicking corners scales, outside handles rotate, faces translate

JPEG “snapshot” of 3D rendered data mapped to plane within manipulator

GLEEM Classeshttp://alumni.media.mit.edu/~kbrussel/gleem/

GLEEM Classeshttp://alumni.media.mit.edu/~kbrussel/gleem/

Manip ManipManager ManipMotionListener ManipPart ManipPartCube ManipPartGroup ManipPartLineSeg ManipPartSquare ManipPartTransform ManipPartTriBased and more!

Manip ManipManager ManipMotionListener ManipPart ManipPartCube ManipPartGroup ManipPartLineSeg ManipPartSquare ManipPartTransform ManipPartTriBased and more!

Class list gives an idea of the complexity of graphical programming; in this case, just about every part of the manipulator has its own class!

List only includes manipulator classes, transformers and viewers omitted

Rotating the ManipulatorRotating the Manipulator

Source of earliest headaches: matching server and client camera and actor rotations- Server renders images using Visualization

Toolkit (VTK), while client uses JOGL- Rotating object same as changing camera, but

more computationally expensive- And always remember to agree on degrees or

radians!

Source of earliest headaches: matching server and client camera and actor rotations- Server renders images using Visualization

Toolkit (VTK), while client uses JOGL- Rotating object same as changing camera, but

more computationally expensive- And always remember to agree on degrees or

radians!

Scaling and TranslatingScaling and Translating

Scaling - image and box are simply stretched and compressed as the user wills.

Translating - Camera panned freely along a plane parallel to initial JPEG orientation (gives illusion of moving box object)

Scaling - image and box are simply stretched and compressed as the user wills.

Translating - Camera panned freely along a plane parallel to initial JPEG orientation (gives illusion of moving box object)

JPEG ImageJPEG Image

To ease transmission, only a 2D image is

displayed on the client, not a fully rendered

3D object.

This made matching up the image and the

manipulator difficult, and had to be addressed

when rotating the client camera.

To ease transmission, only a 2D image is

displayed on the client, not a fully rendered

3D object.

This made matching up the image and the

manipulator difficult, and had to be addressed

when rotating the client camera.

Client in ActionClient in Action

Java Swing InterfaceJava Swing Interface

Adding a Menu Bar will allow access to developmental and function information and commands to load data.

Input fields allow for manipulation of red cutting plane (visible in previous slide)

JButton allows for quick updates

Note: GUI functionality still in development

Adding a Menu Bar will allow access to developmental and function information and commands to load data.

Input fields allow for manipulation of red cutting plane (visible in previous slide)

JButton allows for quick updates

Note: GUI functionality still in development

Maven 2Maven 2

Build structure and program (similar in idea to Ant, Java’s version of Make)- Sets up a generic project file structure that needn’t be rewritten for new projects- Standardizes project for collaborative development- Compiles, tests, builds, installs, deploys- Remote deployment allows new versions to be installed to service URL in a matter of seconds

Build structure and program (similar in idea to Ant, Java’s version of Make)- Sets up a generic project file structure that needn’t be rewritten for new projects- Standardizes project for collaborative development- Compiles, tests, builds, installs, deploys- Remote deployment allows new versions to be installed to service URL in a matter of seconds

Java WebstartJava Webstart

Central to “write once, install anywhere” motto- Service requires no software to be installed

prior to use- User only has to accept, and Webstart will

search for and download all the files the service needs to run

Central to “write once, install anywhere” motto- Service requires no software to be installed

prior to use- User only has to accept, and Webstart will

search for and download all the files the service needs to run

ChallengesChallenges

Initial confusion on project purpose Box perspective while translating Image quality issues at high magnification Matching rotations Integrating GUI to render window “No jogl.jar on classpath” error Hit Points (detecting mouse clicks)

- Switching to spherical handles- Point detection determines transformation type

Initial confusion on project purpose Box perspective while translating Image quality issues at high magnification Matching rotations Integrating GUI to render window “No jogl.jar on classpath” error Hit Points (detecting mouse clicks)

- Switching to spherical handles- Point detection determines transformation type

Looking aheadLooking ahead

Embed service into webpage with AJAX- Allows for real-time image manipulation without need

for constant page updates

Xith3D integration

- JOGL overlay that may improve performance

Color map cutting plane Low-resolution subset

- Allows user to better predict final orientation of image

Embed service into webpage with AJAX- Allows for real-time image manipulation without need

for constant page updates

Xith3D integration

- JOGL overlay that may improve performance

Color map cutting plane Low-resolution subset

- Allows user to better predict final orientation of image

What I LearnedWhat I Learned

Graphical programming in OpenGL Java Webstart Maven large-scale project builds for collaborative

efforts (restrictions on project source) SVN versioning for group collaboration Professional programming project experience

Graphical programming in OpenGL Java Webstart Maven large-scale project builds for collaborative

efforts (restrictions on project source) SVN versioning for group collaboration Professional programming project experience

AcknowledgementsAcknowledgements Professor Dave Yuen’s group:

- Evan “Farmer” Bollig- Shuo “Mark” Wang- Martin “Frank Linux” Lyness- Sarah Wieber- Matthew Broten- Grace Schwab- Javier Roman- Paul “Pau Yensen” Jensen- Dan “Rao” Kigelman- Pedro Silveira- Cesar Da Silva

Professor Dave Yuen’s group:- Evan “Farmer” Bollig- Shuo “Mark” Wang- Martin “Frank Linux” Lyness- Sarah Wieber- Matthew Broten- Grace Schwab- Javier Roman- Paul “Pau Yensen” Jensen- Dan “Rao” Kigelman- Pedro Silveira- Cesar Da Silva

ReferencesReferences

http://www.swiftless.cdadc.com/tutorials/opengl/opengltuts.html - OpenGL tutorials

http://www.opengl.org/code/category/C23/ - more OpenGL source Davis, Tom, Jackie Neider, Dave Shreiner, and Mason Woo.

“OpenGL Programming Guide”. Addison-Wesley, Boston. 1999. - “The Red Book”

http://xith.org/tutes/GettingStarted/html/deploying_xith3d_games_with.html - Xith3D documentation

http://www.flipcode.com/articles/article_frustumculling.shtml - Rendering and culling reference

http://csis.pace.edu/~bergin/sol/java/gui/ - Java Swing example http://gorerle.com/vlab-wiki/index.php?title=User:Adamo - my VLAB

Wiki page

http://www.swiftless.cdadc.com/tutorials/opengl/opengltuts.html - OpenGL tutorials

http://www.opengl.org/code/category/C23/ - more OpenGL source Davis, Tom, Jackie Neider, Dave Shreiner, and Mason Woo.

“OpenGL Programming Guide”. Addison-Wesley, Boston. 1999. - “The Red Book”

http://xith.org/tutes/GettingStarted/html/deploying_xith3d_games_with.html - Xith3D documentation

http://www.flipcode.com/articles/article_frustumculling.shtml - Rendering and culling reference

http://csis.pace.edu/~bergin/sol/java/gui/ - Java Swing example http://gorerle.com/vlab-wiki/index.php?title=User:Adamo - my VLAB

Wiki page