Visual walkthrough method, computer equipment, readable storage medium and program product

Abstract

The invention relates to a visual walkthrough method, computer equipment, a readable storage medium and a program product, and relates to the technical field of computers. The method comprises the steps of displaying a target indicator and an information billboard on a program interface in response to a visual walkthrough instruction for the program interface of a target application program when the target application program runs; the target indicator is a picture component with a hollow center and is used for positioning a visual walking position; the information board is used for displaying color information of a position positioned by the target indicator; in response to a dragging operation on the target indicator, moving the target indicator on the program interface, and acquiring a current center coordinate of the target indicator under the condition that the target indicator is detected to stop moving; calling a pixel information copying tool, and collecting pixel information at the current center coordinate; and displaying color information corresponding to the pixel information in the information board. By adopting the method, the accuracy of visual walkthrough aiming at colors can be improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a screen color picking method, apparatus, computer equipment, computer-readable storage medium, and computer program product. Background Technology

[0002] Visual walkthrough refers to the review process of checking the visual presentation and interaction details of the interface against design standards or relevant requirements to ensure consistency, compliance, and user experience of the design implementation. Visual walkthrough is often involved in the development of APP (Application) to ensure that the interface implemented by the developers is consistent with the design drafts provided by the designers.

[0003] In related technologies, visual walkthroughs of apps typically require taking screenshots of the interface and transmitting the captured images to the designer's terminal device for visual review. However, both screenshotting and data transmission can lead to image compression, resulting in color distortion and consequently, lower reliability of color-based visual walkthroughs. Summary of the Invention

[0004] Therefore, it is necessary to address the aforementioned technical problem of low reliability in visual walkthroughs for color by providing a visual walkthrough method, apparatus, computer equipment, computer-readable storage medium, and computer program product that can improve the accuracy of visual walkthroughs for color.

[0005] Firstly, this application provides a visual walkthrough method, including:

[0006] When the target application is running, in response to a visual walkthrough command for the program interface of the target application, a target indicator and an information dashboard are displayed on the program interface; the target indicator is a centrally hollowed-out image component used to locate the position of the visual walkthrough; the information dashboard is used to display color information of the position located by the target indicator.

[0007] In response to a drag operation on the target indicator, the target indicator is moved on the program interface, and when the target indicator stops moving, the current center coordinates of the target indicator are obtained;

[0008] Use the pixel information copying tool to collect pixel information at the current center coordinates;

[0009] The information dashboard displays the color information corresponding to the pixel information.

[0010] In one embodiment, after moving the target indicator on the program interface, the method further includes:

[0011] In response to a drag operation on any point of the target indicator, the dragged point is determined as the current drag point of the target indicator;

[0012] Obtaining the current center coordinates of the target indicator includes:

[0013] Determine the historical center coordinates of the target indicator, as well as the historical drag point coordinates and the current drag point coordinates;

[0014] The current center coordinates are determined and recorded based on the historical center coordinates, the historical drag point coordinates, and the current drag point coordinates.

[0015] In one embodiment, determining and recording the current center coordinates based on the historical center coordinates, the historical drag point coordinates, and the current drag point coordinates includes:

[0016] Determine the distance between the historical drag point coordinates and the current drag point coordinates;

[0017] The current center coordinates are determined and recorded based on the historical center coordinates and the distance.

[0018] In one embodiment, the step of calling the pixel information copying tool to collect pixel information at the current center coordinates includes:

[0019] Using the current center coordinates, the virtual interface configuration information corresponding to the real interface configuration information of the program interface, and the pre-built pixel information storage container, the pixel information copying tool is invoked;

[0020] The pixel information copying tool is used to determine the root component in the real interface configuration information corresponding to the program interface based on the virtual interface configuration information, determine the pixel information buffer of the real interface configuration information based on the root component, obtain the pixel information at the current center coordinates from the pixel information buffer, and write the obtained pixel information into the pixel information storage container; the real interface configuration information includes a component tree, and the root component is the component corresponding to the root node of the component tree.

[0021] In one embodiment, the virtual interface configuration information is constructed in the following manner:

[0022] In response to the visual walkthrough command, one component is randomly selected from the components displayed on the program interface to obtain the target component;

[0023] Based on the target component, the virtual interface configuration information is created; the virtual interface configuration information includes the target component;

[0024] The pixel information copying tool is used to determine the root component based on the target component in the virtual interface configuration information.

[0025] In one embodiment, the method further includes:

[0026] In response to the visual walkthrough command, a bitmap is created in the memory of the display terminal of the program interface to obtain the pixel information storage container;

[0027] The pixel size of the cutout center of the target indicator and the pixel size of the bitmap are both one pixel.

[0028] In one embodiment, both the cutout center of the target indicator and the information panel can be moved in the program interface in response to a drag operation and moved to any position; the color information includes at least color parameters and color blocks corresponding to the color parameters;

