Display method and device of virtual key, electronic equipment and storage medium

Abstract

This disclosure provides a method, apparatus, electronic device, and storage medium for displaying virtual buttons. A graphical user interface (GUI) is provided via a terminal, and the GUI displays virtual buttons. The method includes: determining a background area of ​​the virtual button in the GUI; acquiring the color of the background area and determining a target color for the virtual button based on the background area color; and controlling the virtual button to display in the GUI with the target color. The virtual button in this disclosure changes color according to the color of its background area, thereby improving the recognizability of the virtual button and facilitating accurate location of the virtual button by the user.

Description

Technical Field

[0001] This disclosure relates to the field of graphical user interface technology, and in particular to a method, apparatus, electronic device, and storage medium for displaying virtual buttons. Background Technology

[0002] This section is intended to provide background or context for the embodiments of this disclosure as set forth in the claims. The description herein is not intended to be a prior art simply because it is included in this section.

[0003] A graphical user interface (GUI) is a computer user interface that uses a graphical representation. A GUI typically includes several virtual buttons that allow users to operate the computer.

[0004] Typically, virtual buttons float in the graphical user interface. Visually, they appear above other displayed content, such as text or images. In this case, if the color of the displayed content is similar to or even the same as the color of the virtual buttons, it will reduce the visibility of the virtual buttons, making it difficult for users to distinguish them and affecting their use of the virtual buttons. Summary of the Invention

[0005] In view of this, the purpose of this disclosure is to provide a method, device, electronic device and storage medium for displaying virtual buttons, which at least to some extent solves one of the technical problems in the related art.

[0006] To achieve the above objectives, an exemplary embodiment of this disclosure provides a method for displaying virtual buttons, which provides a graphical user interface (GUI) via a terminal. The GUI displays virtual buttons, and the method includes:

[0007] Determine the background area of ​​the virtual button in the graphical user interface;

[0008] Obtain the color of the background area, and determine the target color of the virtual button based on the color of the background area;

[0009] The virtual buttons are controlled to be displayed in the graphical user interface in the target color.

[0010] Based on the same inventive concept, an exemplary embodiment of this disclosure also provides a display device for virtual buttons, which provides a graphical user interface through a terminal. The graphical user interface displays content including virtual buttons, and the device includes:

[0011] The background area determination module is configured to determine the background area of ​​the virtual button in the graphical user interface.

[0012] The target color determination module is configured to acquire the color of the background area and determine the target color of the virtual button based on the color of the background area.

[0013] A target color display module is configured to control the virtual buttons to be displayed in the graphical user interface in the target color.

[0014] Based on the same inventive concept, an exemplary embodiment of this disclosure also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described in any of the above embodiments.

[0015] Based on the same inventive concept, exemplary embodiments of this disclosure also provide a non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform any of the methods described above.

[0016] As can be seen from the above description, the virtual button display method, apparatus, electronic device, and storage medium provided in this disclosure provide a graphical user interface through a terminal. The content displayed in the graphical user interface includes virtual buttons. The method includes: determining the background area of ​​the virtual button in the graphical user interface; obtaining the color of the background area and determining the target color of the virtual button based on the color of the background area; and controlling the virtual button to be displayed in the graphical user interface with the target color. The virtual button in this disclosure changes color according to the color of its background area, thereby improving the recognizability of the virtual button and facilitating users to accurately locate the position of the virtual button. Attached Figure Description

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

[0018] Figure 1 A schematic diagram illustrating an application scenario of the virtual button display method provided in an exemplary embodiment of this disclosure;

[0019] Figure 2 A schematic diagram illustrating another application scenario of the virtual button display method provided in an exemplary embodiment of this disclosure;

[0020] Figure 3 A flowchart illustrating a method for displaying virtual buttons as an exemplary embodiment of this disclosure;

[0021] Figure 4 A schematic diagram illustrating another application scenario of the virtual button display method provided in an exemplary embodiment of this disclosure;

[0022] Figure 5 A schematic diagram of a virtual button display device provided for an exemplary embodiment of the present disclosure;

[0023] Figure 6 A schematic diagram of the structure of an electronic device provided as an exemplary embodiment of the present disclosure. Detailed Implementation

[0024] To make the objectives, technical solutions, and advantages of this disclosure clearer, the principles and spirit of this disclosure will be described below with reference to several exemplary embodiments. It should be understood that these embodiments are provided merely to enable those skilled in the art to better understand and implement this disclosure, and are not intended to limit the scope of this disclosure in any way. Rather, these embodiments are provided to make this disclosure more thorough and complete, and to fully convey the scope of this disclosure to those skilled in the art.

