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.

mago3D Technical Workshop Material(New Version)


Published on

This is the technical workshop material for mago3D, a web based open source GeoBIM platform. This material provides step-by-step hands-on guide including component installing, data converting, and data publishing. 4 hours are expected to complete this course.

Published in: Technology
  • Be the first to comment

mago3D Technical Workshop Material(New Version)

  1. 1. Page 1 Sanghee Shin( Hakjoon Kim( JeongDae Cheon( WorkShop Let’s Integrate BIM/AEC and 3D GIS on Your Web Browser!
  2. 2. Page 2 1. Architecture mago3D.JS Cesium/WWW Client internet Web Server WAS F4DStorage mago Content Management DataBase F4D Converter mago3D Core
  3. 3. Page 3  Convert ifc files(BIM standard interchange format) or .3ds / .obj / .dae files to F4D (traditional three-dimensional format) mago3D service-only format.  Perform pre-processing to lighten weight and improve rendering performance in conversion process 2. Core Component - F4D Converter F4D Converter F4D .3ds .obj .dae .ifc
  4. 4. Page 4 2. Core Component - mago3D JS  A Javascript-based plug-in that extends the 3D GIS engine to handle AEC data 4 mago3D.js 3D GIS Engines Cesium.js WorldWindWeb.js API API service html
  5. 5. Page 5 2. Core Component - Content Management System  Java Spring-based collaboration system for users, role management, data management, issue management, etc. User User User User User Site (issue Register) Admin Site (User, Role, Data,Issue, Reporter, etc) Separation of Network Network Cache Refresh HTTPS admin
  6. 6. Page 6 3. Product F4D Converter mago3DJS Content Managemt System  Used as a 3D rendering solution, specially in case that you want to insert 3D rendering part into any business systems already existing.  F4D Converter + mago3DJS, F4D Converter + Content Management System(Full Package)  A platform for handling large-sized 3D contents, which offers functionality about data managements.  F4D Converter + Property Extractor(IFC) + Content Management System + Technical Support 3D Data Converter Browser 3D Rendering Data DB Manager
  7. 7. Page 7 4. WorkShop  Install and run mago3D Community Edition (F4D Converter + mago3DJS) and learn how to use mago3D as a 3D rendering solution in interworking with your existing business system or in a new project.  It provides a brief overview of the key features of the mago3D Enterprise Edition (F4D Converter + Property Extractor (IFC) + Content Management System): data management, issue management, and role management.  OS : Window7 or later (64bit)  JRE: 1.8 or higher  Disk space: At least 2G  RAM : 8G or more (16G recommended)  3D Sample File(IFC, 3DS, Collada, Obj, JT Etc)  Internet connection
  8. 8. Page 8 5. Community Edition – Getting Start mago3D JS Cesium/WWW Client internet Business System Web Server Customer F4DStorage F4D Converter REST API Json (policy, data, etc)
  9. 9. Page 9 5. Community Edition – Getting Start  Using Community Edition(F4DConverter + mago3dDJS), we will deploy mago3DJS and publish 3D Data which are converted from sample IFC files through F4DConverter. Then, we can check published 3D data on our web browsers. 1) Editor or IDE Install 2) mago3D JS Source Download 3) Web Server Install 4) F4D Converter Install(.msi) 5) Data Conversion 6) Configuration Modification 7) mago3D JS build 8) Getting Start 9) API Example
  10. 10. Page 10  If you already have an editor in use, you can skip this step.  For mago3D development team, use Eclipse   Eclipse IDE for Java EE Developers  Java installation required (java8 version recommended)  If you do not have an editor, you can download the free open source editor Notepad ++ from the following site:  5. Community Edition – Getting Start
  11. 11. Page 11  Connect to, click on the Clone or download button  Select ‘Download ZIP’ and save zip file in ‘C:’  In case of using git : git clone  Branch: develop  Unzip and check the result  C:mago3djs 5. Community Edition – Getting Start
  12. 12. Page 12 5. Community Edition – Getting Start  Right-click on the Eclipse screen  Import -> General -> Projects from Folder Archive Select
  13. 13. Page 13  mago3D Community Edition requires a web server to run locally.  We use Node.js for the exercises.  Skip this process if you already have a web server in use.  Any web server capable of serving static content can be used  Connect to Window Installer (.msi) 64-bit Download. 5. Community Edition – Getting Start
  14. 14. Page 14  Install path : C:nodejs c:nodejs 5. Community Edition – Getting Start
  15. 15. Page 15  Run command prompt (cmd.exe) with administrative privileges  Go to C: mago3djs directory  Run node install to download the required modules C:mago3djs>npm install C:mago3djs>npm install -g gulp  The node_modules directory is created in the root directory 5. Community Edition – Getting Start
  16. 16. Page 16   Installer : F4D Converter 64bit (this installation requires Windows 7 or later)  Install 5. Community Edition – Getting Start
  17. 17. Page 17  Install Path : C:F4DConverter 5. Community Edition – Getting Start
  18. 18. Page 18 5. Community Edition – Getting Start
  19. 19. Page 19  If you have 3D data, use it If not Please download demo data from the following URL.  There are two files when decompressed. 5. Community Edition – Getting Start
  20. 20. Page 20  Create outputFolder, where converted result will be saved C:f4dworkshop(Create a directory for each project under the root folder f4d)  put sample ifc files into inputFolder(D:demo_f4d)  Run Command Line Prompt(cmd.exe) in Administrator mode  Change current directory to the directory where F4DConverter is installed  Create outputFolder, where converted result will be saved * all arguments : refer -inputFolder [rawDataFolder] : an absolute path of the folder where raw data files to be converted are. -outputFolder [F4DFolder] : an absolute path of the folder where conversion results(F4D datasets) are created. -log [logFileFullPath] : an absolute path of a log file which is created after finishing conversion processes. -indexing [one of Y, y, N, n] : wheter objectIndexFile.ihe should be created or not. "NOT created" is default. 5. Community Edition – Getting Start
  21. 21. Page 21  Run following 5. Community Edition – Getting Start Do Not Close
  22. 22. Page 22 ※ If component missing errors (MFC140U.dll, MSVCP140.dll, VCRUNTIME140.dll, MSVCP100.dll) occrur when you start F4DConverter.exe, install following two packages.  visual studio 2015 visual C++ redistributable package  visual studio 2010 visual C++ redistributable package 5. Community Edition – Getting Start
  23. 23. Page 23  Can see Processes running in Task Manager  Ends when execution finishes 5. Community Edition – Getting Start
  24. 24. Page 24  If the data conversion succeeded  Confirm creation of F4D_XXX folders and ObjectIndexFile.ihe file in C:f4dworkshop folder  If it fails, check the log file (logTest.txt) from D:demo_f4d (inputFolder).  Create a symbolic link for the F4D data folder to make the folder be used as a data folder of web service in mago3DJS project.  Using cmd.exe in administrator mode, change current directory to C:mago3djs  C:mago3djs>mklink /d "C:mago3djsf4d" "C:f4d"  Check if the symbol ‘C:mago3djsf4d’ is created by ‘dir’ command. 5. Community Edition – Getting Start
  25. 25. Page 25  In Enterprise Edition, operation policy & data management are on RDB(Postgresql + PostGis) In case of mago3D Community Edition, it manages mago3D operation policy and data through API interworking with other business system. The mago3D Community Edition provides the same results as the API linkage in Mock form Json to execute simply on the developer's local PC and check the function.  Community Edition has two types of configuration files. mago3D JS is a policy.json file that deals with Rendering related settings and data.json which is responsible for Location information of Data  You need to modify the policy.json and data.json files. 5. Community Edition – Getting Start
  26. 26. Page 26  Modify policy.json(C:mago3djssampletutorialworkshop-policy-cesium.json)  Project to be loaded at initialization, Init Camera Latitude, Longitude, CallBack Function, Geo Server setting, etc.  Use C:mago3djssampletutorialworkshop-policy-cesium.json for practice  Project setting key value to load when initializing page. If you want to load multiple projects, add to  Where to go when starting a web page (latitude, longitude) 5. Community Edition – Getting Start F4D Data path Init Project File Name
  27. 27. Page 27 5. Community Edition – Getting Start  Modify data.json(C:mago3djssampletutorialworkshop.json)  It has information of F4D files created by running F4 Converter (instead of Database)  Contains spatial information (Data Key, Name, Latitude, Longitude, Altitude, Heading, Pitch, Roll), properties, and sub data of the data sets included in Project.  mago3D Concept and relationship of Project, Data used in data.json  Project – Each data is defined as a logical group according to purpose. (It is the same concept as a department in a general company.)  data - Each data that the web browser will display (Employees belonging to department in general company)
  28. 28. Page 28 5. Community Edition – Getting Start  Relationship between project and data in workshop.json Primary Key(Project Table) FOREIGN KEY(Data Table) 1 : N
  29. 29. Page 29 5. Community Edition – Getting Start  Relationship between project and data in workshop.json If you look in the C:f4d directory There is a directory called workshop Within it are the F4D_SOCIALROOM, F4D_STUDENTROOM directories. here project = workshop data1 = SOCIALROOM data2 = STUDENTROOM
  30. 30. Page 30  C:mago3djssampletutorialworkshop.json File Contents  The first node of the json file describes information about the project, and the second node describes the information about the data.  There are three main areas: Attributes that store attribute values, Children that store child node information, Area for storing other location information  The data_key of the root node of json should match the project name(directory name) under the c:f4d directory  project is a logical concept and isPhysical = false data is physically present and isPhysical = true 5. Community Edition – Getting Start attribute areas child node areas geo info areas project name(PK)
  31. 31. Page 31  C:mago3djssampletutorialworkshop.json  data_key becomes Primary Key in Database  The characters after F4D_ in the directory name are Unique identifiers  In the workshop.json file, modify the data_key value of children to SOCIALROOM, STUDENTROOM  Modify spatial information of data (SOCIALROOM, STUDENTROOM) latitude, longitude, height, heading, pitch, roll, etc 5. Community Edition – Getting Start (Required) same name Mapping
  32. 32. Page 32  Build automation tools for front-end web development include webpack, grunt, gulp, bower, and yeoman  mago3D JS uses Gulp  /gulpfile.js  clean, combine, uglify, doc, and lint.  Jsdoc for Document Creation  Use ESLint for coding conventions.  Use Jasmine for testing. Scheduled to write test code 5. Community Edition – Getting Start
  33. 33. Page 33  Using eclipse Run Gulp Task as shown on the right screen  If you are not using eclipse After running Command Prompt, go to Mago3djs project directory C:mago3djs>run gulp  build succeeds, build directory is created.  build completed using mago3d.js 5. Community Edition – Getting Start
  34. 34. Page 34  Let's create start.html to start the web service.  Open /mago3djs/tutorials/start.html using the editor.  First, to use cesium, include css, javascript <link rel="stylesheet" href="../demo.css" /> <link rel="stylesheet" href="../../src/engine/cesium/Widgets/widgets.css" />  Second, include to include jquery <script type="text/javascript" src="../../externlib/jquery/jquery.js"></script>  Third, include mago3djs <script type="text/javascript" src="../../src/engine/cesium/Cesium.js"></script> <script type="text/javascript" src="../../build/mago3d/mago3d.js"></script>  Generate DIV area to 3D render on html page <div id="magoContainer" class="mapWrap"></div> <canvas id="objectLabel"></canvas> 5. Community Edition – Getting Start
  35. 35. Page 35  Create mago3D JS instance 5. Community Edition – Getting Start The div id to display the cesium map Load configuration file
  36. 36. Page 36  Run the web server (node server)  Using eclipse Right click on /server.js> Run As> Node.js Run the application  When running as a Command Prompt  Check the URL page below in your Chrome browser http://localhost/sample/tutorial/start.html mago3djs installDirectory 5. Community Edition – Getting Start
  37. 37. Page 37 5. Community Edition – Getting Start  http://localhost/sample/tutorial/start.html
  38. 38. Page 38  Let's apply the API to display the bounding box.  See the mago3D homepage API documentation  Click changeBoundingBoxAPI on the left menu  Add html form tag to set BoundingBox on / off <div style="text-align: center; padding-bottom: 10px;"> <form id="apiForm" name="apiForm" action="" onsubmit="return false;" > <span style="padding-right: 20px;">BoundingBox</span> <input type="radio" id="showBoundingBox" name="boundingBox" value="true“ onclick="changeBoundingBox(true);" /> <label for="showBoundingBox"> Display </label> <input type="radio" id="hideBoundingBox" name="boundingBox" value="false“ onclick="changeBoundingBox(false);" /> <label for="hideBoundingBox"> Hide </label> </form> </div> 5. Community Edition – Getting Start
  39. 39. Page 39  Adding BoundingBox API Javascript function changeBoundingBox(isShow) { changeBoundingBoxAPI(managerFactory, isShow); }  Check the URL page below in your Chrome browser http://localhost/sample/tutorial/api-boundingbox.html 5. Community Edition – Getting Start
  40. 40. Page 40  workshop, 3ds This is an example of using various api with two projects. 3ds data is not attached and some functions may not work. If you want to configure the UI using mag3DJS, please refer to it.  http://localhost/sample/tutorial/all-features-and-debug.html 5. Community Edition – Getting Start
  41. 41. Page 41 5. Community Edition – End Coffee Break
  42. 42. Page 42 6. Enterprise Edition - S/W DB Postgresql 9.6 + PostGIS Web Server Nginx 1.12.1 / Apache 2.4 Language Java8 Framework Spring(Springboot) + Mybatis Build Gradle Log Logback/Log4j2 Security ESAPI Report Jasper/POI View JSP/JSTL UI/UX Jquery Chart Jqplot/Axisj Template Thymeleaf Handlebars Geo Server Geo Server OS Centos 7.2 mago3D JS Html5, JavaScript, 3D GIS Engine(Cesium, WorldWind) Cache EhCache, Redis F4D ConverterC++ WAS Tomcat 8.5
  43. 43. Page 43 7. Enterprise Edition - Introduction  A brief introduction to installation  Describe how to register data and manage issues using F4D Converter + Property Extractor(IFC) + Content Management System 1) Install 2) Dashboard, policy configuration 3) Data management 4) Issue management 5) Role Based Access Control configuration
  44. 44. Page 44 7. Enterprise Edition - Introduction  java 2133151.html java jdk-8u144-windows-x64.exe  eclipse Eclipse IDE for Java EE Developers 64bit  gradle v4.1
  45. 45. Page 45 7. Enterprise Edition - Introduction  postgresql downloads#windows 9.6.5  postgis  Lombok 1.16.18  source download
  46. 46. Page 46 7. Enterprise Edition - Introduction  do ‘Project Import’ after running eclipse File -> import -> Gralde -> Existing Gradle Project  DB Table creation and initialization  Move to the folder ‘/mago3d-core/src/doc’ in downloaded source  Run dbinit.bat  For more information, Reference
  47. 47. Page 47 7. Enterprise Edition - Introduction  CMS is composed of 3 projects parent project admin common user
  48. 48. Page 48 7. Enterprise Edition - Introduction  Build the project using Eclipse BuildShip Gradle Plugin or Gradle command line  Run mago3d-admin project spring boot /mago3d-admin/src/main/java/com/gaia3d/  Access to http://localhost/login/ with web browser  initial id & password is in /mago3d-core/src/doc/database/dml/insert.sql Refer /mago3d-admin/src/test/java/com/gaia3d/ to know how to generate admin password & salt
  49. 49. Page 49 7. Enterprise Edition - Introduction  Provides various management functions such as project, data, user, RBAC, and log.
  50. 50. Page 50 7. Enterprise Edition - Introduction  User policy, password policy, spatial information, GeoServer, security policy, etc.  policy.json of mago3JS is a change of operation policy information into json file
  51. 51. Page 51  Manage data such as new registration, property management, status change, modification, deletion by grouping.The data.json of mago3JS is a json file of data  by data group 7. Enterprise Edition - Introduction
  52. 52. Page 52 7. Enterprise Edition - Introduction  Manage user registered issues.  You can check progress status, priority, deadline, and contact person for each issue
  53. 53. Page 53 7. Enterprise Edition - Introduction  Register users for each user group and assign a role to each group.  The user request authority judges whether the corresponding role exists in the user group