Newer
Older
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- Documentation of advanced Operator Panel items. -->
<link rel="stylesheet" type="text/css" href="../layout/stylesheet.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced OperatorPanel items in AutoFOCUS3 (AF3)</title>
</head>
<div class="header">
<div class="box">
<div class="navbar">
<!--a href="https://www.fortiss.org/" align="left">
<img src="fortiss-logo.png" width="90px" height="20px" align="left">
</a-->
<div class="dropdown">
<button class="btn" id="hamburger">
<label for="hamburger" class="hamburger">
<span class="hamburgerLine"></span>
<span class="hamburgerLine"></span>
<span class="hamburgerLine"></span>
</label>
</button>
<div class="dropdown-content">
<a href="../getting_started.html"> Main Page</a>
<a href="../ModandSim/model_element_attributes.html">Modeling and Simulation</a>
<a href="../ta/technical_viewpoint.html">Deployment and Code Generation</a>
<a href="../dse/dse_perspective.html">Design Space Exploration (DSE)</a>
<a href="../assuranceCases/creation.html">Assurance Case Modeling</a>
<a href=".././af3_further_resources.html">Further Resources</a>
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Modeling and Simulation <i class="triangle"></i></button>
<div class="dropdown-content">
<a href="model_element_attributes.html">Introduction to Graphical Modeling Interface</a>
<a href="component_architecture.html">Component Architecture Modeling</a>
<a href="data_dictionary.html">Data Dictionary: Types and Functions</a>
<a href="code_specification.html">Behavior Modeling -> Code Specifications</a>
<a href="state_automaton.html">Behavior Modeling -> State Automata</a>
<a href="hierarchical_state_automaton.html">Behavior Modeling -> Hierarchical State Automata</a>
<a href="mode_automaton.html">Behavior Modeling -> Mode Automata</a>
<a href="simulation_with_af3.html">Simulation -> Simulation</a>
<a href="operatorpanels.html">Simulation -> Operator Panels</a>
<a href="cosimulation_with_af3.html">Simulation -> Co-Simulation and FMI Support</a>
<a href="refactoring.html">Refactoring</a>
<a href="model_markers_view.html">On-the-fly Checks</a>
</div>
</div>
<div class="topnav-right">
<a href="mailto:af_user@lists.fortiss.org?subject=Reporting 'operatorpanels_advanced.html' Documentation Problem!&body= Dear Af3 team, I am reporting an issue related to 'modelling and simulation'.
{Please specify the problem precisely here.}.">Report a Problem?</a>
</div>
</div>
</head>
</div>
</div>
<div class="box">
<button onclick="topFunction()" id="upBtn" title="Go to top">Top</button>
<h2>Advanced Operator Panels Items</h2>
<p>The following explanations assume that you are familiar with the basics of <A HREF="operatorpanels.html">Using Operator Panels</A>.
Use the <B>Operator Panel Example</B> model from the file menu to access the model used here. This tutorial covers the following operator panel items:
<I>2D Area Input</I>, <I>2D Graph Viewer</I>, <I>3D Viewer</I></p>
<img src ="./pictures/opa-items.png">
<h4>2D Area Input</h4>
<P>
The 2D area input item allows to user to move a cursor within a rectangular or quadratic area
and thereby select two input values at the same time.</p>
<p>For example, this input item can be used to model a steering stick or joystick.</p>
<p>The area input works for three different types: <I>boolean</I>, <I>int</I>, and <I>double</I>.</p>
<p>The following picture shows the simulation view of the area input item for each type.</p>
<p>During the simulation the black circular cursor can be moved by <B>dragging</B> the mouse across the input area.</p>
<img src ="./pictures/opa-area-input-sim.png">
<p> <B>Double-clicking</B> in one of the grid areas makes the cursor jump to the minimum, center, and maximum value of the area input.<BR></p>
<p>For example, the center grid of the int type item makes the cursor jump to the (0,0) location, while the upper-right grid makes it jump to the (100, 100) location.</p>
<P>
For the boolean type item the exact location of the cursor is not relevant, only the grid is evaluated and interpreted as one of the
three possible port values: <I>false</I>, <I>NoVal</I>, or <I>true</I>.</p>
<p>For the int and double type item the exact position of the cursor is interpreted with the respective interval (-100 to 100, or 0.0 to 1.0).</p>
The following picture shows the property section of the area input item:</p>
<img src ="./pictures/opa-area-input-prop.png">
<p> In the <B>type</B> field the item type is specified. Enter <I>boolean</I>, <I>int</I>, or <I>double</I> here.</p>
<p>In the <B>output</B> field the port values are assigned by using the user input stored in the <I>_this_X</I> and <I>_this_Y</I> variables.
<p> Here, you can scale the input to the values required by the application or you can use the raw value and add another component to your system, which does the scaling.
Note that the display of the area input will always show the values depicted above, not the values you compute for output ports.
Therefore, the second option is possibly the more intuitive one, since the user will see his entered values directly on the output channels.</p>
<h4>2D Graph Viewer</h4>
<p>The 2D Graph Viewer output item allows to plot numeric values with an oscilloscope-like display.
The following picture shows the simulation output of the 2D graph viewer item.
Note that it may take a few seconds to initialize the OpenGL font, the first time you open this simulation view.</p>
<img src ="./pictures/opa-graph-viewer-sim.png">
<p> The input to this component over time is a counter from 0 to 360 degree, which is plotted in the graph view from -180 to +180.
The following picture of the property section of the 2D graph viewer item shows how this output is computed:</p>
<img src ="./pictures/opa-graph-viewer-prop.png">
<p> In the <B>type</B> field the item type is specified. Enter <I>boolean</I>, <I>int</I>, or <I>double</I> here.
In the <B>sample value</B> field the displayed value is computed from the input port values.<BR>
The <B>samples per grid</B> value specifies how many time steps should be displayed in each horizontal section of the grid.<BR>
The <B>levels per grid</B> value specifies how many value units should be displayed in each vertical section of the grid.<BR>
In the <B>line color</B> field you can specify the red, green, and blue color component of the line color (each value is between 0.0 and 1.0).<BR>
In the <B>number of horizontal grids</B> field you specify how many grid fields should be displayed horizontally. Adapt this value to the size you have chosen for the panel item. Enter one to get rid of the grid. <BR>
In the <B>number of vertical grids</B> field you specify how many grid fields should be displayed vertically above and below the horizontal axis. In the example there are four grids above and four below the origin line. Again, enter one to get rid of the grid.<BR>
</p>
<h4>3D Object Viewer</h4>
</p>
The 3D Object Viewer output item allows to render simple 3D scenes with imported meshes and translations, rotations, and scalings computed from input port values. The 3D Viewer comes with its own editor, which you can access by double-clicking the item in the operator panel editor or the model navigator.</p>
<p>The following picture is showing the example scene during the simulation:</p>
<img src ="./pictures/opa-scene-viewer-sim.png">
<p>The scene shows the following objects from the <I>Camera1</I> perspective:
<UL>
<LI>a yellow sphere in the the center</LI>
<LI>a blue sphere, which circles the yellow one in the X-Y-plane</LI>
<LI>four white cubes, which are added as references for the X-Y-plane</LI>
<LI>another white cube, which shows the location of the light source</LI>
<LI>a hint to hit the <I>TAB</I> key to cycle through the cameras</LI>
</UL>
</p>
<p> The scene contains two cameras: the static <I>Camera1</I> (looking at the origin from a small distance along the positive Y axis) and the moving <I>Camera2</I> (looking a the origin from a small distance along the X axis and pitching from -20 to 20 degree below and above the X-Y-plane).
The whole animation is driven by a counter component, which counts from zero to 360 and back to zero.
From this input value all object positions are derived using rotation object nodes (see below).
</p>
<p>The following picture shows the scene editor of the example.</p>
<img src ="./pictures/opa-scene-viewer-editor.png">
<p>You can drag objects and display nodes from the library view to scene editor tree.</p>
<img src ="./pictures/opa-scene-viewer-lib.png">
<p> Note that you have to drop <I>Cubes</I> and <I>Spheres</I> onto the <I>3D Viewer</I> tree entry, not the loaded objects entry.
You can replace the cube or sphere objects with arbitrary meshes from 3D modeling tools (like Blender) as described below.</p>
<h5>World Coordinates</h5>
<p>The whole scene uses a world coordinate system with the positive Z axis being the upward direction of cameras.
In other words the X-Y-plane is the surface of the scene world. Camera perspective is fixed to a 45 degree field of view with the near distance set to 0.5 and the far distance set to 400.0.</p>
<h5>Cameras and Lights</h5>
<p>Each scene needs a least one camera, which means that the scene graph must contain at least one <I>Camera Node</I>.
Cameras are defined by specifying an eye position and a look target location, which may not be the same (i.e. they define a vector).
If you want the camera to be translated and/or rotated, you should set either the eye or the target location to the origin and the other one unit away in either X or Y direction.
See <I>Camera0</I> in the example for moving camera with fixed target location.</p>
<img src ="./pictures/opa-scene-viewer-camera-prop.png">
<p> The scene viewer can be used with or without using the OpenGL light engine.
You can switch the use of light using the property section of the <I>3D Viewer</I> tree item.
There you can also set the ambient light intensity when the light is turned on.
If the light is turned off, the ambient component of the material of loaded objects will be used as color (see next section).</p>
<p>
A light source can be specified by adding a <I>Light Node</I> to the scene graph. There is a maximum of <B>8 lights</B> currently supported.
With the property section you can specify the properties of the light source, in particular, its ambient, diffuse, and specular intensities/colors as well as the attenuation coefficients.</p>
<img src ="./pictures/opa-scene-viewer-light-prop.png">
<p>Note that lights can also be positioned in the scene by using transformations (see below).</p>
<h5>Objects and Materials</h5>
<p>Objects in the scene are built from meshes (i.e. sets of triangles).
More complex objects can be loaded from external files using the button from the property.
See below for information on how to export proper meshes from the Blender 3D modeling tool.</p>
<img src ="./pictures/opa-scene-viewer-obj-prop.png">
<p>Each object's triangles are associated with a material, which describes the objects reaction to light sources.
These values are imported when the object is loaded, but can be changed in the editor.</p>
<img src ="./pictures/opa-scene-viewer-material-prop.png">
<p>If the light engine is disabled the ambient component of the material is used as color.
Each loaded object is instantiated in the scene graph by adding <I>Object Nodes</I>.
The property section of the object node references a loaded object by name.
Note that loaded objects can be used by multiple object nodes with each node possibly being transformed differently.
For example, the white cube is used five times in the tutorial model.</p>
<h5>Transformations: Translation, Rotation, and Scaling</h5>
<p>You can move or animate objects by specifying transformation nodes.
Each such nodes applies its transformation to the model view matrix of OpenGL before its sub-components are processed.
There transformations can be chained to allow to draw any object at any location, rotation and size.
Furthermore, the values for the transformation can be computed from input port values, which allows animation.</p>
<p> The following picture shows the rotation node properties for the blue sphere (the rotation angle is taken from the input port <I>angle</I>):</p>
<img src ="./pictures/opa-scene-viewer-rot-prop.png">
<p>The property sections of translations and scalings work similar.
The X, Y, and Z values can also be computed from input port values.</p>
<h5>Using Blender to replace Object meshes.</h5>
<p>
When using Blender to produce the objects to be shown in the 3D Viewer make sure you trianlges and all the normal vectors point in the right direction.
Here is an example picture from the default cube with normals pointing outward.</p>
<img src ="./pictures/opa-scene-viewer-blender-cube.png">
<p> Before you can import your mesh in the 3D viewer, you must export it from Blender into the Wavefront format (.OBJ object and .MTL material files).
Make sure the edges, normals and materials are exported and the mesh has triangulated faces (if you haven't done so during editing).
Here is an example of the export options that were tested for AF3.</p>
<img src ="./pictures/opa-scene-viewer-blender-export.png">
<p>You are advised to export your mesh with correct up axis.</p>
</div>
<script src="../layout/jsscript/topBtn.js">
</script>