Moxtra Draw Widget for Web

Embed the Moxtra Draw module to use the annotation features on top of files into your web application using the simple JavaScript calls mentioned in this document.

Start Annotation

Optional parameters to include in Moxtra.annotate() API request
Name Value Description
iframe "true" or "false" Default is false. Specify to launch the timeline in iframe or in a new window.
binder_id Binder ID Optional: if launching the annotation using the binder ID.
binder_name Binder Name Optional: if launching the annotation using the binder name instead of the binder ID.
tagid4iframe iFrame ID Specify the ID of iframe container - applicable only if iframe in option is set to "true".
border "true" or "false" Default is true. Specify "false" if using iframe inside a tag without border around the iframe.
scroll "true" or "false" Default is false. Specify "true" if using iframe inside a tag adding scroll bar around the iframe.
iframewidth iFrame Width Width of the annotate iFrame - applicable only if iframe in option is set to "true". Default is set to 1024px. If container controls the width, please set to 100%.
iframeheight iFrame Height Height of the annotate iFrame - applicable only if iframe in option is set to "true". Default is set to 768px. If container controls the height, please set to 100%.
extension - Here are the extension options that can be used with the start draw API:

To set the room ratio of preview from 0.25 (25%) to 4 (400%).

{ 
    "draw_ui": { "zoom": 2 } 
}

To show or hide the exit button. Default is false.

{ 
    "draw_ui": { "hide_exit": true/false } 
}

To set the default color for text, arrow, and shape.

{ 
    "draw_ui": { "default_annotate_color": "#FF99CC" } 
}

Moxtra start annotate callback events handled through a listener
Event Description Attributes
start_annotate Triggered on successful start of annotate. session_id, binder_id
stop_annotate Triggered when the annotate is ended. binder_id, share_url, download_url
error Triggered in the event of an error. error_code, error_message

Sample code to start Annotate (using binder ID):

var options = {
    binder_id: BINDER_ID,
    iframe: true,
    tagid4iframe: "container",
    iframewidth: "1020px",
    iframeheight: "650px",
    start_annotate: function(event) {
        alert("Annotate start: " +
        " session id: " + event.session_id +
        " binder id: " + event.binder_id);
    },
    stop_annotate: function(event) {
        alert("Annotate stop: download URL: " + event.download_url +
        " share URL: " + event.share_url +
        " binder id: " + event.binder_id);
    },
    error: function(event) {
        alert("Annotate error code: " + event.error_code + " error message: " + event.error_message);
    }
};

Moxtra.annotate(options);