[0029] After displaying the color information corresponding to the pixel information in the information dashboard, the system further includes:

[0030] In response to a copy operation of the color parameter in the information dashboard, the color parameter is written to the clipboard of the display terminal of the program interface.

[0031] Secondly, this application also provides a visual inspection device, comprising:

[0032] The component display module is used to display a target indicator and an information dashboard on the program interface in response to a visual walkthrough command for the program interface of the target application when the target application is running; the target indicator is a centrally hollowed-out image component used to locate the position of the visual walkthrough; the information dashboard is used to display the color information of the position where the target indicator is located.

[0033] A location positioning module is used to move the target indicator on the program interface in response to a drag operation on the target indicator, and to obtain the current center coordinates of the target indicator when the target indicator stops moving.

[0034] The information acquisition module is used to call the pixel information copying tool to acquire pixel information at the current center coordinates;

[0035] An information display module is used to display the color information corresponding to the pixel information in the information dashboard.

[0036] Thirdly, this application also provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to perform the following steps:

[0037] When the target application is running, in response to a visual walkthrough command for the program interface of the target application, a target indicator and an information dashboard are displayed on the program interface; the target indicator is a centrally hollowed-out image component used to locate the position of the visual walkthrough; the information dashboard is used to display color information of the position located by the target indicator.

[0038] In response to a drag operation on the target indicator, the target indicator is moved on the program interface, and when the target indicator stops moving, the current center coordinates of the target indicator are obtained;

[0039] Use the pixel information copying tool to collect pixel information at the current center coordinates;

[0040] The information dashboard displays the color information corresponding to the pixel information.

[0041] Fourthly, this application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, performs the following steps:

[0042] When the target application is running, in response to a visual walkthrough command for the program interface of the target application, a target indicator and an information dashboard are displayed on the program interface; the target indicator is a centrally hollowed-out image component used to locate the position of the visual walkthrough; the information dashboard is used to display color information of the position located by the target indicator.

[0043] In response to a drag operation on the target indicator, the target indicator is moved on the program interface, and when the target indicator stops moving, the current center coordinates of the target indicator are obtained;

[0044] Use the pixel information copying tool to collect pixel information at the current center coordinates;

[0045] The information dashboard displays the color information corresponding to the pixel information.

[0046] Fifthly, this application also provides a computer program product, including a computer program that, when executed by a processor, performs the following steps:

[0047] When the target application is running, in response to a visual walkthrough command for the program interface of the target application, a target indicator and an information dashboard are displayed on the program interface; the target indicator is a centrally hollowed-out image component used to locate the position of the visual walkthrough; the information dashboard is used to display color information of the position located by the target indicator.

[0048] In response to a drag operation on the target indicator, the target indicator is moved on the program interface, and when the target indicator stops moving, the current center coordinates of the target indicator are obtained;

[0049] Use the pixel information copying tool to collect pixel information at the current center coordinates;

[0050] The information dashboard displays the color information corresponding to the pixel information.

[0051] The aforementioned visual inspection method, apparatus, computer equipment, computer-readable storage medium, and computer program product, firstly, allow for direct visual inspection on the target application's program interface, rather than on screenshots of the program interface. This avoids color distortion caused by screenshots and data transmission, thereby improving the reliability of color-based visual inspection. Secondly, the target indicator has a hollow center and can be moved within the program interface. Therefore, accurate positioning of any point on the program interface can be achieved based on the target indicator. By invoking the pixel information copying tool, pixel information at the current center coordinates can be collected, enabling precise color sampling at any point on the program interface. Based on the collected pixel information and information dashboard, the color information at the current center coordinates can be visualized. The combination of accurate positioning of any point on the program interface, precise color sampling at any point on the program interface, and visualization of color information further enhances the reliability of color-based visual inspection. Attached Figure Description

[0052] To more clearly illustrate the technical solutions in the embodiments of this application or related technologies, the drawings used in the description of the embodiments of this application or related technologies will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0053] Figure 1 This is a schematic diagram of a visual inspection method based on a magnifying glass in one embodiment;

[0054] Figure 2 This is another schematic diagram of a visual walkthrough method based on a magnifying glass in one embodiment;

[0055] Figure 3 This is a flowchart illustrating a visual walkthrough method in one embodiment;

[0056] Figure 4 This is a schematic diagram of a target indicator and information dashboard in a program interface in one embodiment;

[0057] Figure 5 This is a schematic diagram of dragging a target indicator in one embodiment;

[0058] Figure 6 This is a schematic diagram illustrating the movement of the target indicator in one embodiment;

[0059] Figure 7 This is a flowchart illustrating a screen color picking method with low memory consumption within an application, as shown in one embodiment.

[0060] Figure 8 This is a structural block diagram of a visual inspection device in one embodiment;

[0061] Figure 9 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation

[0062] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0063] It should be noted that the terms "first," "second," etc., used in this application can be used to describe various elements, but these elements are not limited by these terms. These terms are only used to distinguish the first element from the second element. The terms "comprising" and "having," and any variations thereof, used in this application, are intended to cover non-exclusive inclusion. The term "multiple" used in this application refers to two or more. The term "and / or" used in this application refers to one of the embodiments, or any combination of multiple embodiments.

[0064] Visual walkthrough refers to the review process of checking the visual presentation and interaction details of the interface against design standards or relevant requirements to ensure consistency, compliance, and user experience of the design implementation. Visual walkthrough is often involved in the development of APP (Application) to ensure that the interface implemented by the developers is consistent with the design drafts provided by the designers.

[0065] In related technologies, visual walkthroughs of apps are generally divided into visual walkthroughs that rely on screenshots and visual walkthroughs that do not rely on screenshots; among them, visual walkthroughs that do not rely on screenshots are also called visual walkthroughs that rely on magnifying glasses.

[0066] Visual walkthroughs that rely on screenshots require capturing screenshots of the interface and transmitting the captured images to the designers' devices for visual review. However, both screenshotting and data transmission can lead to image compression, resulting in color distortion and consequently, lower reliability for color-based visual walkthroughs.

[0067] Visual walkthroughs that don't rely on screenshots can be performed directly on the app's interface. The approach involves obtaining the root component (RootView) from the interface, creating a bitmap of the same size as the RootView, and binding this bitmap to a new canvas. Then, the `View.draw(Canvascanvas)` method is used to draw the content of the RootView onto the created bitmap. Finally, an ImageView component is added to the top layer of the interface to display the image information of the bitmap. Finally, the ability to magnify the touch point using a magnifying glass is provided when a finger is touched. For example... Figure 1 The diagram illustrates a visual walkthrough relying on a magnifying glass. Firstly, the application interface requires an additional Bitmap display layer, gesture positioning layer, and color picker display layer above the business logic layer, resulting in significant memory consumption. Furthermore, the actual business logic layer is obscured, making it difficult to capture dynamic changes on the interface and achieving true real-time acquisition. Each time a data acquisition is completed, the layers above the business logic layer must be removed before the app can continue operating. Additionally, the magnifying glass only displays a magnified image of the touch point; this magnified image cannot capture the specific color parameters, making it difficult to detect subtle color distortions. Moreover, as... Figure 2 The diagram shows another visual walkthrough relying on a magnifying glass. When a finger touches the screen, there is usually a hot zone. The center of the hot zone is usually used as the touch point. On the one hand, slight finger movements or tremors can cause the touch point to shift, making it difficult for the user to accurately select a point. On the other hand, when the finger reaches the edge of the screen of the display terminal of the program interface, the center of the hot zone is actually some distance away from the edge of the screen. At the same time, if the display terminal is set to edge gestures, the edge gestures of the display terminal may be accidentally touched, making it difficult to accurately select the edge of the screen for magnification.

[0068] In one exemplary embodiment, such as Figure 3 As shown, a visual inspection method is provided. In this embodiment, the method is applied to a terminal equipped with a screen. The terminal can be, but is not limited to, various personal computers, laptops, smartphones, tablets, etc. In this embodiment, the method includes the following steps:

[0069] Step S302: When the target application is running, in response to a visual walkthrough command for the program interface of the target application, a target indicator and information dashboard are displayed on the program interface.

[0070] The target application is the application to be visually inspected, and the target application is in a running state.

[0071] The target application runs on a terminal, and the terminal's screen is used to display the target application's interface; the interface includes several components.

[0072] The target indicator is a hollowed-out image component used to locate the position for visual navigation. The target indicator's area is smaller than the program interface area, and it can be dragged to move within the program interface. When a visual navigation is needed, the user can drag the target indicator on the screen with their finger or an external mouse. The hollowed-out center of the target indicator does not obscure the area the user wants to select colors from, while also making it easy for the user to see the location of the hollowed-out center, thus facilitating accurate movement of the target indicator. In specific applications, the target indicator includes a hollowed-out crosshair to show the user the currently selected location.

[0073] The information dashboard displays color information indicating the location of the target indicator. The dashboard is smaller than the program interface and can be dragged to move the target indicator within the interface, minimizing its obstruction of the interface during visual inspections. Figure 4 The image shows a schematic diagram of the target indicator and information dashboard in the program interface.

[0074] Specifically, when a user needs to perform a visual walkthrough of the target application's interface, they can trigger a visual walkthrough command for the target application's interface; in response to the visual walkthrough command, the terminal displays a target indicator and an information dashboard on the interface.

[0075] Step S304: In response to the drag operation of the target indicator, move the target indicator on the program interface, and when the target indicator stops moving, obtain the current center coordinates of the target indicator.

[0076] The center coordinates of the target indicator are used to characterize the position of the cutout center of the target indicator in the program interface.