[0025] According to embodiments of this disclosure, a method, apparatus, electronic device, and storage medium for displaying virtual buttons are proposed.

[0026] In this article, it is important to understand that any number of elements in the accompanying figures is for illustrative purposes and not for limitation, and any naming is for distinction only and has no limiting meaning.

[0027] It should be noted that, unless otherwise defined, the technical or scientific terms used in the embodiments of this disclosure should have the ordinary meaning understood by one of ordinary skill in the art to which this disclosure pertains. The terms "first," "second," and similar terms used in the embodiments of this disclosure do not indicate any order, quantity, or importance, but are merely used to distinguish different components. Terms such as "comprising" or "including" mean that the element or object preceding the word encompasses the elements or objects listed following the word and their equivalents, without excluding other elements or objects. Terms such as "connected" or "linked" are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. Terms such as "upper," "lower," "left," and "right" are used only to indicate relative positional relationships; when the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0028] The principles and spirit of this disclosure will be explained in detail below with reference to several representative embodiments.

[0029] refer to Figure 1This is a schematic diagram illustrating an application scenario of the virtual button display method provided in an exemplary embodiment of this disclosure.

[0030] The application scenario includes a terminal device 100, which provides a graphical user interface 102. The graphical user interface 102 displays virtual buttons 104, first other display content 106, and second other display content 108.

[0031] The color difference between the first other display content 106 and the virtual button 104 is relatively large, while the color difference between the second other display content 108 and the virtual button 104 is relatively small. When the user interacts with the graphical user interface 102, the virtual button 102 floats above either the first other display content 106 or the second other display content 108. When the virtual button 102 floats above the first other display content 106, the large color difference between the two makes the virtual button 104 highly recognizable, allowing the user to accurately locate it. However, when the virtual button 102 floats above the second other display content 108, the small color difference between the two results in the virtual button 104 appearing visually integrated, leading to low recognizability and making it difficult for the user to accurately locate it.

[0032] The terminal device 100 possesses certain data storage and processing capabilities. In some possible implementations, external servers and data storage systems can provide data processing and data storage support to the terminal device 100, respectively. The terminal device 100, server, and data storage system can all be connected via wired or wireless communication networks. The terminal device 100 includes, but is not limited to, desktop computers, mobile phones, mobile computers, tablets, media players, smart wearable devices, personal digital assistants (PDAs), or other electronic devices capable of performing the aforementioned functions. The server and data storage system can be independent physical servers, server clusters or distributed systems composed of multiple physical servers, or cloud servers providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms.

[0033] refer to Figure 2 This is a schematic diagram illustrating another application scenario of the virtual button display method provided by the exemplary embodiments of this disclosure.

[0034] In related technologies, to address the issue of virtual button 104 visually blending into other display content 108 with similar color differences, resulting in low recognizability and difficulty for users to accurately locate it, a dedicated display area, such as a locked display area 110, is typically allocated to virtual button 104 within the graphical user interface 102. The locked display area 110 does not change with the content displayed in other areas of the graphical user interface 102, for example, it does not scroll with page scrolling; it can be fixedly displayed at the top or bottom of the page or in other preset areas. In this case, virtual button 104 does not float above the first or second display content 106 or 108, and therefore is not affected by the color of the first or second display content 106 or 108, making it easier for users to accurately locate virtual button 104.

[0035] However, the inventors of this disclosure have discovered that, on the one hand, the locked display area 110 in this solution occupies part of the graphical user interface 102, resulting in a reduction in the area of ​​the graphical user interface 102 used to display content information such as the first other display content 106 or the second other display content 108. At the same time, the locked display area 110 also feels disconnected from other areas, resulting in a poor visual experience. On the other hand, this solution can only be applied to situations where the virtual button 104 is placed at the edge of the graphical user interface 102. If the virtual button 104 needs to be placed in the middle of the graphical user interface 102, the locked display area 110 will obscure the content information such as the first other display content 106 or the second other display content 108, interfering with the normal display of other content information.

