VintaSoft Imaging .NET SDK 15.0: 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);