[0077] Specifically, users can drag the target indicator with their finger or an external mouse to move the target indicator on the program interface; when the terminal detects that the target indicator has stopped moving, it obtains the current center coordinates of the target indicator.

[0078] Step S306: Call the pixel information copying tool to collect pixel information at the current center coordinates.

[0079] The pixel information copying tool is used to collect pixel information at the current center coordinates.

[0080] Specifically, the terminal uses the current center coordinates as the calling parameter to call the pixel information copying tool to obtain the pixel information at the current center coordinates.

[0081] Step S308: Display the color information corresponding to the pixel information in the information dashboard.

[0082] Among them, see Figure 4 Color information includes at least color parameters and corresponding color blocks; color parameters are text components, and color blocks are image components. In specific applications, color parameters include at least one of the following: color value, RGB color components, alpha transparency, CMYK (printing four-color mode), HSV (hue-saturation-lightness), HSB (hue-saturation-lightness), HSL (hue-saturation-lightness), YUV (lightness-chroma mode), and YCbCr (lightness-blue difference-red difference).

[0083] Specifically, the terminal reads the obtained pixel information, determines the color parameters corresponding to the pixel information, generates the corresponding color block based on the color parameters, and then displays the color parameters and color block on the information dashboard displayed on the program interface to show the user the color information at the current center point coordinates.

[0084] In the aforementioned visual walkthrough method, firstly, visual walkthroughs can be performed directly on the target application's interface, rather than on screenshots of the interface, thus avoiding color distortion caused by screenshots and data transmission, thereby improving the reliability of color-based visual walkthroughs. Secondly, the target indicator has a hollow center and can be moved within the application interface, allowing for accurate positioning of any point on the interface. By using the pixel information copying tool, pixel information at the current center coordinates can be collected, enabling precise color sampling at any point on the interface. Based on the collected pixel information and the information dashboard, the color information at the current center coordinates can be visualized. The combination of accurate positioning of any point on the interface, precise color sampling, and visualization of color information further enhances the reliability of color-based visual walkthroughs.

[0085] In one exemplary embodiment, any point on the target indicator can be dragged, thus the cutout center of the target indicator can be precisely moved to any position in the program interface, including the edge of the screen; as explained below: Figure 5This diagram illustrates how to drag a target indicator. If a user needs to collect color information from the right edge of the screen, they can drag the left side of the indicator to move its cutout center to the right edge. In this case, the finger remains a certain distance from the screen edge, preventing accidental edge gestures. Similarly, if the user needs to collect color information from the left edge, they can drag the right side of the indicator to move its cutout center to the left edge. Again, the finger remains a certain distance from the screen edge, preventing accidental edge gestures. In practical applications, the target indicator may extend partially beyond the screen edge.

[0086] In this embodiment, after moving the target indicator on the program interface in step S304 above, the following steps are further included: in response to dragging any point on the target indicator, the dragged point is determined as the current drag point of the target indicator.

[0087] Specifically, any point on the target indicator can be dragged. Therefore, in response to the user's drag operation on any point on the target indicator, the terminal determines the dragged point as the current drag point for this movement.

[0088] In this embodiment, the step S304 above, obtaining the current center coordinates of the target indicator, specifically includes the following steps: determining the historical center coordinates of the target indicator, as well as the historical drag point coordinates and the current drag point coordinates; determining and recording the current center coordinates based on the historical center coordinates, historical drag point coordinates, and current drag point coordinates.

[0089] The terminal records the center coordinates of the target indicator at the end of each movement, as well as the starting and ending drag coordinates of the current drag point in each movement. The historical center coordinates of the target indicator are the center coordinates at the end of the last movement. The historical drag coordinates of the current drag point are the starting drag coordinates of the current drag point in this movement, and the current drag coordinates of the current drag point are the ending drag coordinates of the current drag point in this movement.

[0090] The drag point coordinates represent the position of the corresponding drag point in the program interface.

[0091] Specifically, the terminal obtains the historical center coordinates of the target indicator, the historical drag point coordinates of the current drag point, and the current drag point coordinates from the coordinate record information. Based on the historical center coordinates, historical drag point coordinates, and current drag point coordinates, the terminal calculates the current center coordinates of the target indicator and saves the calculated current center coordinates to the coordinate record information.

[0092] In this embodiment, any point of the target indicator can be dragged, so the cutout center of the target indicator can be accurately moved to the edge of the screen without accidentally touching the edge gesture of the terminal, thereby improving the reliability of visual walkthrough for color; in addition, the terminal can combine the historical center coordinates of the target indicator with the historical drag point coordinates and the current drag point coordinates to accurately calculate the current center coordinates of the target indicator.

[0093] In an exemplary embodiment, the above steps, which determine and record the current center coordinates based on the historical center coordinates, historical drag point coordinates, and current drag point coordinates, specifically include the following steps: determining the distance between the historical drag point coordinates and the current drag point coordinates; and determining and recording the current center coordinates based on the historical center coordinates and the distance.