[0036] To address the aforementioned problems, this disclosure provides a virtual button display scheme. A graphical user interface (GUI) is provided via a terminal, and the GUI displays virtual buttons. Specifically, the scheme includes: determining the background area of ​​the virtual button within the GUI; acquiring the color of the background area and determining a target color for the virtual button based on the background area color; and controlling the virtual button to display in the GUI with the target color. In this disclosure, the virtual button changes color according to the color of its background area, thereby improving the visibility of the virtual button and facilitating accurate location by the user.

[0037] After introducing the basic principles of this disclosure, various non-limiting embodiments of this disclosure are described below, in conjunction with the application scenarios described above, to illustrate the display scheme of virtual buttons according to exemplary embodiments of this disclosure. It should be noted that the above application scenarios are shown only to facilitate understanding of the spirit and principles of this disclosure, and the embodiments of this disclosure are not limited in any way. Rather, the embodiments of this disclosure can be applied to any applicable scenario.

[0038] refer to Figure 3 This is a flowchart illustrating a method for displaying virtual buttons provided in an exemplary embodiment of this disclosure.

[0039] A method for displaying virtual buttons, wherein a graphical user interface is provided on a terminal, and the content displayed in the graphical user interface includes virtual buttons, the method comprising the following steps:

[0040] Step S310: Determine the background area of ​​the virtual button in the graphical user interface.

[0041] In some exemplary embodiments, determining the background area of ​​the virtual button in the graphical user interface includes:

[0042] Obtain the background area attribute information corresponding to the pre-constructed virtual button;

[0043] The background area of ​​the virtual button in the graphical user interface is determined based on the background area attribute information.

[0044] The background area attribute information corresponding to the virtual button can include the position coordinates of the background area. As an example, the background area of ​​the virtual button in the graphical user interface can be a rectangle, and the position coordinates of the background area of ​​the rectangle can be represented by [X, X+L] and [Y, Y+W], where X and Y represent the horizontal and vertical coordinates of the lower left corner of the background area of ​​the rectangle, and L and W represent the length and width of the background area of ​​the rectangle, respectively. The position coordinates are based on the lower left corner of the graphical user interface as the origin.

[0045] It should be noted that the above embodiments are illustrated using a preset background area as an example, but this disclosure is not limited thereto. In some possible implementations, the background area can be generated in real time, which is more flexible and adaptable than the preset background area scheme.

[0046] In some exemplary embodiments, determining the background area of ​​the virtual button in the graphical user interface includes:

[0047] A reference point for the virtual button is determined, and the background area of ​​the virtual button in the graphical user interface is obtained based on the reference point and a preset distance threshold.

[0048] The background area can be a circle or other polygons.

[0049] In some exemplary embodiments, determining the background area of ​​the virtual button in the graphical user interface includes:

[0050] Determine the reference point of the virtual button, and determine the maximum distance between the point on the virtual button and the reference point;

[0051] A circle is drawn with the reference point as the center and the maximum distance as the radius. The area within the circle in the graphical user interface is used as the background area.

[0052] This ensures that the background area completely includes the virtual buttons, resulting in high accuracy, while also eliminating the need for any preset size data.

[0053] Step S320: Obtain the color of the background area, and determine the target color of the virtual button based on the color of the background area.

[0054] In some exemplary embodiments, obtaining the color of the background area includes:

[0055] Obtain image data of the background area;

[0056] The dominant color tone of the image data is extracted and used as the color of the background area.

[0057] In some exemplary embodiments, acquiring the image data of the background region includes:

[0058] Construct a Cascading Style Sheet pseudo-element for the background area; wherein the Cascading Style Sheet pseudo-element overlaps with the background area;

[0059] The Cascading Style Sheet pseudo-elements are subjected to Gaussian blurring using a preset filter function to obtain the processed Cascading Style Sheet pseudo-elements.

[0060] The processed Cascading Style Sheet pseudo-element is enlarged to a preset multiple to obtain an enlarged Cascading Style Sheet pseudo-element. The area of ​​the enlarged Cascading Style Sheet pseudo-element that overlaps with the background area is used as the image data.

[0061] In some exemplary embodiments, the dominant color tone of the image data is extracted using an image blur filter.

[0062] Among them, the image blur filter includes the Gaussian blur filter.

[0063] In some exemplary embodiments, determining the target color of the virtual button based on the color of the background area includes:

[0064] The target color is obtained by inverting the color of the background area.

[0065] Step S330: Control the virtual buttons to be displayed in the graphical user interface in the target color.

[0066] In some exemplary embodiments, S330 specifically includes:

