Cockpit Tutorial Exported on June 10, 2020 Prepared by: The DiSTI Corporation 11301 Corporate Blvd., Suite 100 Orlando, FL 32817 Information in this document is the property of The DiSTI Corporation and should be considered confidential and proprietary. Copyright 2020 The DiSTI Corporation. All rights reserved. Cockpit Tutorial Table of Contents 1 Download the Completed Project........................................................................... 7 2 Download the Tutorial Resources........................................................................... 8 3 Creating a New Project for the Cockpit Tutorial .................................................... 9 3.1 Using the GL Studio Editor's New Project Feature ...................................................................... 9 3.2 The Project File structure: ........................................................................................................... 11 3.3 User-Created Workflow Bundles ................................................................................................. 11 4 ADI........................................................................................................................... 12 4.1 Purpose......................................................................................................................................... 12 4.2 Setting up the Project .................................................................................................................. 12 4.3 Object Development .................................................................................................................... 13 4.3.1 Create the Bezel ...........................................................................................................................................................13 4.3.2 Create the ADI Ball .......................................................................................................................................................18 4.3.3 Create a Light Source...................................................................................................................................................24 4.3.4 Create the Horizontal Bar ............................................................................................................................................26 4.3.5 Build and Run...............................................................................................................................................................27 4.4 Code Development ...................................................................................................................... 27 4.4.1 Add the Testing Property.............................................................................................................................................27 4.4.2 Add Properties to Handle Pitch/Roll...........................................................................................................................28 4.4.3 Calculate.......................................................................................................................................................................30 4.4.4 Including the Utility Functions of glsutil.h..................................................................................................................31 4.4.5 Build, Run, and Test.....................................................................................................................................................32 4.5 What You Learned ........................................................................................................................ 32 5 Altimeter................................................................................................................. 33 5.1 Purpose......................................................................................................................................... 33 5.2 Object Development .................................................................................................................... 33 5.2.1 Create the Bezel ...........................................................................................................................................................34 5.2.2 Create the Electric/Pneumatic Switch........................................................................................................................37 5.2.3 Create the Barometric Pressure Setting Knob ...........................................................................................................42 Copyright 2020 The DiSTI Corporation. All rights reserved. – 2 Cockpit Tutorial 5.2.4 Create the Altimeter Needle ........................................................................................................................................46 5.2.5 Create the Altimeter Odometer...................................................................................................................................48 5.2.6 Create the Barometer Reading Odometer..................................................................................................................53 5.2.7 Create the Pneumatic / Electric Flag...........................................................................................................................56 5.2.8 Create the Gauge Shadows .........................................................................................................................................58 5.2.9 Build and Test ..............................................................................................................................................................62 5.2.10 Code Development ......................................................................................................................................................62 5.2.11 Add Testing Property ...................................................................................................................................................62 5.2.12 Add Properties to Handle Altitude and Barometer ....................................................................................................63 5.2.13 Initialize ........................................................................................................................................................................65 5.2.14 Calculate.......................................................................................................................................................................65 5.2.15 Including the Utility Functions of glsutil.h..................................................................................................................65 5.2.16 Object Callbacks ..........................................................................................................................................................66 5.3 What You Learned ........................................................................................................................ 69 6 MFD ......................................................................................................................... 70 6.1 Purpose......................................................................................................................................... 70 6.2 Object Development .................................................................................................................... 71 6.2.1 Build the Frame............................................................................................................................................................72 6.2.2 Create the MFD Buttons...............................................................................................................................................77 6.2.3 Build the Brightness Switch ........................................................................................................................................81 6.2.4 Create the Display Mutex Group..................................................................................................................................85 6.2.5 Add Page Changing Logic and Callbacks....................................................................................................................86 6.2.6 Generate, Build, and Test ............................................................................................................................................88 6.3 Build the MFD Pages .................................................................................................................... 88 6.3.1 PFD Page.......................................................................................................................................................................88 Create the Sky/Horizon Component...........................................................................................................................89 Build the Center Point .................................................................................................................................................95 Build the Roll Indicator ................................................................................................................................................98 6.4 Generate, Build, and Test .......................................................................................................... 101 6.4.1 Create the Pitch Ladder Component ........................................................................................................................101 6.4.2 Generate, Build, and Test ..........................................................................................................................................108 Copyright 2020 The DiSTI Corporation. All rights reserved. – 3 Cockpit Tutorial 6.4.3 Create the Airspeed Ladder Component ..................................................................................................................108 6.4.4 Generate, Build, and Test ..........................................................................................................................................116 6.4.5 Create the Altitude Ladder Component....................................................................................................................116 Generate, Build, and Test ..........................................................................................................................................120 Create the EHSI Component......................................................................................................................................120 Add Component Properties.......................................................................................................................................130 6.4.6 Generate, Build, and Test ..........................................................................................................................................131 6.4.7 ENG Page ....................................................................................................................................................................132 Create the Radial Gauge Component .......................................................................................................................133 Generate, Build, and Test ..........................................................................................................................................141 Create the Bar Gauge Component ............................................................................................................................141 6.4.8 Generate, Build, and Test ..........................................................................................................................................148 Place the Components into the Page .......................................................................................................................149 Initialize the Gauges...................................................................................................................................................150 6.4.9 Build the Bar Graph Frame ........................................................................................................................................153 6.5 Code Development .................................................................................................................... 154 6.5.1 Add the Component and Testing Properties ............................................................................................................154 6.5.2 Initialize ......................................................................................................................................................................157 6.5.3 Calculate.....................................................................................................................................................................158 6.5.4 Brightness Switch Callback .......................................................................................................................................159 6.5.5 SetGlow Method.........................................................................................................................................................160 6.5.6 Generate, Build, and Test ..........................................................................................................................................161 6.6 What You Learned ...................................................................................................................... 161 7 3D Cockpit Tutorial .............................................................................................. 162 7.1 Purpose....................................................................................................................................... 162 7.2 Object Development .................................................................................................................. 162 7.2.1 Import the 3-D Geometry...........................................................................................................................................163 7.2.2 Create Light Source....................................................................................................................................................165 7.2.3 Import Existing GL Studio Designs ............................................................................................................................166 7.2.4 Create the Eyepoints..................................................................................................................................................181 7.3 Import the Navigation Components ......................................................................................... 187 Copyright 2020 The DiSTI Corporation. All rights reserved. – 4 Cockpit Tutorial 7.3.1 Create the Multi-View.................................................................................................................................................190 7.3.2 Create the Event-Catcher Group ...............................................................................................................................191 7.4 Code Development .................................................................................................................... 192 7.4.1 Add the Testing Property...........................................................................................................................................192 7.4.2 Class Variables ...........................................................................................................................................................193 7.4.3 Class Properties .........................................................................................................................................................194 7.4.4 Class Methods ............................................................................................................................................................198 7.4.5 Initialize ......................................................................................................................................................................200 7.4.6 Calculate.....................................................................................................................................................................201 7.4.7 Defining Global Variables in cockpit_3dApp.cpp .....................................................................................................203 7.4.8 Including the Utility Functions of glsutil.h................................................................................................................203 7.4.9 Object Callbacks ........................................................................................................................................................204 7.5 Generate, Build, and Test .......................................................................................................... 208 7.6 What You Learned ...................................................................................................................... 209 Copyright 2020 The DiSTI Corporation. All rights reserved. – 5 Cockpit Tutorial • • • • • Creating a New Project for the Cockpit Tutorial ADI Altimeter MFD 3D Cockpit Tutorial Copyright 2020 The DiSTI Corporation. All rights reserved. – 6 Cockpit Tutorial 1 Download the Completed Project Download Completed Cockpit Tutorial (Windows) Copyright 2020 The DiSTI Corporation. All rights reserved. Download Completed Cockpit Tutorial (Linux) Download the Completed Project – 7 Cockpit Tutorial 2 Download the Tutorial Resources These resources are used in the creation of the ADI, Altimeter, and the MFD. Download Cockpit Tutorial Resources Feedback, Please! Welcome to the DiSTI Support Site. We are redeveloping our documentation for online use. If you have suggestions for new content, or ideas for improving the existing pages, please contact us at support@disti.com. Our goal is constant improvement! Copyright 2020 The DiSTI Corporation. All rights reserved. Download the Tutorial Resources – 8 Cockpit Tutorial 3 Creating a New Project for the Cockpit Tutorial GL Studio supports two different development workflows: 1. An engineering workflow for software developers using GL Studio, typically working alongside a graphic artist who supplies art assets. The engineering workflow assumes coding knowledge and is centered around a thirdparty tool such as Microsoft Visual Studio® or make for Windows and Linux, respectively. 2. A UI designer workflow for designers using GL Studio without coding, but typically working with a software developer writing backend code, object behaviors, and scripts. Building, running, and deploying can be done all within GL Studio itself. Either workflow can also be used for cockpit creation, and this tutorial covers using the engineering workflow to create a cockpit. Additionally, GL Studio supports code generation for desktop, embedded, and safety critical systems. This tutorial covers using desktop generation exclusively. 3.1 Using the GL Studio Editor's New Project Feature The GL Studio Editor supports Project Bundles. These are used to begin a new project with a fully functional build system and additional project customizable features, ready to use. This is the recommended approach for new GL Studio users, unless one of the other mechanisms provides a necessary capability. Step 1: Click the Create a New Project button or select File → New Project to display the New Project dialog. New Project dialogue Step 2: From the New Project dialog, select the DefaultGlsProject.zip file from the Project Bundle drop-down menu. Step 3: In the Project name field, type the desired title for the project, the name entered cannot be the same as another project in the selected project directory. Copyright 2020 The DiSTI Corporation. All rights reserved. Creating a New Project for the Cockpit Tutorial – 9 Cockpit Tutorial Step 4: In the Project Directory field, browse to or type the path to the project directory then click Create. The DefaultGlsProject.zip file is extracted and the contents coped to the project directory. The GL Studio editor opens the default GLS file and the custom objects display in the Toolbox and Toolbar. Step 5: Click the Run button in the toolbar at the top of the screen. This will build and run the project. Note About Extended Unicode, ASCII Characters, and Network Paths The Project Directory path cannot support extended Unicode and ASCII characters. Please specify directory paths that do not use these characters. The Project Directory path also cannot support network paths. Resources Provided In the DefaultGlsStarter Project AddBehaviorPopup: Allows easily adding a behavior to the selected object. ASEReference: Imports DSI/ASE files and updates when the file changes. CopyPasteReference: Comprises python scripts to copy data describing the current selection for use by the corresponding paste action. The paste action pastes a previously copied reference as an external reference. DeploymentSupportCommon: Contains the Runner script which allows for starting and killing built programs DesktopDeployment: Comprises environment scripts that will be invoked depending on the user's selection, to build the project into an executable. GenerationSupportDesktop: Desktop identifies all exported files from a GL Studio document for the Desktop C++ generator GenerationSupportES: Comprises Collectors which identifies all exported files from a GL Studio document for the Embedded C++ generator. EditorThreadUtil: Simplifies threaded access to the Editor ExternalGLSRef: Duplicates the content of the specified GLS file into this catalyzer and refreshes when the source file changes. Comprises ConvertToPrefab which moves selected objects to an external gls file and replaces them with a reference to that file and CreateExternalRefObject which creates a catalyzer that refers to an external GLS file. LocalObjectref: References: a local object in the same GLS file. LocalWebServer: Sets up a web server on the specified port and serves specified directories and logs POSTs to stdio.html NineDotPng: Creates a GlsNinePatch object based on the data from the .9.png. PregenSpheresAndCylindersToMeshes: Creates a GL Polygon sized to fit the specified texture file. PSDImporter: Imports from Adobe Photoshop files and updates with changes when the PSD file changes. WebGLDeployment: Creates a SCons Environment suitable for creating a WebGL/Emscripten target. Copyright 2020 The DiSTI Corporation. All rights reserved. Creating a New Project for the Cockpit Tutorial – 10 Cockpit Tutorial 3.2 The Project File structure: The project created from CustomWorkflowStarter.zip is laid out like this: - ArtAssets - Contains all the textures, 3D Models, and fonts to use in the example. - Engineering\Deployments - This folder contains build scripts for several platforms, and this is the place to add a new deployment platform. - The Python-based build system found in these folders is called SCons. More information on SCons is available at: http://scons.org/doc/production/HTML/scons-user.html - Within each deployment folder (e.g., Desktop), there is an SConstruct file, which is the SCons analog to a makefile. Users can add their own additional source files, libraries, etc. to it as needed. It then uses the appropriate tool chain (e.g., Visual Studio, gcc) to build the project. - Also within each deployment folder, the build scripts create a folder named dist and place all the files for distributing the application – namely, the executable or RSO and the resources folder for external images, GlsAdvancedMesh data, GL Studio ES's GLO files, etc. This folder is removed when the project is cleaned. The build scripts should copy any additional resources that the application needs (e.g., application configuration files, translation lookup tables) from their permanent location into this folder at build time so the application can find them when it runs. - After the project is built a Visual Studio project is automatically created in the Engineering\Deployments\Desktop\visualc directory. This project can be used for debugging and developing non-generated code. • Command line build and run scripts • Files that enable the users to add external code without additional effort • Anything GL studio generates as part of the project, for example human readable code or art assets brought in via drag-and-drop • Alternate classes that encapsulate custom behaviors for objects • Scripts to create custom objects in GL Studio (for example, the Catalyzers) • Project scripts to handle drag-and-drop functions, and external file connection - Layout - Contains all the GL Studio design files for the example - default.glsproj – Describes project specific buttons. New buttons can be added here as needed. - ProjectConfiguration.py – Contains specifics of the directory layouts, some settings, etc. 3.3 User-Created Workflow Bundles The user may create their own custom starter bundles that contain the starting .gls files, a custom set of packages, and other assets for new projects. The file bundle must be saved in the .zip format and must contain a Layout folder. For Windows, store the custom bundle.zip file in %LOCALAPPDATA%\Programs\DiSTI\GLStudio7.0\projects. For Linux, store it in ~/.local/share/ DiSTI/GLStudio7.0/projects. The user-created bundles will be available from the Project Bundle drop-down menu. Copyright 2020 The DiSTI Corporation. All rights reserved. Creating a New Project for the Cockpit Tutorial – 11 Cockpit Tutorial 4 ADI 4.1 Purpose This section will guide the user in creating an ADI instrument using basic techniques within the GL Studio Editor. Some of the concepts demonstrated are: • • • • • • Creating GL Studio Primitive objects Using texture mapping primitives Creating GlsLightSource objects Using Gouraud Shading Using lighting for a scene Creating User Defined Class Properties Completed ADI 4.2 Setting up the Project To begin, create a project named CockpitTutorial. For information on how to set up the project in Windows and Linux, refer to Creating a New Project. Inside the project directory, navigate to the ArtAssets/Textures folder and copy over everything from the CockpitTutorialResources/textures folder which can be downloaded on the Cockpit Tutorial Page. Then paste those items into your corresponding GL Studio folder. Next Navigate to the ArtAsset/3DModels folder of your project and copy over everything from the CockpitTutorialResources/3DModels folder. Then paste those items into your corresponding GL Studio folder. Finally navigate to Layout folder of your Project and copy over all of the .gls files from the CockpitTutorialResources/ Layout folder. Paste those itms into your corresponding GL Studio Folder. Copyright 2020 The DiSTI Corporation. All rights reserved. ADI – 12 Cockpit Tutorial 4.3 Object Development The ADI is the simplest instrument to create in these tutorials. It is comprised of three GL Studio primitives and a single GlsLightSource object and gives a good introduction into the concepts GL Studio employs to create increasingly complicated content. Step 1: In the Geometry tab, click on the group WizardCreated_PleaseDelete and press the Delete key to remove the group. Do the same with the object title main view, leaving an empty design. Step 2: Open the Application tab. Change the window title to adi, and set the initial size of the window to 512x512. Step 3: Open the Document Preferences dialog box by clicking on the small arrow button to the right of the Toggle Grid button. In this dialog box, set the background color to white, set the grid spacing to 1.0, and uncheck Show Grid. ADI Document Preferences 4.3.1 Create the Bezel The surrounding bezel is comprised of a single GLPolygon object with a texture applied to it. Step 1: Select the Rectangle tool from the Toolbox. Notice that the mouse cursor now changes to a crosshair when moved over the 3D Canvas tab window. Step 2: Create a square 512 by 512 units by clicking and dragging in the 3D Canvas tab window. Holding the Shift key while dragging will ensure that the polygon created is a perfect square. Look at the base of the main window to see the object size as its being drawn. Alternatively, select Tools→Transform→Scale to enter the dimensions manually. Copyright 2020 The DiSTI Corporation. All rights reserved. ADI – 13 Cockpit Tutorial 'adi_panel' Polygon A good way to create a polygon of an exact size is to first create a polygon of any size. Ensure you have Selection Mode enabled . Then, right-click on the polygon in the 3D Canvas and select Transform→Scale... from the pop-up menu. You can then input an exact size for the polygon. Scale mode in the transform pop-up menu Step 3: Rename the object to adi_panel by first selecting the newly created GLPolygon in the Geometry tab and then clicking again to edit the name. By default, GL Studio objects are given a generated name that is the type of the object appended by the next available number. For instance, creating three GLPolygons will result in the generated names polygon, polygon1, and polygon2. Copyright 2020 The DiSTI Corporation. All rights reserved. ADI – 14 Cockpit Tutorial 'adi_panel' Geometry Tab Step 4: By default, GLPolygon objects are created with the Draw Mode property set as Outline. Change the Draw Mode property in the Object Properties tab to Filled. This will eliminate the outline drawn at the outer extents of the polygon. 'adi_panel' Polygon Step 5: Applying a texture to the adi_panel object is done by selecting the object in the Geometry tab and clicking the Choose... button next to the Texture Chooser property in the Object Properties tab. Texture Chooser's Ellipses Button Copyright 2020 The DiSTI Corporation. All rights reserved. ADI – 15 Cockpit Tutorial This will open the Texture Chooser dialog. Texture Chooser Dialog Choose a texture to load into the editor by selecting the Add Texture button. This will bring up a File Chooser dialog that will load the selected textures into the editor. Navigate to the ArtAssets/Textures folder and select both adi.png and adi_ball.png by holding Ctrl, and click Open. The two textures have now been loaded into the editor. Select the adi.png image in the Texture Chooser window and click OK. 'adi.png' Texture Selected Step 6: The texture should now be applied to the adi_panel object, but the aspect ratio is distorted. To correct this, click the Actual Size button in the Texture Adjustment property in the Object Properties tab. This will map the texture 1:1 in the editor. Copyright 2020 The DiSTI Corporation. All rights reserved. ADI – 16 Cockpit Tutorial Texture Adjustment Property Adjustments to the placement of the texture can be made by selecting Texture Placement Mode Canvas' mode section. in the 3D This will place the editor into Texture Placement Mode, which allows the texture location to be dragged along the object’s surface. Use the mouse cursor to position the section of the texture that contains the bezel surround to the center of the adi_panel object. 'adi.png' Texture Mapped and Positioned If the texture is larger than the geometry it is applied to, a ghost image of the currently applied texture will display anywhere there is not geometry for it to be drawn on. This is to aid in the texture placement for objects. Copyright 2020 The DiSTI Corporation. All rights reserved. ADI – 17 Cockpit Tutorial Step 7: On the Object Properties tab in the Appearance Settings section, change the Pick Mode property for the adi_panel object to Unpickable. Since nothing on the bezel itself is interactive, setting this object to Unpickable will optimize the run-time picking algorithm by skipping this object when determining which object was picked in a scene. It is good practice to do this for any object that does not explicitly handle any input from the user at run-time. 4.3.2 Create the ADI Ball The next step is to create the ADI ball by using a textured GlsSphere object. Step 1: Select the Sphere tool from the Toolbox. This will create a sphere object when clicking and dragging in the 3D Canvas tab. Click and drag to create a GlsSphere object near to the center of the bezel where the ball would fit. Size is not important when first creating the sphere. Fine adjustments to the object will be made in the Properties table of the Object Properties tab. 'adi.png' Texture Mapped and Positioned Step 2: Rename the object to adi_ball. Step 3: The next step is to fine-tune the properties for adi_ball on the Object Properties tab. Change the Draw Mode to Filled in the Object Properties tab. Change the Radii values to 172.00. This is the size needed to properly fill the adi_panel object. Change the Stacks property to 50. Change the Slices property to 50. Change the Texture Minification to Linear Mipmap Linear. Copyright 2020 The DiSTI Corporation. All rights reserved. ADI – 18 Cockpit Tutorial Draw Mode, Enable Lighting, Gouraud Shading, Radii, Slices, and Stack properties in 'adi_ball' Object Properties Tab Fine-Tuning the Properties for 'adi_ball' on the Object Properties Tab with Minification and Mapping properties Change the Mapping Technique to Modulate. This will ensure lighting and Gouraud Shading are drawn properly. Be sure and leave the Enable Lighting property unselected for now. Turning this property on now will result in a black sphere, because there are no light sources in the scene to illuminate the object. This will be turned on once there is a light placed in the scene in the next section. Check the Gouraud Shading property to enable Gouraud Shading. Copyright 2020 The DiSTI Corporation. All rights reserved. ADI – 19 Cockpit Tutorial Step 4: The next step is to apply the appropriate texture. Click the Choose... button for the Texture Chooser property and select the adi_ball.png texture. Choosing the adi_ball.png Texture This will map the texture to the sphere. Expand the Texture Adjustment property, if it is not already expanded, and click the Stretch To Fit button. Copyright 2020 The DiSTI Corporation. All rights reserved. ADI – 20