4.1.4 Create the Actual Visualization

Please download the prepared lift.svg file and open it with Inkscape as demonstrated in Figure . Feel free to modify and explore the SVG graphic. In order to link graphical elements of the SVG graphic with the formal model later, we have to give them identifiers. For this, select an element in Inkscape, open the context menu and select Object Properties. A popup window should be opened as demonstrated in Figure . As an example, we give the graphical element that represents the door (the gray filled rectangle), the id “door”. In Section 4.1.6 we explain how we can use this information in order to establish observers. If you are satisfied with your SVG graphic, save it as a plain SVG graphic with File Save As. Select Plain SVG (*.svg) as an output format and click on the Save button. You can save the SVG file anywhere on your local system. Open the index.html file with an editor of your choice and change the path to the SVG file “lift.svg” within the “data-bms-svg” attribute.