Decapod 0.7 Calibration and Dewarp Shared User Interface Configuration

Owned by y z
Last updated: Nov 30, 2012Version comment
3 min read

Creation

Method

decapod.calibrator(container, options);

Description

Instantiates the calibrator component, which is the top level component for Stereo 3D Calibration page.

Parameters

container
A CSS-based selectors, single-element jQuery object, or DOM element that identifies the root DOM node where the calibrator should be placed

options
An optional data structure that configures the calibrator component

Returns

The calibrator component

Examples 

var calibrator = decapod.calibrator("#myContainer", {
    selectors: {
        title: ".mySelector"
    }
});

Method

decapod.dewarper(container, options);

Description

Instantiates the dewarper component, which is the top level component for the Stereo 3D Dewarp page.

Parameters

container
A CSS-based selectors, single-element jQuery object, or DOM element that identifies the root DOM node where the dewarper should be placed

options
An optional data structure that configures the dewarper component

Returns

The dewarper component

Examples 

var dewarper = decapod.dewarper("#myContainer", {
    selectors: {
        title: ".mySelector"
    }
});

Calibrator and Dewarper Shared Selectors

Selectors

Some information about selectors and how they can be configured can be found here: Component Configuration Options - Selectors

title

Description

The element that will be used to display the main title for the calibrator/dewarper. This should be an <h1> when calibrator/dewarper is the only component on the page.

Default

".dc-stereo-title"

Example 

// Configure calibrator's title.
decapod.calibrator(".myContainer", {
    selectors: {
        title: ".myTitle"
    }
});
// Configure dewarper's title.
decapod.dewarper(".myContainer", {
    selectors: {
        title: ".myTitle"
    }
});

help

Description

The element that will be used as a link to the help material for calibration/dewarping.

Default

".dc-stereo-help"

Example 

// Configure calibrator's help link text.
decapod.calibrator(".myContainer", {
    selectors: {
        help: ".myHelp"
    }
});
// Configure dewarper's help link text.
decapod.dewarper(".myContainer", {
    selectors: {
        help: ".myHelp"
    }
});

start

Description

The element that will be used to start the process of calibration/dewarping itself.

Default

".dc-stereo-start"

Example 

// Configure calibrator's start calibration button.
decapod.calibrator(".myContainer", {
    selectors: {
        start: ".myStart"
    }
});
// Configure dewarper's start dewarping button.
decapod.dewarper(".myContainer", {
    selectors: {
        start: ".myStart"
    }
});

browse

Description

The element that will be used to contain:

  • Calibration: archive selection step.
  • Dewarping: captures archive selection step.

Default

".dc-stereo-browse"

Example 

// Configure calibrator's select archive step container.
decapod.calibrator(".myContainer", {
    selectors: {
        browse: ".myBrowse"
    }
});
// Configure dewarper's select captures archive step container.
decapod.dewarper(".myContainer", {
    selectors: {
        browse: ".myBrowse"
    }
});

status

Description

The element that contains the status/progress box.

Default

".dc-stereo-status"

Example 

// Configure calibrator's status/progress box container.
decapod.calibrator(".myContainer", {
    selectors: {
        status: ".myStatus"
    }
});
// Configure dewarper's status/progress box container.
decapod.dewarper(".myContainer", {
    selectors: {
        status: ".myStatus"
    }
});

Dewarper Only Selectors

browseCalibration

Description

The element that contains calibration archive selection step.

Default

".dc-stereo-browseCalibration"

Example 

// Configure dewarper's select calibration archive step container.
decapod.dewarper(".myContainer", {
    selectors: {
        browseCalibration: ".myBrowseCalibration"
    }
});

colourPicker

Description

The element that contains colour picker step.

Default

".dc-stereo-colourPicker"

Example 

// Configure dewarper's colour picker step container.
decapod.dewarper(".myContainer", {
    selectors: {
        colourPicker: ".myColourPicker"
    }
});

Styles

See the Decapod Styling guide for information on changing the appearance of Decapod.