Локализация веб DICOM-просмотрщика
В этом разделе
Демо приложение "VintaSoft ASP.NET Core DICOM Viewer Demo" предоставляет словари локализации, которые позволяют локализовать веб DICOM-просмотрщик (
WebDicomControlJS) на 45 языков (африкаанс, арабский, армянский, азербайджанский, белорусский, болгарский, китайский, хорватский, чешский, датский, голландский, английский, эстонский, финский, французский, грузинский, немецкий, греческий, иврит, хинди, венгерский, итальянский, японский, казахский, корейский, киргизский, латышский, литовский, норвежский, португальский, румынский, русский, словацкий, словенский, испанский, суахили, шведский, таджикский, татарский, турецкий, туркменский, украинский, узбекский, вьетнамский, зулу).
Словари локализации можно найти в папке "<SdkInstallPath>\VintaSoft\Imaging .NET v12.5\Examples\ASP.NET Core\CSharp\AspNetCoreDicomViewerDemo\wwwroot\locales\".
Если вы хотите создать пользовательский словарь локализации для пользовательского интерфейса веб DICOM-просмотрщика, вам следует выполнить следующие шаги:
- Определить список языков для локализации.
- Создать словари для локализации.
- Добавить JavaScript код для локализации пользовательского интерфейса.
Если вы создали пользовательский словарь локализации для веб DICOM-просмотрщика и хотите поделиться своим словарем с другими пользователями, отправьте нам созданный пользовательский словарь, и мы включим его в исходные коды демо приложения "VintaSoft ASP.NET Core DICOM Viewer Demo".
1. Определение списка языков для локализации
Для начала необходимо определить список языков для локализации и создать файл настроек локализации, например, "settings.json". Вот содержимое файла "settings.json", который определяет, что интерфейс может быть локализован на английский и немецкий языки:
{
"locales": [ "en", "af", "ar", "bg", "cs", "da", "de", "el", "es", "fi", "fr", "he", "hi", "hr", "hu", "it", "ja", "ko", "nb", "nl", "pt", "ro", "ru", "sv", "tr", "vi", "zh" ]
}
Затем файл "settings.json" необходимо добавить к содержимому веб-приложения, например, поместить его в папку "locales".
В завершение необходимо добавить на веб-страницу элемент "link" с информацией о настройках локализации:
<link rel="localization" href="/locales/settings.json">
2. Создание словарей для локализации
Файл словаря должен иметь имя, которое соответствует имени локали браузера, с расширением ".txt". Например, файл словаря английского языка должен иметь имя "en.txt", файл словаря немецкого языка должен иметь имя "de.txt", файл словаря французского языка должен иметь имя "fr.txt", файл словаря испанского языка должен иметь имя "es.txt", файл словаря итальянского языка должен иметь имя "it.txt", файл словаря португальского языка должен иметь имя "pt.txt", файл словаря русского языка должен иметь имя "ru.txt".
Файл словаря должен располагаться в той же папке, что и файл "settings.json". В нашем случае эта папка называется "locales".
Для создания словаря английского языка необходимо выполнить следующие шаги:
- Отобразить на HTML-странице все элементы, которые должны быть локализованы.
- Создать экземпляр класса VintasoftLocalizationJS, который позволяет локализовать DOM-элементы на HTML-странице.
- Вызвать функцию VintasoftLocalizationJS.getDocumentLocalizationDictionary для получения словаря локализации на английском языке для DOM-элементов на HTML-странице.
- Сериализовать словарь локализации на английском языке с помощью функции "JSON.stringify".
- Сохранить сериализованный JSON-объект в файл с именем "en.txt".
Вот JavaScript-код, который демонстрирует, как создать словарь локализации для HTML-страницы, содержащей веб DICOM-просмотрщик:
...
// create UI localizer
_localizer = new Vintasoft.Shared.VintasoftLocalizationJS();
...
/**
Creates the dictionary for localization of application UI.
*/
function __createUiLocalizationDictionary() {
var tempDialogs = [];
__createDicomViewerDialogsForLocalization(tempDialogs);
if (_localizer == null)
// create UI localizer
_localizer = new Vintasoft.Shared.VintasoftLocalizationJS();
var localizationDict = _localizer.getDocumentLocalizationDictionary();
var localizationDictString = JSON.stringify(localizationDict, null, '\t');
console.log(localizationDictString);
var floatingContainer = document.getElementById("dicomControlContainer");
for (var i = 0; i < tempDialogs.length; i++) {
floatingContainer.removeChild(tempDialogs[i].get_DomElement());
delete tempDialogs[i];
}
}
/**
Creates the dialogs, which are used in DICOM control, for localization.
*/
function __createDicomViewerDialogsForLocalization(tempDialogs) {
var floatingContainer = document.getElementById("dicomControlContainer");
var dicomViewerControl = _dicomControl.get_DicomViewerControl();
var dicomMetadataDialog = new Vintasoft.Imaging.Dicom.Dialogs.WebUiDicomMetadataDialogJS(dicomViewerControl);
dicomMetadataDialog.render(floatingContainer);
tempDialogs.push(dicomMetadataDialog);
var customDicomVoiLutDialog = new Vintasoft.Imaging.Dicom.Dialogs.WebUiCustomDicomVoiLutDialogJS(dicomViewerControl);
customDicomVoiLutDialog.render(floatingContainer);
tempDialogs.push(customDicomVoiLutDialog);
}
Для создания словаря немецкого языка (или любого другого языка, кроме английского) необходимо выполнить следующие шаги:
- Использовать словарь локализации на английском языке в качестве шаблона для словаря локализации на немецком языке, т.е. скопировать файл "en.txt" в файл "de.txt".
- Перевести текстовые значения с английского языка на немецкий язык в файле "de.txt".
Вот пример простого файла словаря:
{
"dicomViewerControl": {
"fileLabel": {
"text": "File"
},
"viewLabel": {
"text": "View"
},
"toolsLabel": {
"text": "Tools"
},
"measurementsLabel": {
"text": "Measurements"
},
"uploadDicomFilesButton": {
"title": "Upload and open DICOM files"
},
"closeFilesButton": {
"title": "Close files"
},
"clearSessionCacheButton": {
"title": "Clear session cache"
},
"showDicomFileMetadataButton": {
"title": "Show DICOM File Metadata"
},
"showMobileMenuButton": {
"title": "More"
},
"zoomOutButton": {
"title": "Zoom out"
},
...
}
}
3. Добавление кода JavaScript для локализации пользовательского интерфейса
Класс
VintasoftLocalizationJS предоставляет функции для локализации DOM-элементов и константных строк.
Вот JavaScript-код, который демонстрирует, как включить локализацию веб DICOM-просмотрщика в веб приложении:
/**
Enables the localization of application UI.
*/
function __enableUiLocalization() {
if (_localizer == null)
// create UI localizer
_localizer = new Vintasoft.Shared.VintasoftLocalizationJS();
// if localizer is ready (localizer loaded localization dictionary)
if (_localizer.get_IsReady()) {
// localize DOM-elements of web page
_localizer.localizeDocument();
}
// if localizer is NOT ready
else
// wait when localizer will be ready
Vintasoft.Shared.subscribeToEvent(_localizer, "ready", function () {
// localize DOM-elements of web page
_localizer.localizeDocument();
});
// subscribe to the "dialogShown" event of web spreadsheet document editor
Vintasoft.Shared.subscribeToEvent(_dicomControl, "dialogShown", function (event, data) {
_localizer.localizeDocument();
});
}