[0094] like Figure 6 The diagram illustrates the movement of the target indicator. The movement of the target indicator can be divided into two paths: the overall movement path of the target indicator and the movement path of the current drag point on the target indicator. Therefore, the terminal can combine the two movement paths to determine the current center coordinates of the target indicator. Specifically, the terminal calculates the distance between the historical drag point coordinates and the current drag point coordinates, then adds the distance between the historical drag point coordinates and the current drag point coordinates to the historical center coordinates, and uses the result as the current center coordinates of the target indicator.

[0095] In practical applications, the coordinates are two-dimensional (x, y) coordinates; the x-coordinate of the current center coordinate = the x-coordinate of the historical center coordinate + the distance between the historical drag point coordinate and the current drag point coordinate in the x-direction, and the y-coordinate of the current center coordinate = the y-coordinate of the historical center coordinate + the distance between the historical drag point coordinate and the current drag point coordinate in the y-direction.

[0096] In this embodiment, the terminal can accurately calculate the current center coordinates of the target indicator by combining the overall movement path of the target indicator and the movement path of the current drag point on the target indicator.

[0097] In an exemplary embodiment, step S306 above, which calls the pixel information copying tool to collect pixel information at the current center coordinates, specifically includes the following steps: using the current center coordinates, the virtual interface configuration information corresponding to the real interface configuration information of the program interface, and the pre-built pixel information storage container, the pixel information copying tool is called.

[0098] The pixel information copying tool requires three input parameters: coordinates, interface configuration information, and a pixel information storage container. In practice, the server uses the current center coordinates as the coordinate parameter, the virtual interface configuration information corresponding to the actual interface configuration information of the program interface as the interface configuration information parameter, and the pixel information storage container as the pixel information storage container parameter to call the pixel information copying tool. The pixel information copying tool, based on the virtual interface configuration information, determines the root component in the actual interface configuration information corresponding to the program interface. Based on the root component, it determines the pixel information buffer of the actual interface configuration information, retrieves the pixel information at the current center coordinates from the pixel information buffer, and writes the retrieved pixel information into the pixel information storage container. In specific applications, the pixel information copying tool is the PixelCopy class in the Android environment.

[0099] The target application comprises multiple application interfaces, each with corresponding interface configuration information. This configuration information is used to render the interface and includes all necessary information to support its proper functioning, such as the components included in the interface, their logical relationships, and their positional relationships. In specific applications, this interface configuration information is represented by a window object in the Android environment.

[0100] The pixel information storage container is used to store the pixel information of each pixel. Each pixel's pixel information includes at least the RGB color components, and further, the alpha transparency. In specific applications, the pixel information storage container is a bitmap, and more specifically, a Bitmap object in the Android environment.

[0101] The pixel information buffer stores the pixel information of each pixel in the program interface. In specific applications, the pixel information buffer is the Surface in the Android environment.

[0102] Among them, the real interface configuration information is the interface configuration information used to render the program interface; the virtual interface configuration information is the interface configuration information that corresponds to the real interface configuration information but is not used to render the program interface; the real interface configuration information includes the component tree of the program interface, and the component corresponding to the root node of the component tree is the root node.

[0103] Specifically, the terminal calls the pixel information copying tool with the current center coordinates as the coordinate input, the virtual interface configuration information corresponding to the real interface configuration information of the program interface as the interface configuration information input, and the pixel information storage container as the pixel information storage container input. The pixel information copying tool determines the root component in the real interface configuration information corresponding to the program interface based on the virtual interface configuration information, determines the pixel information buffer of the real interface configuration information based on the root component, then obtains the pixel information at the current center coordinates from the pixel information buffer, and writes the obtained pixel information into the pixel information storage container.

[0104] Taking the Android environment as an example, the input parameters of the PixelCopy class include the Rect parameter (coordinate input), the window parameter (interface configuration information input), and the Bitmap parameter (pixel information storage container input). The PixelCopy class determines the root component of the component tree in the window object based on the window object corresponding to the window parameter, and determines the pixel information buffer Surface corresponding to the window object based on the root component. The Surface caches the pixel information of each pixel in the interface corresponding to the window object. Therefore, the PixelCopy class can extract the pixel information at the Rect object corresponding to the Rect parameter from the Surface corresponding to the window object and write it into the Bitmap object corresponding to the Bitmap parameter.

[0105] In this embodiment, after displaying the color information corresponding to the pixel information in the information dashboard in step S308, the following steps are also included: reading the pixel information stored in the pixel information storage container from the pixel information storage container, and determining the corresponding color information based on the pixel information.

[0106] In this embodiment, the terminal can call the pixel information copying tool through the current center coordinates, virtual interface configuration information, and pixel information storage container to accurately obtain the pixel information at the current center coordinates.

