## 4.2.2 Observers

Observers are used to link graphical elements with the model. An observer is notified whenever a model has changed its state, i.e. whenever an event has been executed. In response, the observer will query the model’s state and triggers actions on the linked graphical elements in respect to the new state.

In general, observers are defined in the JavaScript file. BMotionWeb comes with some predefined observers that are described in the following sections.

### 4.2.2.1 Formula Observer

The formula observer *observes* a list of formulas (e.g. expressions, predicates or single variables) and triggers a function whenever a state change occurred. The values of the formulas and the origin (the reference to the graphical element that the observer is attached to) are passed to the trigger function. Within the trigger function you can change the attributes of the origin (e.g. its colour or position) according to the values of the formulas in the respective state. The following options can be passed to the formula observer:

**selector [Type: string,***Required*]:

A*selector*that matches a set of graphical elements in the visualization (see Section 4.2.1).**formulas [Type: list,***Required*]:

Define a list of formulas (e.g. expressions, predicates or single variables) which should be evaluated in each state. The results of the formulas are passed to the trigger function. Example:**translate [Type: boolean, Default: false]:**

In general the result of the formulas are passed as strings to the trigger function. Set this option to*true*to translate B-structures to JavaScript structures.**trigger [Type: function(origin, values),***Required*]:

The trigger function will be called after every state change with its*origin*reference set to the graphical element that the observer is attached to and the*values*of the formulas. The*origin*is a jQuery selector element. Consult the jQuery API^{1}for more information regarding accessing or manipulating the*origin*(e.g. set and get attributes). The*values*parameter contains the values of the defined formulas in an array, e.g. use*values[0]*to obtain the result of the first formula.The following parameters are available:

The reference set to the graphical element that the observer is attached to.

Contains the values of the defined formulas in an array, e.g. use

*values[0]*to obtain the result of the first formula.

Example formula observer:

bms.observe("formula", { selector: "#door", formulas: ["cur_floor", "door_open"], translate: true, trigger: function (origin, values) { switch (values[0]) { case -1: origin.attr("y", "275"); break case 0: origin.attr("y", "175"); break case 1: origin.attr("y", "60"); break } if(values[1]) { origin.attr("fill", "white"); } else { origin.attr("fill", "lightgray"); } } })

**Footnotes**