RU2752777C1 - Web browser objects computer-aided magnification and centering - Google Patents

Abstract

FIELD: computing.SUBSTANCE: invention relates to a method for computer-aided magnification and centering of objects in a web browser. The method includes following steps: handling custom events; in response to an item's scaling event: the target to scale is set; the target magnification factor is determined; the required displacement of the document body along the X and Y axes is determined; the browser is notified about upcoming transformations; the coordinates of the point for transforming the body of the document into a value in the center of the X and Y axes are set; the scale of the document body along the X and Y axes is changed; an empty transparent element is formed, which is placed at the end of the body of the document, so that it occupies the entire window area of the displayed web page; scrollbars on the body of the document is hided; in response to the occurrence of an element scaling cancellation event: the propagation of the element scaling event to all other elements of the web page is blocked, except for an empty element; the body of the document to the state before the element was scaled is transformed, upon completion of the transformation, suspend browser notification of transformations applied to the target object.EFFECT: invention increases efficiency of the operation of scaling objects in a web browser, the smoothness of the image of the scaled elements, increases the efficiency of using hardware resources.2 cl, 4 dwg

Description

FIELD OF TECHNOLOGY

The technical solution relates to the field of web technologies, namely, to methods of scaling displayed objects of web content in a web browser.

LEVEL OF TECHNOLOGY

From the prior art publication RU 2637415 C2, "Alternative semantics for scaling operations in a scalable scene", MICROSOFT TECHNOLOGY LICENSING, ElSi is known. This technical solution is a scene containing a set of visual elements that can allow the user to perform "scaling" operations to move through the depth of the scene. Scaling semantics are often used to simulate optical visual depth, in which visual elements are presented at different visual sizes and visual resolutions to simulate physical proximity or distance. However, “zoom” semantics can alternatively be applied to other aspects of scene visuals, such as custom selection of a zoomed-in visual, “diving” on a dataset, or navigating through a portal in a first dataset to view a second dataset. These alternative "scaling" semantics can be achieved by presenting the effects of the "scaling" operation in the scene on a visual representation of the visual other than adjusting the visual size and resolution of the visual.

The disadvantage of the presented solutions is the impossibility of using them in the existing software for the WEB, less efficiency and greater resource intensity.

ESSENCE

EFFECT: increased efficiency of the operation of scaling objects in the WEB, no need to modify existing software, high smoothness of the scaled elements image, increased efficiency of using hardware resources.

A method for computer zooming and centering objects in a web browser using at least one processor includes the following steps:

handle custom events;

in response to the element's scaling event:

- set the target object to which the zoom effect will be applied;

- determine the target magnification factor;

- determine the required displacement of the document body along the X (targetX) and Y (targetY) axes, taking into account the target zoom factor of the document body, required to position the target object in the center of the browser window;

- notifying the browser about upcoming transformations applied to the target object, to ensure smooth transformations and clarity of display of the target object;

- set the coordinates of the point, relative to which the transformation of the document body will be made, to the value in the center of the X and Y axes;

- change the scale of the document body along the X and Y axes using the target magnification factor, and shift the document body along the X axis using the previously defined targetX offset, shift the document body along the Y axis using the previously defined targetY offset;

- an empty (transparent) element (overlayelem) is formed, which is placed at the end of the document body, and the dimensions of this element are set so that it occupies the entire window area of the displayed web page;

- hide the scrollbars at the body of the document;

in response to an item scaling cancellation event:

- block the propagation of the element scaling event for all other elements of the web page, except for the previously generated empty element (overlayelem);

- transform the body of the document to the state before scaling the element, and upon completion of the transformation, pause the browser notification of transformations applied to the target object.

BRIEF DESCRIPTION OF DRAWINGS

FIG. 1a shows a fragment of a web page before scaling is applied.

FIG. 1b shows a fragment of a web page after applying the zoom effect.

FIG. 2 is a block diagram of one exemplary implementation of scaling.

