Decapod 0.7 Capture User Interface Configuration

Owned by Justin Obara
Last updated: Nov 30, 2012Version comment
3 min read

Creation

Method

decapod.capturer(container, options);

Description

Instantiates the capturer component, which is the top level component for Capture 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 capture component

Returns

The capture component

Examples 

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

Component 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 capturer. This should be an <h1> when capturer is the only component on the page.

Default

".dc-capturer-title"

Example 

decapod.capturer(".myContainer", {
    selectors: {
        title: ".myTitle"
    }
});

captureButton

Description

The element that will be used to trigger a capture.

Default

".dc-capturer-captureButton"

Example 

decapod.capturer(".myContainer", {
    selectors: {
        captureButton: ".myCaptureButton"
    }
});

exportButton

Description

The element that will be used to trigger a download of the captured images.

Default

".dc-capturer-exportButton"

Example 

decapod.capturer(".myContainer", {
    selectors: {
        exportButton: ".myExportButton"
    }
});

load

Description

The element that will house the status message and progress indicator for when the cameras are being checked.

Default

".dc-capturer-load"

Example 

decapod.capturer(".myContainer", {
    selectors: {
        load: ".myLoad"
    }
});

loadMessage

Description

The element that will display the status message of the cameras being checked.

Default

".dc-capturer-loadMessage"

Example 

decapod.capturer(".myContainer", {
    selectors: {
        loadMessage: ".myLoadMessage"
    }
});

restart

Description

The element used to refresh the page. Likely an <a>.

Default

".dc-capturer-restart"

Example 

decapod.capturer(".myContainer", {
    selectors: {
        restart: ".myRestart"
    }
});

help

Description

The element used to refer to the help documentation. Should be an <a> with the url to the help page.

Default

".dc-capturer-help"

Example 

decapod.capturer(".myContainer", {
    selectors: {
        help: ".myHelp"
    }
});

status

Description

The element used to house the status component. Status messages for capturer will display here.

Default

".dc-capturer-status"

Example 

decapod.capturer(".myContainer", {
    selectors: {
        status: ".myStatus"
    }
});

preview

Description

The element used to house the captureReviewer component. The captured images will display here.

Default

".dc-capturer-preview"

Example 

decapod.capturer(".myContainer", {
    selectors: {
        preview: ".myPreview"
    }
});

exportDesc

Description

The element used to hold the message about the download (e.g. reminder to calibrate).

Default

".dc-capturer-export-description"

Example 

decapod.capturer(".myContainer", {
    selectors: {
        exportDesc: ".myExportDesc"
    }
});

downloadFrame

Description

The <iframe> element for which the download url is injected into. This is used to fetch the download.

Default

".dc-capturer-download-frame"

Example 

decapod.capturer(".myContainer", {
    selectors: {
        downloadFrame: ".myDownloadFrame"
    }
});

Styles

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