Page display method, device, terminal device and computer-readable storage medium
By responding to selection operations on the graphical user interface and controlling the dynamic scaling of the currently focused area in the visual editing system according to weight rules, the problem of users being unable to circle key areas in the existing technology is solved, achieving a higher sense of immersion and interactivity.
Patent Information
- Application Number
- CN202210521767.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-05-13
- Publication Date
- 2025-09-23
- Estimated Expiration
- 2042-05-13
AI Technical Summary
In existing visual editing systems, page zooming is based on the center point of the canvas, which makes it impossible for users to circle the visual area of focus, resulting in poor immersion and interactivity.
The current focused block and the unfocused block are determined by responding to selection operations on the graphical user interface, and the current focused block is controlled to be enlarged relative to the unfocused block according to the pre-configured weight rules. The dynamic scaling of the blocks is achieved by using the weight rules, scaling coefficients and resolution calculations.
The immersion and interactivity of visual programming are improved, allowing users to focus more on the development of the current block, improving development efficiency and content readability.
Smart Images

Figure CN115033226B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of data processing technology, and in particular to a page display method, device, terminal equipment and computer-readable storage medium. Background Art
[0002] Low-code platforms, fueled by big data, artificial intelligence (AI), and visual editing systems, are becoming a key option for digital strategies. Visual editing systems are a core module of low-code platforms. Currently, scaling visual development pages in existing visual editing systems is typically implemented using canvas scaling technology, which scales the entire page around the center of the canvas. This prevents users from focusing on the visual area of interest, resulting in poor immersion and interactivity in visual programming. Summary of the Invention
[0003] In view of this, an object of the present invention is to provide a page display method, apparatus, terminal device and computer-readable storage medium, which can significantly improve the immersion and interactivity of visual programming.
[0004] In a first aspect, an embodiment of the present invention provides a page display method, providing a graphical user interface through a terminal, and displaying an initial page on the graphical user interface, including: responding to a selection operation on the initial page, determining a current focused block and an unfocused block from the initial page; wherein each block in the initial page corresponds to a pre-configured weight rule; responding to a zoom operation on the current focused block, controlling the current focused block to be enlarged relative to the unfocused block according to the weight rule to obtain a target page; and displaying the target page on the graphical user interface.
[0005] In one embodiment, the response to the zoom operation on the current focus block controls the current focus block to be enlarged relative to the unfocused block according to the weight rule, including: in response to the zoom operation on the current focus block, determining a first zoom coefficient of the current focus block and a second zoom coefficient of the unfocused block; wherein the first zoom coefficient is greater than a preset threshold, and the second zoom coefficient is less than the preset threshold; calculating a first target resolution of the current focus block and a second target resolution of the unfocused block according to the weight rule, the first zoom coefficient, and the second zoom coefficient; and controlling the current focus block to be enlarged relative to the unfocused block based on the first target resolution and the second target resolution.
[0006] In one embodiment, the terminal is communicatively connected to an input device, and the zoom operation includes a scrolling operation; the response to the zoom operation of the currently focused block determines a first zoom coefficient of the currently focused block and a second zoom coefficient of the unfocused block, including: if a scrolling operation of the input device is monitored, determining a scrolling parameter of the input device; wherein the scrolling parameter includes a scrolling direction and a scrolling speed; based on the scrolling direction and the scrolling speed, calculating the first zoom coefficient of the currently focused block and the second zoom coefficient of the unfocused block.
[0007] In one embodiment, the first target resolution of the currently focused block and the second target resolution of the unfocused block are calculated according to the weight rule, the first scaling factor and the second scaling factor, including: determining the first proportion of the currently focused block and the second proportion of the unfocused block according to the weight value of the currently focused block and the weight value of the unfocused block; obtaining the current resolution of the terminal device; obtaining the first target resolution of the currently focused block based on the current resolution, the first proportion and the first scaling factor; and obtaining the second target resolution of the unfocused block based on the current resolution, the second proportion and the second scaling factor.
[0008] In one embodiment, controlling the current focused block to be enlarged relative to the unfocused block based on the first target resolution and the second target resolution to obtain a target page includes: obtaining the content to be displayed of the current focused block; rendering the page according to the content to be displayed, the first target resolution, and the second target resolution to obtain a target page; wherein the content contained in the target page includes at least the content to be displayed.
[0009] In one embodiment, before determining the current focused block and the unfocused block from the initial page in response to the selection operation on the initial page, it also includes: responding to the layout operation on the initial page to determine the blocks included in the initial page; wherein the blocks include at least one layer of functional components; responding to the weight configuration operation on the blocks to determine the weight rules corresponding to the blocks; wherein the weight rules include the weight values corresponding to the functional components of each layer.
[0010] In one embodiment, the response to the selection operation on the initial page determines the current focused block and the unfocused blocks from the initial page, including: responding to a click operation on a block in the initial page, determining the block corresponding to the click operation as the current focused block, or, responding to a frame selection operation on an area in the initial page, determining the selection area corresponding to the frame selection operation, and determining the block whose block boundary is within the selection area as the current focused block; and determining the remaining blocks except the currently focused block as unfocused blocks.
[0011] In one embodiment, the method further includes: displaying the currently focused block in the graphical user interface according to a preset effect; wherein the preset effect includes a block boundary style and / or a block boundary color.
[0012] In one embodiment, the method further includes: responding to an editing operation on the currently focused block in the target page, updating the to-be-displayed content of the currently focused block.
[0013] In one embodiment, the method further includes: upon detecting that the selection operation is completed, restoring the target page to the initial page, and displaying the initial page on the graphical user interface.
[0014] In one embodiment, the monitoring of the end of the selection operation includes: upon monitoring a pressing operation on a designated key in an input device communicatively connected to the terminal, determining that the selection operation is ended.
[0015] In a second aspect, an embodiment of the present invention further provides a page display device, which provides a graphical user interface through a terminal and displays an initial page on the graphical user interface, including: a selection module, which is used to respond to a selection operation on the initial page and determine a current focused block and an unfocused block from the initial page; wherein each block in the initial page corresponds to a pre-configured weight rule; a zoom module, which is used to respond to a zoom operation on the current focused block and control the current focused block to be enlarged relative to the unfocused block according to the weight rule to obtain a target page; and a display module, which is used to display the target page on the graphical user interface.
[0016] In a third aspect, an embodiment of the present invention further provides a terminal device comprising a processor and a memory, wherein the memory stores computer-executable instructions that can be executed by the processor, and the processor executes the computer-executable instructions to implement any one of the page display methods provided in the first aspect.
[0017] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer-executable instructions. When the computer-executable instructions are called and executed by a processor, the computer-executable instructions prompt the processor to implement any one of the page display methods provided in the first aspect.
[0018] The embodiments of the present invention provide a page display method, apparatus, terminal device, and computer-readable storage medium. First, in response to a selection operation on an initial page, a currently focused block and unfocused blocks are determined from the initial page. Each block in the initial page corresponds to a pre-configured weight rule. Then, in response to a zoom operation on the currently focused block, the currently focused block is controlled to be enlarged relative to the unfocused blocks according to the weight rule to obtain a target page, and the target page is displayed on a graphical user interface. After determining the currently focused block and unfocused blocks, the above method can control the currently focused block to be enlarged relative to the unfocused blocks based on the weight rule corresponding to the blocks, thereby facilitating the user's inability to focus on the currently focused block, thereby effectively improving the immersion and interactivity of visual programming.
[0019] Other features and advantages of the present invention will be described in the following description, and in part will become apparent from the description, or understood by practicing the present invention. The purposes and other advantages of the present invention are realized and obtained by the structures particularly pointed out in the description, claims and drawings.
[0020] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, preferred embodiments are given below and described in detail with reference to the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS
[0021] In order to more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the specific embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0022] Figure 1 A schematic diagram of a visual development page provided by an embodiment of the present invention;
[0023] Figure 2 A schematic diagram of a flow chart of a page display method provided by an embodiment of the present invention;
[0024] Figure 3 A schematic diagram of a 12-column Grid layout provided by an embodiment of the present invention;
[0025] Figure 4A schematic diagram of an initial page provided by an embodiment of the present invention;
[0026] Figure 5 A schematic diagram of a target page provided by an embodiment of the present invention;
[0027] Figure 6 A schematic structural diagram of a page display device provided by an embodiment of the present invention;
[0028] Figure 7 A schematic structural diagram of a terminal device provided in an embodiment of the present invention. DETAILED DESCRIPTION
[0029] To make the objectives, technical solutions, and advantages of the embodiments of the present invention more clear, the technical solutions of the present invention will be clearly and completely described below in conjunction with the embodiments. Obviously, the embodiments described are only part of the embodiments of the present invention, not all of them. All other embodiments obtained by ordinary technicians in this field based on the embodiments of the present invention without making any creative efforts shall fall within the scope of protection of the present invention.
[0030] Currently, most existing visual programming systems use the canvas.scale() function to scale the visual development page. This essentially scales the canvas, not the components on the canvas. The components only scale with the canvas. Figure 1 A schematic diagram of a visual development page is shown. Figure 1 The following sub-figures are included: (a) and (b). Sub-figure (a) illustrates the visualization development page before scaling. In actual applications, the visualization development page can be scaled by scrolling the mouse wheel. The canvas size is calculated based on the scaling factors (dx, dy) of the X and Y axes set by the user, that is, the new canvas width and height are x*dx and y*dy respectively, so that the visualization development page can be scaled. For example, the scaled visualization development page shown in sub-figure (b) has the following problems: (1) The scaled visualization development page cannot be customized (edited); (2) The content (such as text, pictures, etc.) presented on the scaled visualization development page is also scaled, resulting in poor readability; (3) Since the visualization development page is scaled as a whole, the scaled visualization development interface cannot present more detailed information; (4) The user cannot circle the visualization area of focus.
[0031] Based on this, the present invention provides a page display method, apparatus, terminal device and computer-readable storage medium, which can significantly improve the immersion and interactivity of visual programming.
[0032] To facilitate understanding of this embodiment, a page display method disclosed in an embodiment of the present invention is first introduced in detail. A graphical user interface is provided by a terminal, and an initial page is displayed on the graphical user interface. Figure 2 The flowchart of a page display method shown in FIG. 1 mainly includes the following steps S202 to S206:
[0033] Step S202: In response to a selection operation on the initial page, the currently focused block and the unfocused blocks are determined from the initial page. The initial page may be a visual editing page, and each block on the initial page corresponds to a pre-configured weight rule, which is the weight value corresponding to the block, or the weight value corresponding to the component in the block. In one embodiment, the currently focused block can be selected from the initial page by various methods such as clicking or box selection, and the unselected blocks are treated as unfocused blocks.
[0034] Step S204, in response to the zoom operation on the currently focused block, the currently focused block is controlled to be enlarged relative to the unfocused block according to the weight rule to obtain the target page. The zoom operation may include a scroll operation of an input device connected to the terminal communication, and may also include a gesture operation of the user. Taking the scroll operation as an example, the first zoom coefficient of the currently focused area and the second zoom coefficient of the unfocused area can be determined based on the scrolling direction and scrolling speed of the scroll operation; taking the gesture operation as an example, the zoom coefficients corresponding to a plurality of gesture operations can be pre-configured to determine the first zoom coefficient corresponding to the gesture operation for the currently focused area, and then based on the first zoom coefficient, the second zoom coefficient and the weight rule, the currently focused block is controlled to be enlarged relative to the unfocused block, that is, the unfocused area is controlled to be reduced or hidden relative to the currently focused area, so as to achieve the purpose of enlarging the currently focused block and reducing or hiding the unfocused block, and obtain the target page.
[0035] Step S206: Display the target page on the graphical user interface.
[0036] The page display method provided by an embodiment of the present invention can, after determining the currently focused block and the unfocused blocks, control the enlargement of the currently focused block relative to the unfocused blocks based on the weight rules corresponding to the blocks, thereby facilitating the user to focus on the currently focused block, thereby effectively improving the immersion and interactivity of visual programming.
[0037] Taking into account that blocks such as the navigation bar and search area in the visual programming page can be hidden or reduced, when the user zooms in on the currently focused block, the above blocks can be hidden or reduced to provide more space for displaying more detailed information on the currently focused block. Therefore, the present invention proposes setting the architectural layout of the visual programming page and setting the block presentation weight rules.
[0038] In actual applications, before executing the aforementioned step S202, it is necessary to configure the weight rules corresponding to each block in the initial page. For ease of understanding, an embodiment of the present invention provides an implementation method for configuring the weight rules corresponding to the blocks, see (1) to (2) below:
[0039] (1) In response to the layout operation for the initial page, determine the blocks included in the initial page. Wherein, the block includes at least one layer of functional components, and the block can also be called a card. For example, the initial page can be laid out using the 12-column Grid provided by the visual programming system, such as Figure 3 The following diagram shows a 12-column grid layout. A 12-column grid layout means that the screen resolution divides the cards equally into 12 columns horizontally, with no vertical restrictions, and individual cards can be merged. In actual applications, users can develop layouts based on their specific needs and set weighting rules for each block. Optionally, this weighting rule can include a weight value cw for each block.
[0040] (2) In response to the weight configuration operation for the block, the weight rule corresponding to the block is determined. The weight rule may also include the weight value aw corresponding to each layer of functional components. The weight rule adopts a hash structure to characterize the importance of the functional components. In one embodiment, a component library may be pre-configured, and the component library includes multiple functional components. The functional components reserve the data flow configuration properties and weight rules of the abstract data layer during development. The configuration properties may include input and output parameters, types, default values, remarks, etc. If a user's drag operation for a functional component is monitored, the functional component may be dragged into the corresponding block and the weight value aw of the functional component may be set. The embodiment of the present invention sets the data layer abstraction and presentation weight rules of the functional components provided in the component library. After the functional component is dragged to the block, the presentation weight rules of the functional component can be set. At the same time, the information presented by the component can be set according to different weight values or ranges, including logical data, remarks, nested substructures, subpages, help information, etc.
[0041] Based on the above embodiment, the embodiment of the present invention provides an implementation of step S202, see the following steps a to b:
[0042] Step a: In response to a click or box selection operation on a block in the initial page, determine the current block of interest. (a1) Taking the click operation as an example, in response to a click operation on a block in the initial page, the block corresponding to the click operation can be determined as the current block of interest. For example, the initial page includes multiple blocks: card1, card2, and card3. If a user clicks on card1, card1 is determined as the current block of interest. (a2) Taking the box selection operation as an example, in response to a box selection operation on an area in the initial page, the selection area corresponding to the box selection operation can be determined, and the block whose block boundary is within the selection area is determined as the current block of interest. In actual applications, the terminal can communicate with an input device such as a mouse and utilize the mouse's area selection capability to obtain the position and size of the mouse selection area to determine the functional components contained in the selection area. Specifically, the terminal can utilize the boundary component processing rules set to determine the block whose block boundary is within the selection area as the current block of interest. For example, the initial page includes multiple blocks: card1, card2 and card3. If the boundaries of card1 and card2 are both within the selection area, card1 and card2 are determined as the current focus blocks.
[0043] In step b, the remaining blocks except the currently focused block are determined as unfocused blocks. Assuming that the currently focused block is card 1, card 2 and card 3 can be determined as unfocused blocks.
[0044] Furthermore, to improve user readability and recognition, the currently focused block can be specially displayed. Specifically, the currently focused block can be displayed in a graphical user interface according to a preset effect, wherein the preset effect includes a block border style and / or block border color. In actual application, not only can the border line style and color of the mouse selection area be set, but also the border style and border color of the currently focused block can be set to improve the recognition of the currently focused block.
[0045] The embodiment of the present invention further provides an implementation of step S204, see steps 1 to 3 below:
[0046] Step 1: In response to a zoom operation on the currently focused block, determine a first zoom factor for the currently focused block and a second zoom factor for the unfocused block. The first zoom factor is greater than a preset threshold, and the second zoom factor is less than the preset threshold, which may be 1. In one embodiment, the terminal is in communication with an input device, which may be a mouse. The zoom operation includes a scrolling operation, and the zoom factor may also be referred to as a scrolling zoom level. Based on this, an embodiment of the present invention provides an implementation for determining the first zoom factor and the second zoom factor, as shown in steps 1.1 to 1.2 below:
[0047] Step 1.1: If a scrolling operation of the input device is detected, determine the scrolling parameters of the input device. The scrolling parameters include the scrolling direction and speed. The scrolling direction is the direction of movement of the mouse wheel, including up and down scrolling. It should be noted that the mouse scrolling speed may vary across operating systems. For example, the default scrolling speed of the mouse in Windows 10 is 3 lines of text. Furthermore, to ensure compatibility between mobile and PC (Personal Computer) devices, the scrolling speed can be normalized to a value between 3 and 20 lines of text to ensure a visual experience for the user and to constrain the zooming in and out range.
[0048] Step 1.2: Calculate the first zoom factor of the currently focused block and the second zoom factor of the unfocused block based on the scrolling direction and scrolling speed. Specifically, the first zoom factor of the currently focused block and the second zoom factor of the unfocused block can be calculated based on the scrolling direction, scrolling speed, and a preset parameter, wherein the preset parameter can be 1. In one embodiment, the first zoom factor and the second zoom factor can be calculated according to the following formula:
[0049] dZoom=1+Ms*α, where dZoom is the zoom factor, Ms is the normalized scrolling speed, α represents the scrolling direction, “1” represents upward scrolling, and “-1” represents downward scrolling.
[0050] In one embodiment, if the mouse is detected to be scrolling upward, the scroll direction corresponding to the currently focused block is determined to be α1=1, and the first zoom coefficient dZoom1=1+Ms. In addition, the scroll direction corresponding to the unfocused block is determined to be α2=-1, and the second zoom coefficient dZoom2=1-Ms.
[0051] Step 2: Calculate the first target resolution of the currently focused block and the second target resolution of the unfocused block based on the weight rule, the first scaling factor, and the second scaling factor. This embodiment of the present invention provides an implementation method for determining the target resolution and the second target resolution, as shown in steps 2.1 to 2.3 below:
[0052] Step 2.1, based on the weight value of the currently focused block and the weight value of the unfocused block, determine the first proportion of the currently focused block and the second proportion of the unfocused block. For example, assuming that card1 is the currently focused block, and card2 and card3 are unfocused blocks, where the weight value of card1 is cw1, the weight value of card is cw2, and the weight value of card is cw3, then the first proportion of card1 is m1=cw1 / (cw1+cw2+cw3). Similarly, the second proportion of card2 is m2=cw2 / (cw1+cw2+cw3), and the second proportion of card3 is m3=cw3 / (cw1+cw2+cw3).
[0053] Step 2.2: Obtain the current resolution of the terminal device. In one embodiment, the current resolution (x, y) of the terminal device can be obtained by using a js (JavaScript) media query.
[0054] Step 2.3, based on the current resolution, the first proportion and the first zoom factor, obtain the first target resolution of the currently focused block; and based on the current resolution, the second proportion and the second zoom factor, obtain the second target resolution of the unfocused block. In one embodiment, the first target resolution (cx, cy) of the currently focused block and the second target resolutions (x1, y1) and (x2, y2) of the unfocused block can be calculated based on the current resolution, the first zoom factor and the second zoom factor. For example, in the first target resolution, cx = x*m1*dZoom1. In another embodiment, the resolution is related to the width (width) and height (heigth) of the block, so the first target resolution and the second target resolution can be calculated using the width and height.
[0055] Step 3: Based on the first target resolution and the second target resolution, the current focused block is controlled to be enlarged relative to the unfocused block. Figure 4 A schematic diagram of an initial page is shown, and Figure 5 The schematic diagram of a target page shown in FIG. In an embodiment of the present invention, by controlling the zooming of the currently focused block relative to unfocused blocks, the user's immersion and interactivity in visual programming can be enhanced, allowing the user to focus more on the development of the current module and improving development efficiency. In one embodiment, the currently focused block can be controlled to zoom in relative to unfocused blocks according to the following steps 3.1 to 3.2:
[0056] Step 3.1: Get the content to be displayed of the current focused block. The content to be displayed is more detailed information of the current focused block.
[0057] Step 3.2, render the page according to the content to be displayed, the first target resolution and the second target resolution to obtain the target page. The content contained in the target page at least includes the content to be displayed. In one embodiment, the rendering capability of the terminal can be directly called, and the visual programming interface can be rearranged and redrawn based on the content to be displayed, the first target resolution and the second target resolution to obtain the corresponding target page. In the embodiment of the present invention, the mouse can be placed near the currently focused block and the mouse can be scrolled to view more detailed information of the currently focused block, including logic and data definitions. Furthermore, the embodiment of the present invention utilizes weight rules and scaling ratio calculation methods and function throttling capabilities to render the visual editing page according to the calculation results during the mouse scrolling process, significantly improving the efficiency of scaling the visual programming page, and the unfocused blocks can be reduced or hidden to provide more space for the currently focused block to develop more complex logic processes.
[0058] In addition, assuming that the user needs to zoom in or out on a functional component in the currently focused area, the user can first determine the third zoom factor of the currently focused component and the fourth zoom factor of the unfocused component, and then calculate the third target resolution of the currently focused component and the fourth target resolution of the unfocused component based on the weight value aw, thereby controlling the currently focused component to be zoomed in and controlling the unfocused components to be zoomed out or hidden, thereby displaying more detailed information about the currently focused component. For details, please refer to the aforementioned steps 1 to 2, which will not be repeated in this embodiment of the present invention.
[0059] Considering that in the prior art, after zooming in and out of a visual programming page, the page cannot be edited, resulting in slower development efficiency, an embodiment of the present invention can also respond to an edit operation on the currently focused block in the target page and update the content to be displayed in the currently focused block. For example, logical data, remarks, nested substructures, or subpages can be edited so that the edited currently focused block can meet the user's development needs. This not only improves the user's immersion and interactivity in visual programming, allowing the user to focus more on the development of the currently focused block, but also improves development efficiency.
[0060] Furthermore, an embodiment of the present invention also provides an implementation method for restoring to the initial page. When the selection operation is detected to be finished, the target page is restored to the initial page, and the initial page is displayed on the graphical user interface. Specifically, when a pressing operation on a specified key in an input device connected to the terminal communication is monitored, it can be determined that the selection operation is finished, thereby providing the user with a function of quickly canceling the selection area. For example, if a pressing operation of the user on the right mouse button is monitored, the initialization rendering of the visual programming interface can be restored to the initial page with one click.
[0061] In summary, the page display method provided by the embodiment of the present invention presents the component content and data of a visual programming page based on a dynamic distance calculation method. It has universal applicability in visual programming systems and can be applied to many scenarios, such as flowchart compilation, in addition to page development. The embodiment of the invention has at least the following features:
[0062] (1) Improve development efficiency: Users can easily set the currently focused block and reduce or hide the information of unfocused blocks, thereby improving development immersion and concentration, and completing development more focused and efficiently.
[0063] (2) Quickly judge and adjust the developed content: By flexibly and conveniently switching the interaction mode between the global overview and the detailed information of certain blocks through mouse scrolling and area selection, it effectively improves the timeliness and convenience of developers in designing the development architecture of the visual programming page and judging and adjusting the specific functional logic.
[0064] (3) Improve the readability of content: Based on the component settings, page block settings, mouse position and scrolling speed in the visual programming page, the dynamic distance calculation method can be used to calculate the presentation granularity and information of different blocks and components of the page content to increase the readability of the page content.
[0065] (4) Improve the utilization of visual programming page space: According to the setting of page layout and display weight of blocks and the circle of the current focus area, irrelevant information can be hidden or reduced by scrolling the mouse to free up more space for presenting more information of the focus function block.
[0066] Regarding the page display method provided in the above embodiment, the embodiment of the present invention provides a page display device, which provides a graphical user interface through a terminal and displays an initial page on the graphical user interface. Figure 6 The schematic diagram of the structure of a page display device shown in FIG. 1 mainly includes the following parts:
[0067] A selection module 602 is configured to determine a currently focused block and unfocused blocks from the initial page in response to a selection operation on the initial page; wherein each block in the initial page corresponds to a pre-configured weight rule;
[0068] A zoom module 604 is configured to respond to a zoom operation on a currently focused block and control the currently focused block to be zoomed in relative to unfocused blocks according to a weight rule to obtain a target page;
[0069] The display module 606 is configured to display the target page on a graphical user interface.
[0070] The page display device provided by an embodiment of the present invention can, after determining the currently focused block and the unfocused blocks, control the enlargement of the currently focused block relative to the unfocused blocks based on the weight rules corresponding to the blocks, thereby facilitating the user's inability to focus on the currently focused block, thereby effectively improving the immersion and interactivity of visual programming.
[0071] In one embodiment, the zoom module 604 is further used to: determine a first zoom coefficient of the current focused block and a second zoom coefficient of the unfocused block in response to a zoom operation on the current focused block; wherein the first zoom coefficient is greater than a preset threshold and the second zoom coefficient is less than a preset threshold; calculate a first target resolution of the current focused block and a second target resolution of the unfocused block according to a weight rule, the first zoom coefficient and the second zoom coefficient; and control the current focused block to be enlarged relative to the unfocused block based on the first target resolution and the second target resolution.
[0072] In one embodiment, the terminal is communicatively connected to the input device, and the zoom operation includes a scrolling operation; the zoom module 604 is further used to: if a scrolling operation of the input device is monitored, determine the scrolling parameters of the input device; wherein the scrolling parameters include a scrolling direction and a scrolling speed; based on the scrolling direction and the scrolling speed, calculate the first zoom coefficient of the currently focused block and the second zoom coefficient of the unfocused block.
[0073] In one embodiment, the scaling module 604 is also used to: determine a first proportion of the currently focused block and a second proportion of the unfocused block based on the weight value of the currently focused block and the weight value of the unfocused block; obtain the current resolution of the terminal device; obtain the first target resolution of the currently focused block based on the current resolution, the first proportion and the first scaling factor; and obtain the second target resolution of the unfocused block based on the current resolution, the second proportion and the second scaling factor.
[0074] In one embodiment, the zoom module 604 is further used to: obtain the content to be displayed in the current focus block; render the page according to the content to be displayed, the first target resolution and the second target resolution to obtain a target page; wherein the content contained in the target page includes at least the content to be displayed.
[0075] In one embodiment, the above-mentioned device also includes a configuration module for: responding to a layout operation for the initial page, determining the blocks included in the initial page; wherein the blocks include at least one layer of functional components; responding to a weight configuration operation for the blocks, determining the weight rules corresponding to the blocks; wherein the weight rules include the weight values corresponding to each layer of functional components.
[0076] In one embodiment, the selection module 602 is further used to: respond to a click operation on a block in the initial page, determine the block corresponding to the click operation as the current focus block, or, respond to a frame selection operation on an area in the initial page, determine the selection area corresponding to the frame selection operation, and determine the block whose block boundary is within the selection area as the current focus block; and determine the remaining blocks except the current focus block as unfocused blocks.
[0077] In one embodiment, the selection module 602 is further configured to: display the currently focused block in the graphical user interface according to a preset effect; wherein the preset effect includes a block boundary style and / or a block boundary color.
[0078] In one embodiment, the apparatus further includes an editing module configured to: respond to an editing operation on a currently focused block in a target page and update the content to be displayed in the currently focused block.
[0079] In one embodiment, the apparatus further includes a restoration module configured to restore the target page to the initial page upon detecting the end of the selection operation, and display the initial page on the graphical user interface.
[0080] In one embodiment, the recovery module is further configured to: upon monitoring a pressing operation on a designated key in an input device communicatively connected to the terminal, determine that the selection operation is completed.
[0081] The device provided in the embodiment of the present invention has the same implementation principle and technical effects as those in the aforementioned method embodiment. For the sake of brief description, for matters not mentioned in the device embodiment, reference can be made to the corresponding content in the aforementioned method embodiment.
[0082] An embodiment of the present invention provides a terminal device. Specifically, the terminal device includes a processor and a storage device; the storage device stores a computer program, and when the computer program is executed by the processor, it executes the method described in any one of the above-mentioned embodiments.
[0083] Figure 7 A structural diagram of a terminal device provided in an embodiment of the present invention, the terminal device 100 includes: a processor 70, a memory 71, a bus 72 and a communication interface 73, wherein the processor 70, the communication interface 73 and the memory 71 are connected via the bus 72; the processor 70 is used to execute an executable module stored in the memory 71, such as a computer program.
[0084] The memory 71 may include high-speed random access memory (RAM) and may also include non-volatile memory, such as at least one disk storage. The system network element communicates with at least one other network element via at least one communication interface 73 (which may be wired or wireless), and may utilize the Internet, a wide area network, a local area network, a metropolitan area network, or the like.
[0085] The bus 72 may be an ISA bus, a PCI bus, or an EISA bus. The bus may be divided into an address bus, a data bus, a control bus, and the like. For ease of representation, Figure 7 Only one bidirectional arrow is used in the diagram, but this does not mean that there is only one bus or one type of bus.
[0086] Among them, the memory 71 is used to store programs, and the processor 70 executes the program after receiving the execution instruction. The method executed by the device for flow process definition disclosed in any embodiment of the above-mentioned embodiment of the present invention can be applied to the processor 70 or implemented by the processor 70.
[0087] The processor 70 may be an integrated circuit chip with signal processing capabilities. During implementation, each step of the above method may be completed by hardware integrated logic circuits or software instructions in the processor 70. The processor 70 may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it may also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It may implement or execute the various methods, steps, and logic block diagrams disclosed in the embodiments of the present invention. The general-purpose processor may be a microprocessor or any conventional processor. The steps of the method disclosed in conjunction with the embodiments of the present invention may be directly implemented and executed by a hardware decoding processor, or by a combination of hardware and software modules in the decoding processor. The software module may be located in a storage medium well-known in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, or the like. The storage medium is located in the memory 71 , and the processor 70 reads the information in the memory 71 and completes the steps of the above method in combination with its hardware.
[0088] The computer program product of the readable storage medium provided in the embodiment of the present invention includes a computer-readable storage medium storing program code. The instructions included in the program code can be used to execute the method described in the previous method embodiment. The specific implementation can be referred to the previous method embodiment and will not be repeated here.
[0089] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.
[0090] Finally, it should be noted that the above-described embodiments are only specific implementation methods of the present invention, which are used to illustrate the technical solutions of the present invention, rather than to limit them. The scope of protection of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the above-described embodiments, those skilled in the art should understand that any person skilled in the art can modify or easily conceive of changes to the technical solutions described in the above-described embodiments within the technical scope disclosed by the present invention, or replace some of the technical features therein with equivalents. Such modifications, changes, or replacements do not deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should be included in the scope of protection of the present invention. Therefore, the scope of protection of the present invention shall be subject to the scope of protection of the claims.
Claims
1. A page display method, characterized in that: Providing a graphical user interface through a terminal, and displaying an initial page on the graphical user interface, including: In response to a selection operation on the initial page, determining a currently focused block and unfocused blocks from the initial page; wherein each block in the initial page corresponds to a pre-configured weight rule; In response to a zoom operation on the currently focused block, determining a first zoom coefficient of the currently focused block and a second zoom coefficient of the unfocused block; wherein the first zoom coefficient is greater than a preset threshold, and the second zoom coefficient is less than the preset threshold; Calculating a first target resolution of the currently focused block and a second target resolution of the unfocused block according to the weight rule, the first scaling factor, and the second scaling factor; Controlling the current focused block to be enlarged relative to the unfocused block based on the first target resolution and the second target resolution to obtain a target page; The target page is displayed on the graphical user interface.
2. The page display method according to claim 1, characterized in that: The terminal is in communication with an input device, and the zoom operation includes a scrolling operation; The step of determining a first scaling factor of the currently focused block and a second scaling factor of the unfocused block in response to a scaling operation on the currently focused block includes: If a scrolling operation of the input device is monitored, determining scrolling parameters of the input device; wherein the scrolling parameters include a scrolling direction and a scrolling speed; A first scaling factor of the currently focused block and a second scaling factor of the unfocused block are calculated based on the scroll direction and the scroll speed.
3. The page display method according to claim 1, characterized in that: The calculating, according to the weight rule, the first scaling factor, and the second scaling factor, the first target resolution of the currently focused block and the second target resolution of the unfocused block includes: Determining a first proportion of the currently focused block and a second proportion of the unfocused block according to the weight value of the currently focused block and the weight value of the unfocused block; Obtaining the current resolution of the terminal; Based on the current resolution, the first proportion and the first scaling factor, a first target resolution of the currently focused block is obtained; and based on the current resolution, the second proportion and the second scaling factor, a second target resolution of the unfocused block is obtained.
4. The page display method according to claim 1, wherein: The controlling, based on the first target resolution and the second target resolution, to enlarge the current focused block relative to the unfocused block to obtain a target page includes: Obtaining the content to be displayed in the currently focused block; The page is rendered according to the content to be displayed, the first target resolution, and the second target resolution to obtain a target page; wherein the content contained in the target page at least includes the content to be displayed.
5. The page display method according to claim 1, characterized in that: Before determining the current focused block and the unfocused blocks from the initial page in response to the selection operation on the initial page, the method further includes: In response to a layout operation on an initial page, determining a block included in the initial page; wherein the block includes at least one layer of functional components; In response to the weight configuration operation for the block, a weight rule corresponding to the block is determined; wherein the weight rule includes a weight value corresponding to the functional component of each layer.
6. The page display method according to any one of claims 1 to 5, characterized in that: In response to a selection operation on the initial page, determining a currently focused block and an unfocused block from the initial page includes: In response to a click operation on a block in the initial page, determining the block corresponding to the click operation as the current focused block, or in response to a frame selection operation on an area in the initial page, determining a selection area corresponding to the frame selection operation, and determining a block whose block boundary is within the selection area as the current focused block; The remaining blocks except the current focused block are determined as unfocused blocks.
7. The page display method according to claim 6, characterized in that: Also includes: In the graphical user interface, the currently focused block is displayed according to a preset effect; wherein the preset effect includes a block boundary style and / or a block boundary color.
8. The page display method according to any one of claims 1 to 5, characterized in that: Also includes: In response to an editing operation on a currently focused block in the target page, content to be displayed in the currently focused block is updated.
9. The page display method according to any one of claims 1 to 5, characterized in that: Also includes: When it is detected that the selection operation is completed, the target page is restored to the initial page, and the initial page is displayed on the graphical user interface.
10. The page display method according to claim 9, characterized in that: The monitoring until the selection operation is completed includes: When a pressing operation on a designated key in an input device communicatively connected to the terminal is monitored, it is determined that the selection operation is completed.
11. A page display device, characterized in that: Providing a graphical user interface through a terminal, and displaying an initial page on the graphical user interface, including: a selection module, configured to respond to a selection operation on the initial page and determine a currently focused block and unfocused blocks from the initial page; wherein each block in the initial page corresponds to a pre-configured weight rule; a zoom module configured to, in response to a zoom operation on the currently focused block, determine a first zoom coefficient for the currently focused block and a second zoom coefficient for the unfocused block, wherein the first zoom coefficient is greater than a preset threshold and the second zoom coefficient is less than the preset threshold; calculate a first target resolution for the currently focused block and a second target resolution for the unfocused block based on the weighting rule, the first zoom coefficient, and the second zoom coefficient; and control the currently focused block to be enlarged relative to the unfocused block based on the first target resolution and the second target resolution to obtain a target page; A display module is configured to display the target page on the graphical user interface.
12. A terminal device, characterized in that: The method comprises a processor and a memory, wherein the memory stores computer-executable instructions that can be executed by the processor, and the processor executes the computer-executable instructions to implement the page display method according to any one of claims 1 to 10.
13. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer-executable instructions. When the computer-executable instructions are called and executed by a processor, the computer-executable instructions prompt the processor to implement the page display method according to any one of claims 1 to 10.
Citation Information
Patent Citations
Method for automatically adjusting webpage and system
CN102314436A