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¹ 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

1. http://api.jquery.com/.