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
dimzo.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 API documentation of the dizmojs.Dizmo class.

Dizmo coordinate system

Dizmo coordinate system
Dizmo coordinate system

The coordinate system of the dizmoSpace 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.

Size and position

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);

It is highly recommended to use as few method calls as possible. The calls may be synced to another dizmo instance over a network. So always use dizmo.setSize if you want to change width and height of a dizmo.

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