blob: a9ecc80c52aee327b16c952ce76501d98f4e6bea [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>eTrice Documentation</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/metisMenu.min.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/prettify.css"/>
<link rel="stylesheet" type="text/css" href="css/custom.css"/>
<link rel="stylesheet" type="text/css" href="css/custom-common.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" style="padding-bottom: 2px; padding-top: 4px;" href="introduction.html"><img style="height: 100%;" src="images/logo/etrice-logo-interim.png"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="introduction.html">Online Documentation</a></li>
<li><a href="http://www.eclipse.org/forums/eclipse.etrice">Newsgroup</a></li>
<li><a href="https://www.eclipse.org/etrice/">eTrice Home</a></li>
<li><a href="https://www.eclipse.org/etrice/download.php">Downloads</a></li>
<li><a href="https://git.eclipse.org/c/etrice/org.eclipse.etrice.git/">Git repository</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="sidebar" role="navigation">
<ul class="nav metismenu" id="sidebarMenu">
<li><a href="introduction.html" aria-expanded="false">Introduction <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="introduction.html#etrice-overview" aria-expanded="false">eTrice Overview <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="introduction.html#what-is-etrice-">What is eTrice?</a></li>
<li><a href="introduction.html#reduction-of-complexity">Reduction of Complexity</a></li>
</ul>
</li>
<li><a href="introduction.html#introduction-room-language" aria-expanded="false">Introduction ROOM Language <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="introduction.html#scope-of-room">Scope of ROOM</a></li>
<li><a href="introduction.html#basic-concepts">Basic Concepts</a></li>
<li><a href="introduction.html#execution-models">Execution Models</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="tutorials.html" aria-expanded="false">Tutorials <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="tutorials.html#working-with-the-tutorials">Working with the tutorials</a></li>
<li><a href="tutorials.html#getting-started-c">Getting Started C</a></li>
<li><a href="tutorials.html#getting-started-c-">Getting Started C++</a></li>
<li><a href="tutorials.html#getting-started-java">Getting Started Java</a></li>
<li><a href="tutorials.html#tutorial-ping-pong-java-c-and-c-" aria-expanded="false">Tutorial Ping Pong Java, C and C++ <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="tutorials.html#scope">Scope</a></li>
<li><a href="tutorials.html#create-the-structure">Create the structure</a></li>
<li><a href="tutorials.html#implement-the-behavior">Implement the Behavior</a></li>
<li><a href="tutorials.html#summary">Summary</a></li>
</ul>
</li>
<li><a href="tutorials.html#troubleshooting">Troubleshooting</a></li>
</ul>
</li>
<li><a href="standalone-generators.html">Standalone Generators</a></li>
<li><a href="examples.html" aria-expanded="false">Examples <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="examples.html#the-c-examples-project" aria-expanded="false">The C examples project <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="examples.html#traffic-light-step-1">Traffic light - step 1</a></li>
<li><a href="examples.html#traffic-light-step-2">Traffic light - step 2</a></li>
<li><a href="examples.html#traffic-light-step-3">Traffic light - step 3</a></li>
<li><a href="examples.html#traffic-light-step-4">Traffic light - step 4</a></li>
<li><a href="examples.html#features">Features</a></li>
</ul>
</li>
<li><a href="examples.html#the-java-examples-project" aria-expanded="false">The Java examples project <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="examples.html#dynamic-actors-1">Dynamic Actors 1</a></li>
<li><a href="examples.html#dynamic-actors-2">Dynamic Actors 2</a></li>
<li><a href="examples.html#dynamic-actors-3">Dynamic Actors 3</a></li>
<li><a href="examples.html#dynamic-actors-4">Dynamic Actors 4</a></li>
<li><a href="examples.html#dynamic-actors-5">Dynamic Actors 5</a></li>
<li><a href="examples.html#dynamic-actors-6">Dynamic Actors 6</a></li>
<li><a href="examples.html#dynamic-actors-7">Dynamic Actors 7</a></li>
<li><a href="examples.html#dynamic-actors-8">Dynamic Actors 8</a></li>
<li><a href="examples.html#dynamic-actors-9">Dynamic Actors 9</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="room-concepts.html" aria-expanded="false">ROOM Concepts <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="room-concepts.html#actors">Actors</a></li>
<li><a href="room-concepts.html#protocols">Protocols</a></li>
<li><a href="room-concepts.html#ports">Ports</a></li>
<li><a href="room-concepts.html#dataclass">DataClass</a></li>
<li><a href="room-concepts.html#layering">Layering</a></li>
<li><a href="room-concepts.html#finite-state-machines">Finite State Machines</a></li>
</ul>
</li>
<li><a href="etrice-features.html" aria-expanded="false">eTrice Features <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="etrice-features.html#model-navigation" aria-expanded="false">Model Navigation <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="etrice-features.html#from-model-to-behavior-to-structure">From Model to Behavior to Structure</a></li>
<li><a href="etrice-features.html#model-navigation">Model Navigation</a></li>
<li><a href="etrice-features.html#navigating-behavior-diagrams">Navigating Behavior Diagrams</a></li>
<li><a href="etrice-features.html#navigating-structure-diagrams">Navigating Structure Diagrams</a></li>
</ul>
</li>
<li><a href="etrice-features.html#etrice-java-projects" aria-expanded="false">eTrice Java Projects <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="etrice-features.html#eclipse-jdt-build">Eclipse JDT Build</a></li>
</ul>
</li>
<li><a href="etrice-features.html#automatic-diagram-layout-with-kieler" aria-expanded="false">Automatic Diagram Layout with KIELER <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="etrice-features.html#overview">Overview</a></li>
<li><a href="etrice-features.html#performing-automatic-layout">Performing Automatic Layout</a></li>
<li><a href="etrice-features.html#layout-options">Layout Options</a></li>
<li><a href="etrice-features.html#configuring-layout-options">Configuring Layout Options</a></li>
<li><a href="etrice-features.html#special-layout-options">Special Layout Options</a></li>
<li><a href="etrice-features.html#further-references">Further References</a></li>
</ul>
</li>
<li><a href="etrice-features.html#annotations" aria-expanded="false">Annotations <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="etrice-features.html#annotation-type-definitions">Annotation Type Definitions</a></li>
<li><a href="etrice-features.html#usage-and-effect-of-the-pre-defined-annotations">Usage and Effect of the Pre-defined Annotations</a></li>
</ul>
</li>
<li><a href="etrice-features.html#enumerations">Enumerations</a></li>
<li><a href="etrice-features.html#etrice-models-and-their-relations" aria-expanded="false">eTrice Models and Their Relations <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="etrice-features.html#the-room-model">The ROOM Model</a></li>
<li><a href="etrice-features.html#the-config-model">The Config Model</a></li>
<li><a href="etrice-features.html#the-physical-model">The Physical Model</a></li>
<li><a href="etrice-features.html#the-mapping-model">The Mapping Model</a></li>
</ul>
</li>
<li><a href="etrice-features.html#interface-contracts" aria-expanded="false">Interface Contracts <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="etrice-features.html#defining-contracts">Defining Contracts</a></li>
<li><a href="etrice-features.html#contract-monitor-generation">Contract Monitor Generation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="feature-reference.html" aria-expanded="false">Feature Reference <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="feature-reference.html#roomlanguage" aria-expanded="false">ROOMLanguage <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="feature-reference.html#configmodel">ConfigModel</a></li>
<li><a href="feature-reference.html#logicalmodel" aria-expanded="false">LogicalModel <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="feature-reference.html#actorclass">ActorClass</a></li>
<li><a href="feature-reference.html#actorref">ActorRef</a></li>
<li><a href="feature-reference.html#annotation">Annotation</a></li>
<li><a href="feature-reference.html#annotationtype">AnnotationType</a></li>
<li><a href="feature-reference.html#attribute">Attribute</a></li>
<li><a href="feature-reference.html#binding">Binding</a></li>
<li><a href="feature-reference.html#cpbranchtransition">CPBranchTransition</a></li>
<li><a href="feature-reference.html#choicepoint">ChoicePoint</a></li>
<li><a href="feature-reference.html#communicationtype">CommunicationType</a></li>
<li><a href="feature-reference.html#continuationtransition">ContinuationTransition</a></li>
<li><a href="feature-reference.html#dataclass">DataClass</a></li>
<li><a href="feature-reference.html#datatype">DataType</a></li>
<li><a href="feature-reference.html#entrypoint">EntryPoint</a></li>
<li><a href="feature-reference.html#enumeration">Enumeration</a></li>
<li><a href="feature-reference.html#executiontype">ExecutionType</a></li>
<li><a href="feature-reference.html#exitpoint">ExitPoint</a></li>
<li><a href="feature-reference.html#externalendport">ExternalEndPort</a></li>
<li><a href="feature-reference.html#externaltype">ExternalType</a></li>
<li><a href="feature-reference.html#inheritance">Inheritance</a></li>
<li><a href="feature-reference.html#initialtransition">InitialTransition</a></li>
<li><a href="feature-reference.html#internalendport">InternalEndPort</a></li>
<li><a href="feature-reference.html#layerconnection">LayerConnection</a></li>
<li><a href="feature-reference.html#logicalsystem">LogicalSystem</a></li>
<li><a href="feature-reference.html#operation">Operation</a></li>
<li><a href="feature-reference.html#port">Port</a></li>
<li><a href="feature-reference.html#primitivetype">PrimitiveType</a></li>
<li><a href="feature-reference.html#protocolclass">ProtocolClass</a></li>
<li><a href="feature-reference.html#refinedstate">RefinedState</a></li>
<li><a href="feature-reference.html#relayport">RelayPort</a></li>
<li><a href="feature-reference.html#replication">Replication</a></li>
<li><a href="feature-reference.html#sap">SAP</a></li>
<li><a href="feature-reference.html#spp">SPP</a></li>
<li><a href="feature-reference.html#serviceimplementation">ServiceImplementation</a></li>
<li><a href="feature-reference.html#simplestate">SimpleState</a></li>
<li><a href="feature-reference.html#state">State</a></li>
<li><a href="feature-reference.html#stategraphnode">StateGraphNode</a></li>
<li><a href="feature-reference.html#statemachine">StateMachine</a></li>
<li><a href="feature-reference.html#subsystemclass">SubSystemClass</a></li>
<li><a href="feature-reference.html#subsystemref">SubSystemRef</a></li>
<li><a href="feature-reference.html#trpoint">TrPoint</a></li>
<li><a href="feature-reference.html#transition">Transition</a></li>
<li><a href="feature-reference.html#transitionpoint">TransitionPoint</a></li>
<li><a href="feature-reference.html#triggeredtransition">TriggeredTransition</a></li>
</ul>
</li>
<li><a href="feature-reference.html#mappingmodel">MappingModel</a></li>
<li><a href="feature-reference.html#physicalmodel">PhysicalModel</a></li>
</ul>
</li>
<li><a href="feature-reference.html#modeleditors" aria-expanded="false">ModelEditors <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="feature-reference.html#graphicalbehavioreditor">GraphicalBehaviorEditor</a></li>
<li><a href="feature-reference.html#graphicalstructureeditor" aria-expanded="false">GraphicalStructureEditor <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="feature-reference.html#actorrefpropertydialog">ActorRefPropertyDialog</a></li>
<li><a href="feature-reference.html#portpropertydialog">PortPropertyDialog</a></li>
<li><a href="feature-reference.html#spppropertydialog">SPPPropertyDialog</a></li>
<li><a href="feature-reference.html#structureeditorpalette">StructureEditorPalette</a></li>
</ul>
</li>
<li><a href="feature-reference.html#textualroomeditor" aria-expanded="false">TextualROOMEditor <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="feature-reference.html#outlineview">OutlineView</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="feature-reference.html#codegenerators" aria-expanded="false">CodeGenerators <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="feature-reference.html#ccodegenerator">CCodeGenerator</a></li>
<li><a href="feature-reference.html#cppcodegenerator">CPPCodeGenerator</a></li>
<li><a href="feature-reference.html#generationoptions">GenerationOptions</a></li>
<li><a href="feature-reference.html#javacodegenerator">JavaCodeGenerator</a></li>
<li><a href="feature-reference.html#msclogging">MSCLogging</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Dave-Integration.html" aria-expanded="false">Dave Integration <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="Dave-Integration.html#dave-etrice-toolchain-tutorial" aria-expanded="false">DAVE-eTrice Toolchain Tutorial <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="Dave-Integration.html#introduction">Introduction</a></li>
<li><a href="Dave-Integration.html#getting-started-without-operating-system">Getting Started without Operating System</a></li>
<li><a href="Dave-Integration.html#getting-started-with-freertos">Getting Started with FreeRTOS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="ResourceRequirements.html">Resource Requirements</a></li>
<li><a href="developers-reference.html" aria-expanded="false">Developer's Reference <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="developers-reference.html#etrice-tool-developer-s-reference" aria-expanded="false">eTrice Tool Developer’s Reference <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="developers-reference.html#architecture" aria-expanded="false">Architecture <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="developers-reference.html#editor-and-generator-components">Editor and Generator Components</a></li>
<li><a href="developers-reference.html#the-abstract-finite-state-machine-concept">The Abstract Finite State Machine Concept</a></li>
<li><a href="developers-reference.html#runtimes">Runtimes</a></li>
<li><a href="developers-reference.html#unit-tests">Unit Tests</a></li>
</ul>
</li>
<li><a href="developers-reference.html#component-overview" aria-expanded="false">Component Overview <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="developers-reference.html#room-language-overview">Room Language Overview</a></li>
<li><a href="developers-reference.html#config-language-overview">Config Language Overview</a></li>
<li><a href="developers-reference.html#aggregation-layer-overview">Aggregation Layer Overview</a></li>
<li><a href="developers-reference.html#generator-overview">Generator Overview</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="release-notes.html" aria-expanded="false">Release Notes <span class="fa arrow"></span></a>
<ul class="nav" aria-expanded="false">
<li><a href="release-notes.html#2-0-0-migration">2.0.0 Migration</a></li>
</ul>
</li>
</ul>
</div>
</div>
<span class="version pull-right">version 2.x</span></p>
<div class="col-sm-9">
<h1><a href="#tutorials" name="tutorials"></a>Tutorials</h1>
<h2><a href="#working-with-the-tutorials" name="working-with-the-tutorials"></a>Working with the tutorials</h2>
<p>The eTrice tutorials will help you to learn and understand the eTrice tool and its concepts. eTrice supports several target languages.</p>
<p>The Hello World tutorial is target language specific. The other tutorials work for all target languages. Target language specific aspects are explained for all languages. Currently eTrice supports Java and C. C++ generator and runtime are currently prototypes with no tutorials. You should decide for which target language you want to work through the tutorials.</p>
<ul>
<li>
<p>Hello World - Getting Started C</p></li>
<li>
<p>Hello World - Getting Started Java</p></li>
<li>
<p>Ping Pong</p></li>
<li>
<p>Traffic Light (Example)</p></li>
</ul>
<p>The tutorials are also available in their finished version and can be added to the workspace via the Eclipse New Wizard ( <em>File -&gt; New -&gt; Other: eTrice C/Java Tutorials</em> ).</p>
<p>The <em>Traffic Light Example</em> in not yet available but will be provided with the next eTrice milestone (TODO: status?).</p>
<p>eTrice generates code out of ROOM models. The generated code relies on the services of a runtime framework (Runtime):</p>
<ul>
<li>execution</li>
<li>communication (e.g. messaging)</li>
<li>logging</li>
<li>operating system abstraction (osal)</li>
</ul>
<p>Additional functionality is provided as model library (Modellib):</p>
<ul>
<li>socket server and client</li>
<li>timing service</li>
<li>standard types</li>
</ul>
<h2><a href="#getting-started-c" name="getting-started-c"></a>Getting Started C</h2>
<p>In this tutorial you will have a first look at a very simple eTrice model. The goal is to learn the work flow of eTrice and to understand a few basic features of ROOM.</p>
<p><strong>Preconditions</strong>:</p>
<ul>
<li>
<p>Working C development environment with Eclipse CDT</p>
<ul>
<li>C compiler: MinGW/GCC (Windows) or Posix/GCC (Linux)</li>
<li>Installed C/C++ Development Tools (CDT) in Eclipse</li>
</ul>
</li>
<li>
<p>Activated <em>Build Automatically</em> option in Eclipse: <em>Project -&gt; Build Automatically</em></p></li>
<li>
<p>Recommended: Activate automatic resource refresh in Eclipse: <em>Window -&gt; Preferences -&gt; General -&gt; Workspace</em></p>
<ul>
<li><em>Refresh using native hooks or polling</em></li>
<li><em>Refresh on access</em></li>
</ul>
</li>
<li>
<p>Optional: Install <a href="http://trace2uml.stage.tigris.org/">Trace2UML</a>, an Open Source MSC viewer</p>
<ul>
<li><a href="http://trace2uml.tigris.org/servlets/ProjectDocumentList?folderID=6208">Windows download site</a></li>
<li><a href="http://apt.astade.de/">Linux package</a></li>
</ul>
</li>
</ul>
<h4><a href="#how-to-install-the-mingw-compiler-on-windows-10" name="how-to-install-the-mingw-compiler-on-windows-10"></a>How to install the MinGW compiler on Windows 10</h4>
<ol>
<li>
<p>Download the setup executable “mingw-get-setup” from <a href="https://osdn.net/projects/mingw/releases/p15522">here</a></p></li>
<li>
<p>Run the executable file and follow the prompts given by the install wizard. </p></li>
<li>
<p>When you are prompted to set the installation directory, try not to install it under “Program Files” or “Desktop”. Instead, it is recommended to use the default location specified by the installer, “C:/MinGW”.</p></li>
<li>
<p>In the basic setup tab, mark all packages for installation by right clicking each package and selecting “Mark for installation”.</p></li>
<li>
<p>Once all the packages are selected, click on the menu called “Installation -&gt; Apply Changes”. </p></li>
<li>
<p>When the confirmation window appears, select “Apply”. The package download/installation process will now begin. It should take about 5-10 minutes to completely finish, so ensure that you have a reliable internet connection during this time.</p></li>
<li>
<p>Once the installation process has completely finished, you need to set the environment variable path to include the MinGW directory. Open the windows menu with “windows key”, type “Control Panel” and press Enter. </p>
<ul>
<li>
<p>At the top right of the control panel window there should be a search box. Select it and type “Advanced system settings” and then click on the search result “View advanced system settings”.</p></li>
<li>
<p>Click on “Environment Variables” and double click on the user variable “Path”. In the new Edit environment variable window, enter a new variable under “C:/MinGW/bin” if you used the recommended install path. Otherwise change the install path accordingly. Press OK on all open settings windows to close them.</p></li>
</ul>
</li>
<li>
<p>To verify that your installation is working, run the following commands and confirm that the outputs match as follows. It is possible that a restart may necessary to confirm the changes.</p></li>
</ol>
<pre><code class="console">&gt; gcc --version
g++ (GCC) X.X.X
......
&gt; g++ --version
g++ (GCC) X.X.X
......
&gt; gdb --version
GNU gdb (GDB) X.X.X
......
</code></pre>
<h4><a href="#create-template-project" name="create-template-project"></a>Create template project</h4>
<p>After installation of eTrice in Eclipse, we can use the wizard to create the <em>template.c</em> project, which is a good starting point for new ROOM applications. Select the menu <em>File -&gt; New -&gt; Other</em> (Ctrl+N) and choose <em>eTrice C Template Project</em>. To complete the wizard press <em>Next</em> and on the next page <em>Finish</em>.</p>
<p><img src="images/013-wizard.png" alt="image"></p>
<p>This will add the three projects into your workspace:</p>
<ul>
<li>the library projects <em>runtime.c</em> and <em>modellib.c</em></li>
<li>our application project <em>template.c</em>.</li>
</ul>
<p>Now open the <em>TemplateModel.room</em> in the model folder of <em>template.c</em>.</p>
<p><img src="images/013-after-wizard.png" alt="image"></p>
<p>In this step we are introduced to the concept of Actors, a fundamental building block in ROOM, and how they are used in eTrice. In essence, an Actor is a representation of an object as a logical machine with defined behavior. Its structure, behavior and protocols are all defined with in an element called an ActorClass. See <a href="room-concepts.html#actors">here</a> for further information.</p>
<p>The model contains an ActorClass <em>TopActor</em>, which is currently the only active actor. TopActor has a state machine that is intended to output a simple HelloWorld statement. To inspect its behavior graphically, we can open the behavior diagram by right clicking on <em>Outline View -&gt; TopActor -&gt; Edit Behavior</em>. Alternatively we can place the cursor within the textual notation and press Alt+B.</p>
<p><img src="images/013-open-hello-fsm.png" alt="image"></p>
<p>The state machine has an initial transition that leads to <em>helloState</em>. The state defines an entry code, which is executed during the transition. We can view the details by hovering over the state and edit the code with a double-click or right click and <em>Edit State</em>.</p>
<p><img src="images/013-hello-fsm.png" alt="image"></p>
<h4><a href="#generate-and-run-application" name="generate-and-run-application"></a>Generate and run application</h4>
<p>Now we are ready to translate the model into an executable application. The first step is to generate source files from the model. Therefore we run the eTrice model generator by right clicking on file</p>
<span class="uiElement"><img src="icons/obj16/file_obj.gif"> generate_Template.launch --&gt; Run As --&gt; generate_Template</span>
<p>After that we can build and run the application by right clicking on file</p>
<span class="uiElement"><img src="icons/obj16/file_obj.gif"> run_Template_Windows.launch --&gt; Run As --&gt; run_Template_Windows</span>
<p>This will trigger the build process, carried out by Eclipse CDT and then subsequently start our application.</p>
<table>
<thead>
<tr>
<th align="center"> </th>
<th align="center"> </th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><img src="images/014-generate.png" alt="image"></td>
<td align="center"><img src="images/014-build_run.png" alt="image"></td>
</tr>
<tr>
<td align="center"><center>1. Invoke generator</center></td>
<td align="center"><center>2. Build and run application</center></td>
</tr>
</tbody>
</table>
<p>The output of our application is logged in the Console View and it shows the “Hello World”. By typing “quit” on the prompt and pressing enter the application terminates regularly.</p>
<p><img src="images/013-quit-hello-msc.png" alt="image"></p>
<h4><a href="#open-the-message-sequence-chart" name="open-the-message-sequence-chart"></a>Open the Message Sequence Chart</h4>
<p>After termination, we can inspect the behavior of our application. It is recorded in the form of a MSC (Message Sequence Chart) and can now be used for debugging or documentation purposes. Open <em>msc.seq</em> or <em>subSystemRef_Async.seq</em> in the folder <em>log</em> using the tool Trace2UML (if the file is not present, try to refresh (F5) the folder <em>log</em>).</p>
<p><span class="label label-info">Note:</span> The Trace2UML (Open Source tool) download links can be found in the Preconditions of <a href="#getting-started-c">Getting Started</a>.</p>
<p>Yet the MSC is nearly empty having not recorded any interaction between actors. It shows that <em>topActor</em> (full instance path <em>/LogSys/subSystemRef/topActor</em>) has assumed <em>helloState</em>. In the next PingPong tutorial we are going to create a more sophisticated and vivid eTrice application introducing actor building blocks and message protocols.</p>
<p><img src="images/013-hello-msc.png" alt="image"></p>
<h2><a href="#getting-started-c-" name="getting-started-c-"></a>Getting Started C++</h2>
<p>In this tutorial you will have a first look at a very simple eTrice model.<br>The goal is to learn the work flow of eTrice and to understand a few basic features of ROOM.</p>
<p><strong>Preconditions</strong>:</p>
<ul>
<li>
<p>Working C++ development environment with Eclipse CDT</p>
<ul>
<li>C++ compiler: MinGW/GCC (Windows) or Posix/GCC (Linux)</li>
<li>Installed C/C++ Development Tools (CDT) in Eclipse</li>
</ul>
</li>
<li>
<p>Activated <em>Build Automatically</em> option in Eclipse: <em>Project -&gt; Build Automatically</em></p></li>
<li>
<p>Recommended: Activate automatic resource refresh in Eclipse: <em>Window -&gt; Preferences -&gt; General -&gt; Workspace</em></p>
<ul>
<li><em>Refresh using native hooks or polling</em></li>
<li><em>Refresh on access</em></li>
</ul>
</li>
<li>
<p>Optional: Install <a href="http://trace2uml.stage.tigris.org/">Trace2UML</a>, an Open Source MSC viewer</p>
<ul>
<li><a href="http://trace2uml.tigris.org/servlets/ProjectDocumentList?folderID=6208">Windows download site</a></li>
<li><a href="http://apt.astade.de/">Linux package</a></li>
</ul>
</li>
</ul>
<h4><a href="#create-template-project" name="create-template-project"></a>Create template project</h4>
<p>After installation of eTrice in Eclipse, we can use the wizard to create the <em>template.cpp</em> project,<br>which is a good starting point for new ROOM applications.<br>Select the menu <em>File -&gt; New -&gt; Other</em> (Ctrl+N) and choose <em>eTrice C++ Template Project</em>.<br>To complete the wizard press <em>Next</em> and on the next page <em>Finish</em>.</p>
<p><img src="images/013-wizard-cpp.png" alt="image"></p>
<p>This will add four projects into your workspace:</p>
<ul>
<li>the library projects <em>runtime.c</em>, <em>runtijme.cpp</em> and <em>modellib.cpp</em></li>
<li>our application project <em>template.cpp</em>.</li>
</ul>
<p>Now open the <em>TemplateModel.room</em> in the model folder of <em>template.c</em>.</p>
<p><img src="images/013-after-wizard-cpp.png" alt="image"><br>In this step we are introduced to the concept of Actors, a fundamental building block in ROOM, and how they are used in eTrice. In essence, an Actor is a representation of an object as a logical machine with defined behavior. Its structure, behavior and protocols are all defined with in an element called an ActorClass. See <a href="room-concepts.html#actors">here</a> for further information.</p>
<p>The model contains an ActorClass <em>TopActor</em>, which is currently the only active actor.<br>TopActor has a state machine that is intended to output a simple HelloWorld statement.<br>To inspect its behavior graphically, we can open the behavior diagram by right click on<br><em>Outline View -&gt; TopActor -&gt; Edit Behavior</em>. Alternatively we can place the cursor<br>within the textual notation and press Alt+B.</p>
<p><img src="images/013-open-hello-fsm.png" alt="image"></p>
<p>The state machine has an initial transition that leads to <em>helloState</em>.<br>The state defines an entry code, which is executed during the transition.<br>We can view the details by hovering over the state and edit the code with a double-click or<br>right click and <em>Edit State</em>.</p>
<p><img src="images/013-hello-fsm.png" alt="image"></p>
<h4><a href="#generate-and-run-application" name="generate-and-run-application"></a>Generate and run application</h4>
<p>Now we are ready to translate the model into an executable application. The first step is to generate source files from the model. Therefore we run the eTrice model generator by right click on file</p>
<span class="uiElement"><img src="icons/obj16/file_obj.gif"> generate_Template.launch --&gt; Run As --&gt; generate_TemplateModel</span>
<p>After that we can build and run the application by right click on file (depending on your operating system, here we chose Windows).</p>
<p><span class="label label-info">Note:</span> Using MinGW it is necessary to have <em>&lt;MinGW installation dir&gt;\bin</em> in the system PATH.</p>
<p><span class="label label-info">Note:</span> Your CDT preferences might not enforce a build before launch. In this case you have to invoke the build before launching.</p>
<span class="uiElement"><img src="icons/obj16/file_obj.gif"> run_Template_Windows.launch --&gt; Run As --&gt; run_Template_Windows</span>
<p>This will trigger the build process, carried out by Eclipse CDT and then subsequently start our application.</p>
<table>
<thead>
<tr>
<th align="center"> </th>
<th align="center"> </th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><img src="images/014-generate-cpp.png" alt="image"></td>
<td align="center"><img src="images/014-build_run-cpp.png" alt="image"></td>
</tr>
<tr>
<td align="center"><center>1. Invoke generator</center></td>
<td align="center"><center>2. Build and run application</center></td>
</tr>
</tbody>
</table>
<p>The output of our application is logged in the Console View and it shows the “Hello World”.<br>By typing “quit” on the prompt and pressing enter the application terminates regularly.</p>
<p><img src="images/014-quit-hello-msc-cpp.png" alt="image"></p>
<h4><a href="#open-the-message-sequence-chart" name="open-the-message-sequence-chart"></a>Open the Message Sequence Chart</h4>
<p>After termination, we can inspect the behavior of our application. It is recorded in the form of a<br>MSC (Message Sequence Chart) and can now be used for debugging or documentation purposes.<br>Open <em>subSystemRef_Async.seq</em> in the folder <em>log</em> using the tool Trace2UML<br>(if the file is not present, try to refresh (F5) the folder <em>log</em>).</p>
<p><span class="label label-info">Note:</span> The Trace2UML (Open Source tool) download links can be found in the Preconditions of <a href="#getting-started-c">Getting Started</a>.</p>
<p>Yet the MSC is nearly empty having not recorded any interaction between actors.<br>It shows that <em>topActor</em> (full instance path <em>/LogSys/subSystemRef/topActor</em>) has<br>assumed <em>helloState</em>. In the next PingPong tutorial we are going to create a more sophisticated<br>and vivid eTrice application introducing actor building blocks and message protocols.</p>
<p><img src="images/013-hello-msc-cpp.png" alt="image"></p>
<h2><a href="#getting-started-java" name="getting-started-java"></a>Getting Started Java</h2>
<p>In this tutorial you will have a first look at a very simple eTrice model. The goal is to learn the work flow of eTrice and to understand a few basic features of ROOM.</p>
<p><strong>Preconditions</strong>:</p>
<ul>
<li>
<p>Installed Eclipse JDT</p></li>
<li>
<p>Activated <em>Build Automatically</em> option in Eclipse: <em>Project -&gt; Build Automatically</em></p></li>
<li>
<p>Recommended: Activate automatic resource refresh in Eclipse: <em>Window -&gt; Preferences -&gt; General -&gt; Workspace</em></p>
<ul>
<li><em>Refresh using native hooks or polling</em></li>
<li><em>Refresh on access</em></li>
</ul>
</li>
<li>
<p>Optional: Install <a href="http://trace2uml.stage.tigris.org/">Trace2UML</a>, an Open Source MSC viewer</p>
<ul>
<li><a href="http://trace2uml.tigris.org/servlets/ProjectDocumentList?folderID=6208">Windows download site</a></li>
<li><a href="http://apt.astade.de/">Linux package</a></li>
</ul>
</li>
</ul>
<h4><a href="#create-template-project" name="create-template-project"></a>Create template project</h4>
<p>After installation of eTrice in Eclipse, we can use the wizard to create the template project, which is a good starting point for new ROOM applications. Select the menu <em>File -&gt; New -&gt; Other</em> (Ctrl+N) and choose <em>eTrice Java Template Project</em>. Name the project <em>TemplateModel</em> and press <em>Next</em>. On the next page select <em>use Eclipse JDT build</em> and press <em>Finish</em>.</p>
<p><img src="images/014-wizard.png" alt="image"></p>
<p>This will add three projects into your workspace, the library projects <em>runtime.java</em> and <em>modellib.java</em> and our application project <em>TemplateModel</em>. Now open the <em>TemplateModel.room</em> in the model folder of our project.</p>
<p><img src="images/014-after-wizard.png" alt="image"><br>In this step we are introduced to the concept of Actors, a fundamental building block in ROOM, and how they are used in eTrice. In essence, an Actor is a representation of an object as a logical machine with defined behavior. Its structure, behavior and protocols are all defined with in an element called an ActorClass. See <a href="room-concepts.html#actors">here</a> for further information.</p>
<p>The model contains an ActorClass <em>TopActor</em>, which is currently the only active actor. TopActor has a state machine that is intended to output a simple HelloWorld statement. To inspect its behavior graphically, we can open the behavior diagram by right click on <em>Outline View -&gt; TopActor -&gt; Edit Behavior</em>. Alternatively we can place the cursor within the textual notation and press Alt+B.</p>
<p><img src="images/014-open-hello-fsm.png" alt="image"></p>
<p>The state machine has an initial transition that leads to <em>helloState</em>. The state defines an entry code, which is executed during the transition. We can view the details by hovering over the state and edit the code with a double-click or right click and <em>Edit State</em>.</p>
<p><img src="images/014-hello-fsm.png" alt="image"></p>
<h4><a href="#generate-and-run-application" name="generate-and-run-application"></a>Generate and run application</h4>
<p>Now we are ready to translate the model into an executable application. The first step is to generate source files from the model. Therefore we run the eTrice model generator by right click on file</p>
<span class="uiElement"><img src="icons/obj16/file_obj.gif"> generate_Template.launch --&gt; Run As --&gt; generate_Template</span>
<p>After that we can build and run the application by right click on file</p>
<span class="uiElement"><img src="icons/obj16/file_obj.gif"> run_TemplateModel.launch --&gt; Run As --&gt; run_TemplateModel</span>
<p>This will trigger the build process, carried out by Eclipse JDT and then subsequently start our application.</p>
<table>
<thead>
<tr>
<th align="center"> </th>
<th align="center"> </th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><img src="images/014-generate.png" alt="image"></td>
<td align="center"><img src="images/014-build_run.png" alt="image"></td>
</tr>
<tr>
<td align="center"><center>1. Invoke generator</center></td>
<td align="center"><center>2. Build and run application</center></td>
</tr>
</tbody>
</table>
<p>The output of our application is logged in the Console View and it shows the “Hello World”. By typing “quit” on the prompt and pressing enter the application terminates regularly.</p>
<p><img src="images/014-quit-hello-msc-cpp.png" alt="image"></p>
<h4><a href="#open-the-message-sequence-chart" name="open-the-message-sequence-chart"></a>Open the Message Sequence Chart</h4>
<p>After termination, we can inspect the behavior of our application. It is recorded in the form of a MSC (Message Sequence Chart) and can now be used for debugging or documentation purposes.<br>Open <em>msc.seq</em> or <em>subSystemRef_Async.seq</em> in the folder <em>log</em> using the tool Trace2UML (if the file is not present, try to refresh (F5) the folder <em>log</em>).</p>
<p><span class="label label-info">Note:</span> The Trace2UML (Open Source tool) download links can be found in the Preconditions of <a href="#getting-started-java">Getting Started</a>.</p>
<p>Yet the MSC is nearly empty having not recorded any interaction between actors. It shows that <em>topActor</em> (full instance path <em>/LogSys/subSystemRef/topActor</em>) has assumed <em>helloState</em>. In the next PingPong tutorial we are going to create a more sophisticated and vivid eTrice application introducing actor building blocks and message protocols.</p>
<p><img src="images/014-hello-msc.png" alt="image"></p>
<h2><a href="#tutorial-ping-pong-java-c-and-c-" name="tutorial-ping-pong-java-c-and-c-"></a>Tutorial Ping Pong Java, C and C++</h2>
<h3><a href="#scope" name="scope"></a>Scope</h3>
<p>This tutorial describes how to create a simple hierarchical actor system of actors communicating via ports and bindings.<br>Additionally you will use the Timing Service from the eTrice model library. This tutorial can be done for the target languages Java, C or C++.<br>For the Ping Pong scenario we want to create a model with a sender and a receiver of a message. The receiver has to wait for the ping message<br>from the sender, wait for a second and respond with a pong message.</p>
<p>The resulting Message Sequence Chart (MSC) at the end of this tutorial should look like this:</p>
<p><img src="images/015-msc.png" alt="image"></p>
<p>We will take this MSC as specification for the desired behavior.</p>
<h3><a href="#create-the-structure" name="create-the-structure"></a>Create the structure</h3>
<p>We start by opening the <em>TemplateModel.room</em> from the template project as presented in Getting Started. As described previously <em>topActor</em> is currently the only active actor. Furthermore the model provides a building kit for this tutorial, consisting of</p>
<ul>
<li>
<p>ProtocolClass <em>PingPongProtocol</em>: Defining the incoming message <em>ping</em> and outgoing <em>pong</em> according the specification</p></li>
<li>
<p>ActorClass <em>Receiver</em>: Defining a (regular) Port of type PingPongProtocol, which receives the incoming messages and sends the outgoing message. Additionally it has a reference to the <em>TimingService</em>.</p></li>
<li>
<p>ActorClass <em>Sender</em>: Defining the <strong>conjugated</strong> Port of type PingPongProtocol, which handles the messages vice-versa</p></li>
</ul>
<pre><code class="room customHighlighted"><span class="keyword">ProtocolClass</span> PingPongProtocol {
<span class="keyword">incoming</span> {
<span class="keyword">Message</span> ping()
}
<span class="keyword">outgoing</span> {
<span class="keyword">Message</span> pong()
}
}
</code></pre>
<pre><code class="room customHighlighted"><span class="keyword">ActorClass</span> Receiver {
<span class="keyword">Interface</span> {
<span class="keyword">Port</span> recvPort: PingPongProtocol
}
<span class="keyword">Structure</span> {
<span class="keyword">external</span> <span class="keyword">Port</span> recvPort
<span class="keyword">SAP</span> timingService: PTimer
}
<span class="comment">// ...
</span>}
</code></pre>
<pre><code class="room customHighlighted"><span class="keyword">ActorClass</span> Sender {
<span class="keyword">Interface</span> {
<span class="keyword">conjugated</span> <span class="keyword">Port</span> sendPort:
PingPongProtocol
}
<span class="keyword">Structure</span> {
<span class="keyword">external</span> <span class="keyword">Port</span> sendPort
}
<span class="comment">// ...
</span>}
</code></pre>
<p><span class="label label-info">Note:</span> The naming <em>Sender</em> <em>Receiver</em> is based on the first message exchange.<br><em>Sender</em> is the first actor supposed to send a message (*ping*) and <em>Receiver</em> is the first actor to receive this message.<br>Afterwards they change their roles and it is vice-versa for message <em>pong</em>.</p>
<p>Remaining tasks:</p>
<ul>
<li>
<p>creating the hierarchical actor structure by using classes the <em>Sender</em> and <em>Receiver</em></p></li>
<li>
<p>establish port binding</p></li>
<li>
<p>define the behavior of both actors</p></li>
<li>
<p>use the <em>TimingService</em></p></li>
<li>
<p>generate and run application, then verify resulting MSC</p></li>
</ul>
<p>We are going to create the hierarchical actor structure and <em>TopActor</em> will serve as a pure container actor. Thus its current state machine is obsolete, we can ignore or delete it.</p>
<p>We continue to add the actors graphically and open the structure diagram of <em>TopActor</em> by right-click in the Outline View on <em>TopActor -&gt; Edit Structure</em>.</p>
<p><img src="images/015-edit-structure-top.png" alt="image"></p>
<p>Drag and Drop an <em>ActorRef</em> from the <em>Palette</em> within the borders and name the new actor reference <em>sender</em> and set the type to ActorClass <em>Sender</em>.<br>Repeat the step for the <em>receiver</em> of ActorClass type <em>Receiver</em>.</p>
<p><img src="images/015-add-sender.png" alt="image"></p>
<p>Finally we connect the ports of both actors using the <em>Binding</em> tool in the <em>Palette</em>. Drag a connection between the two ports to establish a Binding.</p>
<p><img src="images/015-add-binding.png" alt="image"></p>
<h3><a href="#implement-the-behavior" name="implement-the-behavior"></a>Implement the Behavior</h3>
<p>We will implement two finite state machines (FSMs) to define the event driven behavior of the actor classes <em>Sender</em> and <em>Receiver</em>.</p>
<p>Before you start with the implementation, have a look at the MSC with the specification of the behavior.</p>
<p>Lets start with the <em>Sender</em>. In the structure diagram of <em>TopActor</em> right click on <em>sender</em> and select <em>Open Ref Behavior</em>.</p>
<p><img src="images/015-open-behavior-sender.png" alt="image"></p>
<p>According to our specification:</p>
<blockquote>
<p><em>Sender</em> initially should send the message <em>ping</em> and then assume a state named <em>sendingPing</em>. After receiving the message <em>pong</em> it should switch to a state named <em>receivedPong</em>.</p>
</blockquote>
<p>Drag and Drop the <em>Initial Point</em> and a <em>State</em> into the diagram. The latter causes the opening of the dialog <em>Edit State</em>, in which we type the name <em>sendingPing</em><br>and specify the entry code <code>senderPort.ping();</code>.<br>Note that the content assist is activated by pressing CTRL+Space.</p>
<p><img src="images/015-edit-sending.png" alt="image"></p>
<p>In the same manner we create a second <em>State</em> named <em>receivedPong</em> but without any action.</p>
<p>Use the <em>Transition</em> tool to draw the initial transition to <em>sendingPing</em>. The dialog <em>Edit Transition</em> will open and we just click <em>OK</em> as no action is required.<br>Note that initial transitions do not have any trigger events.</p>
<p>Again draw a transition from <em>sendingPing</em> to <em>receivedPong</em>. In the dialog for this transition we set the trigger event to message <em>pong</em> of port <em>sendPort</em> in the top right corner.</p>
<p><img src="images/015-edit-transition-pinger.png" alt="image"></p>
<p>At this point the behavior of <em>Sender</em> is complete and should look like this:</p>
<p><img src="images/015-sending-ping-fsm.png" alt="image"></p>
<p>We turn our attention to actor <em>Receiver</em> and open its state machine diagram.</p>
<p>According to the specification:</p>
<blockquote>
<p><em>Receiver</em> initially should wait for the message <em>ping</em>. After a short time the message <em>pong</em> should be sent back.</p>
</blockquote>
<p>We create the states <em>waitingForPing</em>, <em>receivedPing</em> and <em>sendingPong</em> plus the initial transition.</p>
<p>We draw a transition from <em>waitingForPing</em> to <em>receivedPing</em> and select as trigger event the message <em>ping</em> of port <em>recvPort</em>.</p>
<p><img src="images/015-transition-ping.png" alt="image"></p>
<p>In the entry code of the state <em>receivedPing</em> we start the timeout by sending the message <em>startTimeout(500)</em> (time unit is ms) to the <em>timingService</em> port:</p>
<blockquote>
<p><code>timingService.startTimeout(500);</code></p>
</blockquote>
<p>We draw a transition from <em>receivedPing</em> to <em>sentPong</em>. The trigger event is the respond <em>timeout</em> of the timing service.</p>
<p><img src="images/015-transition-timeout.png" alt="image"></p>
<p>In the entry code of the state <em>sentPong</em> we send the message <em>pong</em> back to the <em>Sender</em>: <code>recvPort.pong();</code></p>
<p>Now the behavior of <em>Receiver</em> is complete, too. It should look like this:</p>
<p><img src="images/015-sending-pong-fsm.png" alt="image"></p>
<p>The PingPong model is done now. You can generate, compile and run it as described in <em>Hello World for C</em> or <em>Hello World for Java</em>. The generated MSC in folder <em>log</em><br>should show the same MSC we used to specify the behavior at the beginning of this tutorial.</p>
<p><img src="images/015-msc.png" alt="image"></p>
<h3><a href="#summary" name="summary"></a>Summary</h3>
<p>Within this tutorial you have learned how to create a FSM with transitions triggered by incoming messages. You have used entry code to send messages and have used<br>the timing service from the model library. You are now familiar with the basic features of eTrice. Further tutorials and examples will assume that the reader is<br>already familiar with this basic knowledge.</p>
<h2><a href="#troubleshooting" name="troubleshooting"></a>Troubleshooting</h2>
<p>If the application fails to start, look for problems in the code generation and in the build process. Check the respective console for potential errors:</p>
<h4><a href="#generation-error" name="generation-error"></a>Generation error</h4>
<p>The <em>eTrice C/C++/Java Generator Console</em> outputs any errors, that were detected during generation, like model validation errors or missing imports/references.</p>
<p><img src="images/020-gen-console.png" alt="image"></p>
<h4><a href="#build-error" name="build-error"></a>Build error</h4>
<p>The CDT Build Console outputs errors that occurred during the build process.</p>
<p>Common issues:</p>
<ul>
<li>
<p><em>multiple main functions</em>: More than one executable application was built within a single project. Try a complete clean before rebuild of the project.</p></li>
<li>
<p>compile error in generated user code: Check if the user code, that was generated out of the model causes compiler errors (e.g. state/transition action code or operation detail code).<br>The default location for the generated code is the folder <em>src-gen</em>.</p></li>
</ul>
<p><img src="images/020-build-console.png" alt="image"></p>
<h4><a href="#missing-msc" name="missing-msc"></a>Missing MSC</h4>
<p>The MSC is created when the application has been shutdown in proper form, thus has been terminated by typing <em>quit</em> in the Console of the application.<br>Depending on the Eclipse workspace settings, it might be necessary to refresh (F5) the <em>log</em> folder manually.</p>
<hr>
<p><a href="#navbar">back to top</a> <span class="version pull-right">version 2.x</span></p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/metisMenu.min.js"></script>
<script src="js/prettify.js"></script>
<script src="js/custom.js"></script>
</body>
</html>