[0067] Configure a Hypertext Markup Language (HTML) structure for displaying the virtual button on the parent element of the virtual button, and configure the color of the HTML structure to the target color;

[0068] The layer containing the background area is placed below the layer containing the Hypertext Markup Language structure, so that the virtual button is displayed in the graphical user interface with the target color.

[0069] refer to Figure 4 The target color has a large color difference from the background area, making the virtual buttons highly recognizable and allowing users to accurately locate their positions.

[0070] As can be seen from the above description, the virtual button display method provided in this disclosure provides a graphical user interface (GUI) on a terminal. The GUI displays virtual buttons. The method includes: determining the background area of ​​the virtual button in the GUI; obtaining the color of the background area and determining the target color of the virtual button based on the color of the background area; and controlling the virtual button to be displayed in the GUI with the target color. The virtual button in this disclosure changes color according to the color of its background area, thereby improving the recognizability of the virtual button and facilitating accurate positioning of the virtual button by the user.

[0071] Corresponding to any of the above embodiments, this disclosure also provides a more specific embodiment of a method for displaying virtual buttons.

[0072] (1) Create a clickable hotspot for the virtual button (i.e., the background area mentioned above) and capture the page content within that hotspot area as an image:

[0073] Create a clickable hotspot A in the top left corner of the page, with a width and height of W. The x-coordinate of A is X, and the y-coordinate is Y. As an example, create a clickable hotspot in the top left corner with x and y coordinates of [10px, 10px] and a width and height of 30px. For demonstration purposes, declare the background color of A as red. Its coordinate range can be represented as [X, X+W] and [Y, Y+W].

[0074] For A, CSS (Cascading Style Sheets) code is used for layout and rendering, and its rendering effect is consistent with the original red hotspot area; among them, CSS code is used to create web pages with various styles.

[0075] Based on the parameters of A, the visible content M of the area where A is located is captured in real time using Canvas and converted into a Base64 image format.

[0076] Use the DOM's `createElement()` method to implicitly create a Canvas object and set its width and height to be the same as A. This object does not need to be inserted into the HTML. Call the Canvas object's `getContext()` method to convert the canvas content into a 2D planar composition, and then call `drawImage()` to capture the current webpage content as image data.

[0077] The parameters 10, 10, 30, 30 in `drawImage()` represent the horizontal coordinate of the hotspot area (10px), the vertical coordinate (10px), the width (30px), and the height (30px), which is exactly the inner area of ​​the red region. Finally, `toDataURL()` is called to convert the image data to Base64 format for later use in CSS styles. `background-image` is used to declare `M` as the background image for `A`.

[0078] (2) Extract the primary color tone and invert it to obtain the HEX color code of the primary color tone.

[0079] The pseudo-element A is defined as an additional container, and its width and height are declared to be the same as A. The purpose is to allow free control over the size of the pseudo-element while keeping the size of A as a reference point. As an example, the pseudo-element's background is a background blending property, and the abbreviations are background-image (image path), background-repeat (image repeating mode), and background-size (image size mode), meaning that the background image is declared to be non-repeating and freely adaptable to the size.

[0080] The above method allows for fixing the size of the pseudo-element that renders the primary color tone, while also enabling free manipulation of the primary color tone's viscosity. The viscosity of the primary color tone can be simulated by adjusting the background size using `background-size`.

[0081] This disclosure does not require running additional algorithms to extract the dominant color tone of the image. The overall extraction method is based on browser characteristics and uses the following steps to generate the image indirectly. The entire process does not involve any script operations, nor does it involve saving the dominant color tone of the image.

[0082] Applying filter effects to pseudo-elements. This disclosure uses the browser's native filter function `filter:blur()`. This function applies a Gaussian blur effect to the overall color of the image, reducing image noise and detail levels. The image is convolved with the blurred circular frame to generate a more accurate bokeh effect. Simply put, it weakens inconspicuous details and enhances prominent details. By enhancing the detail levels of the main color tone and weakening the detail levels of other color tones, a dynamic processing effect is achieved. Because Gaussian blur centers the overall enhancement effect, zooming in on the image and cropping the center will make the main color tone stand out more.

[0083] Based on the above steps, declare the pseudo-element to scale up by three times based on the transformation center using transform:scale(), making the center region larger in the region where A is located.

