Page Comparison

h2. Creation

{div2:class=api-table}
|| 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 | {code:javascript}var capturer = decapod.capturer("#myContainer", {
    selectors: {
        title: ".mySelector"
    }
});{code} ||
{div2}

h2. Component Selectors

{tip:title=Selectors}
Some information about selectors and how they can be configured can be found here: [Component Configuration Options - Selectors|http://wiki.fluidproject.org/display/docs/Component+Configuration+Options#ComponentConfigurationOptions-selectors]
{tip}

h3. {{title}}
{div2:class=api-table}
|| 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 | {code:javascript}
decapod.capturer(".myContainer", {
    selectors: {
        title: ".myTitle"
    }
});
{code} ||
{div2}

h3. {{captureButton}}
{div2:class=api-table}
|| Description | The element that will be used to trigger a capture. ||
|| Default | {{".dc-capturer-captureButton"}} ||
|| Example | {code:javascript}
decapod.capturer(".myContainer", {
    selectors: {
        captureButton: ".myCaptureButton"
    }
});
{code} ||
{div2}

h3. {{exportButton}}
{div2:class=api-table}
|| Description | The element that will be used to trigger a download of the captured images. ||
|| Default | {{".dc-capturer-exportButton"}} ||
|| Example | {code:javascript}
decapod.capturer(".myContainer", {
    selectors: {
        exportButton: ".myExportButton"
    }
});
{code} ||
{div2}

h3. {{load}}
{div2:class=api-table}
|| Description | The element that will house the status message and progress indicator for when the cameras are being checked. ||
|| Default | {{".dc-capturer-load"}} ||
|| Example | {code:javascript}
decapod.capturer(".myContainer", {
    selectors: {
        load: ".myLoad"
    }
});
{code} ||
{div2}

h3. {{loadMessage}}
{div2:class=api-table}
|| Description | The element that will display the status message of the cameras being checked. ||
|| Default | {{".dc-capturer-loadMessage"}} ||
|| Example | {code:javascript}
decapod.capturer(".myContainer", {
    selectors: {
        loadMessage: ".myLoadMessage"
    }
});
{code} ||
{div2}

h3. {{restart}}
{div2:class=api-table}
|| Description | The element used to refresh the page. Likely an <a>. ||
|| Default | {{".dc-capturer-restart"}} ||
|| Example | {code:javascript}
decapod.capturer(".myContainer", {
    selectors: {
        restart: ".myRestart"
    }
});
{code} ||
{div2}

h3. {{help}}
{div2:class=api-table}
|| 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 | {code:javascript}
decapod.capturer(".myContainer", {
    selectors: {
        help: ".myHelp"
    }
});
{code} ||
{div2}

h3. {{status}}
{div2:class=api-table}
|| Description | The element used to house the status component. Status messages for capturer will display here. ||
|| Default | {{".dc-capturer-status"}} ||
|| Example | {code:javascript}
decapod.capturer(".myContainer", {
    selectors: {
        status: ".myStatus"
    }
});
{code} ||
{div2}

h3. {{preview}}
{div2:class=api-table}
|| Description | The element used to house the captureReviewer component. The captured images will display here. ||
|| Default | {{".dc-capturer-preview"}} ||
|| Example | {code:javascript}
decapod.capturer(".myContainer", {
    selectors: {
        preview: ".myPreview"
    }
});
{code} ||
{div2}

h3. {{exportDesc}}
{div2:class=api-table}
|| Description | The element used to hold the message about the download (e.g. reminder to calibrate). ||
|| Default | {{".dc-capturer-export-description"}} ||
|| Example | {code:javascript}
decapod.capturer(".myContainer", {
    selectors: {
        exportDesc: ".myExportDesc"
    }
});
{code} ||
{div2}

h3. {{downloadFrame}}
{div2:class=api-table}
|| 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 | {code:javascript}
decapod.capturer(".myContainer", {
    selectors: {
        downloadFrame: ".myDownloadFrame"
    }
});
{code} ||
{div2}

h2. Styles

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