germaniumweb training for cxa2010

Setup1. Bookmark

http://www.germanium3d.com/cxa2010/links

2. Wi-Fi: Connect to rpguest network

3. Install a web debugger if you don’t have one:• Firebug for Firefox; or• IE Developer Tools for IE

4. Training will begin at 10:00

GermaniumWebTraining Session

Ian LohTechnical Product Manager

Why GermaniumWeb?

Geospatial mapping with Google Earth

http://localhost/app/ge_fusion/

Interior mapping with GermaniumWeb

http://localhost/app/cv_fusion/

JavaScript API

www.example.com

index.html

api.germanium3d.com

JSAPI

WebDeveloper

+GermaniumWeb

IE pluginIE User

How it Works

++Firefox User

GermaniumWebFirefox plugin

www.example.com

index.html

api.germanium3d.com

JSAPI

WebDeveloper

How it Works

+Firefox User


+GermaniumWeb

IE plugin IE User

http://www.germanium3d.com/SA2008/SGH/demo.html

+Firefox User


www.example.com

index.html

api.germanium3d.com

JSAPI

WebDeveloper

How it Works

Basic Anatomy

1. Target the JavaScript API<script

src="http://api.germanium3d.com/?v=1.4&key=your_API_key"></script>

2. Add a <div> to containGermaniumWeb

<body><div id="germdiv" style="width:100%;

height:100%"></div></body>

3. Initialize GermaniumWeb<body onload="Init()">

<div id="germdiv" style="width:100%; height:100%"></div></body>

<script type="text/javascript">var germ = null;

function Init() {Germanium.CreateInstance("germdiv", OnInitOk);

}

function OnInitOk(webControl) {germ = webControl;

}</script>

4. Load a buildingfunction OnInitOk(webControl) {

germ = webControl;germ.Load("http://www.germanium3d.com/static/

sample/generic_building/2.0/

generic_building.xlcl");}

Complete Examplehttp://www.germanium3d.com/cxa2010/links

http://localhost/app/cxa2010/minimal02.html

IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development

Buildings

BuildingsBlocksLevels

BBL Example: Office buildinghttp://www.germanium3d.com/cxa2010/links - Office Building

http://www.germanium3d.com/static/code/building_viewers/generic_building.html

BBL Code Sampleshttp://www.germanium3d.com/cxa2010/links - Code Samples

The Eye

3D Coordinate System

3D Coordinate System - Position

Right-hand, Y-up, in metres

3D Coordinate System - Orientation

Default orientation of (0°, 0°, 0°) points down the negative z-axis


(0°, 45°, 0°) means a 45° rotation around the Y-axis


If you point right thumb in axis direction, fingers will point in positive rotation direction


All possible rotation axes


var right_angle = Germanium.DegreeToRadian(90);

To work in degrees instead of radians:

The Eye - Setting the positionhttp://www.germanium3d.com/cxa2010/links - Code Samples

“Let’s meet up here!”

The Eye - Gliding2 types –1. Look at/from somewhere

or2. Look at something,

e.g. a level, placemark

- GlideTargetTo(), GlideEyeTo() - GlideEyeToFit()

The Eye - GlidingSpecify parameters in an associative array

germ.GetEye().GlideEyeTo({

position: [10, 0, 10],targetDistance: 5,duration: 10, // 10 seconds

});

Full list of parameters in API documentation, underEye > Specifying glide parameters

The Eye - Glidinghttp://www.germanium3d.com/cxa2010/links - Code Samples

How do I get the position to glide to?

“I can see the point that I want, if only I could just click it!”


Answer:

mouse click event+

Eye.Compute3DIntersection()

“But… what are events?”

Eventssimilar to callbacks,

tell you when something has happened

Callback

“You do something, tell me when you’re done”

Event

“Tell meevery time

this thing happens”

Load Callback vs Event// Load callbacksgerm.Load(

url,options,successCallback,failureCallback);

// Load eventgerm.AddEventHandler(

Germanium.Event.OnLoadEnds,eventHandler);

