Skip to end of metadata
Go to start of metadata

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.

  • No labels