Skip to content

Latest commit

 

History

History
152 lines (127 loc) · 6.76 KB

installation_administration.md

File metadata and controls

152 lines (127 loc) · 6.76 KB

Introduction

This document describes the installation and administration of the Interface Designer GE.

System Requirements

Hardware Requirements

Since this GE is application-oriented, and serves for manipulating a 3D scene, any recent PC/Mac configuration that is capable of 3D rendering is considered as a minimum system requirement.

Operating System Support

Any operating system that is supported by the target WebGL-enabled browser.

Software Requirements

The interface designer GE is currently implemented specifically for Web Rocket / Web Tundra and XML3D scenes.

A WebGL-enabled browser, which includes, but not limited to:

  • Google Chrome 9+
  • Mozilla Firefox 4.0+
  • Safari 6.0+ (WebGL disabled by default)
  • Opera 11+ (WebGL disabled by default)

Other internal dependencies which are included in the release package (but pointed out here for reference) are:

Software Installation and Configuration

  • Download the package from the Interface Designer FIWARE Catalogue or clone the Git repository. The package contains all necessary dependencies, and the directory structure is as follows:

      ROOT/
      doc/
          index.md
          installation_administration.md
          user_programmers.md
      docker/
          Dockerfile
          docker.md
  	lib/
  	    skin-win8/
  	        icons.gif
  	        loading.gif
  	        ui.fancytree-org.css
  	        ui.fancytree.css
  	    classy.js
  	    FileSaver.min.js
          intro.js
          introjs.min.css
  	    jquery-ui.js
  	    jquery.ui-contextmenu.min.js
  	    jquery.fancytree-all.min.js
  	    jquery.js
  	    three-TransformControls.js
  	    vkbeautify.0.99.00.beta.js
  	    xml3d.tools.js
  	    xml3d.js
  	resources/
  	    ball.xml
  	    cone.xml
  	    cube.xml
  	    cylinder.xml
  	conf.json
     	COPYRIGHT
  	InterfaceDesigner-main.js
  	LICENSE
      mkdocs.yml
  	README.md
  	WebTundraEditor.webtundrajs
  	XML3DEditor.js
  	xml3dExample.html

WebTundra

XML3D

  • The xml3dExample.html is a complete ready-to-use example containing an HTML page that has an empty XML3D scene with Interface Designer installed. Let's breakdown the code for better understanding.

  • First, the CSS styles are added for jquery UI, jquery.fancytree and styling of the mainContent div:

      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="lib/skin-win8/ui.fancytree.css">


  <style>
		#mainContent {
  	    position: absolute;
  	    top: 0; right: 0; bottom: 0; left: 0;
  	}
  </style>

  • Later, the XML3D library is always added '''BEFORE''' all other libraries:

      <script type="text/javascript" src="lib/xml3d.js"></script>
  <script type="text/javascript" src="lib/xml3d.tools.js"></script>
  <script type="text/javascript" src="lib/jquery.js"></script>
  <script type="text/javascript" src="lib/jquery-ui.js"></script>
  <script type="text/javascript" src="lib/jquery.fancytree-all.min.js"></script>
  <script type="text/javascript" src="lib/jquery.ui-contextmenu.min.js"></script>
  <script type="text/javascript" src="lib/FileSaver.min.js"></script>
  <script type="text/javascript" src="lib/vkbeautify.0.99.00.beta.js"></script>
  <script type="text/javascript" src="lib/classy.js"></script>

  • Lastly, XML3DEditor.js and InterfaceDesigner-main.js are added as last:

      <script type="text/javascript" src="lib/InterfaceDesigner-main.js"></script>
  <script type="text/javascript" src="lib/XML3DEditor.js"></script>

  • This example uses XML3D Tools' Mouse/Keyboard Fly controller (camera). It is added in the window's 'load' event:

      <script type="text/javascript">
  	window.addEventListener('load', function() {
  	    var cameraTransformable = XML3D.tools.MotionFactory.createTransformable($("#mainCamera")[0]);
  	    var camera = new XML3D.tools.MouseKeyboardFlyController(cameraTransformable, { moveSpeed: 0.2, rotateSpeed: 2 });
  	    camera.attach();
  	    // XML3D editor instance
  	    var editor = new XML3DEditor({
  	        mainContent: "mainContent",
  	        canvas: "mainCanvas",
  	        resourcesPath: "resources/"
  	    });
  	}, false);
  </script>
  <!-- etc etc... -->

  • In the 'load' event, an instance of XML3DEditor is made that accepts an options JSON: mainContent is the variable that will hold the ID of the main <div> element, canvas holds the ID of the main <xml3d> element, and resourcesPath the path to the resources folder that comes with the package.

      var editor = new XML3DEditor({
      mainContent: "mainContent",
      canvas: "mainCanvas",
      resourcesPath: "resources/"
  });

  • Finally, we have the "main scene" in <body> element. It consists of a <div> element with ID mainContent that has only one child element <xml3d> with ID mainCanvas that will contain the whole XML3D scene:

      <body>
 		<div id="mainContent">
  	   <xml3d xmlns="http://www.xml3d.org/2009/xml3d" id="mainCanvas" activeView="#cameraView" style="width:100%; height:100%;background-color:white;">
  	       <defs>
  	           <transform id="cameraTransform"></transform>
  	       </defs>
  	       <group id="mainCamera" transform="#cameraTransform">
  	           <view id="cameraView"></view>
  	       </group>
  	   </xml3d>
 		</div>
  </body>

Sanity check procedures

As a verification that everything was installed correctly, pressing the shortcut "Shift" + "S" should open up the scene editor, and should be ready to use. If you use the above XML3D example, you will come across an empty scene.