Installing and Configuring the Web Viewer

Summary

This topic describes how to install and configure the Web Viewer.

Overview

The Medical Web Viewer Demo is a javascript application built on an Angular framework for displaying and leveling extended grayscale images.    

Directory Structure

The entire medical web viewer’s site folder structure is contained in the C:\LEADTOOLS 19\Examples\DotNet\PACSFramework\MedicalWebViewer\JS\MedicalWebViewerDemo folder. The following list shows the files required in order for the Medical Web Viewer Demo to function properly. This list replicates the folder structure required as well:

  • Root (\LEADTOOLS 19\Examples\DotNet\PACSFramework\MedicalWebViewer\JS\MedicalWebViewerDemo)

    HeartBeat.html
    index.html
    JSMedicalWebViewerDemo_19.csproj
    SeriesLayouts.xml
    StudyLayouts.xml
    test.htm
    web.config
    web.Debug.config
    web.Release.config

  • Bin directory

    • JSMedicalWebViewerDemo_19.dll
    • JSMedicalWebViewerDemo_19.dll.config
  • CSS directory

    • ag-grid.css
    • angular-block-ui.css
    • angular-grid.css
    • angular-multi-select.css
    • app.css
    • bootstrap.min.css
    • bootstrap-colorpicker.css
    • bootstrap-theme.min.css
    • codemirror.css
    • colorpicker.css
    • dialogs.css
    • foldgutter.css
    • font-awesome.min.css
    • hotkeys.min.css
    • icons.gif
    • jqGrid.bootstrap.css
    • jquery.contextMenu.min.css
    • layout-default-latest.css
    • loading-bar.css
    • m.app.css
    • m.toolbar.css
    • PropertyGrid.css
    • theme-fresh.css
    • toolbar.css
    • treeGrid.css
    • ui.fancytree.min.css
    • ui.jqgrid.css
    • ui-grid.ttf
    • ui-grid.woff
    • ui-grid-unstable.css
  • Fonts directory

    • FontAwesome.otf
    • fontawesome-webfont.eot
    • fontawesome-webfont.svg
    • fontawesome-webfont.ttf
    • fontawesome-webfont.woff
    • glyphicons-halflings-regular.eot
    • glyphicons-halflings-regular.svg
    • glyphicons-halflings-regular.ttf
    • glyphicons-halflings-regular.woff
  • Images directory

    • alpha.png
    • alpha-horizontal.png
    • bkCpicker.png
    • Calibration.png
    • hue.png
    • hue-horizontal.png
    • leadlogo.png
    • saturation.Png

    • images\Objects directory

      • Point.png
    • images\template-editor directory

      • rotate_180.png
      • rotate_270.png
      • rotate_90.png
    • images\viewer directory

      • small-sprite-sheet.png
      • sprite-sheet.png
  • Languages directory

    • en-US.json
    • en-US.json
  • Lib directory

    • ag-grid.d.ts
    • codemirror.d.ts
    • custom.d.ts
    • datejs.d.ts
    • esprima.d.ts
    • estree.d.ts
    • UUID.d.ts

    • Lib\Angular directory

      • angular.d.ts
      • angular-route.d.ts
      • angular-ui-bootstrap.d.ts
    • Lib\LEADTOOLS directory

      • Leadtools.Annotations.Automation.d.ts
      • Leadtools.Annotations.Core.d.ts
      • Leadtools.Annotations.Designers.d.ts
      • Leadtools.Annotations.JavaScript.d.ts
      • Leadtools.Annotations.Rendering.JavaScript.d.ts
      • Leadtools.Annotations.Core.d.ts
      • Leadtools.Controls.d.ts
      • Leadtools.Controls.Medical.d.ts
      • Leadtools.d.ts

      • Lib\LEADTOOLS\bootstrap directory

        • bootstrap.d.ts
      • Lib\LEADTOOLS\jquery directory

        • jquery.cookie.d.ts
        • jquery.d.ts
        • jquery.ui.layout.d.ts
        • jqueryui.d.ts
  • Samples directory

    • Samples\ExternalController directory

      • ExternalControllerDemo.htm
      • StyleSheet.css

      • Samples\ExternalController\JS directory

        • addPatient.js
        • addUser.js
        • logger.js
        • myMain.js
        • updatePatient.js
        • updateUser.js
        • viewInstances.js
      • Samples\ExternalController\ServiceProxy directory

        • AuthenticationServiceProxy.js
        • AuthenticationServiceProxy.ts
        • PatientServiceProxy.js
        • PatientServiceProxy.ts
        • QueryArchiveServiceProxy.js
        • QueryArchiveServiceProxy.ts
        • ServiceProxy.js
        • ServiceProxy.ts
  • Scripts directory

    • acorn_interpreter.js
    • app.js
    • app.ts
    • bootstrap.min.js
    • CinePlayer.js
    • CinePlayer.ts
    • config.js
    • config.ts
    • date.js
    • DicomHelper.js
    • DicomHelper.ts
    • DicomLoader.js
    • DicomLoader.ts
    • esprima.min.js
    • HangingProtocolHelper.js
    • HangingProtocolHelper.ts
    • html2canvas.js
    • Utils.js
    • Utils.ts
    • uuid.js

    • Scripts\Angular directory

      • ag-grid.min.js
      • angular-block-ui.js
      • angular-block-ui.min.js
      • angular-fullscreen.js
      • angular-grid.js
      • angular-idle.min.js
      • angular-multi-select.min.js
      • angular-multi-step-form.min.js
      • angular-number-picker.min.js
      • angular-sanitize.min.js
      • angular-translate.min.js
      • angular-translate-loader-static-files.min.js
      • angular-ui-tree.js
      • bootstrap-colorpicker-module.js
      • commangular.min.js
      • dialogs.js
      • hotkeys.min.js
      • loading-bar.js
      • ng-file-upload-all.min.js
      • ng-pattern-restrict.min.js
      • slider.js
      • tree-grid-directive.js
      • ui-bootstrap-tpls-0.11.0.min.js
      • ui-codemirror.min.js
      • ui-grid-unstable.min.js
    • Scripts\commands directory

      • annotation-commands.js
      • annotation-commands.ts
      • commands.js
      • commands.ts
      • spyglass-commands.js
      • spyglass-commands.ts
      • template-commands.js
      • template-commands.ts
    • Scripts\controllers directory

      • AddAppController.js
      • AddAppController.ts
      • AddPacsServerController.js
      • AddPacsServerController.ts
      • AddTagController.js
      • AddTagController.ts
      • AddToolbarItemController.js
      • AddToolbarItemController.ts
      • AdminToolbarSettingsController.js
      • AdminToolbarSettingsController.ts
      • AnnotationsController.js
      • AnnotationsController.ts
      • AnnotationsSaveController.js
      • AnnotationsSaveController.ts
      • AudioController.js
      • AudioController.ts
      • BrightnessContrastController.js
      • BrightnessContrastController.ts
      • CalibrateRulerController.js
      • CalibrateRulerController.ts
      • CinePlayerController.js
      • CinePlayerController.ts
      • CodeSequenceEditorController.js
      • CodeSequenceEditorController.ts
      • CompareViewController.js
      • CompareViewController.ts
      • ConfirmDialogController.js
      • ConfirmDialogController.ts
      • DentalSearchViewController.js
      • DentalSearchViewController.ts
      • DentalViewerController.js
      • DentalViewerController.ts
      • DSFilterOperationEditorController.js
      • DSFilterOperationEditorController.ts
      • ExportController.js
      • ExportController.ts
      • GetWorkstationController.js
      • GetWorkstationController.ts
      • GlobalOptionsController.js
      • GlobalOptionsController.ts
      • GridSettingsController.js
      • GridSettingsController.ts
      • HPDefinitionSequenceDialogController.js
      • HPDefinitionSequenceDialogController.ts
      • HPDialogController.js
      • HPDialogController.ts
      • HPImageSetSelectorEditorController.js
      • HPImageSetSelectorEditorController.ts
      • HPTimeBasedImageSetsEditorController.js
      • HPTimeBasedImageSetsEditorController.ts
      • HSLController.js
      • HSLController.ts
      • LoginController.js
      • LoginController.ts
      • MedicalWebViewerController.js
      • MedicalWebViewerController.ts
      • MonitorCalibrationController.js
      • MonitorCalibrationController.ts
      • NewRoleController.js
      • NewRoleController.ts
      • NewUserController.js
      • NewUserController.ts
      • OverlaySettingsController.js
      • OverlaySettingsController.ts
      • PermissionsManagementController.js
      • PermissionsManagementController.ts
      • PrintController.js
      • PrintController.ts
      • PromptController.js
      • PromptController.ts
      • RemotePacsController.js
      • RemotePacsController.ts
      • RolePatientsAccessController.js
      • RolePatientsAccessController.ts
      • RunAppController.js
      • RunAppController.ts
      • SaveAsDerivedController.js
      • SaveAsDerivedController.ts
      • Scopes.js
      • Scopes.ts
      • ScriptEditorController.js
      • ScriptEditorController.ts
      • SearchController.js
      • SearchController.ts
      • SearchViewController.js
      • SearchViewController.ts
      • SeriesLayoutController.js
      • SeriesLayoutController.ts
      • SeriesListController.js
      • SeriesListController.ts
      • StudyLayoutController.js
      • StudyLayoutController.ts
      • TagChooserController.js
      • TagChooserController.ts
      • TemplateEditorController.js
      • TemplateEditorController.ts
      • UpdateRoleController.js
      • UpdateRoleController.ts
      • UpdateUserController.js
      • UpdateUserController.ts
      • UploadController.js
      • UploadController.ts
      • UploadFileController.js
      • UploadFileController.ts
      • UserPatientsAccessController.js
      • UserPatientsAccessController.ts
      • UserQueueController.js
      • UserQueueController.ts
      • ViewDicomController.js
      • ViewDicomController.ts
      • ViewerController.js
      • ViewerController.ts
      • WindowLevelCustomController.js
      • WindowLevelCustomController.ts
    • Scripts\controls directory

      • bootstrap-colorpicker.min.js
      • codemirror.js
      • InteractiveVerticalSlider.js
      • InteractiveVerticalSlider.ts
      • OverflowManager.js
      • OverflowManager.ts
      • PropertyGrid.js
      • PropertyGrid.ts

      • Scripts\controls\mode directory

        • javascript.js
    • Scripts\directives directory

      • Leadtools.Audio.Directive.js
      • Leadtools.Audio.Directive.ts
      • Leadtools.Draggable.Directive.js
      • Leadtools.Draggable.Directive.ts
      • Leadtools.FancyTree.Directive.js
      • Leadtools.FancyTree.Directive.ts
      • Leadtools.ImageProcessing.Directive.js
      • Leadtools.ImageProcessing.Directive.ts
      • Leadtools.jqGrid.Directive.ts
      • Leadtools.MedicalViewer.Directive.js
      • Leadtools.MedicalViewer.Directive.ts
      • Leadtools.Misc.Directive.js
      • Leadtools.Misc.Directive.ts
      • Leadtools.PropertyGrid.Directive.js
      • Leadtools.PropertyGrid.Directive.ts
      • Leadtools.PwdConfirm.Directive.js
      • Leadtools.PwdConfirm.Directive.ts
      • Leadtools.ResizeToParent.Directive.js
      • Leadtools.ResizeToParent.Directive.ts
      • Leadtools.Scroller.Directive.js
      • Leadtools.Scroller.Directive.ts
      • Leadtools.ShakeThat.Directive.js
      • Leadtools.ShakeThat.Directive.ts
      • Leadtools.StudyTimeLine.Directive.js
      • Leadtools.StudyTimeLine.Directive.ts
      • Leadtools.TemplateEditor.Directive.js
      • Leadtools.TemplateEditor.Directive.ts
      • Leadtools.Toolbar.Directive.js
      • Leadtools.Toolbar.Directive.ts
      • Leadtools.uiLayout.Directive.js
      • Leadtools.uiLayout.Directive.ts
      • Leadtools.VerticalSlider.Directive.js
      • Leadtools.VerticalSlider.Directive.ts
    • Scripts\externalCommand directory

      • ExternalCommandHandlerService.js
      • ExternalCommandHandlerService.ts
      • ExternalCommands.js
      • ExternalCommands.ts
      • SharedPropertiesService.js
      • SharedPropertiesService.ts
      • WebViewerCommandHandlerService.js
      • WebViewerCommandHandlerService.ts
      • WebViewerCommands.js
      • WebViewerCommands.ts
      • WebViewerMessageReceiver.js
      • WebViewerMessageReceiver.ts
    • Scripts\filters directory

      • PluralizeFilter.js
      • PluralizeFilter.ts
    • Scripts\jquery directory

      • jquery.colorpicker.js
      • jquery.contextmenu.js
      • jquery.contextMenu.min.js
      • jquery.cookie.js
      • jquery.fancytree.js
      • jquery.fancytree.table.js
      • jquery.jqGrid.min.js
      • jquery.jqGrid.toolbar.js
      • jquery.layout-latest.min.js
      • jquery.resize.js
      • jquery.ui.draggable.min.js
      • jquery.ui.position.min.js
      • jquery.ui.touch-punch.min.js
    • Scripts\LEADTOOLS directory

      • Leadtools.Annotations.Automation.js
      • Leadtools.Annotations.Core.js
      • Leadtools.Annotations.Designers.js
      • Leadtools.Annotations.Documents.js
      • Leadtools.Annotations.JavaScript.js
      • Leadtools.Annotations.Rendering.JavaScript.js
      • Leadtools.Controls.js
      • Leadtools.Controls.Medical.js
      • Leadtools.ImageProcessing.Color.js
      • Leadtools.ImageProcessing.Core.js
      • Leadtools.ImageProcessing.Main.js
      • Leadtools.js
    • Scripts\Models directory

      • DataModels.js
      • DataModels.ts
      • ImageFrame.js
      • ImageFrame.ts
      • QueryOptions.js
      • QueryOptions.ts
      • Tab.js
      • Tab.ts
      • TemplateModels.js
      • TemplateModels.ts
      • Toolbar.js
      • Toolbar.ts
    • Scripts\Services directory

      • AuditLogService.js
      • AuditLogService.ts
      • AuthenticationService.js
      • AuthenticationService.ts
      • CinePlayerService.js
      • CinePlayerService.ts
      • DataService.js
      • DataService.ts
      • DicomLoaderService.js
      • DicomLoaderService.ts
      • EventService.js
      • EventService.ts
      • ExportManagerService.js
      • ExportManagerService.ts
      • ExportService.js
      • ExportService.ts
      • ExternalApplicationsService.js
      • ExternalApplicationsService.ts
      • MonitorCalibrationService.js
      • MonitorCalibrationService.ts
      • ObjectRetrieveService.js
      • ObjectRetrieveService.ts
      • ObjectStoreService.js
      • ObjectStoreService.ts
      • OptionsService.js
      • OptionsService.ts
      • OverlayManagerService.js
      • OverlayManagerService.ts
      • PacsRetrieveService.js
      • PacsRetrieveService.ts
      • PatientAccessRightsService.js
      • PatientAccessRightsService.ts
      • PatientService.js
      • PatientService.ts
      • PrintManagerService.ts
      • PrintService.js
      • PrintService.ts
      • QueryArchiveService.js
      • QueryArchiveService.ts
      • QueryPacsService.js
      • QueryPacsService.ts
      • SeriesDownloadQueueService.js
      • SeriesDownloadQueueService.ts
      • SeriesManagerService.js
      • SeriesManagerService.ts
      • TabService.js
      • TabService.ts
      • TemplateEditorService.js
      • TemplateEditorService.ts
      • TemplateService.js
      • TemplateService.ts
      • ToolbarService.js
      • ToolbarService.ts
  • views directory

    • CompareView.html
    • DentalSearchView.html
    • DentalViewer.html
    • login.html
    • medicalviewer.html
    • PacsQuery.html
    • SearchView.html
    • TemplateEditorView.html
    • UserQueueView.html
    • Viewer.html

    • views\dialogs directory

      • AddApp.html
      • AddOverlayTag.html
      • AddPacsServer.html
      • AddToolbarItem.html
      • Annotations.html
      • AnnotationsSave.html
      • Audio.html
      • BrightnessContrast.html
      • CalibrateRuler.html
      • CinePlayer.html
      • CodeSequenceEditor.html
      • Confirmation.html
      • DSFilterOperationEditor.html
      • Export.html
      • GetWorkstation.html
      • GlobalOptions.html
      • GridSettings.html
      • HangingProtocol.html
      • HangingProtocolDefinitionSequence.html
      • HangingProtocol-Step1.html
      • HangingProtocol-Step2.html
      • HangingProtocol-Step3.html
      • HangingProtocol-Step4.html
      • HPImageSetSelectorEditor.html
      • HPTimeBasedImageSetsEditor.html
      • Hsl.html
      • MonitorCalibration.html
      • OverlaySettings.html
      • PermissionsManagement.html
      • Print.html
      • Prompt.html
      • RemotePacs.html
      • RolePatientsAccess.html
      • RunApp.html
      • SaveAsDerived.html
      • ScriptEditor.html
      • SeriesLayout.html
      • StudyLayout.html
      • TagChooserDialog.html
      • ToolbarItemEditor.html
      • ToolbarSettings.html
      • Upload.html
      • UploadFiles.html
      • UserPatientsAccess.html
      • ViewDicom.html
      • ViewDicom_Mobile.html
      • WindowLevelCustom.html
    • views\templates directory

      • AudioPlayer.html
      • ExpandableRowTemplate.html
      • NewRole.html
      • NewUser.html
      • UpdateRole.html
      • UpdateUser.html

