По умолчанию Web DICOM Viewer использует следующие "стандартные" диалоги:

• WebUiDicomMetadataDialogJS - диалоговое окно, позволяющее отображать метаданные DICOM-изображения. Диалог появляется при нажатии кнопки "Show DICOM File Metadata".
• WebUiCustomDicomVoiLutDialogJS - диалоговое окно, позволяющее отображать метаданные DICOM-изображения. Диалог появляется при нажатии кнопки "DICOM window level".
• WebUiDicomMprDialogJS - UI-диалог, который позволяет отображать DICOM MPR контрол. Диалог появляется при нажатии кнопки "3D MPR...".

1. Стандартные UI-диалоги на базе Bootstrap

Готовые к использованию "стандартные" UI-диалоги, основанные на Bootstrap, хранятся в файле Vintasoft.Imaging.Dicom.Dialogs.Bootstrap.js.
Если в веб DICOM-просмотрщике необходимо использовать "стандартные" UI-диалоги Bootstrap, веб-приложение должно иметь:

• ссылку на CSS-файл стилей Bootstrap, например:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css">
  

• ссылки на библиотеки jQuery и Bootstrap, например:
  
  • HTML

  <script src="~/lib/jquery/dist/jquery.min.js" type="text/javascript"></script>
  <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
  

• ссылка на файлы Vintasoft.Imaging.js, Vintasoft.Imaging.css, Vintasoft.Imaging.Dicom.js, Vintasoft.Imaging.Dicom.css, Vintasoft.Imaging.Dicom.css, Vintasoft.Imaging.Dialogs.Bootstrap.js и Vintasoft.Imaging.Dicom.Dialogs.Bootstrap.js, например:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Dicom.css">
  <script src="~/js/Vintasoft.Shared.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Dicom.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Dicom.Dialogs.Bootstrap.js" type="text/javascript"></script>
  

Внешний вид UI-диалогов можно настроить с помощью CSS-стилей Bootstrap.

Вот снимок экрана "стандартного" диалогового окна "DICOM file metadata", основанного на Bootstrap:

2. Стандартные UI-диалоги на базе jQuery UI

Готовые к использованию "стандартные" UI-диалоги, основанные на jQuery UI, хранятся в файле Vintasoft.Imaging.Dicom.Dialogs.jQueryUI.js.
Если в веб DICOM-просмотрщике необходимо использовать "стандартные" UI-диалоги jQueryUI, веб-приложение должно иметь:

• ссылку на CSS-файл стилей jQuery UI, например:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/js/jquery-ui-css/jquery-ui.min.css">
  

• ссылки на библиотеки jQuery и jQuery UI, например:
  
  • HTML

  <script src="~/js/jquery-3.3.1.min.js" type="text/javascript"></script>
  <script src="~/js/jquery-ui.min.js" type="text/javascript"></script>
  

• ссылка на файлы Vintasoft.Imaging.js, Vintasoft.Imaging.css, Vintasoft.Imaging.Dicom.js, Vintasoft.Imaging.Dicom.css, Vintasoft.Imaging.Dialogs.jQueryUI.js и Vintasoft.Imaging.Dicom.Dialogs.jQueryUI.js, например:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Dicom.css">
  <script src="~/js/Vintasoft.Shared.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Dicom.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Dicom.Dialogs.jQueryUI.js" type="text/javascript"></script>
  

Внешний вид UI-диалогов можно настроить с помощью CSS-стилей jQuery UI.

Вот снимок экрана "стандартного" диалогового окна "DICOM file metadata", основанного на jQuery UI:

3. Пользовательские стандартные UI-диалоги

Если готовые к использованию "стандартные" UI-диалоги Bootstrap и jQuery UI не подходят для вашего пользовательского интерфейса или задачи, можно использовать пользовательские "стандартные" UI-диалоги в веб DICOM-просмотрщике.

Если необходимо создать UI-диалог для другой библиотеки пользовательского интерфейса, рекомендуется создать диалог как обертку вокруг готовой к использованию UI-панели (WebUiDicomMetadataPanelJS, WebUiCustomDicomVoiLutPanelJS, WebUiDicomMprDialogJS). В этом случае нет необходимости реализовывать логику, связанную с UI-диалогом (например, печать изображений), поскольку UI-панель уже содержит всю необходимую логику.

Можно также создать пользовательский UI-диалог с нуля, но в этом случае необходимо реализовать как пользовательский интерфейс, так и логику работы UI-диалога.