Your SlideShare is downloading. ×
0
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

GermaniumWeb training for CXA2010

781

Published on

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

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
781
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • GermaniumWeb is not a 3D engine like WebGL, O3D, Unity3DIt is an mapping engine like Google Earth or Bing Maps 3D, but specialized for interiorsThat means you don’t have to learn advanced 3D graphics and deal with triangles and shaders, learn complex 3D coordinate systems.You do get easy access to rich functionality such as placemarks and the eye/camera.
  • … of an app. Let’s take a look at the conceptual steps to getting GermaniumWeb into your webpage.
  • When the HTML has been loaded, call the Init() function.TheInit() function puts GermWeb into the prepared div, and asks the API to call the OnInitOk function when ready. The OnInitOk function receives the WebControl, which is the master plugin object.
  • Ask the WebControl object to download & load a building.
  • Mouse guide:LMB: pan laterallyMMB: orbitRMB: zoom
  • That was the introduction to GermaniumWeb
  • The other things you’ll learn today are
  • how to manipulate buildings and the eye
  • how to use placemarks to mark an important part of the building
  • Then we’ll briefly go through other features not covered by this training
  • And cover issues to be aware of while developing your webapp
  • So let’s start with buildings.
  • Germanium models the world as collections of buildings, blocks, and levels. Buildings (or rather, building complexes) are made of blocks. Blocks are made of levels, stacked vertically. This is very intuitive and fits with our common understanding of ‘a building’.For short, we refer to them as ‘BBL’ objects.
  • Note that buildings are modeled beforehand, and just loaded into the app at runtime. At runtime, you merely manipulate the loaded model, e.g. turning on/off levels , move the eye to take a closer look at level 2, etc.We will cover building modeling in the app development issues later.
  • So that was the view of the BBL through a webpage interface. So how do you as a developer get access to the BBL to program its behaviour?BBLid – Unique within its parent’s scope, so to specify a level, you need its building, block, and level bblid. Specified by modeler, e.g. using Building ComposerFor Generic office and the other buildings on our website, you can find out the bblids using their viewer appsFor other buildings, can use the code snippet on our interactive sampler on our website.Introduce API Documentation when showing Level. Show how to get there on website.Introduce callback functions.Samples: Load a buildingHide a levelHide other levels
  • So now that we know how to show Level 2, and hide the levels above it, we want to show our user something on Level 2, e.g. a meeting area. In other words, we want to bring Germanium’s eye over to the room.
  • First up, is the Eye itself.The eye consists of several parameters:positionorientationtarget distancetarget position - which can be derived, or set directlyGermanium allows you to set the target position because you usually want to tell the eye to look at something rather than where to go.Right now we’re only concerned with the target position, because we want to look at the meeting area. This position is specified in Germanium’s
  • … 3D Coordinate System.
  • Arrows point in the positive direction.
  • How do you remember which direction to rotate?
  • Personally I find it easier to remember the thumbscrew rule. After all, I carry my fingers around with me everywhere, not a diagram 
  • Germanium’s coordinate system works in radians. If you’re like me, and you prefer to think in degrees, there’s a convenient function to convert it for you.
  • Just accept the 3D coordinates for now, I’ll explain later how to get them.In this sample, you can see several things going on, so let’s take a closer look at them one by one.Samples:Set a target positionGlide to a target position
  • Setting the position directly is bad as it makes users lose their orientation. Far better to animatedly bring your users from where they are to what you want to show them. To do this, we use the glide functions. If you’re familiar with Google Earth, they call this feature “fly-to”.
  • The glide functions make use of the JavaScript feature called associative arrays, which is just a fancy way of saying key-value pairs.
  • Samples:Glide to a levelGlide to a level with orientation
  • Break from 1100-1120 or 1500-1520
  • Previously the coordinates were just provided. Here’s how to get them. So, you can see the position you want, so how do you get the 3D coordinates of that point?
  • Germanium does tell you when the user clicks, and where in the window s/he clicked. With the help of Compute3DIntersection(), you can convert this to 3D coordinates.Let’s take a look the 2 parts one by one. First up are events.
  • Events are very similar to theCreateInstance and Load callbacks we’ve already seen. Both events and callbacks tell you when something has happened.
  • Events not only tell you when something has happened, they give you more information about the event, e.g. mouse button, window coordinates, etc.This click + Compute3DIntersection combination is very useful, as we’ll see later in the placemarks.Samples:1. Get clicked position
  • Placemarks allow you to annotate the building and mark out places of significance.
  • Placemark – name, description, contentGeometry - the fundamental shape of the placemark, e.g. when you’re concerned with ‘Where Am I?’ you’re thinking of a 3D coordinate position. Whether it looks like a diamond, arrow, or icon, is unimportant at this time.GeometryStyleapplies a visual look to the geometry. Similar to HTML and CSS.
  • Can control color and shape of the diamond.
  • Can control color and shape of the arrow.
  • Icons are useful when you want the placemark to look the same size no matter how far away you are.Can use practically any image on the web.
  • Can apply line patterns.Can animate.
  • Specify vertices, Germanium will fill in the polygon. Can also extrude.
  • Samples:All placemark samplesFor more code examples, http://www.germanium3d.com/code/LinePolygonConcepts
  • Hands-on Session from 1200-1220 or 1600-1620
  • Auto-rotationSolid background color, SkyboxOrthographic viewFirst Person NavigationClip Planes
  • This section is for people who don’t already have a web development environment.
  • …tasks you will probably have to perform for the competition.It’s also possible that your webapp will be very simple, don’t need live data or to save data, you can skip all this and just run a single machine.
  • If you do need a server environment and don’t already have one, here’s what we recommend.
  • When you develop a real web or mobile application, you will very likely need to perform some common tasks or operations. I’ll just be listing some of the most common ones, so if you don’t already know how to do them, you can prepare for the competition by trying them out.
  • #2 – GMail = 100% user-specific. Google My Maps = partially user-specific.#5 – Desired behaviour rather than an operation.
  • This step is Germanium-specific, for those of you who want to Bring Your Own Building
  • How to place geopositioned data on SoC:http://www.germanium3d.com/forum/viewtopic.php?f=2&t=399
  • Allowed to do this before competition
  • We also have a real-time modeling guide on our website, which gives pointers on how to optimize your building model.
  • So after modeling, you need to deploy the building file on a server. Or if you want to make a local copy of our sample buildings on your own server.
  • Transcript

    • 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. IE Developer Tools for IE</li></ul>Training will begin at 10:00<br />
    • 3. GermaniumWebTraining SessionIan LohTechnical Product Manager<br />
    • 4. Why?<br />
    • 5. Why GermaniumWeb?<br />
    • 6. Geospatial mapping with Google Earth<br />
    • 7. Interior mapping with GermaniumWeb<br />
    • 8. What?<br />
    • 9.
    • 10.
    • 11. JavaScript API<br />
    • 12. How?<br />
    • 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. 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. +<br />+<br />IE User<br />GermaniumWebFirefox plugin<br />GermaniumWebIE plugin<br />Firefox User<br />
    • 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. Basic Anatomy<br />
    • 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. 2. Add a <div> to contain GermaniumWeb<br /><body><br /> <div id="germdiv"style="width:100%; height:100%"></div><br /></body><br />
    • 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. 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. Complete Example<br />http://www.germanium3d.com/cxa2010/links<br />
    • 23. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 24. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 25. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 26. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 27. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 28. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 29. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 30. Buildings<br />
    • 31. BuildingsBlocksLevels<br />
    • 32. BuildingsBlocksLevels<br />
    • 33. BBL Example: Office building<br />http://www.germanium3d.com/cxa2010/links - Office Building<br />
    • 34. BBL Code Samples<br />http://www.germanium3d.com/cxa2010/links - Code Samples<br />
    • 35. The Eye<br />
    • 36. The Eye<br />
    • 37. 3D Coordinate System<br />
    • 38. 3D Coordinate System - Position<br />Right-hand, Y-up, in metres<br />
    • 39. 3D Coordinate System - Position<br />Right-hand, Y-up, in metres<br />
    • 40. 3D Coordinate System - Orientation<br />Default orientation of (0°, 0°, 0°) points down the negative z-axis<br />
    • 41. 3D Coordinate System - Orientation<br />(0°, 45°, 0°) means a 45° rotation around the Y-axis<br />
    • 42. 3D Coordinate System - Orientation<br />If you point right thumb in axis direction, <br />fingers will point in positive rotation direction<br />
    • 43. 3D Coordinate System - Orientation<br />All possible rotation axes<br />
    • 44. 3D Coordinate System - Orientation<br />To work in degrees instead of radians:<br />varright_angle = Germanium.DegreeToRadian(90);<br />
    • 45. The Eye - Setting the position<br />http://www.germanium3d.com/cxa2010/links - Code Samples<br />“Let’s meet up here!”<br />
    • 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. 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. The Eye - Gliding<br />http://www.germanium3d.com/cxa2010/links - Code Samples<br />
    • 49. Break <br />
    • 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. 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. Events<br />similar to callbacks,<br />tell you when something has happened<br />
    • 53. Callback<br />“You do something, <br />tell me when you’re done”<br />
    • 54. Event<br />“Tell me <br />every time<br />this thing happens”<br />
    • 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. Event Types<br /><ul><li>Mouse and Keyboard
    • 57. Eye
    • 58. File loading
    • 59. BBL
    • 60. Placemark and Callout
    • 61. ClipPlane
    • 62. Errors</li></ul>Full list of events in API documentation, under<br /> Event > Event names<br />
    • 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. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 65. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 66. Placemarks<br />
    • 67. Placemark Structure<br />Placemark<br />Geometry<br />StyleSet<br />fundamental shape<br />GeometryStyle<br />visual look<br />
    • 68. Placemark Types<br /><ul><li>Diamond (point)
    • 69. Arrow (point)
    • 70. Icon (point)
    • 71. Line
    • 72. Polygon</li></li></ul><li>Diamond Placemark<br />Placemark<br />PointGeometry<br />StyleSet<br />DiamondStyle<br />
    • 73. Arrow Placemark<br />Placemark<br />PointGeometry<br />StyleSet<br />ArrowStyle<br />
    • 74. Icon Placemark<br />Placemark<br />PointGeometry<br />StyleSet<br />IconStyle<br />
    • 75. Line Placemark<br />Placemark<br />LineStringGeometry<br />StyleSet<br />LineStyle<br />
    • 76. Polygon Placemark<br />Placemark<br />PolygonGeometry<br />StyleSet<br />PolygonStyle<br />
    • 77. Customizable Label<br />Placemark<br />PointGeometry<br />StyleSet<br />LabelStyle<br />DiamondStyle<br />
    • 78. Customizable Callout Balloon<br />Placemark<br />PointGeometry<br />StyleSet<br />BalloonStyle<br />DiamondStyle<br />
    • 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. Placemarks - Code Examples<br />http://www.germanium3d.com/cxa2010/links - Code Samples<br />
    • 81. Hands-on Session<br />
    • 82. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 83. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 84. GermaniumWeb Playground<br />http://www.germanium3d.com/cxa2010/links - Playground<br />
    • 85. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 86. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 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. 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. Common Web Dev Tasks<br />Setting up the server environment<br />Commonwebapp operations<br />Bringing your own building (BYOB)<br /><ul><li>Modeling
    • 90. Deploying</li></li></ul><li>1. Setting up the serverenvironment<br />
    • 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. 2. Common webapp operations<br />
    • 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. 3. Bring Your Own Building<br />
    • 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. BYOB - Modeling<br />Quick and easy way:<br />KML Building Importer<br />
    • 97. BYOB - Modeling<br />Full 3D way:<br />COLLADA<br />
    • 98. BYOB - Modeling<br />Real-time modeling guide<br />
    • 99. 3. BYOB - Deploying<br />
    • 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. Hosted webapp -> local file Not allowed
    • 102. Hosted webapp -> hosted file OK</li></li></ul><li>IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 103. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development<br />
    • 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 />

    ×