Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Setup<br />Bookmarkhttp://www.germanium3d.com/cxa2010/links<br />Wi-Fi: Connect to rpguest network<br />Install a web debu...
IE Developer Tools for IE</li></ul>Training will begin at 10:00<br />
GermaniumWebTraining SessionIan LohTechnical Product Manager<br />
Why?<br />
Why GermaniumWeb?<br />
Geospatial mapping with Google Earth<br />
Interior mapping with GermaniumWeb<br />
What?<br />
JavaScript API<br />
How?<br />
How it Works<br />index.html<br />JSAPI<br />www.example.com<br />api.germanium3d.com<br />Web<br />Developer<br />+<br />...
How it Works<br />index.html<br />JSAPI<br />www.example.com<br />api.germanium3d.com<br />Web<br />Developer<br />+<br />...
+<br />+<br />IE User<br />GermaniumWebFirefox plugin<br />GermaniumWebIE plugin<br />Firefox User<br />
How it Works<br />index.html<br />JSAPI<br />www.example.com<br />api.germanium3d.com<br />Web<br />Developer<br />+<br />...
Basic Anatomy<br />
1. 	Target the JavaScript API<br /><script<br />src="http://api.germanium3d.com/?v=1.4&key=your_API_key"><br /></script><b...
2. 	Add a <div> to contain	GermaniumWeb<br /><body><br />	<div id="germdiv"style="width:100%; height:100%"></div><br /></b...
3. Initialize GermaniumWeb<br /><body onload="Init()"><br /><div id="germdiv" style="width:100%; height:100%"></div><br />...
4. Load a building<br />functionOnInitOk(webControl) {<br />	germ = webControl;<br />germ.Load("http://www.germanium3d.com...
Complete Example<br />http://www.germanium3d.com/cxa2010/links<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
Buildings<br />
BuildingsBlocksLevels<br />
BuildingsBlocksLevels<br />
BBL Example: Office building<br />http://www.germanium3d.com/cxa2010/links  - Office Building<br />
BBL Code Samples<br />http://www.germanium3d.com/cxa2010/links  - Code Samples<br />
The Eye<br />
The Eye<br />
3D Coordinate System<br />
3D Coordinate System - Position<br />Right-hand, Y-up, in metres<br />
3D Coordinate System - Position<br />Right-hand, Y-up, in metres<br />
3D Coordinate System - Orientation<br />Default orientation of (0°, 0°, 0°) points down the negative z-axis<br />
3D Coordinate System - Orientation<br />(0°, 45°, 0°) means a 45° rotation  around the Y-axis<br />
3D Coordinate System - Orientation<br />If you point right thumb in axis direction, <br />fingers will point in positive r...
3D Coordinate System - Orientation<br />All possible rotation axes<br />
3D Coordinate System - Orientation<br />To work in degrees instead of radians:<br />varright_angle = Germanium.DegreeToRad...
The Eye - Setting the position<br />http://www.germanium3d.com/cxa2010/links  - Code Samples<br />“Let’s meet up here!”<br />
The Eye - Gliding<br />2 types –<br />Look at/from somewhereor<br />Look at something,e.g. a level, placemark<br />					  ...
The Eye - Gliding<br />Specify parameters in an associative array<br />germ.GetEye().GlideEyeTo(<br />{<br />	position: [1...
The Eye - Gliding<br />http://www.germanium3d.com/cxa2010/links  - Code Samples<br />
Break <br />
How do I get the position to glide to?<br />“I can see the point that I want, <br />          if only I could just click i...
How do I get the position to glide to?<br />Answer:<br />mouse click event<br />+<br />Eye.Compute3DIntersection()<br />“B...
Events<br />similar to callbacks,<br />tell you when something has happened<br />
Callback<br />“You do something, <br />tell me when you’re done”<br />
Event<br />“Tell me	<br />every time<br />this thing happens”<br />
Load Callback vs Event<br />// Load callbacks<br />germ.Load(<br />url,<br />options,<br />successCallback,<br />failureCa...
Event Types<br /><ul><li>Mouse and Keyboard
Eye
File loading
BBL
Placemark and Callout
ClipPlane
Errors</li></ul>Full list of events in API documentation, under<br />	Event > Event names<br />
How do I get the position to glide to?<br />http://www.germanium3d.com/cxa2010/links  - Code Samples<br />mouse click even...
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
Placemarks<br />
Placemark Structure<br />Placemark<br />Geometry<br />StyleSet<br />fundamental shape<br />GeometryStyle<br />visual look<...
Placemark Types<br /><ul><li>Diamond (point)
Arrow (point)
Icon (point)
Line
Polygon</li></li></ul><li>Diamond Placemark<br />Placemark<br />PointGeometry<br />StyleSet<br />DiamondStyle<br />
Arrow Placemark<br />Placemark<br />PointGeometry<br />StyleSet<br />ArrowStyle<br />
Icon Placemark<br />Placemark<br />PointGeometry<br />StyleSet<br />IconStyle<br />
Line Placemark<br />Placemark<br />LineStringGeometry<br />StyleSet<br />LineStyle<br />
Polygon Placemark<br />Placemark<br />PolygonGeometry<br />StyleSet<br />PolygonStyle<br />
Customizable Label<br />Placemark<br />PointGeometry<br />StyleSet<br />LabelStyle<br />DiamondStyle<br />
Customizable Callout Balloon<br />Placemark<br />PointGeometry<br />StyleSet<br />BalloonStyle<br />DiamondStyle<br />
Putting it all together<br />Placemark<br />Geometry<br />StyleSet<br />point<br />linestring<br />polygon<br />BalloonSty...
Placemarks - Code Examples<br />http://www.germanium3d.com/cxa2010/links  - Code Samples<br />
Hands-on Session<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
GermaniumWeb Playground<br />http://www.germanium3d.com/cxa2010/links  - Playground<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
How it Works<br />index.html<br />JSAPI<br />www.example.com<br />api.germanium3d.com<br />Web<br />Developer<br />+<br />...
A typical web environment<br />Webserver:JBoss/Apache/Tomcat/IIS<br />	scripts:PHP/Python/Perl/Ruby<br />Appserver:JBoss/W...
Common Web Dev Tasks<br />Setting up the server environment<br />Commonwebapp operations<br />Bringing your own building (...
Deploying</li></li></ul><li>1. Setting up the serverenvironment<br />
Setting up the server environment<br />index.html<br />www.example.com<br />/<br />- Apache<br />- MySQL<br />- PHP<br />w...
2. Common webapp operations<br />
Common webapp operations<br />Store local state, e.g. cookies<br />Provide user-specific interactions, e.g. sessions<br />...
Upcoming SlideShare
Loading in …5
×

GermaniumWeb training for CXA2010

1,008 views

Published on

GermaniumWeb training session for code::XtremeApps:: 2010 participants

Published in: Technology
  • Be the first to comment

  • Be the first to like this

GermaniumWeb training for CXA2010

  1. 1. Setup<br />Bookmarkhttp://www.germanium3d.com/cxa2010/links<br />Wi-Fi: Connect to rpguest network<br />Install a web debugger if you don’t have one:<br /><ul><li>Firebug for Firefox; or
  2. 2. IE Developer Tools for IE</li></ul>Training will begin at 10:00<br />
  3. 3. GermaniumWebTraining SessionIan LohTechnical Product Manager<br />
  4. 4. Why?<br />
  5. 5. Why GermaniumWeb?<br />
  6. 6. Geospatial mapping with Google Earth<br />
  7. 7. Interior mapping with GermaniumWeb<br />
  8. 8. What?<br />
  9. 9.
  10. 10.
  11. 11. JavaScript API<br />
  12. 12. How?<br />
  13. 13. How it Works<br />index.html<br />JSAPI<br />www.example.com<br />api.germanium3d.com<br />Web<br />Developer<br />+<br />IE User<br />GermaniumWebIE plugin<br />
  14. 14. How it Works<br />index.html<br />JSAPI<br />www.example.com<br />api.germanium3d.com<br />Web<br />Developer<br />+<br />+<br />GermaniumWebFirefox plugin<br />Firefox User<br />
  15. 15. +<br />+<br />IE User<br />GermaniumWebFirefox plugin<br />GermaniumWebIE plugin<br />Firefox User<br />
  16. 16. How it Works<br />index.html<br />JSAPI<br />www.example.com<br />api.germanium3d.com<br />Web<br />Developer<br />+<br />GermaniumWebFirefox plugin<br />Firefox User<br />
  17. 17. Basic Anatomy<br />
  18. 18. 1. Target the JavaScript API<br /><script<br />src="http://api.germanium3d.com/?v=1.4&key=your_API_key"><br /></script><br />
  19. 19. 2. Add a <div> to contain GermaniumWeb<br /><body><br /> <div id="germdiv"style="width:100%; height:100%"></div><br /></body><br />
  20. 20. 3. Initialize GermaniumWeb<br /><body onload="Init()"><br /><div id="germdiv" style="width:100%; height:100%"></div><br /></body><br /><script type="text/javascript"><br />vargerm = null;<br />functionInit() {<br />Germanium.CreateInstance("germdiv", OnInitOk);<br /> }<br />functionOnInitOk(webControl) {<br /> germ = webControl;<br /> }<br /></script><br />
  21. 21. 4. Load a building<br />functionOnInitOk(webControl) {<br /> germ = webControl;<br />germ.Load("http://www.germanium3d.com/static/sample/<br />generic_building/2.0/generic_building.xlcl");<br />}<br />
  22. 22. Complete Example<br />http://www.germanium3d.com/cxa2010/links<br />
  23. 23. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  24. 24. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  25. 25. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  26. 26. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  27. 27. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  28. 28. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  29. 29. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  30. 30. Buildings<br />
  31. 31. BuildingsBlocksLevels<br />
  32. 32. BuildingsBlocksLevels<br />
  33. 33. BBL Example: Office building<br />http://www.germanium3d.com/cxa2010/links - Office Building<br />
  34. 34. BBL Code Samples<br />http://www.germanium3d.com/cxa2010/links - Code Samples<br />
  35. 35. The Eye<br />
  36. 36. The Eye<br />
  37. 37. 3D Coordinate System<br />
  38. 38. 3D Coordinate System - Position<br />Right-hand, Y-up, in metres<br />
  39. 39. 3D Coordinate System - Position<br />Right-hand, Y-up, in metres<br />
  40. 40. 3D Coordinate System - Orientation<br />Default orientation of (0°, 0°, 0°) points down the negative z-axis<br />
  41. 41. 3D Coordinate System - Orientation<br />(0°, 45°, 0°) means a 45° rotation around the Y-axis<br />
  42. 42. 3D Coordinate System - Orientation<br />If you point right thumb in axis direction, <br />fingers will point in positive rotation direction<br />
  43. 43. 3D Coordinate System - Orientation<br />All possible rotation axes<br />
  44. 44. 3D Coordinate System - Orientation<br />To work in degrees instead of radians:<br />varright_angle = Germanium.DegreeToRadian(90);<br />
  45. 45. The Eye - Setting the position<br />http://www.germanium3d.com/cxa2010/links - Code Samples<br />“Let’s meet up here!”<br />
  46. 46. The Eye - Gliding<br />2 types –<br />Look at/from somewhereor<br />Look at something,e.g. a level, placemark<br /> - GlideTargetTo(),GlideEyeTo()<br /> - GlideEyeToFit()<br />
  47. 47. The Eye - Gliding<br />Specify parameters in an associative array<br />germ.GetEye().GlideEyeTo(<br />{<br /> position: [10, 0, 10],<br />targetDistance: 5,<br /> duration: 10, // 10 seconds<br />}<br />);<br />Full list of parameters in API documentation, under<br /> Eye > Specifying glide parameters<br />
  48. 48. The Eye - Gliding<br />http://www.germanium3d.com/cxa2010/links - Code Samples<br />
  49. 49. Break <br />
  50. 50. How do I get the position to glide to?<br />“I can see the point that I want, <br /> if only I could just click it!”<br />
  51. 51. How do I get the position to glide to?<br />Answer:<br />mouse click event<br />+<br />Eye.Compute3DIntersection()<br />“But… what are events?”<br />
  52. 52. Events<br />similar to callbacks,<br />tell you when something has happened<br />
  53. 53. Callback<br />“You do something, <br />tell me when you’re done”<br />
  54. 54. Event<br />“Tell me <br />every time<br />this thing happens”<br />
  55. 55. Load Callback vs Event<br />// Load callbacks<br />germ.Load(<br />url,<br />options,<br />successCallback,<br />failureCallback);<br />// Load event<br />germ.AddEventHandler(<br />Germanium.Event.OnLoadEnds,<br />eventHandler);<br />
  56. 56. Event Types<br /><ul><li>Mouse and Keyboard
  57. 57. Eye
  58. 58. File loading
  59. 59. BBL
  60. 60. Placemark and Callout
  61. 61. ClipPlane
  62. 62. Errors</li></ul>Full list of events in API documentation, under<br /> Event > Event names<br />
  63. 63. How do I get the position to glide to?<br />http://www.germanium3d.com/cxa2010/links - Code Samples<br />mouse click event<br />+<br />Eye.Compute3DIntersection()<br />
  64. 64. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  65. 65. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  66. 66. Placemarks<br />
  67. 67. Placemark Structure<br />Placemark<br />Geometry<br />StyleSet<br />fundamental shape<br />GeometryStyle<br />visual look<br />
  68. 68. Placemark Types<br /><ul><li>Diamond (point)
  69. 69. Arrow (point)
  70. 70. Icon (point)
  71. 71. Line
  72. 72. Polygon</li></li></ul><li>Diamond Placemark<br />Placemark<br />PointGeometry<br />StyleSet<br />DiamondStyle<br />
  73. 73. Arrow Placemark<br />Placemark<br />PointGeometry<br />StyleSet<br />ArrowStyle<br />
  74. 74. Icon Placemark<br />Placemark<br />PointGeometry<br />StyleSet<br />IconStyle<br />
  75. 75. Line Placemark<br />Placemark<br />LineStringGeometry<br />StyleSet<br />LineStyle<br />
  76. 76. Polygon Placemark<br />Placemark<br />PolygonGeometry<br />StyleSet<br />PolygonStyle<br />
  77. 77. Customizable Label<br />Placemark<br />PointGeometry<br />StyleSet<br />LabelStyle<br />DiamondStyle<br />
  78. 78. Customizable Callout Balloon<br />Placemark<br />PointGeometry<br />StyleSet<br />BalloonStyle<br />DiamondStyle<br />
  79. 79. Putting it all together<br />Placemark<br />Geometry<br />StyleSet<br />point<br />linestring<br />polygon<br />BalloonStyle<br />LabelStyle<br />GeometryStyle<br />diamond, arrow, icon<br />line<br />polygon<br />
  80. 80. Placemarks - Code Examples<br />http://www.germanium3d.com/cxa2010/links - Code Samples<br />
  81. 81. Hands-on Session<br />
  82. 82. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  83. 83. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  84. 84. GermaniumWeb Playground<br />http://www.germanium3d.com/cxa2010/links - Playground<br />
  85. 85. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  86. 86. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  87. 87. How it Works<br />index.html<br />JSAPI<br />www.example.com<br />api.germanium3d.com<br />Web<br />Developer<br />+<br />GermaniumWebFirefox plugin<br />Firefox User<br />
  88. 88. A typical web environment<br />Webserver:JBoss/Apache/Tomcat/IIS<br /> scripts:PHP/Python/Perl/Ruby<br />Appserver:JBoss/WebSphere/IIS<br /> logic: Java servlets/JSP/ASP.NET<br />Database:MySQL/MS SQL<br />index.html<br />JSAPI<br />Static files:.xlcl (Germanium buildings)<br />Feeds:Project Nimbus/<br />Google Data APIs<br />www.example.com<br />api.germanium3d.com<br />(GermaniumWeb API server)<br />Data formats:JSON, XML<br />data.example.com<br />(data server)<br />Browser:IE/Firefox/Chrome/Opera<br />Plugins:GermaniumWeb/Flash/Silverlight/Java<br />Client-side scripts:VBScript, JavaScript + jQuery/MooTools/YUI<br />User<br />
  89. 89. Common Web Dev Tasks<br />Setting up the server environment<br />Commonwebapp operations<br />Bringing your own building (BYOB)<br /><ul><li>Modeling
  90. 90. Deploying</li></li></ul><li>1. Setting up the serverenvironment<br />
  91. 91. Setting up the server environment<br />index.html<br />www.example.com<br />/<br />- Apache<br />- MySQL<br />- PHP<br />webserver<br />database<br />scripting language<br />-Apache<br />- MySQL<br />- PHP<br />JBoss<br />e.g. WAMP, LAMP, XAMPP<br />
  92. 92. 2. Common webapp operations<br />
  93. 93. Common webapp operations<br />Store local state, e.g. cookies<br />Provide user-specific interactions, e.g. sessions<br />Query live data from the server<br />Save user data to the server<br />Perform all of the above asynchronously<br />
  94. 94. 3. Bring Your Own Building<br />
  95. 95. Provided buildings<br />http://www.germanium3d.com/code/SampleBuildings<br />Shopping Mall<br />Office Building<br />Coming soon<br />NUS School of Computing<br />Republic Polytechnic<br />
  96. 96. BYOB - Modeling<br />Quick and easy way:<br />KML Building Importer<br />
  97. 97. BYOB - Modeling<br />Full 3D way:<br />COLLADA<br />
  98. 98. BYOB - Modeling<br />Real-time modeling guide<br />
  99. 99. 3. BYOB - Deploying<br />
  100. 100. BYOB – Deploying files<br />Things to look out for:<br />Use relative paths <br />Preserve directory structure<br />Check your filename capitalizatione.g. Floor.jpg vs floor.jpg<br />Hostedwebapps are not allowed to load local files<br /><ul><li>Local webapp -> local file OK
  101. 101. Hosted webapp -> local file Not allowed
  102. 102. Hosted webapp -> hosted file OK</li></li></ul><li>IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  103. 103. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
  104. 104. Please give feedback:http://tinyurl.com/cxagermsurvey<br />Questions?<br />blog.germanium3d.com<br />www.germanium3d.com/forum<br />technical:ianloh@gelement.com<br />business: shinwe@gelement.com<br />

×