 |
 |
 |
BMotionWeb for ProB Handbook |  |
 |
|
2.3 Create a new Visualization
To create a new visualization choose File 
New Visualization. A window will be opened asking you for some additional information (e.g. the id and name of your visualization). Enter your data and press on OK. Now, the tool asks you for a location (a folder) where you want to save your visualization. In the next step, the tool asks you for a model to be visualized. Select a model and click on OK. This will start the fresh visualization. The tool will create a bunch of files into the selected folder:
2.3.1 bmotion.json:
The bmotion.json file is the root file of your BMotionWeb visualization (also called BMotionWeb manifest file). It contains the configuration formatted using JSON (JavaScript Object Notation)1.
![\includegraphics[width=7mm]{img/info_64.png}](images/img-0002.png)
Section 3.1.1 contains a full list of available options.
Example manifest file with a minimal configuration:
{
"id": "lift",
"name": "Lift visualization",
"template": "index.html",
"model": "model/lift.mch"
}
2.3.2 script.js:
In the JavaScript file you can setup observers and actions (see Section 4.2). Moreover, the user can take advantage of the entire JavaScript language. There exist are a lot of libraries for JavaScript that you can apply to create custom visualizations. For instance, it exists libraries for generating chart and plot diagrams.
2.3.3 index.html:
The HTML file contains the reference to the scripts.js file and to the visualization.svg file.
Example index.html file with a minimal configuration:
<html>
<head>
<title>BMotionWeb Visualization</title>
</head>
<body>
<script src="bms.api.js"></script>
<script src="script.js"></script>
<div data-bms-svg="visualization.svg"></div>
</body>
</html>
2.3.4 visualization.svg:
The actual SVG visualization. The user is not restricted to an editor in order to create a visualization. The user can make use of the integrated visual editor or any other tool that supports the creation of SVG graphics.
2.3.5 bms.api.js:
JavaScript library that is needed for running the visualization. Please do not edit this file!
|
|
|
|
|
|
Footnotes