СПОСОБ КОМПЬЮТЕРНОГО УВЕЛИЧЕНИЯ И ЦЕНТРИРОВАНИЯ ОБЪЕКТОВ В ВЕБ-БРАУЗЕРЕ Российский патент 2021 года по МПК G06F3/484 G09G5/373 

ОБЛАСТЬ ТЕХНИКИ

Техническое решение относится к области web-технологий, а именно к способам масштабирования отображаемых объектов веб-содержимого в веб-браузере.

УРОВЕНЬ ТЕХНИКИ

Из уровня техники известна публикация RU 2637415 C2, «Альтернативные семантики для операций масштабирования в масштабируемой сцене», МАЙКРОСОФТ ТЕКНОЛОДЖИ ЛАЙСЕНСИНГ, ЭлЭлСи. Данное техническое решение представляет собой сцену, содержащую набор визуальных элементов, что может позволять пользователю осуществлять операции «масштабирования» для перемещения по глубине сцены. Семантика «масштабирования» часто применяется для имитации оптической визуальной глубины, в которой визуальные элементы представляются с разными визуальными размерами и визуальным разрешением для имитации физической близости или удаленности. Однако семантика «масштабирования» может альтернативно применяться к другим аспектам визуальных элементов сцены, например пользовательскому выбору визуального элемента увеличенного масштаба, операции «погружения» на массиве данных, или перемещения по порталу в первом массиве данных для просмотра второго массива данных. Эти альтернативные семантики «масштабирования» могут достигаться путем представления эффектов операции «масштабирования» в сцене на визуальном представлении визуального элемента, отличающегося от регулировки визуальных размеров и разрешения визуального элемента.

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

СУЩНОСТЬ

Технический результат: повышение эффективности операции масштабирования объектов в WEB, отсутствие необходимости в модификации существующего программного обеспечения, высокая плавность изображения масштабированных элементов, повышение эффективности использования аппаратных ресурсов.

Способ компьютерного увеличения и центрирования объектов в веб-браузере, выполняемый при помощи по крайней мере одного процессора, включает следующие шаги:

обрабатывают пользовательские события;

в ответ на возникновение события масштабирования элемента:

- задают целевой объект, к которому будет применяться эффект масштабирования;

- определяют целевой коэффициент увеличения;

- определяют необходимое смещение тела документа по осям X (targetX) и Y (targetY) с учетом целевого коэффициента увеличения масштаба тела документа, необходимое для расположения целевого объекта по центру окна браузера;

- уведомляют браузер о предстоящих трансформациях, применяемых к целевому объекту, для обеспечения плавности трансформаций и четкости отображения целевого объекта;

- устанавливают координаты точки, относительно которой будет производиться трансформация тела документа, в значение по центру осей X и Y;

- изменяют масштаб тела документа по осям X и Y, используя целевой коэффициент увеличения, причем смещают тело документа по оси X, используя определенное ранее смещение targetX, смещают тело документа по оси Y, используя определенное ранее смещение targetY;

- формируют пустой (прозрачный) элемент (overlayelem), который помещается в конце тела документа, причем размеры этого элемента заданы так, чтобы он занимал всю площадь окна отображаемой веб-страницы;

- скрывают полосы прокрутки у тела документа;

в ответ на возникновение события отмены масштабирования элемента:

- блокируют распространение события масштабирования элемента всех остальных элементов веб-страницы, кроме сформированного ранее пустого элемента (overlayelem);

- трансформируют тело документа к состоянию до масштабирования элемента, причем по завершении трансформации приостанавливают уведомление браузера о трансформациях, применяемых к целевому объекту.

КРАТКОЕ ОПИСАНИЕ ЧЕРТЕЖЕЙ

На фиг. 1а показан фрагмент веб-страницы до применения масштабирования.

На фиг. 1б показан фрагмент веб-страницы после применения эффекта масштабирования.

На фиг. 2 показана блок-схема одного из иллюстративных вариантов реализации масштабирования.

На фиг. 3 показана система общего назначения для реализации заявленного способа масштабирования.

