VintaSoft Tech Community

Posted: **Thu Mar 03, 2022 9:21 am**

Hi,

I am trying this demo.
https://demos.vintasoft.com/AspNetMvcAnnotationDemo/

As there are separate tabs for toolbar options (File, View, Tools, Annotations) and all tabs has different options, Is there any way to display all options from all these tabs as single toolbar strip.

Thanks.

Posted: **Thu Mar 03, 2022 7:44 pm**

Hi John,

Yes, it is possible to customize menu (toolbar) of VintaSoft web document viewer.

Here is JavaScript code snippet from VintaSoft ASP.NET Annotation Demo that demonstrates how menu is created:

Code: Select all

/**
 Initializes main menu of document viewer.
 @param {object} docViewerSettings Settings of document viewer.
*/
function __initMenu(docViewerSettings) {
    // get items of document viewer
    var items = docViewerSettings.get_Items();

    var uploadFileButton = items.getItemByRegisteredId("uploadFileButton");
    if (uploadFileButton != null)
        uploadFileButton.set_FileExtensionFilter(".bmp, .emf, .gif, .ico, .cur, .jpg, .jpeg, .jls, .pcx, .png, .tif, .tiff, .wmf, .jb2, .jbig2, .jp2, .j2k, .j2c, .jpc, .pdf");

    // get the main menu of document viewer
    var mainMenu = items.getItemByRegisteredId("mainMenu");
    // if main menu is found
    if (mainMenu != null) {
        // get items of main menu
        var mainMenuItems = mainMenu.get_Items();

        // add "Annotation" menu panel
        mainMenuItems.addItem("annotationsMenuPanel");
    }

    // get the "File" menu panel
    var fileMenuPanel = items.getItemByRegisteredId("fileToolbarPanel");
    // if menu panel is found
    if (fileMenuPanel != null) {
        // get items of file menu panel
        var fileMenuPanelItems = fileMenuPanel.get_Items();

        // add the "Previous uploaded files" button to the menu panel
        fileMenuPanelItems.insertItem(1, "previousUploadFilesButton");
    }

    // get the "View" menu panel
    var viewMenuPanel = items.getItemByRegisteredId("viewMenuPanel");
    // if menu panel is found
    if (viewMenuPanel != null) {
        // get items of menu panel
        var viewMenuPanelItems = viewMenuPanel.get_Items();
        // add the "Image viewer settings" button to the menu panel
        viewMenuPanelItems.insertItem(viewMenuPanelItems.get_Count() - 1, "imageViewerSettingsButton");
    }
}

You can see this code in source codes of VintaSoft ASP.NET Annotation Demo in installation of VintaSoft Imaging NET SDK - function __initMenu in file "[SdkInstallPath]\VintaSoft\Imaging .NET v11.0\Examples\ASP.NET MVC\CSharp\AspNetMvcAnnotationDemo\Scripts\AnnotationDemo.js".

Also please read how to customize UI of VintaSoft web document viewer in documentation: https://www.vintasoft.com/docs/vsimagin ... er_UI.html

Best regards, Alexander

Posted: **Tue Mar 08, 2022 4:46 pm**

Hi Alexander,

I want to move all buttons from File, View, Tools panel to Annotations toolbar panel with separator, Can you advise for the same?

Thanks,
John

Posted: **Fri Mar 11, 2022 4:59 pm**

Hi John,

I want to move all buttons from File, View, Tools panel to Annotations toolbar panel with separator, Can you advise for the same?

Sorry for delay.

Here is JavaScript code that demonstrates how to initialize main menu in VintaSoft web document viewer (create "Annotations" menu that contains items of "File", "View", "Tools" and "Annotations" menus):

Code: Select all

function __initMenuInVintasoftWebDocumentViewer(docViewerSettings) {
    // get the main menu of VintaSoft web document viewer
    var mainMenu = items.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");

        // remove "File" menu from main menu
        mainMenuItems.removeItemAt(0);
        // remove "View" menu from main menu
        mainMenuItems.removeItemAt(0);
        // remove "Tools" menu from main menu
        mainMenuItems.removeItemAt(0);

        // find "Annotations" menu in main menu
        var annotationsMenu = items.getItemByRegisteredId("annotationsMenuPanel");
        // get items of "Annotations" menu
        var annotationMenuItems = annotationsMenu.get_Items();

        // insert "File" menu into "Annotations" menu
        annotationMenuItems.insertItem(0, "fileToolbarPanel");

        // insert divider into "Annotations" menu
        annotationMenuItems.insertItem(1, "vertDivider");

        // insert items of "View" menu into "Annotations" menu
        annotationMenuItems.insertItem(2, "sizeModeToggleButton");
        annotationMenuItems.insertItem(3, "rotateToolbarPanel");
        annotationMenuItems.insertItem(4, "thumbnailViewerSettingsButton");

        // insert divider into "Annotations" menu
        annotationMenuItems.insertItem(5, "vertDivider");

        // insert "Tools" menu into "Annotations" menu
        annotationMenuItems.insertItem(6, "visualToolsToolbarPanel");

        // insert divider into "Annotations" menu
        annotationMenuItems.insertItem(7, "vertDivider");
    }
}

In menu you can use standard or custom UI button or UI panel.

You can get information about string identifiers of standard UI elements in documentation: https://www.vintasoft.com/docs/vsimagin ... oryJS.html

Please read how to create custom UI button here: https://www.vintasoft.com/docs/vsimagin ... utton.html

Best regards, Alexander

VintaSoft Tech Community

Customize toolbar options

Customize toolbar options

Re: Customize toolbar options

Re: Customize toolbar options

Re: Customize toolbar options