Примеры настройки интерактивного обозревателя компоновки изображений (ICE) версии 5 (HTML5)

Source: https://www.ssec.wisc.edu/~tomw/ice5/

Версия 5 — выпущена в 2017 г.

Обзор

ICE5 был разработан Томом Уиттакером для Земной обсерватории НАСА в Университете Висконсин-Мэдисон, Центр космической науки и техники. Это инструмент, который позволяет людям просматривать спутниковые изображения и данные с помощью веб-браузера. Он спроектирован так, чтобы быть гибким в соответствии с его назначением, и его можно легко настроить с помощью простых параметров HTML, как описано ниже.

ICE написан на JavaScript с использованием стандартов HTML5 и поэтому будет работать в любом современном веб-браузере.

Среда конечного пользователя

ICE5 запускается через веб-браузер. Он был закодирован в HTML5 и CSS3. Его можно использовать в любом современном веб-браузере, но он может не подходить для устройств с маленьким экраном (например, смартфона).

Режимы конфигурации

ICE имеет пять основных режимов работы:

1. Сочетание цветов (RGB)
2. Арифметические комбинации
3. Анимации
4. Показаны 3 изображения
5. Показ одного изображения

В каждом из этих режимов предоставляется общий набор инструментов >

‣ Выбор переключателя «Выбрать область» позволяет выбрать прямоугольную область путем «перетаскивания» указателя мыши (удерживая левую кнопку при перемещении указателя). «Область контура» позволяет указать область замкнутым многоугольником.

‣ После выбора региона во втором окне можно создать ряд диаграмм, которые помогают анализировать данные. Для тех диаграмм (таких как точечная диаграмма), которым требуется два набора данных, пользователь может выбрать эскизы, щелкнув по ним; в противном случае автоматически будут выбраны первые два.

Обратите внимание, что при использовании режима «Показ 3 изображений» щелчок по миниатюре приведет к отображению соответствующего изображения на большой панели. Если вы хотите сделать точечную диаграмму в этом режиме, программа всегда будет использовать два последних просмотренных изображения.

‣ Зонд будет считывать значения с исходных 3 изображений. Существует две формы зонда: простое считывание с тремя значениями и небольшой график, предназначенный для использования с изображениями, представляющими временную последовательность. Если задан параметр «калибровка», показания датчика будут в этих единицах. Если задан параметр «навигация», показания зонда также будут содержать широту и долготу точки.

‣ Флажок Zoom/Roam активирует этот режим. Увеличение производится нажатием левой кнопки; уменьшение масштаба — щелчок правой кнопкой мыши. (Кнопка «Восстановить» полностью уменьшает масштаб.) Перемещение осуществляется путем «перетаскивания» указателя мыши, поэтому этот режим и режим «Выбор региона» являются переключателями.

‣ Вы также можете указать «наложения» — изображения, которые будут отображаться поверх обычных изображений, если пользователь установит флажок.

Что вам нужно

Сделать ICE5 доступным для ваших пользователей так же просто, как поместить файл «ice5_min.js» в доступный каталог на вашем веб-сервере. (Щелкните правой кнопкой мыши по этой ссылке и выберите «Сохранить как».) Затем вам нужно сделать ваши изображения GIF или JPEG доступными на том же сервере (обычно в подкаталоге, куда вы помещаете код). Наконец, вам нужно внедрить запуск и параметры веб-приложения в HTML для одной из ваших веб-страниц на этом сервере.

Базовая структура параметров, которые настраивают ICE5, представляет собой объект JavaScript, подобный этому:

Вам нужно будет решить, какой режим вы хотите использовать в конкретной ситуации — в этом вам помогут следующие примеры:

Примеры режимов

1. Чтобы представить операцию комбинирования цветов (RGB), вы должны включить этот список параметров на свою HTML-страницу:

Щелкните здесь, чтобы увидеть этот пример в действии.

2. Чтобы представить операцию арифметического комбинирования, вы должны вставить следующий фрагмент в HTML-код своей страницы (мы также добавили внешнюю таблицу поиска цветов):

Обратите внимание на параметр «initial_math». Это иллюстрирует использование «предварительного вычисления», так что панель основного изображения при запуске будет отображать указанную комбинацию трех изображений. См. описание «initial_math» далее в этом документе.

Щелкните здесь, чтобы увидеть этот пример в действии.

3. Чтобы представить анимацию из трех изображений, вы должны вставить следующий фрагмент в HTML-код своей страницы:

Щелкните здесь, чтобы увидеть этот пример в действии.

4. Чтобы представить только три изображения, которые вы хотите отобразить и позволить пользователю изучить, вы должны использовать параметр «do_nothing». Например, вы можете внедрить следующие параметры в HTML-код своей страницы (в этом примере мы также включили накладываемое изображение):

Щелкните здесь, чтобы увидеть этот пример в действии.

Обратите внимание, что мы также добавили калибровочную кривую для каждого изображения, и она будет отражена в значениях датчика (наряду с указанными единицами измерения). Обратите внимание на «сокращение» надстрочных индексов степени и квадратного символа.

Если вы хотите использовать только одно изображение, вы можете сделать что-то вроде этого:

Щелкните здесь, чтобы увидеть этот пример в действии.

Полный список параметров и опций HTML

Вот полный список параметров и опций, доступных в ICE:

‣ filenames перечисляет 3 имени файлов изображений для использования. Порядок будет слева направо в отображении эскизов и связан с «красным», «зеленым» и «синим» соответственно.
‣ overlay_filenames — это список имен файлов оверлейных изображений, разделенных символом &. Внутри каждой «группы» оверлеев вы также можете указать имена файлов оверлеев, разделенные запятыми, для каждого кадра. Например:

overlay_filenames : "over1.gif & over2_1.gif, over2_2.gif, over2_3.gif

‣ Если «группа» наложения содержит только одно изображение, то это изображение будет отображаться в каждом кадре.
‣ overlay_labels — это разделенный запятыми список меток для флажков наложения — будьте очень краткими! Для каждой «группы» должна быть одна метка (см. выше).
‣ overlay_tips — это разделенный запятыми список «подсказок» для каждой метки overlay_label.
‣ labels определяет «короткие метки» для каждого изображения
‣ longLabs определяет «длинные метки» для каждого изображения.
‣ bgcolor указывает цвет фона для панели дисплея ICE. Вы можете использовать обычное имя (например, красный, зеленый, пурпурный, желтый и т. д.) или цвет RGB в формате: "#rrggbb" (шестнадцатеричные значения).
‣ initial_math в математическом режиме, вы можете использовать это, чтобы указать начальную отображаемую математическую комбинацию. Есть 5 элементов, разделенных запятыми: <красный множитель> <красный/зеленый оператор> <зеленый множитель> <зеленый/синий оператор> Коды операторов: 0 = сложение, 1 = вычитание, 2 = умножение и 3 = деление
‣ Distance_decimal количество десятичных цифр для использования при отображении расстояния
‣ navigation_decimal количество десятичных цифр для отображения при отображении координат широты/долготы
‣ result_decimal количество десятичных цифр для отображения при отображении зонда и использовании режима "do_math".
‣ Навигация задает широту и долготу верхнего левого и нижнего правого углов исходного изображения, а также определяет единицы, которые будут использоваться при отображении расстояний. Пример: навигация: "43., -90., 27.3, -77., NMI"

С этим параметром доступны как считывание широты/долготы при использовании зонда данных, так и расстояние.

‣ разрешение определяет единицы измерения и разрешение на пиксель. Приемлемые единицы измерения: м, км, мили, нм, пиксели. И пример для единиц километров, где разрешение линии составляет 32,3 км, а разрешение элемента — 51,7 км:

разрешение = км, 32,3, 51,7

С помощью этого параметра можно показать расстояние.

‣ do_ режимы:

           ‣ do_math настраивает математический режим
           ‣ сделать анимацию, настроенную на разрешение анимации
           ‣ do_rgb позволяет использовать комбинации RGB
           ‣ не настроено только для 3 изображений. Это значение по умолчанию.

‣ Calibration_filenames — разделенный запятыми список из 3 калибровочных файлов JSON, которые содержат преобразования из 8-битных значений в (возможно) физические значения.
‣ Calibration_decimal список из 3-х чисел, разделенных запятыми, которые указывают количество десятичных цифр, используемых при отображении калиброванных значений в датчике.
‣ калибровка позволяет задавать линейные точки останова и/или формы калибровки с пересечением наклона. Пример:

калибровка: "^oC, 0=31,7, 120=0,5, 254=-97,3"
калибровка: "^oC, 0=31,7, 120=0,5, 254=-97,3 и Вт/м^2, наклон=2,3, точка пересечения=83,1 и ^oK, 0=322, 255=243,3"

‣ colortable_filenames список разделенных запятыми таблиц цветов JSON (улучшения), которые пользователь может выбирать для раскрашивания изображений (не для режима RGB).
‣ colortable_labels список имен, разделенных запятыми, чтобы показать пользователю, которые соответствуют именам файлов colortable_file.
‣ image_colortables разделенный запятыми список имен файлов 3-х цветовых таблиц для использования при показе эскизов изображений при использовании режима do_none. Связанная таблица также будет использоваться, когда выбранное изображение отображается на главной панели.
‣ graphWindowOffsetXY — пара пиксельных координат X и Y, разделенных запятыми, указывающая расположение верхнего левого угла графических окон относительно основного виджета. Этот параметр полезен для изменения расположения графических окон на веб-странице в целом.

graphWindowOffsetXY : «10,10» — это местоположение по умолчанию, смещенное на 10 пикселей от левого верхнего угла виджета.
graphWindowOffsetXY : "350,-170" расположит окно графика на 350 пикселей над (X) и на 170 пикселей над (Y) виджета.

Copyright notice

Программное обеспечение, описанное здесь, представляет собой пакет ICE (Image Componsite Explorer), веб-инструментарий для изучения комбинаций изображений. Он был разработан по контракту с Земной обсерваторией НАСА и защищен авторскими правами © 2002-2018 Тома Уиттакера.

Эта программа является бесплатным программным обеспечением; вы можете распространять его и/или модифицировать, но вы НЕ можете переупаковывать и продавать его.

Эта программа распространяется в надежде, что она будет полезна, но БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ; даже без подразумеваемой гарантии КОММЕРЧЕСКОЙ ПРИГОДНОСТИ или ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННОЙ ЦЕЛИ.

Разработчики, их работодатели или спонсирующее агентство не несут ответственности за любые последствия и т. д., которые могут возникнуть в результате использования этого программного обеспечения или программного обеспечения, полученного на его основе. Кроме того, вы соглашаетесь ограждать нас от любых последствий, связанных с использованием этого программного обеспечения.