[0107] In an exemplary embodiment, the virtual interface configuration information is constructed in the following manner: in response to a visual walkthrough command, a component is randomly selected from the components displayed on the program interface to obtain a target component; and the virtual interface configuration information is created based on the target component.

[0108] The virtual interface configuration information includes the target component; in specific applications, the virtual interface configuration information only includes the target component.

[0109] Among them, the pixel information copying tool is used to determine the root component in the real interface configuration information corresponding to the virtual interface configuration information based on the target component in the virtual interface configuration information.

[0110] Specifically, in response to the visual walkthrough command, the terminal randomly selects one of the components displayed on the program interface as the target component and constructs a window object containing the target component, thereby obtaining the virtual window object corresponding to the real window object of the program interface, that is, the virtual interface configuration information corresponding to the real interface configuration information of the program interface.

[0111] Since the real interface configuration information contains complete information about the program interface, using the real interface configuration information as the input parameter of the pixel information copying tool would increase the complexity of the input parameter passing to the pixel information copying tool, and thus increase the complexity of calling the pixel information copying tool. In this embodiment, the terminal constructs virtual interface configuration information containing less information and uses it as the input parameter of the pixel information copying tool, which can reduce the complexity of calling the pixel information copying tool without affecting the calling of the pixel information copying tool.

[0112] In an exemplary embodiment, the visual walkthrough method provided in this application further includes the following steps: in response to a visual walkthrough instruction, a bitmap is created in the memory of the display terminal of the program interface to obtain a pixel information storage container.

[0113] The demonstration terminal is the terminal that runs the target application.

[0114] In this design, the pixel size of the cutout center of the target indicator is one pixel, just like the pixel size of the bitmap.

[0115] Specifically, in response to a visual walkthrough command, the terminal creates a 1×1 pixel bitmap in memory as a container for storing pixel information.

[0116] In practical applications, since the pixel size of the pixel information storage container (bitmap) is one pixel, the terminal uses overwrite writing each time it writes the collected pixel information into the pixel information storage container.

[0117] In this embodiment, on the one hand, the pixel size of the cutout center of the target indicator is one pixel. This allows the color to be sampled from only one pixel during the visual walkthrough, thus refining the granularity of the color visual walkthrough to a single pixel. This enables precise capture of minute color value deviations, ensuring the ultimate accuracy of design reproduction. On the other hand, the pixel information storage container (bitmap) has a pixel size of one pixel. Compared to creating a Bitmap of the same size as the root component RootView, this minimizes the memory usage.

[0118] In one exemplary embodiment, both the cutout center of the target indicator and the information panel can be moved within the application interface in response to a drag operation. In a practical application, any point on the target indicator and the information panel can be dragged to move the cutout center of the target indicator and the information panel to any position on the application interface.

[0119] In this embodiment, the color information includes at least color parameters and color patches corresponding to the color parameters. In specific applications, color parameters include at least one of the following: color value, RGB color components, alpha transparency, CMYK printing four-color mode, HSV hue-saturation-brightness, HSB hue-saturation-brightness, HSL hue-saturation-brightness mode, YUV brightness-chroma mode, and YCbCr brightness-blue difference-red difference.

[0120] In step S308 above, after the color information corresponding to the pixel information is displayed in the information dashboard, the following steps are also included: in response to the copy operation of the color parameters in the information dashboard, the color parameters are written to the clipboard of the display terminal of the program interface.

[0121] Specifically, after displaying color parameters and color blocks in the information dashboard, the terminal can also respond to the user's copy operation of the color parameters in the information dashboard by writing the copied color parameters into the terminal's clipboard, so that the user can send the color parameters to other apps.

[0122] In this embodiment, the terminal writes the color parameters to the terminal's clipboard in response to a copy operation, thus providing a copy and paste function for the color parameters.

[0123] In an exemplary embodiment, the target indicator, information dashboard, and pixel information storage container (bitmap) created for one pixel displayed on the program interface, compared with the method of creating a bitmap of the same size as the root component RootView and adding a bitmap layer on the business layer of the program interface, can significantly reduce the memory occupied and reduce the obstruction of the business layer of the program interface, thereby making it easier to capture dynamic changes on the program interface in real time.

[0124] In one exemplary embodiment, the terminal retains the information dashboard displayed in the program interface after the user releases the drag on the target indicator.

[0125] To more clearly illustrate the visual walkthrough method provided in the embodiments of this application, a specific embodiment is given below for detailed description. However, it should be understood that the embodiments of this application are not limited thereto. Figure 7As shown, in one exemplary embodiment, this application also provides a screen color picking method with low memory consumption within an application, specifically including the following steps:

[0126] 1. Create a centrally hollowed-out image view on the application's interface as a target indicator, and enable the target indicator to be dragged via touch gestures.

[0127] In practical applications, dragging can be used to position the target indicator, and the location of the cutout center of the target indicator in the program interface can be calculated. The cutout center can prevent the target indicator's position from being colored, thus avoiding incorrect color acquisition.

