API Docs for:

AnnotationStory

An AnnotationStory is a Story that contains a list of Annotations accompanied by a panel of text containing links that activate them.

  • AnnotationStory text is provided as markdown.
  • Words in the text can be linked to xeogl storytelling functions, to fly the camera to Annotation vantage points, show labels etc.

Authoring Mode

  • SHIFT-click to place an Annotation
  • ESC to clear
  • ENTER to dump

Examples

Usage

// Load a Tron Tank model from SceneJS format. Give the model an ID - this
// gets prefixed to the IDs of it's Meshes.

var model = new xeogl.SceneJSModel({
           id: "tank",
           src: "models/scenejs/tronTank/tronTank.json"
       });

model.scene.camera.eye = [15, 20, -25];

// When the model has loaded, create a story with annotations

model.on("loaded", function () {

       new xeogl.AnnotationStory({
           speaking: false, // Set true to have a voice announce each annotation
           authoring: true, // Set true to author the annotations
           text: [
               "# [Stories](../docs/classes/AnnotationStory.html) : Tron Tank Program",
               "This is a Light Tank from the 1982 Disney movie *Tron*.",
               "The [orange tracks](focusAnnotation(0)) on this tank indicate that ....",
               "![](./images/Clu_Program.png)",
               "The [cannon](focusAnnotation(1)) is the tank's main armament, which  ....",
               "The [pilot hatch](focusAnnotation(2)) is where Clu enters and exits the tank.",
               "At the back of the tank is the [antenna](focusAnnotation(3)) through ....",
               "*\"I fight for the users!\" -- Clu*"
           ],
           annotations: [
               {
                   primIndex: 204,
                   bary: [0.05, 0.16, 0.79],
                   occludable: true,
                   glyph: "A",
                   title: "Orange tracks",
                   desc: "Indicates that the pilot is the rebel hacker, Clu",
                   eye: [14.69, 17.89, -26.88],
                   look: [5.35, 4.14, -15.44],
                   up: [-0.09, 0.99, 0.11],
                   pinShown: true,
                   labelShown: true,
                   mesh: "tank.entity2"
               },
               {
                   primIndex: 468,
                   bary: [0.05, 0.16, 0.79],
                   occludable: true,
                   glyph: "B",
                   title: "Cannon",
                   desc: "Fires chevron-shaped bolts of de-rezzing energy",
                   eye: [-0.66, 20.84, -21.59],
                   look: [-0.39, 6.84, -9.18],
                   up: [0.01, 0.97, 0.24],
                   pinShown: true,
                   labelShown: true,
                   mesh: "tank.entity9"
               },
               {
                   primIndex: 216,
                   bary: [0.05, 0.16, 0.79],
                   occludable: true,
                   glyph: "C",
                   title: "Pilot hatch",
                   desc: "Clu hops in and out of the tank program here",
                   eye: [1.48, 11.79, -15.13],
                   look: [1.62, 5.04, -9.14],
                   up: [0.01, 0.97, 0.24],
                   pinShown: true,
                   labelShown: true,
                   mesh: "tank.entity6"
               },
               {
                   primIndex: 4464,
                   bary: [0.05, 0.16, 0.79],
                   occludable: true,
                   glyph: "D",
                   title: "Antenna",
                   desc: "Links the tank program to the Master Control Program",
                   eye: [13.63, 16.79, 13.87],
                   look: [1.08, 7.72, 3.07],
                   up: [0.08, 0.99, 0.07],
                   pinShown: true,
                   labelShown: true,
                   mesh: "tank.entity9"
               }
           ]
       });
    });

Constructor

AnnotationStory

(
  • [scene]
  • [cfg]
)

Parameters:

  • [scene] Scene optional

    Parent Scene - creates this AnnotationStory in the default Scene when omitted.

  • [cfg] optional

    Configs

    • [id] String optional

      Optional ID, unique among all components in the parent Scene, generated automatically when omitted.

    • [meta] String:Object optional

      Optional map of user-defined metadata to attach to this AnnotationStory.

Methods

create

(
  • [cfg]
)

Convenience method for creating a Component within this Component's Scene.

