VintaSoft Imaging .NET SDK 15.1: Documentation for Web developer
In This Topic
Create new annotation button for Web Document Viewer UI
In This Topic
Here is JavaScript code that shows how to create UI-button, which starts building process of mark annotation, and register new button in annotation menu in toolbar of web document viewer:
// create settings for document viewer with annotation support
var docViewerSettings =
    new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainerId", "documentViewerLocalizationId", true);
// specify that the main menu should contain the annotation menu
docViewerSettings.set_ShowAnnotationMenuInMainMenu(true);
// specify that the side panel should contain the annotation list panel
docViewerSettings.set_ShowAnnotationListSidePanel(true);

// get items of document viewer
var docViewerItems = docViewerSettings.get_Items();

// get the main menu of document viewer
var mainMenu = docViewerItems.getItemByRegisteredId("mainMenu");

// if main menu is found
if (mainMenu != null) {
    /**
     * Creates "Tick annotation" button that starts building process of mark annotation.
     */
    function __createMarkAnnotationWithTickType() {
        // create "Add Cross annotation" button that starts building of Mark annotation in annotation viewer
        var addTickAnnotationButton = new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiAnnotationButtonJS({
            cssClass: "vsdv-annotations-addTickButton",
            title: "Tick annotation",
            localizationId: "addTickAnnotationButton",
        }, "MarkAnnotation");

        // subscribe to the "annotationCreated" of button
        Vintasoft.Shared.subscribeToEvent(addTickAnnotationButton, "annotationCreated", __addTickAnnotationButton_annotationCreated);

        // return button
        return addTickAnnotationButton;
    }

    /**
     * Handler of "annotationCreated" event raised by "Tick annotation" button.
     */
    function __addTickAnnotationButton_annotationCreated(event, annotation) {
        // specify the Tick type for annotation
        annotation.set_MarkType(new Vintasoft.Imaging.Annotation.WebMarkAnnotationTypeEnumJS("Tick"));
    }


    // register the "Add Tick annotation" button in web UI elements factory
    Vintasoft.Imaging.DocumentViewer.WebUiElementsFactoryJS.registerElement("addTickAnnotationButton", __createMarkAnnotationWithTickType);


    // get items of main menu
    var mainMenuItems = mainMenu.get_Items();

    // get the "Annotations" menu
    var annotationsMenuPanel = mainMenuItems.getItemByRegisteredId("annotationsMenuPanel");
    // get items of "Annotations" menu
    var annotationsMenuPanelItems = annotationsMenuPanel.get_Items();

    // get "addAnnotationToolbar" panel
    var addAnnotationToolbarPanel = annotationsMenuPanelItems.getItemByRegisteredId("addAnnotationToolbarPanel");
    // get items (buttons) of "addAnnotationToolbar" panel
    var addAnnotationToolbarPanelItems = addAnnotationToolbarPanel.get_Items();
    // add "addTickAnnotation" button to the "addAnnotationToolbar" panel
    addAnnotationToolbarPanelItems.addItem("addTickAnnotationButton");
}

// create the document viewer
var docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);