[0128] 2. Construct a 1×1 Bitmap object in the memory corresponding to the application in the terminal.

[0129] 3. Obtain any View on the program interface, and create a virtual window object based on the real window object corresponding to the program interface.

[0130] 4. Pass the Rect position of the cutout center of the target indicator, the created Bitmap object, and the created virtual window object to the PixelCopy class, so as to obtain the pixel information at the Rect position according to the real window object corresponding to the created virtual window object and write it into the created Bitmap object.

[0131] 5. Read the pixel information from the created Bitmap object, convert it into corresponding color parameters and color blocks, and display the color parameters and color blocks in the information dashboard on the program interface.

[0132] Furthermore, in this embodiment, any point of the target indicator and information dashboard can be dragged to move it within the application, and the color parameters displayed in the information dashboard can be copied.

[0133] In this embodiment, firstly, the interactive problems such as precise selection, accidental edge touch, and poor readability in traditional solutions are solved; secondly, the method provided in this embodiment does not require an additional Bitmap display layer, thus eliminating the corresponding memory consumption, and also eliminating the need for repeated capture of the interface and destruction of the overlay layer, which can significantly improve the user's operating experience, allowing for quick switching between multiple operations without lag, and improving the overall user experience; thirdly, for APP development, accurately and quickly obtaining the color information of the target location can significantly improve the efficiency of visual walkthroughs, reduce the repeated communication costs between developers and designers, and ensure the reliability of the information.

[0134] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages in other steps. It is understood that the steps in different embodiments can be freely combined as needed, and all non-contradictory solutions formed by such combinations are within the scope of protection of this application.

[0135] Based on the same inventive concept, this application also provides a visual walking device for implementing the visual walking method described above. The solution provided by this device is similar to the solution described in the above method; therefore, the specific limitations in one or more visual walking device embodiments provided below can be found in the limitations of the visual walking method described above, and will not be repeated here.

[0136] In one exemplary embodiment, such as Figure 8 As shown, a visual inspection device is provided, including: a component display module 802, a location positioning module 804, an information acquisition module 806, and an information display module 808, wherein:

[0137] The component display module 802 is used to display a target indicator and an information dashboard on the program interface in response to a visual walkthrough command for the program interface of the target application when the target application is running. The target indicator is a centrally hollowed-out image component used to locate the position of the visual walkthrough. The information dashboard is used to display the color information of the position where the target indicator is located.

[0138] The positioning module 804 is used to move the target indicator on the program interface in response to the drag operation of the target indicator, and to obtain the current center coordinates of the target indicator when the target indicator stops moving.

[0139] The information acquisition module 806 is used to call the pixel information copying tool to acquire pixel information at the current center coordinates.

[0140] The information display module 808 is used to display the color information corresponding to the pixel information in the information dashboard.

[0141] In an exemplary embodiment, the location module 804 is further configured to determine the dragged point as the current drag point of the target indicator in response to a drag operation on any point on the target indicator.

[0142] The location positioning module 804 is also used to determine the historical center coordinates of the target indicator, as well as the historical drag point coordinates and the current drag point coordinates; and to determine and record the current center coordinates based on the historical center coordinates, historical drag point coordinates, and the current drag point coordinates.

[0143] In an exemplary embodiment, the location module 804 is further configured to determine the distance between the historical drag point coordinates and the current drag point coordinates; and to determine and record the current center coordinates based on the historical center coordinates and the distance.

[0144] In an exemplary embodiment, the information acquisition module 806 is further configured to invoke a pixel information copying tool using the current center coordinates, the virtual interface configuration information corresponding to the real interface configuration information of the program interface, and a pre-built pixel information storage container.

[0145] The pixel information copying tool is used to determine the root component in the real interface configuration information corresponding to the program interface based on the virtual interface configuration information, determine the pixel information buffer of the real interface configuration information based on the root component, obtain the pixel information at the current center coordinates from the pixel information buffer, and write the obtained pixel information into the pixel information storage container; the real interface configuration information includes a component tree, and the root component is the component corresponding to the root node of the component tree.

[0146] In an exemplary embodiment, the visual walkthrough device further includes an information creation module, which, in response to a visual walkthrough command, randomly selects a component from the components displayed on the program interface to obtain a target component; and creates virtual interface configuration information based on the target component; the virtual interface configuration information includes the target component.

[0147] Among them, the pixel information copying tool is used to determine the root component based on the target component in the virtual interface configuration information.

[0148] In one exemplary embodiment, the visual inspection device further includes an information creation module, which, in response to a visual inspection command, creates a bitmap in the memory of the display terminal of the program interface to obtain a pixel information storage container.

[0149] In this design, the pixel size of the cutout center of the target indicator is one pixel, just like the pixel size of the bitmap.

[0150] In an exemplary embodiment, both the cutout center of the target indicator and the information panel can be moved in the program interface in response to a drag operation and moved to any position; the color information includes at least color parameters and color blocks corresponding to the color parameters.

