VintaSoft Imaging .NET SDK 12.4: Documentation for Web developer
In This Topic
    Create new side panel for Web Document Viewer UI
    In This Topic
    Here is JavaScript code that shows how to create UI panel with simple processing commands, register new panel in UI element factory and add new panel to the side panel of web document viewer:

    var _docViewer;
     * Main function.
    function __main() {
        // create the document viewer settings
        var docViewerSettings = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainer");
        // initialize side panel of document viewer
        // create the document viewer
        _docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);
     Initializes side panel of document viewer.
     @param {object} docViewerSettings Settings of document viewer.
    function __initSidePanel(docViewerSettings) {
        // get items of document viewer
        var docViewerItems = docViewerSettings.get_Items();
        var sidePanel = docViewerItems.getItemByRegisteredId("sidePanel");
        if (sidePanel != null) {
            var sidePanelItems = sidePanel.get_PanelsCollection();
            // register the "Simple image processing" panel in web UI elements factory
            Vintasoft.Imaging.DocumentViewer.WebUiElementsFactoryJS.registerElement("simpleImageProcessingPanel", __createSimpleImageProcessingPanel);
            // add the "Simple image processing" panel to the side panel
     * Creates UI panel with simple image processing functionality.
    function __createSimpleImageProcessingPanel () {
        // create the button that allows to invert image in image viewer
        var invertImageButton = new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiButtonJS({
            cssClass: "invertImage",
            title: "Invert image",
            localizationId: "invertImageButton",
            css: { "margin-left": "5px" },
            onClick: __invertImageButton_clicked
        // create the button that allows to open/close the simple image processing panel
        var simpleImageProcessingPanelOpenButton = new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiButtonJS({
            cssClass: "simpleImageProcessing",
            title: "Simple image processing",
            localizationId: "simpleImageProcessingPanelButton"
        // create an UI panel, which provides simple image processing functionality
        var panel = new Vintasoft.Imaging.DocumentViewer.Panels.WebUiPanelJS(
            { cssClass: "vsdv-sidePanel-content" }, simpleImageProcessingPanelOpenButton);
        return panel;
     * "Invert image" button is clicked.
    function __invertImageButton_clicked(event, uiElement) {
        // get document viewer
        _docViewer = uiElement.get_RootControl();
        // get image viewer
        var imageViewer = _docViewer.get_ImageViewer();
        // get focused image in image viewer
        var focusedImage = imageViewer.get_FocusedImage();
        // if focused image exists
        if (focusedImage != null) {
            // create an image processing command
            var invertCommand = new Vintasoft.Imaging.ImageProcessing.WebInvertCommandJS();
            // apply command to the focused image
            invertCommand.execute(focusedImage, __invertCommand_success, __invertCommand_error);
     * Image is inverted successfully.
    function __invertCommand_success(answer) {
        // get information about processed image
        var fileUrl =;
        var pageIndex = answer.imageInfo.pageIndex;
        // create new image source and image
        var imageSource = new Vintasoft.Shared.WebImageSourceJS(fileUrl);
        var image = new Vintasoft.Shared.WebImageJS(imageSource, pageIndex);
        // get image viewer
        var imageViewer = _docViewer.get_ImageViewer();
        // get index of focused image in image viewer
        var focusedIndex = imageViewer.get_FocusedIndex();
        // set the processed image as the focused image in image viewer
        imageViewer.get_Images().set(focusedIndex, image);
     * Invert command is failed.
    function __invertCommand_error(answer) {
        // if answer contains error message
        if (answer.errorMessage)
            // show the error message