Event Types• Mouse and Keyboard• Eye• File loading• BBL• Placemark and Callout• ClipPlane• Errors

Full list of events in API documentation, underEvent > Event names


http://www.germanium3d.com/cxa2010/links - Code Samples

mouse click event+

Eye.Compute3DIntersection()

Placemarks

Placemark Structure

Placemark

Geometry StyleSet

GeometryStyle

fundamental shape

visual look

Placemark Types• Diamond (point)• Arrow (point)• Icon (point)• Line• Polygon

Diamond Placemark

Placemark

DiamondStyle

PointGeometry StyleSet

Arrow Placemark

Placemark

ArrowStyle


Icon Placemark

Placemark


IconStyle

Line Placemark

Placemark

LineStringGeometry StyleSet

LineStyle

Polygon Placemark

Placemark

PolygonGeometry StyleSet

PolygonStyle

Customizable Label

Placemark


LabelStyleDiamondStyle

Customizable Callout Balloon

Placemark


BalloonStyleDiamondStyle

Putting it all together

Placemark

Geometry StyleSet

BalloonStyleLabelStyleGeometryStyle

pointlinestringpolygon

diamond, arrow, iconlinepolygon

Placemarks - Code Examples

http://www.germanium3d.com/cxa2010/links - Code Samples

Hands-on Session

GermaniumWeb Playground

http://www.germanium3d.com/cxa2010/links - Playground

+Firefox User


www.example.com

index.html

api.germanium3d.com

JSAPI

WebDeveloper

How it Works

www.example.com

index.html

api.germanium3d.com(GermaniumWeb API server)

JSAPI

User

A typical web environment

Browser: IE/Firefox/Chrome/OperaPlugins: GermaniumWeb/Flash/Silverlight/JavaClient-side scripts: VBScript, JavaScript + jQuery/MooTools/YUI

data.example.com(data server)

Static files: .xlcl (Germanium buildings)

Feeds: Project Nimbus/ Google Data APIs

Webserver: JBoss/Apache/Tomcat/IISscripts: PHP/Python/Perl/Ruby

Appserver: JBoss/WebSphere/IISlogic: Java servlets/JSP/ASP.NET

Database: MySQL/MS SQL

Data

form

ats:

JSO

N, X

ML

Common Web Dev Tasks1. Setting up the server environment2. Common webapp operations3. Bringing your own building (BYOB)• Modeling• Deploying

1. Setting up the serverenvironment

Setting up the server environment

webserverdatabase

scripting language

www.example.com

index.html

- Apache- MySQL- PHP

- Apache- MySQL- PHP

JBoss/e.g. WAMP, LAMP, XAMPP

2. Common webapp operations

Common webapp operations1. Store local state, e.g. cookies2. Provide user-specific interactions, e.g. sessions3. Query live data from the server4. Save user data to the server5. Perform all of the above asynchronously

3. Bring Your Own Building

Provided buildings

Coming soon

Shopping Mall Office Building

NUS School of Computing Republic Polytechnic

http://www.germanium3d.com/code/SampleBuildings

BYOB - ModelingQuick and easy way:

KML Building Importer

BYOB - ModelingFull 3D way:

COLLADA

BYOB - Modeling

Real-time modeling guide

3. BYOB - Deploying

BYOB – Deploying filesThings to look out for:1. Use relative paths 2. Preserve directory structure3. Check your filename capitalization

e.g. Floor.jpg vs floor.jpg

4. Hosted webapps are not allowed to load local files• Local webapp -> local file OK• Hosted webapp -> local file Not allowed• Hosted webapp -> hosted file OK

Questions?

blog.germanium3d.comwww.germanium3d.com/forumtechnical: [email protected]: [email protected]

Please give feedback:http://tinyurl.com/cxagermsurvey

germaniumweb training for cxa2010

Technology