[0084] Since it has been declared that the portion overflowing from area A will be hidden, any pseudo-elements that are enlarged and extend beyond area A will also be hidden. Therefore, the remaining pseudo-elements within area A constitute the final main color rendering area. The main color of the image generated based on the original image through a blend of Gaussian blur, enlargement to highlight the center, and cropping the central region is labeled B.

[0085] After obtaining B, the image color is inverted by declaring `filter:invert()` on the parent element of the pseudo-element, i.e., A. This is also called inversion. A value of 0% results in no change, a value between 0 and 100% produces a linear multiplier effect, and a value of 100% completely inverts the color. To create a sharp contrast in the main color tone, `filter:invert(100%)` is declared, resulting in the inversion of the main color tone of the image, denoted as N.

[0086] A Canvas object is implicitly created again using the DOM's `createElement()` method and set to the same width and height as A. This object does not need to be inserted into the HTML. The `getContext()` method of the Canvas object is called to convert the canvas content into a 2D planar composition. Then, `drawImage()` is called to crop A and convert it into image data. The pixel information of the center coordinates of the image data is parsed to obtain the R, G, and B values, which are then converted to HEX (hexadecimal color). Taking the above image as an example, the resulting HEX is #0e5042, labeled as N.

[0087] (3) Insert an icon and color it in the clicked hotspot.

[0088] The color obtained in the previous step can be used as the background color of the virtual button X. Add an HTML structure to the parent element of the element containing the virtual button to display X, and declare its background color as N using `background-color`. At this point, X will be superimposed on A. Since A has already declared a layer level z-index of 9 and is floating above the page content, we now declare X's z-index as 9 to replace A's original position, and declare A's z-index as -9, causing it to drop below the page content. This layer rendering and overlay method achieves the effect of hiding A.

[0089] (4) Set time intervals to dynamically obtain the inverted primary color of the clicked hotspot and map it onto the virtual buttons:

[0090] Because webpage content changes dynamically over time—whether scrolling or watching a video—the content in area A will constantly change. Therefore, the inverted primary color obtained in the first frame cannot meet the needs of subsequent changes. Thus, a new inverted primary color needs to be generated whenever the content changes. This method dynamically identifies the content area and controls the virtual button color, ensuring the virtual buttons remain in a prominent and easily found position.

[0091] Set a timer to execute the above process every 500ms. At this time, X will have many possible background colors. Since the transition of each color takes 500ms, the transition will be very unnatural, and it may change to another color in a flash. Therefore, declare the transition as all 500ms, so that when the background color of X changes, there is a smooth transition of 500ms, thereby compensating for this dynamic change of color difference and making the transition of each background color more natural.

[0092] Compared with existing solutions, this disclosure has the following advantages:

[0093] The virtual button colors are dynamically changed based on the colors of the webpage content in the graphical user interface, avoiding the problem of virtual buttons appearing and disappearing due to webpage scrolling or changes. The inverse primary color of the clickable hotspot is dynamically generated using layer hierarchy differences, and then this inverse primary color is assigned to the color attribute of the virtual button. Furthermore, the dynamic characteristics of the content continuously generate the inverse primary color to continuously supply the color attribute of the virtual button, thereby achieving the effect of dynamically controlling the color of the virtual button.

[0094] The entire process only needs to be executed in the browser, without server involvement. If a server-developed interface were used for dynamic processing, the delay in generating dynamic effects could put pressure on the interface due to increased page views. Because there is no interaction with the server, there is no need to redevelop server scripts to handle the aforementioned issues, eliminating the need for databases and dependencies on storage objects. This allows for the dynamic generation of the main color tone from the image, reducing server load and letting the browser handle these tasks.

[0095] Using the browser itself as a GUI processing tool and its built-in filter series of filter functions for image rendering is more reliable, efficient, and cost-effective than using some open-source or paid third-party image color quantization algorithms on the server. There is no need to maintain such an image main color extraction process, nor is there a need to develop a series of high-cost interfaces separately to achieve the above effects.

[0096] The overall integration cost is very low, requiring only three APIs of the Canvas object and four lines of core CSS code (overflow:hidden, filter:blur(), filter:invert(), and transform:scale()). Compared to using hundreds or thousands of lines of core code on a server to complete the above process, the development cost is very low.

[0097] This disclosure is aimed at end users (C-end), and dynamically completes the above process using a combination of Canvas and CSS based on the browser's rendering capabilities. Implementing this process on a server would require reading every frame of the webpage content, extracting the inverse primary color from the position of each frame to obtain a virtual button for the current frame, and then merging the virtual button into the webpage content—a very costly process. Browsers have a significant advantage in rendering and execution cost compared to servers.