The method is given a component configuration, like so:

var material = myComponent.create({
     type: "xeogl.PhongMaterial",
     diffuse: [1,0,0],
     specular: [1,1,0]
}, "myMaterial");

Parameters:

  • [cfg] optional

    Configuration for the component instance.

Returns:

:

destroy

()

Destroys this component.

Fires a destroyed event on this Component.

Automatically disassociates this component from other components, causing them to fall back on any defaults that this component overrode on them.

TODO: describe effect with respect to #create

error

(
  • message
)

Logs an error for this component to the JavaScript console.

The console message will have this format: [ERROR] [<component type> =<component id>: <message>

Also fires the message as an error event on the parent Scene.

Parameters:

  • message String

    The message to log

fire

(
  • event
  • value
  • [forget=false]
)

Fires an event on this component.

Notifies existing subscribers to the event, optionally retains the event to give to any subsequent notifications on the event as they are made.

Parameters:

  • event String

    The event type name

  • value Object

    The event parameters

  • [forget=false] Boolean optional

    When true, does not retain for subsequent subscribers

hasSubs

(
  • event
)
Boolean

Returns true if there are any subscribers to the given event on this component.

Parameters:

  • event String

    The event

Returns:

Boolean:

True if there are any subscribers to the given event on this component.

isType

(
  • type
)
Boolean

Tests if this component is of the given type, or is a subclass of the given type.

The type may be given as either a string or a component constructor.

This method works by walking up the inheritance type chain, which this component provides in property Component/superTypes:property, returning true as soon as one of the type strings in the chain matches the given type, of false if none match.

Examples:

var myRotate = new xeogl.Rotate({ ... });

myRotate.isType(xeogl.Component); // Returns true for all xeogl components
myRotate.isType("xeogl.Component"); // Returns true for all xeogl components
myRotate.isType(xeogl.Rotate); // Returns true
myRotate.isType(xeogl.Transform); // Returns true
myRotate.isType("xeogl.Transform"); // Returns true
myRotate.isType(xeogl.Mesh); // Returns false, because xeogl.Rotate does not (even indirectly) extend xeogl.Mesh

Parameters:

  • type String | Function

    Component type to compare with, eg "xeogl.PhongMaterial", or a xeogl component constructor.

Returns:

Boolean:

True if this component is of given type or is subclass of the given type.

log

(
  • message
)

Logs a console debugging message for this component.

The console message will have this format: [LOG] [<component type> <component id>: <message>

Also fires the message as a log event on the parent Scene.

Parameters:

  • message String

    The message to log

off

(
  • subId
)

Cancels an event subscription that was previously made with Component#on() or Component#once().

Parameters:

  • subId String

    Publication subId

on

(
  • event
  • callback
  • [scope=this]
)
String

Subscribes to an event on this component.

The callback is be called with this component as scope.

Parameters:

  • event String

    The event

  • callback Function

    Called fired on the event

  • [scope=this] Object optional

    Scope for the callback

Returns:

String:

Handle to the subscription, which may be used to unsubscribe with {@link #off}.

once

(
  • event
  • callback
  • [scope=this]
)

Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is subIdd.

This is equivalent to calling Component#on(), and then calling Component#off() inside the callback function.

Parameters:

  • event String

    Data event to listen to

  • callback Function(data)

    Called when fresh data is available at the event

  • [scope=this] Object optional

    Scope for the callback

warn

(
  • message
)

Logs a warning for this component to the JavaScript console.

The console message will have this format: [WARN] [<component type> =<component id>: <message>

Also fires the message as a warn event on the parent Scene.

Parameters:

  • message String

    The message to log

Properties

destroyed

Boolean

True as soon as this Component has been destroyed

id

String final

Unique ID for this Component within its parent Scene.

metadata

Object

Arbitrary, user-defined metadata on this component.

model

Model final

The Model which contains this Component, if any.

Will be null if this Component is not in a Model.

scene

Scene final

The parent Scene that contains this Component.

type

String final

JavaScript class name for this Component.

For example: "xeogl.AmbientLight", "xeogl.MetallicMaterial" etc.

Events

destroyed

Fired when this Component is destroyed.