ПОДРОБНОЕ ОПИСАНИЕ

Браузер, веб-браузер или веб-обозреватель (от англ. web browser) - прикладное программное обеспечение для просмотра страниц, содержания веб-документов, компьютерных файлов и их каталогов; управления веб-приложениями; а также для решения других задач.

Браузерный движок, ядро браузера (англ. layout engine), представляет собой программу, преобразующую содержимое веб-страниц (файлы HTML, XML, цифровые изображения и т.д.) и информацию о форматировании (в форматах CSS, XSL и т.д.) в интерактивное изображение форматированного содержимого на экране. Браузерный движок обычно используется в веб-браузерах, почтовых клиентах и других программах, нуждающихся в отображении и редактировании содержимого веб-страниц.

Движок JavaScript - специализированная программа, обрабатывающая JavaScript, в частности, в браузерах.

В соответствии с объектной моделью документа («Document Object Model», коротко DOM) каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.

В рамках данного технического решения будет использоваться понятие объект и элемент, где объект - это любая часть веб-страницы, доступная через модель DOM, а элемент - это объект, который отображается пользователю на веб-странице.

Способ компьютерного увеличения и центрирования элементов/объектов в веб-браузере, выполняемый при помощи по крайней мере одного процессора, включает описанные ниже шаги(этапы).

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

В некоторых вариантах реализации перед этапом осуществления способа задают следующие данные, объекты, элементы, свойства, параметры:

body, element, window, scale, transition duration, где:

body представляет собой контент (содержимое) документа HTML,

element - масштабируемый элемент веб-страницы,

window - объект, который представляет собой окно, содержащее DOM документ; свойство document указывает на DOM document, загруженный в данном окне,

scale - требуемый масштаб объекта element,

transition duration задает время в секундах или миллисекундах, сколько должна длиться анимация перехода до ее завершения.

Обрабатывают пользовательские события.

В некоторых вариантах реализации устанавливают обработчик на события для определения/выявления события, которое должно запустить процесс масштабирования или отмены масштабирования элемента.

Событием, по которому запускается масштабирование элемента, может быть одно из следующих действий: нажатие кнопки мыши (левой или правой), нажатие клавиши клавиатуры (любой, например, Escape), клик на сенсорный экран, голосовой ввод (определенных/заданных команд, например «сделай больше», «увеличь») или нажатие специального экранного объекта (например, кнопки).

В некоторых вариантах реализации событие может быть привязано к объекту.

Задают целевой объект, к которому будет применяться эффект масштабирования.

В некоторых вариантах реализации целевой объект представляет собой отображаемый на экране элемент веб-страницы. В некоторых вариантах реализации для задания целевого объекта в дереве DOM могут использоваться теги, классы, идентификаторы и CSS-селекторы.

Определяют целевой коэффициент увеличения.

В некоторых вариантах реализации целевой коэффициент увеличения (здесь и далее targetScale) определяется следующим образом: (scale / 100) * min(W(window) / W(element), H(window) / H(element)), где:

Window - объект, который представляет собой окно, содержащее DOM документ,

свойство document указывает на DOM document, загруженный в данном окне,

element - объект, который будет масштабироваться (задается пользователем, разработчиком или автоматически),

scale - заданный масштаб (задается разработчиком или пользователем),

W(Obj) - функция получения ширины объекта Obj,

H(Obj) - функция получения высоты объекта Obj,

min (z, zl) - функция определения минимального из двух элементов (z, z1)/определение минимального значения из двух элементов.

Определяют необходимое смещение тела документа по осям X (targetX) и Y (targetY) с учетом целевого коэффициента увеличения масштаба тела документа, необходимое для расположения целевого объекта по центру окна браузера.

В некоторых вариантах реализации смещение тела документа по оси X (здесь и далее targetX) определяется следующим образом:

round((CX(body) - CX(element)) * targetScale+(OX(window) - CX(body))+(W(window) - W(element) * targetScale) / 2), где:

CX(Obj) - функция получения центра объекта Obj по оси X, CX(Obj)=OX(Obj)+(W(Obj)/2),