FIG. 3 shows a general purpose system for implementing the claimed scaling method.

DETAILED DESCRIPTION

Browser, web browser or web browser (from the English web browser) - application software for viewing pages, the content of web documents, computer files and their catalogs; web application management; as well as for solving other problems.

The browser engine, the browser layout engine, is a program that transforms the content of web pages (HTML files, XML files, digital images, etc.) and formatting information (in CSS, XSL, etc.) ) to an interactive display of formatted content on the screen. The browser engine is commonly used in web browsers, email clients, and other programs that need to display and edit the content of web pages.

The JavaScript engine is a specialized program that processes JavaScript, particularly in browsers.

According to the Document Object Model (DOM for short), every HTML tag is an object. The nested tags are the "children" of the parent element. The text that is inside the tag is also an object.

Within the framework of this technical solution, the concept of an object and an element will be used, where an object is any part of a web page accessible through the DOM, and an element is an object that is displayed to the user on a web page.

A method for computer enlarging and centering elements / objects in a web browser, performed using at least one processor, includes the steps (steps) described below.

Hereinafter, all used functions, calculations, steps, stages are carried out using the browser engine built into the browser using a processor. In some implementations, to implement the steps, stages of the described technical solution, a JavaScript engine is used that is integrated into the browser and associated with the browser engine.

In some implementations, before the step of implementing the method, the following data, objects, elements, properties, parameters are set:

body, element, window, scale, transition duration, where:

body represents the content (content) of the HTML document,

element - a scalable web page element,

window - an object that represents a window containing a DOM document; the document property points to the DOM document loaded in the given window,

scale - the required scale of the element object,

transition duration specifies the time in seconds or milliseconds how long the transition animation should take before it completes.

Handle custom events.

In some implementations, a handler is set on events to determine / detect an event that should trigger the scaling or unscaling of an element.