[0098] The transformation property matrix transformation feature improves the rendering performance of images during the extraction process. The transformation does not change the cached records during the execution. When compositing layers, it traverses the nodes of the current layer and uses matrix formulas to calculate the corresponding new coordinates. It can be regarded as a transformation that is independent of the layer content. The cached bitmap information of the elements in the layer can be reused repeatedly, thereby improving rendering performance.

[0099] It should be noted that the method of this disclosure embodiment can be executed by a single device, such as a computer or server. The method of this embodiment can also be applied to a distributed scenario, where multiple devices cooperate to complete the task. In such a distributed scenario, one of these devices may execute only one or more steps of the method of this disclosure embodiment, and the multiple devices will interact with each other to complete the method described.

[0100] It should be noted that the above description describes some embodiments of this disclosure. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in a different order than that shown in the above embodiments and still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require a specific or sequential order to achieve the desired result. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0101] Based on the same inventive concept, corresponding to any of the above embodiments, this disclosure also provides a virtual button display device.

[0102] refer to Figure 5 The virtual button display device includes:

[0103] Background area determination module 510 is configured to determine the background area of ​​the virtual button in the graphical user interface;

[0104] The target color determination module 520 is configured to acquire the color of the background area and determine the target color of the virtual button based on the color of the background area.

[0105] The target color display module 530 is configured to control the virtual buttons to be displayed in the graphical user interface in the target color.

[0106] In some exemplary embodiments, the background region determination module 510 is specifically configured as follows:

[0107] Obtain the background area attribute information corresponding to the pre-constructed virtual button;

[0108] The background area of ​​the virtual button in the graphical user interface is determined based on the background area attribute information.

[0109] In some exemplary embodiments, the background region determination module 510 is specifically configured as follows:

[0110] A reference point for the virtual button is determined, and the background area of ​​the virtual button in the graphical user interface is obtained based on the reference point and a preset distance threshold.

[0111] In some exemplary embodiments, the background region determination module 510 is specifically configured as follows:

[0112] Determine the reference point of the virtual button, and determine the maximum distance between the point on the virtual button and the reference point;

[0113] A circle is drawn with the reference point as the center and the maximum distance as the radius. The area within the circle in the graphical user interface is used as the background area.

[0114] In some exemplary embodiments, the target color determination module 520 is specifically configured as follows:

[0115] Obtain image data of the background area;

[0116] The dominant color tone of the image data is extracted and used as the color of the background area.

[0117] In some exemplary embodiments, the target color determination module 520 is specifically configured as follows:

[0118] The dominant color tone of the image data is extracted using an image blur filter and used as the color of the background area.

[0119] In some exemplary embodiments, the target color determination module 520 is specifically configured as follows:

[0120] Construct a Cascading Style Sheet pseudo-element for the background area; wherein the Cascading Style Sheet pseudo-element overlaps with the background area;

[0121] The Cascading Style Sheet pseudo-elements are subjected to Gaussian blurring using a preset filter function to obtain the processed Cascading Style Sheet pseudo-elements.

[0122] The processed Cascading Style Sheet pseudo-element is enlarged to a preset multiple to obtain an enlarged Cascading Style Sheet pseudo-element. The area of ​​the enlarged Cascading Style Sheet pseudo-element that overlaps with the background area is used as the image data.

[0123] In some exemplary embodiments, the target color determination module 520 is specifically configured as follows:

[0124] The target color is obtained by inverting the color of the background area.

[0125] In some exemplary embodiments, the target color display module 530 is specifically configured as follows:

[0126] Configure a Hypertext Markup Language (HTML) structure for displaying the virtual button on the parent element of the virtual button, and configure the color of the HTML structure to the target color;

[0127] The layer containing the background area is placed below the layer containing the Hypertext Markup Language structure, so that the virtual button is displayed in the graphical user interface with the target color.

[0128] For ease of description, the above apparatus is described in terms of its functions, divided into various modules. Of course, in implementing this disclosure, the functions of each module can be implemented in one or more software and / or hardware.

[0129] The apparatus described above is used to implement the corresponding virtual button display method in any of the foregoing embodiments, and has the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0130] Based on the same inventive concept, corresponding to the methods of any of the above embodiments, this disclosure also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the virtual button display method described in any of the above embodiments.

