Summary

• Page properties (1 modified, 0 added, 0 removed)
• Objects (1 modified, 0 added, 0 removed)
  • Confluence.Code.ConfluencePageClass[0]

Details

Page properties

Content

...	...	@@ -2,7 +2,6 @@
2	2
3	3	1. create an SVG image
4	4	1. create a mapping file for this SVG
5		-1. open the mapping file in KEV
6	6	1. create a street light controller in SCCharts
7	7	1. simulation the controller, including visualization
8	8
...	...	@@ -26,14 +26,10 @@
26	26
27	27	Finally, save the result as **Inkscape-SVG** or **Normal-SVG** and name it **Lights.svg**.
28	28
29		-== 2 Mapping animations to SVG elements ==
	28	+== 2. Mapping animations to SVG elements ==
30	30
31	31	In the following a mapping of animations, domains and variables to elements in the SVG is created. Therefore one has to create a new mapping file in KIELER using **File > New > Other > Mapping Model.** Name the file** Lights.mapping** and select **SVG File** as **Model Object**.
32	32
33		-\\
34		-
35		-\\
36		-
37	37	[[image:attach:Screenshot_20170411_230005.png]]
38	38
39	39	After hitting **Finish**, the file has to be opened using **Open With > Mapping Model Editor.**
...	...	@@ -40,8 +40,72 @@
40	40
41	41	[[image:attach:Screenshot_20170411_230257.png]]
42	42
43		-In the editor that opens, select the **SVG File** element. If there is no Properties view open , select
	38	+In the editor that opens, select the **SVG File** element. If there is not yet a** Properties View** open in your workbench, select **Window > Show View > Other > General > Properties.** This view works together with the Mapping Model Editor, such that the fields of elements can be manipulated.
44	44
45		-\\
	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**.
46	46
	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:
	43	+
	44	+* Input: 0,1,2
	45	+* Key: showLight
	46	+* Opacity: 1,0,0
	47	+
	48	+This will map the input values 0, 1 and 2 of a variable **showLight** to the opacity values 1, 0 and 0 of the element in the SVG image (showLight = 0 → opacity = 1, showLight = 1 →opacity = 0, and so on).
	49	+
	50	+The animation for the yellow and green circle is created analogously:
	51	+
	52	+Create SVG Elements and set the id to **theYellowOne** and **theGreenOne** respectively. Add an Opacity animation to theYellowOne and set the properties to the following:
	53	+
	54	+* Input: 0,1,2
	55	+* Key: showLight
	56	+* Opacity: 0,1,0
	57	+
	58	+Add an Opacity animation to theGreenOne and set the properties to the following:
	59	+
	60	+* Input: 0,1,2
	61	+* Key: showLight
	62	+* Opacity: 0,0,1
	63	+
	64	+This will animate the circles according to the value of the variable showLight.
	65	+
	66	+Additionally, we add an SVG element with the id **theRect **and add a Colorize animation and set its properties to the following:
	67	+
	68	+* Input: 0,1,2
	69	+* Key: showLight
	70	+* Fill Color: red,yellow,green
	71	+
	72	+This will color the rect according to the value of showLight.
	73	+
	74	+Finally we add another animation to theRect, namely the Rotate animation. Its properties are set to the following:
	75	+
	76	+* Input: 0..2
	77	+* Key: showLight
	78	+* Angle Range: 0..90
	79	+
	80	+This will map the input values from 0 to 2 linearly to the angles from 0 to 90.
	81	+
	82	+== 3. Creating a Light Controller with SCChart ==
	83	+
	84	+Create an empty SCChart and fill it with the following content:
	85	+
	86	+{{code language="java" title="Traffic light controller"}}
	87	+scchart TrafficLight {
	88	+
	89	+ output int showLight;
	90	+
	91	+ initial state init
	92	+ --> init with / showLight += 1; showLight = showLight % 3;
	93	+}
	94	+{{/code}}
	95	+
	96	+This model will set showLight successively to 0, 1 and 2.
	97	+
	98	+== 4. Starting the simulation ==
	99	+
47	47	\\
	101	+
	102	+== Problem Solving ==
	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.).
	105	+
	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).

Confluence.Code.ConfluencePageClass[0]

Id

...	...	@@ -1,1 +1,1 @@
1		-25952335
	1	+25952341

URL

...	...	@@ -1,1 +1,1 @@
1		-https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/25952335/Simulation Visualization Tutorial
	1	+https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/25952341/Simulation Visualization Tutorial