Разместил: Грег
Нам нравится, когда разработчики оставляют нам отзывы о наших продуктах. Обратная связь поступает во многих формах: твиты, электронные письма, чаты, запросы функций, обзоры и т. д. Сегодня мы рады поделиться с вами обзором нашего HTML5 Zero-Footprint Medical Viewer, который включен в Medical Imaging Suite. SDK», написанный Джереми Ликнесс.
DICOM — это стандарт хранения и передачи медицинских изображений. В прошлом просмотр DICOM был возможен только с помощью толстых настольных клиентов, которые требовали локальной установки на определенном оборудовании и платформах. Компания LEADTOOLS, ведущий поставщик пакетов SDK для обработки изображений, разработала программу просмотра DICOM, не занимающую много места, которую можно использовать в любом браузере на любой платформе без установки подключаемых модулей или локального программного обеспечения. Это идеальный способ быстро разработать приложение для медицинской визуализации, которое можно развернуть на централизованном сервере и получить к нему доступ из любого места.
DICOM был разработан в середине 1980-х годов для решения проблем, связанных с разрозненными технологиями обработки изображений. Американский колледж радиологии (ACR) и Национальная ассоциация производителей электрооборудования (NEMA) создали стандарт ACR/NEMA 300 в 1985 г. -стандарт-для-медицинской визуализации»). Впоследствии он был переработан и с 1993 года находится в версии 3.0 с более поздними расширениями и изменениями. Официальная веб-страница стандарта: http://dicom.nema.org/. В этой статье рассматриваются выпущенные инструменты, позволяющие быстро создать полнофункциональное кроссплатформенное и кроссбраузерное приложение, поддерживающее расширенные возможности взаимодействия с изображениями DICOM.
Установка продукта
Вы можете быстро и легко проверить инструмент для себя. Перейдите на основной сайт по адресу: https://www.leadtools.com/ и нажмите Скачать. Разверните Загрузки растровых изображений, документов и медицинских оценок и выберите загрузку для своей платформы. Эта статья посвящена установке Windows.
Демонстрация быстрого старта
После того, как вы загрузили и установили инструмент, вы можете за считанные минуты приступить к работе, чтобы увидеть и взаимодействовать с элементом управления Viewer. Просто следуйте инструкциям, описанным в следующем руководстве.
Учебное пособие проведет вас через несколько шагов, включая создание HTML-страницы, написание кода JavaScript и копирование некоторых файлов, что в конечном итоге приведет к созданию одностраничного приложения для просмотра медицинских данных. JavaScript создает элемент управления просмотра, аутентифицируется на сервере, затем устанавливает URI для изображения на вызов службы, который возвращает необходимые данные. Обо всем остальном позаботится управление!
Рис. 1. Приложение для быстрого старта
Вы можете потратить некоторое время, чтобы просмотреть этот простой пример. Загрузка содержит гораздо более полный проект, который предоставляет полное приложение.
Демонстрация глубокого погружения
Есть несколько предварительных условий для инструментов, включенных в файл сведений о продукте. В частности, у вас должен быть экземпляр IIS Server для запуска веб-приложений и экземпляр SQL Server для загрузки базы данных на серверах Windows. Загрузка распаковывает десятки примеров проектов, файлов и исходного кода. После установки загрузки вы можете выбрать «LEADTOOLS Main Eval xx» (где xx — версия; эта статья была написана с использованием версии 19) в меню «Пуск». Перейдите в папку «DICOM», затем в папку «JavaScript». Наконец, откройте папку «Medical Web Viewer».
Запуск демо в первый раз требует двух шагов. Это ярлыки в папке для настройки вашей среды.
Рисунок 2: Папка с демоверсиями
Первый шаг проверит, настроена ли ваша база данных. Если нет, вам будет предложено подключиться к SQL Server и заполнить необходимые базы данных. После завершения этого шага вы увидите диалоговое окно для различных служб, которые управляют демонстрационными версиями медицинской программы просмотра.
Рисунок 3: Демонстрационная конфигурация (первый шаг)
Выберите «Настроить», чтобы настроить службы и убедиться, что они работают. В любое время нажмите «Повторно протестировать», чтобы повторно проверить работу служб. Обязательно запишите все установленные вами имена пользователей и пароли, так как они понадобятся вам для доступа к инструменту позже.
Совет: Если вы получили сообщение об ошибке проверки, убедитесь, что ваш экземпляр SQL Server запущен, а также запущены службы LEADTOOLS.
Рисунок 4: Услуги
После того, как вы убедитесь, что ваши службы настроены и работают, запустите второй шаг. Вы можете запускать его столько раз, сколько захотите, потому что он будет проверять конфигурацию и выполнять все необходимые настройки каждый раз, когда вы его запускаете. Запустите программу просмотра из диалогового окна, нажав кнопку «Запустить программу просмотра».
Рисунок 5: Второй демонстрационный шаг
Это откроет веб-браузер и предложит вам войти в систему с именем пользователя и паролем, которые вы установили ранее.
Пошаговое руководство для зрителей
После входа в систему вы можете искать записи и подтягивать соответствующие изображения. Как видите, приложение демонстрирует более сложные взаимодействия с элементами управления, чем одностраничный быстрый старт.
Рисунок 6: Главное окно просмотра
В примере приложения для рендеринга изображений используется инфраструктура внешнего интерфейса Angular JavaScript и элементы Canvas HTML5. Полный исходный код распространяется как часть ознакомительной загрузки. Есть несколько компонентов, участвующих в рендеринге этого изображения. Весь процесс начинается с экземпляра компонента JavaScript MedicalViewer.
В Angular директивы — это повторно используемые компоненты, которые применяют поведение к объектной модели документа JavaScript (DOM) и, при необходимости, отображают веб-интерфейс. Исходный код «LeadTools.MedicalViewer.Directive.ts» (в папке Scripts/directives) определяет повторно используемый компонент, использующий элемент управления MedicalViewer.
module Directives {
export class MedicalViewerApi {
private _viewer: lt.Controls.Medical.MedicalViewer;
private _config: MedicalViewerConfig;Этот экземпляр средства просмотра можно передать в конструктор класса API. Директива упрощает взаимодействие приложения с элементом управления просмотра и изменением конфигурации. Например, директива определяет, находится ли браузер на мобильном устройстве, и автоматически настраивает строки и столбцы для лучшего соответствия:
// Mobile devices are 1x1
if (lt.LTHelper.device == lt.LTDevice.mobile && (!config.studyLayout && !config.customLayout)) {
config.rows = 1;
config.columns = 1;
}Директива прикрепляется к элементу HTML. Это можно увидеть в исходнике «Viewer.html» (папка «Views»).
<div class="ui-layout-center">
<div medicalviewer class="selectDisable" viewer-id="{{viewerId}}" viewer-config="viewerConfig"
series="seriesList" viewerapi="viewerapi" stack-changed="stackChanged(sender,e)"
style="position: relative; background-color: black; width: 100%; height: 100%; border: 0; margin: 0; padding: 0"
series-dropped="seriesDropped(viewer, oldSeriesInstanceUID, seriesInstanceUID, position, rowPosition, colPosition, bounds)">
</div>
</div>Хотя директива служит для предоставления цели для действий, для управления действиями необходим контроллер. Контроллер определяет, какой пациент просматривается, и передает нужные изображения директиве. Чтобы изучить этот код, просмотрите «TabService.ts» в разделе «Службы» в разделе «Сценарии», который создает экземпляр «ViewController.ts» в «Контроллерах».
Увеличьте свои результаты
В инструменте щелкните увеличительное стекло со знаком плюс, а затем щелкните и прокрутите холст. Вы увидите эффект «увеличения».
Рисунок 7: Эффект увеличения
Директива для медицинского средства просмотра использует элемент управления MagnifyAction.
function intializeActions(cell:lt.Controls.Medical.Cell) {
cell.setCommand(MedicalViewerAction.Magnify, new lt.Controls.Medical.MagnifyAction());
}При нажатии элемента панели инструментов элемент управления активируется.
cell.runCommand(MedicalViewerAction.Magnify);Как видите, весь код представляет собой чистый, совместимый с разными браузерами JavaScript.
Дополнительные эффекты
Пример приложения также содержит код для дополнительных эффектов. Все эффекты управляются командами, генерируемыми при нажатии на соответствующий значок на панели инструментов. Например, один эффект позволяет увеличивать или уменьшать масштаб.
Рисунок 8: Увеличенный вид
Другой позволяет настроить уровень окна для изображения. На следующем рисунке показан результат прокрутки трех разных уровней.
Рисунок 9: Различные уровни окна
Вы можете увидеть, как эти эффекты загружаются на панель инструментов, просмотрев источник «ToolbarService.ts» в папке «Services» в разделе «Scripts». ». Вот несколько дополнительных опций:
private loadDefault(toolbars: Array) { var toolbar = new Models.Toolbar();toolbar.name = "Main"; toolbars.push(toolbar);this.addToolbarButton(toolbar, "PanZoom", "", "toolBarItem Pan"); this.addToolbarButton(toolbar, "Zoom", "", "toolBarItem Zoom"); this.addToolbarButton(toolbar, "Magnify", "", "toolBarItem Magnify"); this.addToolbarButton(toolbar, "WindowLevel", "", "toolBarItem WindowLevel");
Нажатие элемента просто выполняет команду, которая генерирует событие, которое контроллеры могут прослушивать для взаимодействия с элементами управления соответствующим образом.
private runCommand(command: string,buttonId:string) { var btnCommand = commangularProvider.findCommand(command);if (btnCommand && btnCommand.descriptors && btnCommand.descriptors.length >= 1) { if (btnCommand.descriptors[0].command != undefined) { this._commangular.dispatch(command, { buttonId: buttonId }); } } }
К вашим услугам
Элементы управления JavaScript предоставляют комплексное решение для рендеринга и управления данными изображения в браузере, но важным компонентом приложения являются службы, предоставляющие данные. Чтобы понять, как информация передается клиенту, откройте проект «Leadtools.Medical.WebViewer.WCF_2», расположенный в папке «Examples/DotNet/PACSFramework/MedicalWebViewer/Leadtools.Medical.WebViewer.WCF». дорожка. Он содержит код .NET для служб, которые предоставляют исследования, макеты и информацию об изображениях.
Типичный запрос изображения DICOM выглядит так:
Получить план исследования
Этот вызов извлекает информацию об исследовании, включая дочерние серии, строки и столбцы, а также связанные данные изображения для исследования.
Получить миниатюру серии
Это возвращает эскиз, который может быть отображен браузером для предварительного просмотра исследования.
Получить серии стеков
Стеки представляют собой последовательности изображений, которые являются частью исследования. Они имеют уникальные справочные номера и сортируются в источнике данных. Следующий пример является ответом на исследование, в котором есть два экземпляра в серии.
[{
"SequenceName":"",
"SopInstanceUIDs":["1.2.840.114257.1.9.1245.56421.52314.1119854.01248",
"1.2.840.114257.1.9.1245.56421.52314.1187852.12457"]
}]Получить макет серии
Макет для конкретной серии имеет имя, шаблон, значок и изображения, которые являются частью серии.
Получить фрагмент изображения
Этот вызов извлекает фактические данные, используемые для визуализации изображений. Эти данные передаются элементу управления JavaScript для рендеринга. Он выглядит как файл изображения, но требует специальной обработки и рендеринга из-за дополнительных данных, которые хранятся в формате. Используя этот файл, элемент управления JavaScript получает информацию, необходимую для рендеринга изображений, панорамирования, масштабирования, увеличения и корректировки уровней по мере необходимости.
Получить DICOM JSON
Последний вызов извлекает всю связанную информацию для изображения DICOM в формате JSON для отображения на клиенте.
Рисунок 10: Информация DICOM
Вывод
Стандарт DICOM поддерживает невероятно информативные изображения и связанные с ними метаданные. LEADTOOLS SDK предлагает беспрецедентный доступ для предоставления интерактивных возможностей на всех устройствах. Это возможно благодаря включенной поддержке стандартов HTML5 и JavaScript. Пример приложения иллюстрирует полную базу данных записей пациентов, реализованную с использованием стандартного N-уровневого приложения на основе .NET с уровнем доступа к данным для SQL Server, уровнем веб-сервиса и интерфейсным одностраничным приложением (SPA), использующим Angular. Пример предоставляет все, что вам нужно, чтобы понять, как создавать экземпляры различных элементов управления и взаимодействовать с ними.
Рисунок 11: Обзор архитектуры
Для получения дополнительной информации вы можете посетить исчерпывающую онлайн-документацию. Следующая ссылка ссылается на обзор WebView для HTML5 и JavaScript:
Медицинское средство просмотра LEADTOOLS HTML5 с нулевым следом помогает сократить кривую обучения разработчиков для создания приложений, поддерживающих DICOM. Помимо быстрой межплатформенной поддержки, SDK совместим с сенсорными устройствами и жестами, обрабатывает изображения, работает с аннотациями и поддерживает как предопределенные, так и настраиваемые макеты. Это идеальный способ быстро приступить к созданию медицинских приложений, доступных с любого устройства.