Add a "No HTML5 Support" Topic

Additionally, in the Medical Web Viewer source code, if a browser is found that does not support HTML5, the default code attempts to load a page from the LEADTOOLS demo server.  Change the link to point to a page on your server that you create that indicates that HTML5 is not supported by that browser. The link is in the Default.aspx page in the window.onload function definition.  The following link is the one that needs to be changed:

http://demo.leadtools.com/HTML5/NoHTML5Support.htm  

Application Pool

 

Using the Internet Information Services (IIS) Manager, add an Application Pool specifically for use with the Medical Web Viewer. Use the default settings except for the following:

  • When adding the application pool, be sure to select the version of the .NET framework to be used. 
  • After adding the application pool, be sure to set the "Enable 32-Bit Application" setting to "true" if the 32-bit versions of the LEADTOOLS SDK .NET DLLs are going to be used.
  • Modify the "Identity" setting, setting it to use the "LocalSystem" account.

Add Application

 

Add a Web Application site, specifying the physical path to be the path to the root directory (the default name for the root directory is MedicalWebViewerDemo).

Also specify that the Web Application site use the Application Pool you created specifically for the Medical Web Viewer Site.

Web.config

The Medical Web Viewer site contains a web.config file that has the application-specific information the Medical Web Viewer needs to know in order to function properly. The following listing describes the application-specific contents of the web.config file that will need to be configured for each machine deployed.

  • "authentication mode = Forms" - This section specifies that the viewer is using "Forms Authentication." More information about this technology can be found at MSDN.
  • "authorization" - This section allows you to specify which users can log in from the log in page. Other options are also available with this feature. More information about this technology can be found at MSDN.
  • "ServiceVirtualDirectory" - This is the name/alias of the Virtual Directory for the Medical Web Viewer Demo’s corresponding Web Service. The default name/alias is "MedicalViewerService".
  • "Title" - The text set for this setting will be placed in the HTML tag on each page of the application.
  • "LogInText" - The text set for this setting will be placed in the highlighted area as shown in the following figure:

  

  • "ShowViewerMenu" - This setting enables/disables the menu that is displayed in the upper right-hand corner of the application (see the following figure) 