OX(Obj) - функция получения левого края объекта Obj по оси X,

round (Z) - функция округления числа Z к ближайшему целому.

В некоторых вариантах реализации смещение тела документа по оси Y (здесь и далее targetY) определяется следующим образом:

round((CY(body) - CY(element)) * targetScale+(OY(window) - CY(body))+(H(window) - H(element) * targetScale) / 2)

CY(Obj) - функция получения центра объекта о по оси Y, CY(Obj)=OY(Obj)+(H(Obj)/2),

OY(Obj) - функция получения верхнего края объекта о по оси Y.

Уведомляют браузер о предстоящих трансформациях, применяемых к целевому объекту, для обеспечения плавности трансформаций и четкости отображения целевого объекта.

В некоторых вариантах реализации уведомление браузера о предстоящих трансформациях осуществляется с использованием CSS свойства will-change, которое предоставляет возможность уведомить браузер об ожидаемом изменении элемента, таким образом браузер может настроить соответствующую оптимизацию до того, как элемент действительно изменится. Такой тип оптимизации может повысить отзывчивость страницы, совершая возможно дорогие операции до того, как они действительно понадобятся.

Например, с использованием библиотеки jQuery такое уведомление может осуществляться следующим образом для заданного элемента $element:

$element.css('will-change', 'transform')

В некоторых вариантах реализации при уведомлении браузера о предстоящих трансформациях включают аппаратное ускорение обработки трансформаций элемента с использованием графического процессора, GPU.

Устанавливают координаты точки, относительно которой будет производиться трансформация тела документа в значение по центру осей X и Y.

В некоторых вариантах реализации установка координат осуществляется путем задания CSS свойства transform-origin.

Transform-origin устанавливает координаты точки, относительно которой будет происходить трансформация элемента, transform-origin: <х><у><z>.

В некоторых вариантах реализации transform-origin задают в значение 'center center'.

Изменяют масштаб тела документа по осям X и Y, используя целевой коэффициент увеличения, причем смещают тело документа по оси X, используя определенное ранее смещение targetX, смещают тело документа по оси Y, используя определенное ранее смещение targetY.

В некоторых вариантах реализации масштаб изменяют с использованием CSS-свойства transform, которое позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент.

В качестве примера для описанных трансформаций масштабирования может использоваться задание свойства CSS transform со следующим значением: matrix(targetScale, 0, 0, targetScale, targetX, targetY), где

targetScale - определенный ранее целевой коэффициент увеличения,

targetX, targetY - определенные ранее необходимые смещения тела документа по осям X, Y,

matrix задает матрицу преобразований над элементом (заданным элементом), к которому применяется преобразование.

Скрывают полосы прокрутки у тела документа.

В некоторых вариантах реализации полосы прокрутки скрываются с использованием CSS свойства overflow. В некоторых вариантах реализации для скрытия полос прокрутки задают значение свойства overflow в hidden. В некоторых вариантах реализации может использоваться JavaScript для задания у объекта значения свойства style.paddingRight, равное offset Width - client Width, например, element, style. paddingRight=element. offsetWidth -element, client Width+"px".

В некоторых вариантах реализации для задания свойств CSS используют браузерно-зависимые свойства, названия которых начинаются со специальных префиксов, например, "-webkit-", "-moz-", "-ms-", "-о-" и др.

В некоторых вариантах реализации создают (формируют) внутри тела документа body элемент overlay, обеспечивающий запуск уменьшения масштаба элемента по наступлению некоторого предопределенного события, например нажатия кнопки мыши или иного устройства ввода.

В некоторых вариантах реализации для отмены масштабирования элемента выполняются следующие шаги.

В некоторых вариантах реализации для обеспечения возможности отмены эффекта масштабирования создают (формируют) пустой элемент с заданным идентификатором (например, "#newzoom-overlay"), который помещается в конце тела документа, причем размеры пустого элемента заданы так, чтобы он занимал всю (100%) площадь окна веб-страницы.

Устанавливают функцию (обработчик события), срабатывающую по некоторому событию (например, нажатия кнопки мыши), которое используется для управления масштабом на элемент <div> с заданным идентификатором (например, "#newzoom-overlay") со следующими инструкциями (содержанием):