[0131] Figure 6 This embodiment illustrates a more specific hardware structure of an electronic device, which may include a processor 1010, a memory 1020, an input / output interface 1030, a communication interface 1040, and a bus 1050. The processor 1010, memory 1020, input / output interface 1030, and communication interface 1040 are interconnected internally via the bus 1050.

[0132] The processor 1010 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this specification.

[0133] The memory 1020 can be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 1020 can store the operating system and other applications. When the technical solutions provided in the embodiments of this specification are implemented by software or firmware, the relevant program code is stored in the memory 1020 and is called and executed by the processor 1010.

[0134] The input / output interface 1030 is used to connect input / output modules to realize information input and output. Input / output modules can be configured as components within the device (not shown in the figure) or externally connected to the device to provide corresponding functions. Input devices may include keyboards, mice, touchscreens, microphones, various sensors, etc., while output devices may include displays, speakers, vibrators, indicator lights, etc.

[0135] The communication interface 1040 is used to connect a communication module (not shown in the figure) to enable communication between this device and other devices. The communication module can communicate via wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).

[0136] Bus 1050 includes a pathway for transmitting information between various components of the device, such as processor 1010, memory 1020, input / output interface 1030, and communication interface 1040.

[0137] It should be noted that although the above-described device only shows the processor 1010, memory 1020, input / output interface 1030, communication interface 1040, and bus 1050, in specific implementations, the device may also include other components necessary for normal operation. Furthermore, those skilled in the art will understand that the above-described device may only include the components necessary for implementing the embodiments of this specification, and not necessarily all the components shown in the figures.

[0138] The electronic devices described above are used to implement the corresponding virtual button display method in any of the foregoing embodiments, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0139] Based on the same inventive concept, corresponding to the methods of any of the above embodiments, this disclosure also provides a non-transitory computer-readable storage medium that stores computer instructions for causing the computer to execute the virtual button display method as described in any of the above embodiments.

[0140] The aforementioned non-transitory computer-readable storage media can be any available medium or data storage device that a computer can access, including but not limited to magnetic storage (e.g., floppy disks, hard disks, magnetic tapes, magneto-optical disks (MOs), etc.), optical storage (e.g., CDs, DVDs, BDs, HVDs, etc.), and semiconductor storage (e.g., ROMs, EPROMs, EEPROMs, non-volatile memory (NAND flash), solid-state drives (SSDs)).

[0141] The computer instructions stored in the storage medium of the above embodiments are used to cause the computer to execute the virtual button display method as described in any of the embodiments of the exemplary method section above, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0142] Those skilled in the art will recognize that embodiments of this disclosure can be implemented as a system, method, or computer program product. Therefore, this disclosure can be implemented as entirely hardware, entirely software (including firmware, resident software, microcode, etc.), or a combination of hardware and software, generally referred to herein as a "circuit," "module," or "system." Furthermore, in some embodiments, this disclosure can also be implemented as a computer program product contained in one or more computer-readable media, which includes computer-readable program code.

[0143] Any combination of one or more computer-readable media may be used. A computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. A computer-readable storage medium can be, for example,, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples (not exhaustive) of a computer-readable storage medium may include: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this document, a computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in connection with an instruction execution system, apparatus, or device.

[0144] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, capable of sending, propagating, or transmitting programs for use by or in connection with an instruction execution system, apparatus, or device.

[0145] Program code contained on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0146] Computer program code for performing the operations of this disclosure can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++, and conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network (including a local area network (LAN) or a wide area network (WAN)), or it can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0147] It should be understood that each block of a flowchart and / or block diagram, as well as combinations of blocks in a flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device to produce a machine that, when executed by a computer or other programmable data processing device, creates means for implementing the functions / operations specified in the blocks of the flowchart and / or block diagram.

[0148] These computer program instructions may also be stored in a computer-readable medium that enables a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable medium produce a product comprising an instruction apparatus that implements the functions / operations specified in the boxes of a flowchart and / or block diagram.

[0149] Computer program instructions may also be loaded onto a computer, other programmable data processing apparatus, or other device to cause a series of operational steps to be performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, such that the instructions that execute on the computer or other programmable apparatus can provide a process for implementing the functions / operations specified in the boxes of a flowchart and / or block diagram.