Warning: Be sure to keep this menu: Removing it eliminates the user’s ability to log out because the menu item to log out is on this menu.

  

  • "ShowGuestButton" - This setting enables/disables the "Log In As Guest" option on the default log in dialog. The field is highlighted in the following figure:

 

When enabling the Show Guest Button option be sure to add a user named "guest" to the system (database): otherwise, the user will not be able to log in.  When adding the guest user, you have the ability to restrict the user’s access.

  •  "ShowManagementOptionsInViewerMenu" - This setting enables/disables the display of the "User Management," "User Access Rights," and "Roles Management" menu items in the viewer’s menu as shown below:

 

  • "ViewerIdleTimeout" - This setting specifies the number of idle minutes that can elapse before a warning dialog displays. The warning gives the user 30 seconds to cancel before the session expires and the user is logged out.

LEADTOOLS Licensing

The HTML5 Viewer requires that a "LeadtoolsLicense.txt" file be placed into a sub-folder in the Members directory. Adding this license file will remove the NAG message seen by the client. This "LeadtoolsLicense.txt" file is generated separately from the *.LIC and *.LIC.KEY files. Note that the "LeadtoolsLicense.txt" file cannot be created based on either of those files. This file must be generated by the LEAD Sales department and provided to you. After you receive the file, create a folder called  "LEADTOOLS" in the following directory:

\[MedicalWebViewerDemo]\Members 

Inside the "LEADTOOLS" folder, add the "LeadtoolsLicense.txt" file. The following file should now exist:

\[MedicalWebViewerDemo]\Members\LEADTOOLS\LeadtoolsLicense.txt

If there is any question about where the code is searching for the "LeadtoolsLicense.txt" file, simply open the browser’s JavaScript debugger and check the console to determine where the viewer is searching for the "LeadtoolsLicense.txt". 

Verify that the Viewer has been set up Correctly

Verify the viewer has been set up correctly by running an HTML5-compatible browser and browsing to the Medical Web Viewer’s site.  You should see the default login page load.  Try logging in, searching for studies and series, and selecting a series to see it loaded into the viewer.

Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.
Click or drag to resize