- блокируют распространение события нажатия кнопки мыши на последующие элементы веб-страницы (кроме сформированного ранее пустого прозрачного элемента);

- запускают трансформацию тела документа к начальному состоянию (в результате этого шага пользователь получает веб-страницу в исходном масштабе);

- по завершении трансформации с заданного элемента снимается свойство "will-change", обеспечивающее плавность трансформации и четкость приближенного элемента.

В некоторых вариантах реализации обработчик события для управления масштабом может устанавливаться, например, на следующие действия пользователя: нажатие кнопок клавиатуры (например, Escape), клик на сенсорный экран (событие Тар), голосовой ввод (например, на определенные команды).

Фиг. 3 представляет пример компьютерной системы общего назначения, используемой для реализации описанного способа, персональный компьютер или сервер 20, содержащий центральный процессор 21, системную память 22 и системную шину 23, которая содержит разные системные компоненты, в том числе память, связанную с центральным процессором 21. Системная шина 23 реализована, как любая известная из уровня техники шинная структура, содержащая в свою очередь память шины или контроллер памяти шины, периферийную шину и локальную шину, которая способна взаимодействовать с любой другой шинной архитектурой. Системная память содержит постоянное запоминающее устройство (ПЗУ) 24, память с произвольным доступом (ОЗУ) 25. Основная система ввода/вывода (BIOS) 26 содержит основные процедуры, которые обеспечивают передачу информации между элементами персонального компьютера 20, например, в момент загрузки операционной системы с использованием ПЗУ 24.

Персональный компьютер 20 в свою очередь содержит жесткий диск 27 для чтения и записи данных, привод магнитных дисков 28 для чтения и записи на сменные магнитные диски 29 и оптический привод 30 для чтения и записи на сменные оптические диски 31, такие как CD-ROM, DVD-ROM и иные оптические носители информации. Жесткий диск 27, привод магнитных дисков 28, оптический привод 30 соединены с системной шиной 23 через интерфейс жесткого диска 32, интерфейс магнитных дисков 33 и интерфейс оптического привода 34 соответственно. Приводы и соответствующие компьютерные носители информации представляют собой энергонезависимые средства хранения компьютерных инструкций, структур данных, программных модулей и прочих данных персонального компьютера 20.

Настоящее описание раскрывает реализацию системы, которая использует жесткий диск 27, но следует понимать, что возможно применение иных типов компьютерных носителей информации, которые способны хранить данные в доступной для чтения компьютером форме (твердотельные накопители, флеш-карты памяти, цифровые диски, память с произвольным доступом (ОЗУ) и т.п.), которые подключены к системной шине 23.

Компьютер 20 имеет файловую систему 36, где хранится записанная операционная система 35, а также дополнительные программные приложения 37, другие программные модули 38 и данные программ 39. Пользователь имеет возможность вводить команды и информацию в персональный компьютер 20 посредством устройств ввода (клавиатуры 40, манипулятора «мышь» 42). Могут использоваться другие устройства ввода (не отображены): микрофон, джойстик, игровая консоль, сканер и т.п. Подобные устройства ввода по своему обычаю подключают к компьютерной системе 20 через интерфейс USB 46, который в свою очередь подсоединен к системной шине, но могут быть подключены иным способом, например при помощи параллельного порта, игрового порта. Монитор 47 или иной тип устройства отображения также подсоединен к системной шине 23 через интерфейс, такой как видеоадаптер 48. В дополнение к монитору 47 персональный компьютер может быть оснащен другими периферийными устройствами вывода (не отображены).

Персональный компьютер 20 способен работать в сетевом окружении, при этом используется сетевое соединение с другим или несколькими удаленными компьютерами 49. Удаленный компьютер (или компьютеры) 49 являются такими же персональными компьютерами или серверами, которые имеют большинство или все упомянутые элементы, отмеченные ранее при описании существа персонального компьютера 20, представленного на Фиг. 3. В вычислительной сети могут присутствовать также и другие устройства, например маршрутизаторы, сетевые станции, пиринговые устройства или иные сетевые узлы.

