Last modified by aas2 on 2023/09/11 16:16
<
From version < 5.1 >
edited by aas2
on 2017/04/11 23:43
To version < 7.1
edited by aas2
on 2023/09/11 16:16
Change comment: Update document after refactoring.

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -Simulation Visualization Tutorial
1 +Simulation Visualization using KEV
Parent
... ... @@ -1,0 +1,1 @@
1 +KIELER.SCCharts (DeprecatedHistorical Documentation & Features).Environment Visualization (KEV).WebHome
Content
... ... @@ -1,29 +1,31 @@
1 -This tutorial uses the KIELER Environment Visualization (KEV) to display the state of a very simple street light controller. This process is split into the following steps:
1 +This tutorial uses the KIELER Environment Visualization (KEV) to display the state of a very simple traffic light controller. This process is split into the following steps:
2 2  
3 -1. create an SVG image
4 -1. create a mapping file for this SVG
5 -1. create a street light controller in SCCharts
6 -1. simulation the controller, including visualization
3 +1. creating an SVG image
4 +1. creating a mapping file for this SVG image
5 +1. creating a traffic light controller in SCCharts
6 +1. simulating the controller, including visualization
7 7  
8 8  == 1. Creating an SVG Image ==
9 9  
10 -In this tutorial the open-source vector graphics program Inkscape is used to create an SVG image. It is advisable to first set the document size. In Inkscape this is done under **File > Document Settings**. In the image below the size is set to 512x512 px. This setting defines the coordinate system of the file, which is useful when animating e.g. movement later in KEV. However, SVG images can be scaled to any size.
10 +In this tutorial the open-source vector graphics program Inkscape is used to create an SVG image.
11 11  
12 +It is advisable to first set the document size. In Inkscape this is done under **File > Document Settings**. In the image below the size is set to 512x512 px. This setting defines the coordinate system of the file, which is useful when animating e.g. movement later in KEV. Anyhow, SVG images can be scaled to any size.
13 +
12 12  [[image:attach:Screenshot_20170411_223815.png]]
13 13  
14 -Afterwards three circles and a rectangle are created. The circles will simulate the red, green and yellow light of a traffic light, and thus are colored accordingly. The rectangle will show the same information, but using different animations.
16 +Afterwards three circles and a rectangle have to be created. The circles will simulate the red, green and yellow lights of a traffic light, and thus are colored accordingly. The rectangle will show the same information, but using different animations.
15 15  
16 16  [[image:attach:Screenshot_20170411_224717.png]]
17 17  
18 18  \\
19 19  
20 -After the elements of the image have been created, it is necessary to give each element a unique name if it should be animated. This can be done in Inkscape by selecting the object and using **Right click > Object properties**. In the window that opens, an **id** can be set in the **first field** (default value without leading hash, labelled "Kennung" in german). Name the circles according to their color, **theRedOne**, **theYellowOne** and **theGreenOne**. The rectangle gets the id **theRect.**
22 +After the elements of the image have been created, it is necessary to give each element a unique name if it should be animated. This can be done in Inkscape by selecting the object and using **Right click > Object properties**. In the window that opens, an **id** can be set in the **first field** (the value without leading hash, labelled "Kennung" in german). Name the circles according to their color, **theRedOne**, **theYellowOne** and **theGreenOne**. The rectangle gets the id **theRect.**
21 21  
22 22  Note that a new id has to be applied using the button in the object properties window!
23 23  
24 24  [[image:attach:Screenshot_20170411_225238.png]]
25 25  
26 -Finally, save the result as **Inkscape-SVG** or **Normal-SVG** and name it **Lights.svg**.
28 +Finally, save the result as **Inkscape-SVG** (recommended) or **Normal-SVG** and name it **Lights.svg**.
27 27  
28 28  == 2. Mapping animations to SVG elements ==
29 29  
... ... @@ -39,7 +39,7 @@
39 39  
40 40  Set the saved **Lights.svg** as property **Filename** of the **SVG File** element. Afterwards new children of the SVG File can be created. These represent the elements in the SVG file, which should be animated. Right click on the SVG File element and select **New Child > SVG Element**. Set the id of this element in the properties view to **theRedOne**.
41 41  
42 -This element can have any number of animations. In this tutorial, we will add an Opacity animation and configure it, such that it will be visible or invisible, depending on the value of a variable named **showLight**. Therefore we right click on the element, select **New Child > Opacity** and set its properties in the Property View to the following:
44 +An SVG Element can have any number of animations. In this tutorial, we will add an Opacity animation to theRedOne and configure it, such that it will be visible or invisible, depending on the value of a variable named **showLight**. Therefore we right click on the element, select **New Child > Opacity** and set its properties in the Property View to the following:
43 43  
44 44  * Input: 0,1,2
45 45  * Key: showLight
... ... @@ -63,7 +63,7 @@
63 63  
64 64  This will animate the circles according to the value of the variable showLight.
65 65  
66 -Additionally, we add an SVG element with the id **theRect **and add a Colorize animation and set its properties to the following:
68 +Additionally, we add an SVG element with the id **theRect,** add a Colorize animation and set its properties to the following:
67 67  
68 68  * Input: 0,1,2
69 69  * Key: showLight
... ... @@ -77,8 +77,16 @@
77 77  * Key: showLight
78 78  * Angle Range: 0..90
79 79  
80 -This will map the input values from 0 to 2 linearly to the angles from 0 to 90.
82 +This will map the input values from 0 to 2 linearly to the angles from 0 to 90 degree.
81 81  
84 +\\
85 +
86 +The final mapping structure should look similar to this:
87 +
88 +\\
89 +
90 +[[image:attach:Screenshot_20170411_234454.png]]
91 +
82 82  == 3. Creating a Light Controller with SCChart ==
83 83  
84 84  Create an empty SCChart and fill it with the following content:
... ... @@ -97,10 +97,20 @@
97 97  
98 98  == 4. Starting the simulation ==
99 99  
100 -\\
110 +Open the KEV View under** Window > Show View > Other > KIELER > KEV View.** In this new view, open the mapping file that has been created before. If everything is OK, the SVG graphic is displayed.
101 101  
112 +With the mapping file open in KEV, switch to the SCChart of the traffic light. Open the Execution Manager if it is not yet open (Window > Show View > Other > KIELER Simulation > Execution Manager). This view controls the simulation. However, to have the simulation visualized with the SVG image and mapping file, one has to add the KEV Data Observer to the list in the Execution Manager using **Right click > Add Component > KEV Data Observer**.
113 +
114 +Afterwards you can run the simulation using Step Execution. After each step, the image in the KEV View should be updated to reflect the state of the controller. Congratulations!
115 +
116 +[[image:attach:Screenshot_20170411_235618.png]]
117 +
102 102  == Problem Solving ==
103 103  
104 -Ensure that the KEV Data Observer is added to the list in the Execution Manager (When opening an SCChart, this list might be lost.).
120 +Ensure that the id's in the SVG match the id's in the mapping file.
105 105  
122 +Ensure that the KEV Data Observer is added to the list in the Execution Manager (when opening an SCChart, this list might be lost).
123 +
106 106  Ensure that the KEV view has been (re-)loaded with the correct mapping file (saving the file on disk does not reload it in the KEV View automatically).
125 +
126 +KEV is updating the SVG concurrently with the values from the execution. Thus it might occur that some states are skipped, if one steps through the execution very fast.
Screenshot_20170411_223815.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +53.1 KB
Content
Screenshot_20170411_224717.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +5.8 KB
Content
Screenshot_20170411_225238.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +48.4 KB
Content
Screenshot_20170411_230005.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +37.6 KB
Content
Screenshot_20170411_230257.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +57.0 KB
Content
Screenshot_20170411_234454.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +81.0 KB
Content
Screenshot_20170411_235618.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +136.2 KB
Content
Confluence.Code.ConfluencePageClass[0]
Id
... ... @@ -1,1 +1,1 @@
1 -25952341
1 +25952329
URL
... ... @@ -1,1 +1,1 @@
1 -https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/25952341/Simulation Visualization Tutorial
1 +https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/25952329/Simulation Visualization using KEV

Navigation

Quick Links

KIELER on GitHub
RTSYS Homepage