Anima

Themes

Themes are defined in a JSON specification file, which specified how each kind of element should be renderer in Anima. For each kind of object, two properties should be specified. First, which layout manager should render it (as well as possible required properties). Second, the anchor of that layout manager, i.e., what is the base position of the layout manager.

The example below presents an excerpt of the Train exmple. In this example, Line objects will be placed at the root of the canvas (i.e., will be the first elements to be rendered). The associated layout manager is the Linear layout manager, with orientation E (east), meaning that the elemens will be horizontally displayed. Some additonal properties, such as the image and initial positions are also defined.

The Train objects are also displayed according to a Linear layout manager, vertically (N - north). In this case, the base of the layout (anchor) will be the one associated with the "pos" property. Such means that, for each state, each train will be displayed nearby the value of the "pos" property for that state. Being "pos" a Track object, such means that the Train will be displayed nearby the Track to which it is related in a given state.

{
  "spec": [{
    "sig": "Line",
    "display": [
      {
        "anchor": "root",
        "layout": "Linear"
      }
    ],
    "params": {
      "root.x":50,
      "root.y":400,
      "root.orientation": "E"
    },
    "style": {
      "root.img": "flag.png"
    },
    "connection": {
      "root.color": "red",
      "root.oriented":"true",
      "root.show": "true",
      "root.style": "dashed"
    }
  }

...

  {
    "sig": "Train",
    "display": [
      {
        "anchor": "pos",
        "layout": "Linear"
      }
    ],
    "params": {
      "pos.offset": -10,
      "pos.orientation": "N"
    },
    "style": {
      "pos.img": "train.png"
    },
    "connection": {
      "pos.show": "true",
      "pos.oriented": "true",
      "pos.style": "dashed"
    }
  }],
  "defaultProjection": "State",
  "animatiomManager": "Move",
  "zoom":true,
  "background": {
    "img": "river.png"
  }
}

Available properties

There are two kinds of propertes: Global and object specific. Global specify properties which affect the overall presentation. Object specific properties define properties for specific kinds of objects.

Global properties

Available global properties are as follows:

defaultProjection: State(default), <Sig> - Defines the default property to project.
animationManager: Move(default), Links - Defines the default animation manager.
zoom: true(default), false - enables/disables zoom
background:
- img: <image name> - The background image. See resources for the list of available images.

Object properties

Each object (i.e. sig) contains a set of Properties to be speified. Certain properties are dependent on the used Layout manager. Common properties are:

display
- layout: <layout manager> - (mandatory) Defines the layout managet to use, from one of the following: Linear, Circular, Kinds, Random or Absolute.
- anchor: <property> - (mandatory) Defines the starting position of the first object. Can be either root (default position), or a property of the Sig.
params - defines the set of parameters for the layout manager (see details below)
style - Defines the style properties
- <anchor>.img - the image to represent the object.
connection - defines the properties of the connection
- <anchor>.show: true(default), false - Define if the connection should be rendered.
- <anchor>.color: <val> - The color of the association. See colors for details.
- <anchor>.oriented true, false (defalt) - Show an arrow at the end of the association.
- <anchor>.style: solid (default), dotted, dashed - The style of the connection.

Layout properties

Each layout manager has a set of specific properties. The following ones are supported at the moment:

Linear

orientation - Defines the orientation of the elements, from one of the following: N, E, S, W.
x - initial x position.
y - initial y position.
offset - the distance between the first element and its anchor.
step - value to add/remove from the distance between elements.