Сетевые соединения могут образовывать локальную вычислительную сеть (LAN) 50 и глобальную вычислительную сеть (WAN). Такие сети применяются в корпоративных компьютерных сетях, внутренних сетях компаний и, как правило, имеют доступ к сети Интернет. В LAN- или WAN-сетях персональный компьютер 20 подключен к локальной сети 50 через сетевой адаптер или сетевой интерфейс 51. При использовании сетей персональный компьютер 20 может использовать роутер 54 или иные средства обеспечения связи с глобальной вычислительной сетью, такой как Интернет. Роутер 54, который является внутренним или внешним устройством, подключен к системной шине 23 посредством USB порта 46. Следует уточнить, что сетевые соединения являются лишь примерными и не обязаны отображать точную конфигурацию сети, т.е. в действительности существуют иные способы установления соединения техническими средствами связи одного компьютера с другим.

Ниже приведен фрагмент одного из частных вариантов реализации технического решения на языке JavaScript с некоторыми допущениями и упрощениями в качестве иллюстративного примера возможности фактической реализации.

Изобретение относится к способу компьютерного увеличения и центрирования объектов в веб-браузере. Техническим результатом является повышение эффективности операции масштабирования объектов в веб-браузере, плавность изображения масштабированных элементов, повышение эффективности использования аппаратных ресурсов. Способ включает шаги: обрабатывают пользовательские события; в ответ на событие масштабирования элемента: задают целевой объект для масштабирования; определяют целевой коэффициент увеличения; определяют необходимое смещения тела документа по осям X и Y; уведомляют браузер о предстоящих трансформациях; устанавливают координаты точки для трансформации тела документа в значение по центру осей X и Y; изменяют масштаб тела документа по осям X и Y; формируют пустой прозрачный элемент, который помещается в конце тела документа, чтобы он занимал всю площадь окна отображаемой веб-страницы; скрывают полосы прокрутки у тела документа; в ответ на возникновение события отмены масштабирования элемента: блокируют распространение события масштабирования элемента всех остальных элементов веб-страницы, кроме пустого элемента; трансформируют тело документа к состоянию до масштабирования элемента, по завершении трансформации приостанавливают уведомление браузера о трансформациях, применяемых к целевому объекту. 1 з.п. ф-лы, 4 ил.

1. Способ компьютерного увеличения и центрирования объектов в веб-браузере, выполняемый при помощи по крайней мере одного процессора, включает следующие шаги:

• обрабатывают пользовательские события;

• в ответ на возникновение события масштабирования элемента:

– задают целевой объект, к которому будет применяться эффект масштабирования;

– определяют целевой коэффициент увеличения;

– определяют необходимое смещение тела документа по осям X (targetX) и Y (targetY) с учетом целевого коэффициента увеличения масштаба тела документа для расположения целевого объекта по центру окна браузера;

– уведомляют браузер о предстоящих трансформациях, применяемых к целевому объекту, для обеспечения плавности трансформаций и четкости отображения целевого объекта;

– устанавливают координаты точки, относительно которой будет производиться трансформация тела документа, в значение по центру осей X и Y;

– изменяют масштаб тела документа по осям X и Y, используя целевой коэффициент увеличения, причем смещают тело документа по оси X, используя определенное ранее смещение targetX, смещают тело документа по оси Y, используя определенное ранее смещение targetY;

– формируют пустой прозрачный элемент (overlayelem), который помещается в конце тела документа, причем размеры пустого элемента заданы так, чтобы он занимал всю площадь окна отображаемой веб-страницы;

– скрывают полосы прокрутки у тела документа;

• в ответ на возникновение события отмены масштабирования элемента:

– блокируют распространение события масштабирования элемента всех остальных элементов веб-страницы, кроме сформированного ранее пустого элемента (overlayelem);

– трансформируют тело документа к состоянию до масштабирования элемента, причем по завершении трансформации приостанавливают уведомление браузера о трансформациях, применяемых к целевому объекту.

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