Newer
Older
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<link rel="stylesheet" type="text/css" href="../layout/stylesheet.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>OperatorPanels 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>
</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_advanced.html">Simulation -> Advanced 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.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>
<p>The following sections discuss how to create <i>Operator Panel Specification</i> to allow the user to interact with the environment.</p>
<h4>Creating an Operator Panel Specification</h4>
<p> In order to create an Operator Panel you first have to create an appropriate component to contain it.
In most cases it is ideal to create the enclosing component next to your actual model and then connect this component's outputs to your model's inputs and vice versa.</p>
<img src ="./pictures/op-compcreation.png">
<p> Afterwards right click on the newly created component in the model tree on the left and add an "Operator Panel".</p>
<img src ="./pictures/op-speccreation.png">
<br>
<h4>Populating the Operator Panel with items</h4>
<p>Once you have added an operator panel to your component and opened it, you may drag & drop an item from the Model Elements View on the right.
Place and size the items to your needs and use labels to annotate your widgets. Aside from buttons these will be the only text displayed later during simulation.</p>
<p> There are two type of operator panel items:
<UL>
<LI><i>Input Operator Panel Items:</i> These items display data that is input data to the enclosing component, which in general is output data from your model.
<LI><i>Output Operator Panel Items:</i> These items create output from the enclosing component that can be input to your model.
</UL>
<img src ="./pictures/op-pushbtneditor.png">
<img src ="./pictures/op-pushbtnsim.png">
<p>In the property section you can enter the text displayed on the button using the comments text field. More importantly you can enter one or multiple outputs to be performed
upon button selection. In all other times the output assigned will be <code>NoVal</code>.</p>
<h4>Toggle Button</h4>
<img src ="./pictures/op-togglebtneditor.png">
<img src ="./pictures/op-togglebtnsim.png">
<p>The property section of the toggle button allows entering two output patterns which are performed on selection or deselection respectiveley.</p>
<p>The state behavior flag unchecked causes
these outputs to be performed only once upon de-/selection and in all other times <tt>NoVal</tt> will be assigned. If the state behavior is checked the appropriate output is held until
the user toggles the button and the other pattern is performed and held.</p>
<h4>Term Input</h4>
<img src ="./pictures/op-iterminputeditor.png">
<img src ="./pictures/op-iterminputsim.png">
<p>The term input item offers a text field to specify input during simulation.
The user's input is evaluated as an expression term, e.g., Present() or 5, and assigned as an output port value.
The type of the expression and the output pattern are specified when defining the item in the operator panel editor.
The variable <code>_this</code> holds the value of the text field and can be assigned the port directly
or as part of a more complex output pattern.</p>
<p> Say the specified type is <tt>int</tt> then the following output pattern would be possible:</p>
<tt>port1 = _this; port2 = _this * 2; port3 = _this / 3</tt>
<h4>Color Display</h4>
<img src ="./pictures/op-colordisplayeditor.png" style='height: auto; width: 100%; object-fit: contain'>
<img src ="./pictures/op-colordisplaysim.png">
<p>This item allows you to assign colors to certain input patterns. Switch to the <i>Reactions</i> tab inside the property section and add lines by clicking the Add button.
In the guards column you can specify the input pattern and in the color column you can open the system color picker.</p>
<p>Use the Up and Down buttons to rearrange multiple rows as the input patterns are evaluated top down and the first matching pattern's color will be displayed.</p>
<h4>Text Display</h4>
<img src ="./pictures/op-textdisplayeditor.png">
<img src ="./pictures/op-textdisplaysim.png">
<p>This item allows you to textually display output data. Multiple patterns can be entered using the Reactions tab in the property section and again mind the order of your patterns as they will
be evaluated top down.</p>
<p>For simply displaying a port's value leave blank the guard column and enter the port's name in the Item input column.</p>
<p>But more complex assignments - even taking multiple ports into account - are possible as well. For a port of type <tt>int</tt> the following set of guards and item inputs would be possible:
<table>
<tr>
<td><i>Guard</i></td>
<td> </td>
<td><i>Item input</i></td>
</tr>
<tr>
<td>port >0 && port < 10</td>
<td> </td>
<td>port</td>
</tr>
<tr>
<td>port >= 10 && port < 100</td>
<td> </td>
<td>port / 10</td>
</tr>
<tr>
<td>port >= 100 && port < 1000</td>
<td> </td>
<td>port / 100</td>
</tr>
<h4>Using the Operator Panel in a simulation</h4>
<p>Switch to a new simulation and unfold the tree until you see the enclosing component with the operator panel icon. You can either double click or use the context menu to open the operator panel.</p>
<img src ="./pictures/op-opensimview.png">
<p>Now you can either run or step through your simulation, alter your model's inputs and observe its behavior.</p>
<img src ="./pictures/op-simview.png">
<script src="../layout/jsscript/topBtn.js">
</script>