GermaniumWeb training for CXA2010

Setup
Bookmarkhttp://www.germanium3d.com/cxa2010/links
Wi-Fi: Connect to rpguest network
Install a web debugger if you don’t have one:
Firebug for Firefox; or
IE Developer Tools for IE
Training will begin at 10:00

GermaniumWebTraining SessionIan LohTechnical Product Manager

Why GermaniumWeb?

Geospatial mapping with Google Earth

Interior mapping with GermaniumWeb

JavaScript API

How it Works
index.html
JSAPI
www.example.com
api.germanium3d.com
Web
Developer
+
IE User
GermaniumWebIE plugin

How it Works
index.html
JSAPI
www.example.com
api.germanium3d.com
Web
Developer
+
+
GermaniumWebFirefox plugin
Firefox User

+
+
IE User
GermaniumWebIE plugin
Firefox User

How it Works
index.html
JSAPI
www.example.com
api.germanium3d.com
Web
Developer
+
Firefox User

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 contain GermaniumWeb
<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">
vargerm = null;
functionInit() {
Germanium.CreateInstance("germdiv", OnInitOk);
}
functionOnInitOk(webControl) {
germ = webControl;
}
</script>

4. Load a building
functionOnInitOk(webControl) {
germ = webControl;
germ.Load("http://www.germanium3d.com/static/sample/
generic_building/2.0/generic_building.xlcl");
}

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

IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development

Buildings

BuildingsBlocksLevels

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

BBL Code Samples
http://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

To work in degrees instead of radians:
varright_angle = Germanium.DegreeToRadian(90);

The Eye - Setting the position
“Let’s meet up here!”

The Eye - Gliding
2 types –
Look at/from somewhereor
Look at something,e.g. a level, placemark
- GlideTargetTo(),GlideEyeTo()
- GlideEyeToFit()

The Eye - Gliding
Specify 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, under
Eye > Specifying glide parameters

The Eye - Gliding

Break 

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?”

Events
similar to callbacks,
tell you when something has happened

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

Event
“Tell me
every time
this thing happens”

Load Callback vs Event
// Load callbacks
germ.Load(
url,
options,
successCallback,
failureCallback);
// Load event
germ.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, under
Event > Event names

mouse click event
+
Eye.Compute3DIntersection()

Placemarks

Placemark Structure
Placemark
Geometry
StyleSet
fundamental shape
GeometryStyle
visual look

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

Diamond Placemark
Placemark
PointGeometry
StyleSet
DiamondStyle

Arrow Placemark
Placemark
PointGeometry
StyleSet
ArrowStyle

Icon Placemark
Placemark
PointGeometry
StyleSet
IconStyle

Line Placemark
Placemark
LineStringGeometry
StyleSet
LineStyle

Polygon Placemark
Placemark
PolygonGeometry
StyleSet
PolygonStyle

Customizable Label
Placemark
PointGeometry
StyleSet
LabelStyle
DiamondStyle

Customizable Callout Balloon
Placemark
PointGeometry
StyleSet
BalloonStyle
DiamondStyle

Putting it all together
Placemark
Geometry
StyleSet
point
linestring
polygon
BalloonStyle
LabelStyle
GeometryStyle
diamond, arrow, icon
line
polygon

Placemarks - Code Examples

Hands-on Session

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

How it Works
index.html
JSAPI
www.example.com
api.germanium3d.com
Web
Developer
+
Firefox User

A typical web environment
Webserver:JBoss/Apache/Tomcat/IIS
scripts:PHP/Python/Perl/Ruby
Appserver:JBoss/WebSphere/IIS
logic: Java servlets/JSP/ASP.NET
Database:MySQL/MS SQL
index.html
JSAPI
Static files:.xlcl (Germanium buildings)
Feeds:Project Nimbus/
Google Data APIs
www.example.com
api.germanium3d.com
(GermaniumWeb API server)
Data formats:JSON, XML
data.example.com
(data server)
Browser:IE/Firefox/Chrome/Opera
Plugins:GermaniumWeb/Flash/Silverlight/Java
Client-side scripts:VBScript, JavaScript + jQuery/MooTools/YUI
User

Common Web Dev Tasks
Setting up the server environment
Commonwebapp operations
Bringing your own building (BYOB)
Modeling
Deploying

1. Setting up the serverenvironment

Setting up the server environment
index.html
www.example.com
/
- Apache
- MySQL
- PHP
webserver
database
scripting language
-Apache
- MySQL
- PHP
JBoss
e.g. WAMP, LAMP, XAMPP

2. Common webapp operations

Common webapp operations
Store local state, e.g. cookies
Provide user-specific interactions, e.g. sessions
Query live data from the server
Save user data to the server
Perform all of the above asynchronously

3. Bring Your Own Building

Provided buildings
http://www.germanium3d.com/code/SampleBuildings
Shopping Mall
Office Building
Coming soon
NUS School of Computing
Republic Polytechnic

BYOB - Modeling
Quick and easy way:
KML Building Importer

BYOB - Modeling
Full 3D way:
COLLADA

BYOB - Modeling
Real-time modeling guide

3. BYOB - Deploying

BYOB – Deploying files
Things to look out for:
Use relative paths
Preserve directory structure
Check your filename capitalizatione.g. Floor.jpg vs floor.jpg
Hostedwebapps are not allowed to load local files
Local webapp -> local file OK
Hosted webapp -> local file Not allowed
Hosted webapp -> hosted file OK

Please give feedback:http://tinyurl.com/cxagermsurvey
Questions?
blog.germanium3d.com
www.germanium3d.com/forum
technical:ianloh@gelement.com
business: shinwe@gelement.com

GermaniumWeb training for CXA2010

by ianloh13 on Jun 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 13

Statistics

GermaniumWeb training for CXA2010 — Presentation Transcript