Instantiating and Controlling dizmos

Using the viewer and bundle object you can instantiate one dizmo from within another one. To do so you need to have the bundleID of the dizmo you want to instantiate. You can read the list of installed bundles using the viewer.getBundles function:

var bundleList=viewer.getBundles();

// get the Ids of all installed bundles
var to_bundle_id = function(bndl) {
        return bndl.identifier;
var installedBundleIds =;

This will return an array of bundle identifiers that can be used to produce new instances of dizmos using the instantiateDizmo function.

When instantiating a dizmo using instantiateDizmo(options, publicProperties, privateProperties, callback); you may supply initializing values for most of the attributes of the dizmo in the options object. This may be used for example to make the dizmo appear in a specific location on the screen when it is created or to set its background color. Please check Dizmo coordinate system for more details about dizmoViewer coordinates.

// instantiate a clock dizmo at the location x = 150 , y = 100
var newBundle = new dizmojs.Bundle('com.dizmo.clock');
   'geometry/x' : 150 ,
   'geometry/y' : 100

To set some initial values in the public or private storage of the dizmo being created use the second and third object in the parameterlist of the instantiateDizmo function.

// instantiate a clock dizmo with the public property foo set to bar
var newBundle = new dizmojs.Bundle('com.dizmo.clock');
   'geometry/x' : 150 ,
   'geometry/y' : 100
    'foo' : 'bar'

You can also include these initial values for dizmo attributes, private tree nodes and public tree nodes in package.json

"settings": {
    "tree_values": {
        "attributes": {
            "geometry/x": 10
        "public": {
            "foo": "bar"

The fourth parameter callback can be used to get a reference to the just created dizmo and will be called once the new dizmo has been instantiated.

Independent of instantiating a dizmo you may also get information about which dizmos have been created (i.e. are running) and in turn get additional information about each of them.

// get all the running dizmo instances
var runningDizmos = viewer.getDizmos();

// Get the rotation of the first dizmo in the list
var arot_dizmo_0 = runningDizmos[0].getAttribute('geometry/angle');

// get the Ids of all running dizmos
var to_dizmo_id = function to_bundle_id (dzm) {
        return dzm.identifier;
var runningDizmoIds =;

You can also close a dizmo. Note however, that you can only close your own dizmo.

// close the dizmo

For a complete list of the available viewer and bundle attributes and functions, please refer to the API documentation of the dizmojs.Viewer and dizmojs.Bundle class.

Once a dizmo is instantiated in dizmoViewer, you can move, set the position, size, zoom level and angle of other dizmos by changing their attributes with the following functions:


For a more detailed description of these functions, take a look in the API documentation of the dizmojs.Dizmo class.