[0151] The visual inspection device also includes an information copying module, which writes the color parameters into the clipboard of the display terminal of the program interface in response to the copying operation of the color parameters in the information board.

[0152] Each module in the aforementioned visual inspection device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the memory of a computer device as software, so that the processor can call and execute the corresponding operations of each module.

[0153] In one exemplary embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 9 As shown, the computer device includes a processor, memory, input / output interfaces, a communication interface, a display unit, and an input device. The processor, memory, and input / output interfaces are connected via a system bus, and the communication interface, display unit, and input device are also connected to the system bus via the input / output interfaces. The processor provides computational and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The input / output interfaces are used for exchanging information between the processor and external devices. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, mobile cellular networks, Near Field Communication (NFC), or other technologies. When the computer program is executed by the processor, it implements a visual walkthrough method. The display unit is used to form a visually visible image and can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be an LCD screen or an e-ink screen. The input device of the computer device can be a touch layer covering the display screen, or buttons, trackballs, or touchpads set on the casing of the computer device, or external keyboards, touchpads, or mice, etc.

[0154] Those skilled in the art will understand that Figure 9The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0155] In one exemplary embodiment, a computer device is also provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps in the above-described method embodiments.

[0156] In one exemplary embodiment, a computer-readable storage medium is provided having a computer program stored thereon that, when executed by a processor, implements the steps in the above-described method embodiments.

[0157] In one exemplary embodiment, a computer program product is provided, including a computer program that, when executed by a processor, implements the steps in the above-described method embodiments.

[0158] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, artificial intelligence (AI) processors, etc., and are not limited to these.

[0159] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this application.

[0160] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.

Claims

1. A visual walkthrough method, characterized in that, The method includes: When the target application is running, in response to a visual walkthrough command for the program interface of the target application, a target indicator and an information dashboard are displayed on the program interface; the target indicator is a centrally hollowed-out image component used to locate the position of the visual walkthrough; the information dashboard is used to display color information of the position located by the target indicator. In response to a drag operation on the target indicator, the target indicator is moved on the program interface, and when the target indicator stops moving, the current center coordinates of the target indicator are obtained; Use the pixel information copying tool to collect pixel information at the current center coordinates; The information dashboard displays the color information corresponding to the pixel information.

2. The method according to claim 1, characterized in that, After moving the target indicator on the program interface, the method further includes: In response to a drag operation on any point of the target indicator, the dragged point is determined as the current drag point of the target indicator; Obtaining the current center coordinates of the target indicator includes: Determine the historical center coordinates of the target indicator, as well as the historical drag point coordinates and the current drag point coordinates; The current center coordinates are determined and recorded based on the historical center coordinates, the historical drag point coordinates, and the current drag point coordinates.

3. The method according to claim 2, characterized in that, The step of determining and recording the current center coordinates based on the historical center coordinates, the historical drag point coordinates, and the current drag point coordinates includes: Determine the distance between the historical drag point coordinates and the current drag point coordinates; The current center coordinates are determined and recorded based on the historical center coordinates and the distance.

4. The method according to claim 1, characterized in that, The process of calling the pixel information copying tool to collect pixel information at the current center coordinates includes: Using the current center coordinates, the virtual interface configuration information corresponding to the real interface configuration information of the program interface, and the pre-built pixel information storage container, the pixel information copying tool is invoked; The pixel information copying tool is used to determine the root component in the real interface configuration information corresponding to the program interface based on the virtual interface configuration information, determine the pixel information buffer of the real interface configuration information based on the root component, obtain the pixel information at the current center coordinates from the pixel information buffer, and write the obtained pixel information into the pixel information storage container; the real interface configuration information includes a component tree, and the root component is the component corresponding to the root node of the component tree.

5. The method according to claim 4, characterized in that, The virtual interface configuration information is constructed in the following way: In response to the visual walkthrough command, one component is randomly selected from the components displayed on the program interface to obtain the target component; Based on the target component, the virtual interface configuration information is created; the virtual interface configuration information includes the target component; The pixel information copying tool is used to determine the root component based on the target component in the virtual interface configuration information.

6. The method according to claim 4, characterized in that, The method further includes: In response to the visual walkthrough command, a bitmap is created in the memory of the display terminal of the program interface to obtain the pixel information storage container; The pixel size of the cutout center of the target indicator and the pixel size of the bitmap are both one pixel.

7. The method according to any one of claims 1 to 6, characterized in that, Both the cutout center of the target indicator and the information panel can be moved within the program interface in response to a drag operation; the color information includes at least color parameters and color blocks corresponding to the color parameters; After displaying the color information corresponding to the pixel information in the information dashboard, the system further includes: In response to a copy operation of the color parameter in the information dashboard, the color parameter is written to the clipboard of the display terminal of the program interface.

8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 7.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 7.

10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 7.

Images