Installing and Configuring the Medical Web Viewer

This topic describes how to install and configure the Medical 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)

• 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

Files That Need To Be Downloaded

All of the files listed above ship with the toolkit. In addition, there are some files that do not ship with the toolkit even though they are also required.  These files are accessed via the web through references in the JavaScript code.  It is possible to download these files and host them on the web server, altering the references in the code to point to the files on your own web server.  Download and host the following files:

http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js

Add "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.  This link should be changed to point to a page on your server that you create that indicates that HTML5 is not supported by that browser. The link can be found 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 you intend to use. 
• After adding the application pool, be sure to set the "Enable 32-Bit Application" setting to "true" if you are using the 32-bit versions of the LEADTOOLS SDK .NET DLLs.
• 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: It is best to keep this menu. Removing this menu 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 this 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 a separately generated file from the *.LIC and *.LIC.KEY files. Please note that you cannot create a "LeadtoolsLicense.txt" file based on either of those files. This file must be generated by our 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 bring up 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.

LEADTOOLS HTML5 Medical Web Viewer Framework Overview

Preparing Deployment Operating Systems

Installing and Configuring the Web Service