[0150] Furthermore, although the operations of the methods of this disclosure are described in a specific order in the accompanying drawings, this does not require or imply that these operations must be performed in that specific order, or that all of the operations shown must be performed to achieve the desired result. Rather, the steps depicted in the flowcharts may be executed in a different order. Additionally or alternatively, certain steps may be omitted, multiple steps may be combined into one step, and / or one step may be broken down into multiple steps.

[0151] The use of the verbs "including" and "contains" and their inflections in the application documents does not preclude the existence of elements or steps other than those described in the application documents. The article "a" or "one" preceding an element does not preclude the existence of multiple such elements.

[0152] While the spirit and principles of this disclosure have been described with reference to several specific embodiments, it should be understood that this disclosure is not limited to the disclosed specific embodiments, and the division of aspects does not imply that features in these aspects cannot be combined for benefit; such division is merely for convenience of expression. This disclosure is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims. The scope of the appended claims is to be interpreted in the broadest sense, thereby encompassing all such modifications and equivalent structures and functions.

Claims

1. A method for displaying virtual buttons, characterized in that, The method includes providing a graphical user interface (GUI) via a terminal, wherein the GUI displays virtual buttons. Determine the background area of ​​the virtual button in the graphical user interface; Construct a Cascading Style Sheet (CSS) pseudo-element for the background area; wherein the CSS pseudo-element overlaps with the background area; apply Gaussian blur to the CSS pseudo-element using a preset filter function to obtain a processed CSS pseudo-element; enlarge the processed CSS pseudo-element to a preset factor to obtain an enlarged CSS pseudo-element; use the area of ​​the enlarged CSS pseudo-element that overlaps with the background area as image data; extract the dominant color tone of the image data as the color of the background area, and determine the target color of the virtual button based on the color of the background area; Configure a Hypertext Markup Language (HTML) structure for displaying the virtual button on the parent element of the virtual button, and configure the color of the HTML structure to the target color; place the layer containing the background area below the layer containing the HTML structure, so that the virtual button is displayed in the graphical user interface with the target color.

2. The method according to claim 1, characterized in that, Determining the background area of ​​the virtual button in the graphical user interface includes: Obtain the background area attribute information corresponding to the pre-constructed virtual button; The background area of ​​the virtual button in the graphical user interface is determined based on the background area attribute information.

3. The method according to claim 1, characterized in that, Determining the background area of ​​the virtual button in the graphical user interface includes: A reference point for the virtual button is determined, and the background area of ​​the virtual button in the graphical user interface is obtained based on the reference point and a preset distance threshold.

4. The method according to claim 1, characterized in that, Determining the background area of ​​the virtual button in the graphical user interface includes: Determine the reference point of the virtual button, and determine the maximum distance between the point on the virtual button and the reference point; A circle is drawn with the reference point as the center and the maximum distance as the radius. The area within the circle in the graphical user interface is used as the background area.

5. The method according to claim 1, characterized in that, The step of extracting the dominant color tone of the image data as the color of the background area includes: The dominant color tone of the image data is extracted using an image blur filter and used as the color of the background area.

6. The method according to claim 1, characterized in that, Determining the target color of the virtual button based on the color of the background area includes: The target color is obtained by inverting the color of the background area.

7. A display device for virtual buttons, characterized in that, The device provides a graphical user interface via a terminal, the graphical user interface displaying content including virtual buttons, and includes: The background area determination module is configured to determine the background area of ​​the virtual button in the graphical user interface. The target color determination module is configured to construct a Cascading Style Sheet (CSS) pseudo-element for the background area; wherein the CSS pseudo-element overlaps with the background area; the CSS pseudo-element is Gaussian blurred using a preset filter function to obtain a processed CSS pseudo-element; the processed CSS pseudo-element is enlarged to a preset factor to obtain an enlarged CSS pseudo-element; the area of ​​the enlarged CSS pseudo-element that overlaps with the background area is used as image data; the dominant color tone of the image data is extracted as the color of the background area, and the target color of the virtual button is determined based on the color of the background area; The target color display module is configured to configure a Hypertext Markup Language (HMR) structure for displaying the virtual button on the parent element of the virtual button, and configure the color of the HMR structure as the target color; and place the layer containing the background area below the layer containing the HMR structure, so that the virtual button is displayed in the graphical user interface with the target color.

8. An electronic device, characterized in that, It includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the program, implements the method as described in any one of claims 1 to 6.

9. A non-transitory computer-readable storage medium, characterized in that, The non-transitory computer-readable storage medium stores computer instructions for causing the computer to perform the method of any one of claims 1 to 6.

Images