Attributes of a dizmo

Properties of a dizmo object can be read and modified with the methods getAttribute and setAttribute. This can be the title, the frame or the background of the dizmo.

// change the title of the dizmo
dizmo.setAttribute("settings/title" , "my new dizmo title");
// make the dizmo small so that only the icon can be seen
dizmo.setAttribute("state/iconized" , true);
// make the frame of the dizmo semitransparent
dizmo.setAttribute("settings/frameopacity" , 0.5);
// enable the resize button on the right side
dizmo.setAttribute("settings/usercontrols/allowResize", true);
// define the minimal width of the dizmo frame
dizmo.setAttribute("geometry/minWidth", 500);
// define the minimal height of the dizmo frame
dizmo.setAttribute("geometry/minHeight", 400);

Note: The setAttribute method may throw an exception if you write the wrong type to a attribute, or if the value you write is out of the allowed range. (e.g. "icon" has to be a boolean, or the frame opacity has to be number between 0 and 1).

For a complete list of the available attributes refer to the data tree.

Dizmo coordinate system

Dizmo coordinate system
Dizmo coordinate system

The coordinate system of the dizmoViewer has an x and y range from -3000 to 3000 with 0/0 being in the center of the workspace. The position of a dizmo is relative to the upper left corner of it. Rotation is applied clockwise around the upper left corner.

Absolute and relative geometry

When dizmos are placed on top of each other, the child dizmos geometry becomes relative to its parent. This means that the child’s attributes geometry/x and geometry/y are relative to the parent dizmo. A dizmo placed on the top-left of its parent will have the geometry/x and geometrx/y attribute set to 0.

If you want to find out the dizmos absolute position in relation to the workspace, use the attributes absolutegeometry/x and absolutegeometrx/y.

A dizmos geometry/width and geometry/height attributes are the original values, regardless of any zoom and/or rotation or if the dizmo is placed on the workspace or on another dizmo.

If you want to find out the absolute size of a dizmo, with zoom and rotation taken into account, use the absolutegeometry/width and absolutegeometry/height attributes.

The geometry/angle and geometry/zoom and absolutegeometry/angle and absolutegeometry/zoom attributes are the same.

Size and position

Dizmo coordinate system
Dizmo size

A dizmo can have a size between 50 (height) or 65 (width) and 4000 pixels. The height of the dizmo does not include the title bar.

The front and back of a dizmo can have different sizes. As the back of a dizmo is used to display settings, short explanations and secondary features, it can be bigger than the front.

You have a choice of several dizmo objects methods for changing the size and position of the dizmo.

    // move the dizmo to x = 200 and y = 300
    dizmo.setPosition(200,300);

    // resize the dizmo to width = 400 height= 500
    dizmo.setSize(400,500);

    // do both of the above in one step
    dizmo.setPositionAndSize(200,300,400,500);

Note: When changing the x coordinate first, this might give the dizmo a new parent that imposes a new geometry on the dizmo moved. This means that setting the y coordinate in a second setAttribute call will have an unexpected effect based on the new (temporary) coordinate system coming form the new parent. This is why changing multiple parameters of the geometry of a dizmo should be done using beginAttributeUpdate() – endAttributeUpdate() to make sure the changes are handled as one transaction. For dizmoViewer this means endAttributeUpdate() must not only fire any subscriptions held back during the transaction but it must also update the parent after a transaction.

dizmo.beginAttributeUpdate("geometry");
dizmo.setAttribute("geometry/x",400);
dizmo.setAttribute("geometry/y",600);
dizmo.endAttributeUpdate("geometry");

Responsive content

You can enable or disable size changes by adjusting the setAttributes method in the dizmo class. If resizing is allowed, you will see a triangle in the lower right hand corner of your dizmo.

// Allow the resizing of the dizmo
dizmo.setAttribute('settings/usercontrols/allowResize', true);

// Disable the resizing of the dizmo
dizmo.setAttribute('settings/usercontrols/allowResize', false);

You can also enforce a minimal width and height of the dizmo in the same method:

dizmo.setAttribute('geometry/minHeight', 290);
dizmo.setAttribute('geometry/minWidth', 200);

By listening to the event dizmo.resized, your dizmo elements can respond to size changes:

jQuery(events).on('dizmo.resized', function(e, width, height) {
    DizmoElements('#my-input').width(width-30);
});

Practical example

In the file Dizmo.js, we will set the properties for Gauge.

As the content is a lot smaller than the settings side, we set the size of the front

// Set size of the front
self.my.setSize(240, 170);

and of the back

// Set size of the back
Gauge.Dizmo.setSize(240,300);

We disable resizing:

// Disable the manual resizing of the dizmo
dizmo.setAttribute('settings/usercontrols/allowResize', false);

External resources