The event that triggers the element scaling can be one of the following: pressing a mouse button (left or right), pressing a keyboard key (any, for example, Escape), clicking on a touch screen, voice input (certain / specified commands, for example " make it bigger ”,“ enlarge ”) or pressing a special display object (for example, a button).

In some implementations, an event can be bound to an object.

Specifies the target to apply the zoom effect to.

In some implementations, the target is a displayable element of a web page. In some implementations, tags, classes, IDs, and CSS selectors can be used to specify the target in the DOM tree.

Determine the target magnification ratio.

In some implementations, the target zoom factor (hereinafter targetScale) is defined as follows: (scale / 100) * min (W (window) / W (element), H (window) / H (element)), where:

Window - an object that represents a window containing a DOM document,

the document property points to the DOM document loaded in the given window,

element - the object that will be scaled (set by the user, developer or automatically),

scale - the specified scale (set by the developer or user),

W (Obj) - function for getting the width of the object Obj,

H (Obj) - function for obtaining the height of the object Obj,

min (z, zl) - function of determining the minimum of two elements (z, z1) / determination of the minimum value of two elements.

Determine the required displacement of the document body along the X (targetX) and Y (targetY) axes, taking into account the target zoom factor of the document body, required to position the target object in the center of the browser window.

In some implementations, the X-axis offset of the document body (hereinafter targetX) is defined as follows:

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

CX (Obj) - the function of obtaining the center of the object Obj along the X axis, CX (Obj) = OX (Obj) + (W (Obj) / 2),

OX (Obj) - the function of getting the left edge of the object Obj along the X axis,

round (Z) - the function of rounding the number Z to the nearest integer.

In some implementations, the Y-axis offset of the document body (hereinafter targetY) is defined as follows:

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

CY (Obj) - the function of obtaining the center of the object o along the Y axis, CY (Obj) = OY (Obj) + (H (Obj) / 2),

OY (Obj) - the function of getting the top edge of the object about along the Y axis.

Notify the browser of upcoming transformations to be applied to the target to ensure smooth transformations and crispness of the target.

In some implementations, notifying the browser of upcoming transformations is done using the CSS will-change property, which provides the ability to notify the browser of an expected element change, so the browser can adjust the appropriate optimizations before the element actually changes. This type of optimization can improve the responsiveness of a page by performing possibly expensive operations before they are actually needed.

For example, using the jQuery library, such a notification can be done as follows for a given $ element:

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

In some implementations, when notifying the browser about upcoming transformations, hardware acceleration of processing element transformations using a GPU, GPU is included.

Sets the coordinates of the point, relative to which the document body will be transformed into a value in the center of the X and Y axes.

In some implementations, the coordinates are set by setting the transform-origin CSS property.

Transform-origin sets the coordinates of the point relative to which the element will be transformed, transform-origin: <х><у> <z>.

In some implementations, transform-origin is set to 'center center'.

The document body is scaled along the X and Y axes using the target magnification factor, and the document body is shifted along the X axis using the previously defined targetX offset, the document body is shifted along the Y axis using the previously defined targetY offset.

In some implementations, the scale is changed using the transform CSS property, which allows you to rotate, scale, skew, or shear an element.

As an example for the described scaling transformations, setting the CSS transform property with the following value can be used: matrix (targetScale, 0, 0, targetScale, targetX, targetY), where

targetScale - the previously defined target zoom factor,

targetX, targetY - previously defined necessary offsets of the document body along the X, Y axes,

matrix specifies the transformation matrix over the element (given element) to which the transformation is applied.

Hide scrollbars from the body of the document.

In some implementations, scrollbars are hidden using the CSS overflow property. In some implementations, the overflow property is set to hidden to hide scrollbars. In some implementations, JavaScript can be used to set the object's style.paddingRight property to offset Width - client Width, such as element, style. paddingRight = element. offsetWidth -element, client Width + "px".

Some implementations use browser-dependent properties to set CSS properties, whose names begin with special prefixes, for example, "-webkit-", "-moz-", "-ms-", "-o", and others.

In some implementations, an overlay element is created (formed) within the body of the document body, which triggers the zoom out of the element upon the occurrence of some predefined event, such as a mouse click or other input device.

In some implementations, the following steps are performed to unscale an element.

In some implementations, to provide the ability to cancel the zoom effect, an empty element is created (formed) with a given identifier (for example, "# newzoom-overlay"), which is placed at the end of the document body, and the dimensions of the empty element are set so that it occupies the entire (100 %) the area of the web page window.

A function (event handler) is set that is triggered by some event (for example, a mouse button is pressed), which is used to control the zoom on a <div> element with a given identifier (for example, "# newzoom-overlay") with the following instructions (content):

- block the propagation of the mouse click event to subsequent elements of the web page (except for the previously generated empty transparent element);

- start the transformation of the document body to the initial state (as a result of this step, the user receives a web page at the original scale);

- upon completion of the transformation, the "will-change" property is removed from the specified element, which ensures smooth transformation and clarity of the approximate element.

In some implementations, an event handler for controlling the zoom can be set, for example, to the following user actions: pressing keyboard buttons (for example, Escape), clicking on the touch screen (Tar event), voice input (for example, on certain commands).

FIG. 3 shows an example of a general-purpose computer system used to implement the described method, a personal computer or server 20 containing a central processing unit 21, a system memory 22, and a system bus 23 that contains various system components, including memory associated with the central processing unit 21. The system bus 23 is implemented as any bus structure known in the art, which in turn contains a bus memory or bus memory controller, a peripheral bus and a local bus that is capable of interfacing with any other bus architecture. System memory contains read-only memory (ROM) 24, random access memory (RAM) 25. The main input / output system (BIOS) 26 contains basic procedures that transfer information between the elements of the personal computer 20, for example, at the time of loading the operating system using ROM 24.

The personal computer 20, in turn, contains a hard disk 27 for reading and writing data, a magnetic disk drive 28 for reading and writing to removable magnetic disks 29 and an optical drive 30 for reading and writing to removable optical disks 31, such as CD-ROM, DVD -ROM and other optical media. The hard disk 27, the magnetic disk drive 28, and the optical drive 30 are connected to the system bus 23 via the hard disk interface 32, the magnetic disk interface 33, and the optical drive interface 34, respectively. Drives and corresponding computer storage media are non-volatile storage media for computer instructions, data structures, program modules and other data of a personal computer 20.

The present description discloses an implementation of a system that uses a hard disk 27, but it should be understood that it is possible to use other types of computer storage media that are capable of storing data in a computer readable form (solid state drives, flash memory cards, digital disks, memory with arbitrary access (RAM), etc.), which are connected to the system bus 23.

Computer 20 has a file system 36, where the recorded operating system 35 is stored, as well as additional software applications 37, other program modules 38 and program data 39. The user has the ability to enter commands and information into the personal computer 20 through input devices (keyboard 40, manipulator " mouse "42). Other input devices may be used (not shown): microphone, joystick, game console, scanner, etc. Such input devices, as usual, are connected to the computer system 20 via the USB interface 46, which in turn is connected to the system bus, but can be connected in another way, for example, using a parallel port, a game port. A monitor 47 or other type of display device is also connected to the system bus 23 via an interface such as a video adapter 48. In addition to the monitor 47, the personal computer may be equipped with other peripheral output devices (not shown).

The personal computer 20 is capable of operating in a networked environment using a network connection with other or more remote computers 49. The remote computer (or computers) 49 are the same personal computers or servers that have most or all of the elements mentioned earlier in the description of the entity. the personal computer 20 shown in FIG. 3. In a computer network, there may also be other devices, such as routers, network stations, peer-to-peer devices, or other network nodes.

Network connections can form a local area network (LAN) 50 and a wide area network (WAN). Such networks are used in corporate computer networks, internal networks of companies and, as a rule, have access to the Internet. In LAN or WAN networks, the personal computer 20 is connected to the local network 50 via a network adapter or network interface 51. When using networks, the personal computer 20 may use a router 54 or other means of providing communication with a wide area network, such as the Internet. Router 54, which is an internal or external device, is connected to the system bus 23 via a USB port 46. It should be noted that the network connections are only exemplary and are not required to reflect the exact configuration of the network, i. E. in fact, there are other ways of establishing a connection by technical means of communication of one computer with another.

Below is a fragment of one of the private options for implementing a technical solution in JavaScript with some assumptions and simplifications as an illustrative example of the possibility of an actual implementation.

Claims (15)

1. A method for computer zooming and centering objects in a web browser, performed using at least one processor, includes the following steps: • handle custom events; • in response to an element scaling event: - set the target object to which the zoom effect will be applied; - determine the target magnification factor; - determine the required displacement of the document body along the X (targetX) and Y (targetY) axes, taking into account the target zoom factor of the document body to position the target object in the center of the browser window; - notifying the browser about upcoming transformations applied to the target object, to ensure smooth transformations and clarity of display of the target object; - set the coordinates of the point, relative to which the transformation of the document body will be made, to the value in the center of the X and Y axes; - change the scale of the document body along the X and Y axes using the target magnification factor, and shift the document body along the X axis using the previously defined targetX offset, shift the document body along the Y axis using the previously defined targetY offset; - form an empty transparent element (overlayelem), which is placed at the end of the body of the document, and the dimensions of the empty element are set so that it occupies the entire window area of the displayed web page; - hide the scrollbars at the body of the document; • in response to an element scaling cancellation event: - block the propagation of the element scaling event for all other elements of the web page, except for the previously generated empty element (overlayelem); - transform the body of the document to the state before scaling the element, and upon completion of the transformation, pause the browser notification of transformations applied to the target object. 2. The method according to claim 1, wherein the element scaling event can be one of the following: mouse click, keyboard key press, touch screen click, voice input.

Images