CC BY
30
ТЕХНИЧЕСКИЕ НАУКИ
МОДИФИКАЦИЯ ПРОЦЕССОВ ХРАНЕНИЯ И ОБРАБОТКИ ДАННЫХ В ПРОИГРЫВАТЕЛЕ ИНСТРУМЕНТАЛЬНОГО
КОМПЛЕКСА «ПОСТРОИТЕЛЬ ТЬЮТОРОВ» 1 2 Волк А.Ю. , Илюшечкин А.С. Email: [email protected]
1Волк Андрей Юрьевич - магистрант;
2Илюшечкин Александр Сергеевич - магистрант, кафедра математического обеспечения и стандартизации информационных технологий, МИРЭА - Российский технологический университет, г. Москва
Аннотация: в статье исследуется проблема хранения и вывода на экран большого количества образов информационной системы, входящих в состав обучающей программы массового профессионального пользователя, а также решается задача избавления пользователей от необходимости обеспечения высокоскоростного сетевого соединения. Описываются подходы к её решению и предлагается методика послойного наложения образов, содержащих только изменившиеся области. Приводится сравнение популярных алгоритмов интерполяции изображений. Ключевые слова: масштабирование изображения, обучающая программа, технология опережающего обучения.
MODIFICATION OF WAYS OF STORING AND PROCESSING DATA IN THE PLAYER SUBSYSTEM OF THE INSTRUMENTAL COMPLEX «POSTROITEL TUTOROV» Volk A.Yu.1, Ilyushechkin A.S.2
1Volk Andrey Yurievich - Undergraduate;
2Ilyushechkin Alexandr Sergeevich - Undergraduate, DEPARTMENT OF MATHEMATICAL SUPPORT AND STANDARDIZATION OF INFORMATION
TECHNOLOGIES, MIREA - RUSSIAN TECHNOLOGICAL UNIVERSITY, MOSCOW
Abstract: in the article authors investigate the problem of storage and display of a large number of images of the information system that are part of the training program of mass professional user, and also solve the problem of eliminating the need for high-speed network connection. The approaches to its solution are described and the technique of layer-by-layer overlay of images containing only the changed areas is offered. This article contains a comparison of image interpolation algorithms supported by popular browsers. Keywords: image scaling, training program, advanced training technology.
УДК 004.932.4
Рассмотрим задачу обучения массовых профессиональных пользователей (МММ) [1] работе с информационными системами (ИС). Известно [2], что достичь наибольшего эффекта в этом позволяет применение технологии деятельного обучения. Основным элементом технологии является инструментальный комплекс «Построитель тьюторов». В его основе лежит создание, обработка и воспроизведение обучающих программ (ОП). ОП состоит из набора данных в виде текста, звука и изображений [3]. Проигрыватель, входящий в состав «Построителя тьюторов», преобразует изображения под любой размер экрана, соответствующий монитору пользователя. Масштабирование происходит в режиме реального времени на стороне
клиентского приложения. Хранятся же изображения в определённом изначальном разрешении, соответствующем экрану устройства, на котором происходила запись сценария. Согласно данным сервиса онлайн-статистики [4] мониторы интернет-пользователей с разрешением 1920x1080px и 1366x768px входят в тройку лидеров. Объём памяти, занимаемый полноэкранными скриншотами, сделанными с использованием таких мониторов, в среднем достигает 2-3 Мб при сохранении без потери информации. Каждый шаг ОП содержит как минимум 1 изображение (образ экрана). Таким образом, сценарий средних размеров (500 шагов) имеет объём около 1.3 Гб. Актуальная версия «Построителя тьюторов» организована по клиент-серверной архитектуре и, следовательно, весь объём информации, занимаемый ОП, передаётся пользователям по сети. Недостаточно быстрое или нестабильное сетевое соединение может привести к неестественному поведению ОП. Возникает задача избавления пользователей от необходимости обеспечения высокоскоростного сетевого соединения. Эта задача может быть решена путём сокращения объёма изображений как для их хранения, так и для передачи.
На пути к решению задачи были внедрены механизмы буферизации [5] и послойного наложения изображений, содержащих только изменившиеся области. Подготовка изображений, содержащих только изменившиеся области, происходит по следующему алгоритму:
1. Клиент загружает с сервера пару соседних изображений в формате PNG.
2. Из каждого изображения извлекается массив данных с информацией о цвете каждого его пикселя в формате RGBA (четыре канала: красный, зелёный, синий и альфа-канал).
3. Из данных о пикселях второго изображения вычитаются соответствующие им данные о пикселях первого, если информация о них совпадает во всех четырёх каналах, в результате чего информация во всех четырёх каналах становится равной нулю (полная прозрачность пикселя).
4. Полученный массив с информацией о пикселях второго изображения кодируется в формат PNG и загружается на сервер.
5. Алгоритм повторяется для исходной версии второго изображения в обработанной паре и следующего за ним изображения.
Таким образом, каждое полученное в пункте 4 этого алгоритма изображение хранит только уникальные (относительно предыдущего изображения) пиксели, которые содержат в себе информацию об изменениях, произошедших с образом ИС на каждом элементарном шаге обучающего сценария. При кодировании изображений в формат PNG они сжимаются по алгоритму Deflate [6]. Так как данный алгоритм позволяет заменить повторяющиеся последовательности байт на указатели, а в результате попарных сравнений изображений с последующим вычитанием информации о пикселях подавляющая часть их байтового потока приравнивается к нулю, она сокращается при конвертации в формат PNG. Такое решение в среднем приводит к сокращению объёма ОП в 5 раз.
Воспроизводить подготовленные изображения в проигрывателе было предложено путём последовательного наложения элементов DOM (Document Object Model) HTML-страницы поверх серии предыдущих с позиционированием в единой точке и последующим масштабированием в соответствии с параметрами экрана пользователя.
При экспериментальном исследовании было выявлено, что при воспроизведении сценария в условиях, где разрешение области образа ИС не совпадает с исходным разрешением изображений появлялся негативный эффект: на границах прозрачных областей изображения наблюдались искажения (рисунок 1).
Рис. 1. Появление искажений при наложении образа ИС, который содержит только
изменившиеся области
Проведённый анализ показал, что этот эффект связан с алгоритмом интерполяции изображений, используемым популярными браузерами по умолчанию. При масштабировании изображения он создаёт сглаживания линий, корректируя цвета соседних пикселей (Рисунок 2 слева). Избавиться от эффекта можно с помощью режима pixelated, который не допускает размытия цветов и контуров (Рисунок 2 справа).
Рис. 2. Изображения с исходной шириной 6 пикселей, увеличенные до 120 пикселей алгоритмом
auto (слева) и pixelated (справа)
Рассмотрим, как при этом преобразуется детализированная информация, например, текст (Рисунок 3).
Эффективное обучение Эффе «пивное обучение
Рис. 3. Изображения с исходной шириной 1000 пикселей, уменьшенные до 160 пикселей алгоритмом auto (слева) и pixelated (справа)
Заметим, в режиме pixelated из букв полностью исчезают их неотъемлемые
элементы. Так, в Рисунке 3 буква "к", имеет следующую структуру:
<
Рис. 4. Изображение с исходной шириной 1000 пикселей, уменьшенное до 160 пикселей
алгоритмом pixelated
Таким образом, использование режима pixelated нежелательно, так как страдает детализация, что, в частности, приводит к ошибкам в отображении текстов. В результате было предложено использовать автоматический алгоритм интерполяции изображений, при этом масштабирование производить после наложения в оригинальном разрешении очередного изображения на полученное в предыдущем кадре. Алгоритм наложения аналогичен алгоритму подготовки изображений, но при сравнении пикселей данные о пикселях старого изображения заменяются соответствующими данными о пикселях нового, если информация о них не совпадает хотя бы в одном из трёх каналов, описывающий цвет, и пиксель нового изображения не прозрачен.
В проигрывателе собранное из частей изображение полностью идентично исходному образу ИС, имеет возможность масштабирования без искажений. Использованные алгоритмы обеспечивают точное отображение изображений, экономию памяти и сетевого трафика, о чём говорят результаты проведённых экспериментов. Таким образом, задача была решена, и её решение экспериментально подтверждено.
Список литературы /References
1. Григорьев В.К. Технология электронного обучения одного класса пользователей программных продуктов / В.К. Григорьев // Дистанционное и виртуальное обучение, 2015. № 8 (98). С. 12-28.
2. Григорьев В.К. Экспериментальное исследование комплекса для создания обучающих программ «Построитель тьюторов» / В.К. Григорьев, А.А. Бирюкова // Информатизация и связь, 2016. № 4. С. 90-96.
3. Григорьев В.К. Инструментально-моделирующий комплекс для опережающего обучения МПП ИУС / В.К. Григорьев // Открытое образование, 2011. № 1. С. 44-55.
4. Screen Resolution Stats Worldwide. [Электронный ресурс]. Режим доступа: http://gs.statcounter.com/screen-resolution-stats/ (дата обращения: 18.11.2018).
5. Волк А.Ю. Модификация инструментальной поддержки технологии опережающего обучения массового профессионального пользователя / А.Ю. Волк,
A.С. Илюшечкин // Современные информационные технологии в образовании: материалы XXIX международной конференции. Троицк-Москва, 2018. С. 257-258.
6. Голощапова В.А. О предварительной обработке изображений в задаче их сжатия /
B.А. Голощапова // Научные ведомости, 2013. № 7 (150). С. 183-187.
