VintaSoft Imaging .NET SDK 12.4: 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("documentViewerContainer", { annotations: 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) {
        // get items of main menu
        var mainMenuItems = mainMenu.get_Items();
    
        // add "Annotation" menu panel to the main menu
        mainMenuItems.addItem("annotationsMenuPanel");
    
        // get the "Annotations" menu
        var annotationsMenuPanel = mainMenuItems.getItemByRegisteredId("annotationsMenuPanel");
        // get items of "Annotations" menu
        var annotationsMenuPanelItems = annotationsMenuPanel.get_Items();
    
    
        /**
         * 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 "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);