AnimB Javascript Tutorial: Difference between revisions

From Event-B
Jump to navigationJump to search
imported>Christophe
No edit summary
imported>Tommy
mNo edit summary
 
(5 intermediate revisions by one other user not shown)
Line 6: Line 6:
The controller is ensured by a piece of javascript code running in the browser.
The controller is ensured by a piece of javascript code running in the browser.


= The basics =
= The installation =
In your Event-B project, create a directory called "animation".  
In your Event-B project, create a directory called "animation".  
Then dowload the two following files in this directory:
Then dowload the two following files in this directory:
AnimB.js
* [https://rodin-b-sharp.svn.sourceforge.net/svnroot/rodin-b-sharp/trunk/AnimB/org.animb.jscomponent/animation/AnimB.js AnimB.js] the AnimB javascript component
index.html
* [https://rodin-b-sharp.svn.sourceforge.net/svnroot/rodin-b-sharp/trunk/AnimB/org.animb.jscomponent/animation/index.html index.html] a basic HTML file. This file could be used to create your own animation.
 
= Create your own animation =
 
Create a animation consiste in editing the index.html file.
 
First you must set the three variables describing your project.
* '''project''' set to the Rodin project name
* '''model''' set to the model name used to build the animation
* '''name''' set to the name of the animation
 
[[Category:AnimB]]

Latest revision as of 18:39, 22 February 2011

This page discribes how to build a graphical animation for a event-b model. These animations are built following the pattern MVC (Model/View/Controller).

The view part is done by a browser and a HTML page. The model part is given by a running animation in the Rodin plateform through AnimB and a event-b model. The controller is ensured by a piece of javascript code running in the browser.

The installation

In your Event-B project, create a directory called "animation". Then dowload the two following files in this directory:

  • AnimB.js the AnimB javascript component
  • index.html a basic HTML file. This file could be used to create your own animation.

Create your own animation

Create a animation consiste in editing the index.html file.

First you must set the three variables describing your project.

  • project set to the Rodin project name
  • model set to the model name used to build the animation
  • name set to the name of the animation