Method for generating page skin based on element color and storage medium

Abstract

The application discloses a page skin generation method based on element colors and a storage medium, obtains elements in a page, the types of the elements include at least one of buttons, texts, single selection boxes and check boxes, and each element is classified by grade; fields in a preset color matching table are configured, and color values corresponding to each field in the color matching table corresponding to each element are configured according to the types and grades of the elements; each element is rendered according to the color matching table corresponding to each element, and an element library is obtained; rendered elements required by a page are selected from the element library, and the page is generated. The application can improve the page skin production efficiency and ensure compatibility.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method and storage medium for generating page skins based on element colors. Background Technology

[0002] The "skinning" function of an application or system refers to changing the appearance of an application or system by downloading a skin package and reloading it without upgrading the application or system. In karaoke venues, because each private room has a different decor, the song selection system in each room needs to use different color-coded skins to better match the room's décor, thus creating a stronger demand for "skinning" of the karaoke system. Additionally, for special holidays, applications or systems need to change to skins appropriate for the holiday, requiring specially designed solutions from graphic designers. For example, during Christmas or Mid-Autumn Festival, applications or systems need to change to skins appropriate for the specific holiday.

[0003] Traditional "skinning" techniques require recreating images for all visible elements on an application or system's interface, including buttons and text. Existing applications or systems typically have a visually appealing homepage, while higher-level interfaces are primarily composed of buttons and text. When changing the skin of the entire application or system, the homepage requires significant time for image replacement, rearrangement, and color redesign. Higher-level pages generally don't change their content, but the colors of buttons and text need adjustment to match the homepage's style.

[0004] Traditional skin-changing methods have two drawbacks: 1. When the application's interface (level 2 or higher) is complex, with many pages and pop-ups, the workload for graphic designers becomes extremely large. 2. When application features are updated, such as adding a new page (level 2 or higher), graphic designers need to recreate images for that page and generate a new skin pack for the current program version. Previously created skin packs cannot be directly applied to the new page. Summary of the Invention

[0005] The technical problem to be solved by the present invention is to provide a method and storage medium for generating page skins based on element colors, which can improve the efficiency of page skin production and ensure compatibility.

[0006] To solve the above-mentioned technical problems, the technical solution adopted by the present invention is: a method for generating page skins based on element colors, comprising:

[0007] Retrieve elements from the page, the types of which include at least one of buttons, text, radio buttons, and check boxes, and classify each element into a hierarchy;

[0008] The fields in the color scheme table are preset, and the color values ​​corresponding to each field in the color scheme table are configured according to the type and level of each element.

[0009] Each element is rendered according to its corresponding color scheme to obtain an element library;

[0010] Select the rendered elements required for the page from the element library to generate the page.

[0011] The present invention also proposes a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the method described above.

[0012] The beneficial effects of this invention are as follows: By configuring color schemes for elements on a page and modifying the color values ​​of each field in the color scheme for each element, elements of different colors can be quickly created. By combining the required elements, the desired page can be generated. This invention is particularly suitable for skin design of pages other than the homepage. For most pages in the application, only the colors of the elements need to be configured to create new skin packs, eliminating the need to recreate each element's image, significantly accelerating skin pack creation. Furthermore, when developing new pages in the application, historical skin packs can be used directly without recreating them, ensuring compatibility.

[0013] This invention solves the problem of heavy workload for graphic designers in traditional skin-changing solutions, making it more efficient for graphic designers to create skin packs. At the same time, the skin packs created can be adapted to future product updates, and can be adapted without updating when product functions are iterated. Attached Figure Description

[0014] Figure 1 This is a flowchart of a page skin generation method based on element color according to the present invention;

[0015] Figure 2 This is a flowchart of the method according to Embodiment 1 of the present invention. Detailed Implementation

[0016] To explain the technical content, objectives, and effects of the present invention in detail, the following description is provided in conjunction with the embodiments and accompanying drawings.

[0017] Please see Figure 1 A method for generating page skins based on element colors, comprising:

[0018] Retrieve elements from the page, the types of which include at least one of buttons, text, radio buttons, and check boxes, and classify each element into a hierarchy;

[0019] The fields in the color scheme table are preset, and the color values ​​corresponding to each field in the color scheme table are configured according to the type and level of each element.

[0020] Each element is rendered according to its corresponding color scheme to obtain an element library;

[0021] Select the rendered elements required for the page from the element library to generate the page.

[0022] As can be seen from the above description, the beneficial effects of the present invention are: it solves the problem of the large workload of graphic designers in traditional skin-changing solutions, making it more efficient for graphic designers to create skin packs. At the same time, the skin packs created can also adapt to future product updates, and can be adapted without updating when product functions are iterated.

[0023] Furthermore, the fields in the color scheme table include a default state color field and a click state color field;

[0024] The process of rendering each element according to its corresponding color scheme to obtain the element library is as follows:

[0025] Based on the color value corresponding to the default state color field in the color scheme table corresponding to an element, modify the pixel value of the non-transparent area of ​​the layer of the element to obtain the rendered layer corresponding to the default state of the element.

[0026] Based on the color value corresponding to the click state color field in the color scheme table corresponding to an element, modify the pixel value of the non-transparent area of ​​the element's layer to obtain the rendered layer corresponding to the click state of the element.

[0027] Add the rendered element's default state layer and its clicked state layer to the element library.

[0028] As described above, by rendering two different states of layers for each element, the selected element can be displayed by switching between different layer states when the user clicks or selects it. Furthermore, by rendering the non-transparent areas of the layers, elements with special effects such as glow can be created.

[0029] Furthermore, the elements' layers include stacked background layers, foreground layers, and border layers;

[0030] The default state color field includes a default background color field, a default foreground color field, and a default border color field, and the click state color field includes a click background color field, a click foreground color field, and a click border color field.

[0031] As described above, the color of an element can be composed of its background color, foreground color, and border color, which can improve the color display effect of the element.

[0032] Further, the step of modifying the pixel values ​​of the non-transparent areas of the element's layer based on the color value corresponding to the default state color field in the color scheme table of the element, to obtain the rendered layer corresponding to the default state of the element, specifically involves:

[0033] Based on the color value corresponding to the default background color field in the color scheme table of an element, modify the pixel value of the non-transparent area of ​​the background layer of the element to obtain the background layer of the element in its default state after rendering.

[0034] Based on the color value of the default foreground color field in the color scheme table corresponding to an element, modify the pixel value of the non-transparent area of ​​the foreground layer of the element to obtain the foreground layer of the element in its default state after rendering.

[0035] Based on the color value corresponding to the default border color field in the color scheme table of an element, modify the pixel value of the non-transparent area of ​​the border layer of the element to obtain the rendered border layer of the element in its default state.

[0036] Further, the step of modifying the pixel values ​​of the non-transparent areas of the element's layer based on the color value corresponding to the click state color field in the color scheme table of the element to obtain the rendered layer corresponding to the click state of the element specifically involves:

[0037] Based on the color value corresponding to the click background color field in the color scheme table of an element, modify the pixel value of the non-transparent area of ​​the background layer of the element to obtain the rendered background layer of the element corresponding to the click state.

[0038] Based on the color value corresponding to the click foreground color field in the color scheme table corresponding to an element, modify the pixel value of the non-transparent area of ​​the foreground layer of the element to obtain the rendered foreground layer corresponding to the click state of the element.

[0039] Based on the color value corresponding to the click border color field in the color scheme table for an element, modify the pixel value of the non-transparent area of ​​the border layer of the element to obtain the rendered border layer of the element corresponding to the click state.

[0040] Furthermore, the step of selecting the rendered elements required for the page from the element library and generating the page specifically involves:

[0041] Select the elements needed for the page from the element library, and generate the page according to the default layer corresponding to each selected element.

[0042] Furthermore, after selecting the rendered elements required for the page from the element library and generating the page, the process further includes:

[0043] Detect click events. When a click is detected on an element on the page, replace the layer in the default state of that element with the layer in the clicked state.

[0044] After the click ends, the layer corresponding to the clicked state of the element is replaced with the layer corresponding to the default state.

[0045] As described above, under normal circumstances, elements display the corresponding default layer. Only when an element is selected or clicked by the user will the layer corresponding to the clicked state of that element be displayed, thereby highlighting the selected element.

[0046] Furthermore, after selecting the rendered elements required for the page from the element library and generating the page, the process further includes:

[0047] When it is necessary to change the skin of the page, modify the color values ​​of each field in the color scheme table corresponding to each element in the page, and re-render each element according to the modified color scheme table corresponding to each element.

[0048] Generate the reskinned page based on the re-rendered elements.

[0049] As described above, a new skin pack can be created simply by configuring the colors of the elements on the page, without having to recreate each element's image, which greatly speeds up the creation of skin packs.

[0050] Furthermore, the levels include important, less important, and ordinary.

[0051] The present invention also proposes a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described above.

[0052] Example 1

[0053] Please refer to Figure 2 Embodiment 1 of the present invention is: a page skin generation method based on element color, applicable to pages other than the homepage.

[0054] like Figure 2 As shown, it includes the following steps:

[0055] S1: Retrieve the elements on the page and classify each element into different levels.

[0056] The elements on the page are the controls on the page, and the types of elements are classified based on the types of controls.

[0057] In this embodiment, the types of elements include, but are not limited to, buttons, text, radio buttons, and checkboxes, and their levels include important, less important, and normal. For example, buttons can be divided into important buttons, less important buttons, and normal buttons.

[0058] When applied to specific scenarios, such as a song selection page, the "back" button can be used as the primary button, the page turning buttons in the song list can be used as regular buttons, the song title in the song information can be used as the primary text, and the artist and rating in the song information can be used as secondary text, and so on.

[0059] S2: Preset the fields in the color scheme table, and configure the color values ​​corresponding to each field in the color scheme table for each element according to the type and level of each element.

[0060] In this embodiment, the fields in the color scheme table include a default state color field and a click state color field.

[0061] Furthermore, each element's layers include at least a background layer, a foreground layer, and a border layer, which are stacked. Correspondingly, the default state color field in the color scheme table includes a default background color field, a default foreground color field, and a default border color field, while the click state color field includes a click background color field, a click foreground color field, and a click border color field.

[0062] In other words, each element corresponds to a color scheme table, and each element's color scheme table contains six fields: default background color, default foreground color, default border color, clickable background color, clickable foreground color, and clickable border color.

[0063] Then, based on the type and level of each element, set the corresponding color values ​​for each field in the color scheme table for each element. For example, for a regular button, the corresponding color values ​​for each field in its color scheme table can be set to blue or a similar color; for a less important button, the corresponding color values ​​for each field in its color scheme table can be set to yellow or a similar color; and for an important button, the corresponding color values ​​for each field in its color scheme table can be set to red or a similar color.

[0064] In this embodiment, elements of the same type and level have the same color value in the color scheme.

[0065] S3: Render each element according to its corresponding color scheme to obtain the element library.

[0066] Specifically, based on the color value corresponding to the default state color field in the color scheme table corresponding to an element, the pixel values ​​of the non-transparent area of ​​the element's layer are modified to obtain the rendered layer corresponding to the default state of the element; that is, based on the color values ​​corresponding to the default background color field, default foreground color field, and default border color field in the color scheme table corresponding to an element, the pixel values ​​of the non-transparent areas of the background layer, foreground layer, and border layer of the element are modified to obtain the rendered background layer, foreground layer, and border layer corresponding to the default state of the element.

[0067] Based on the color value corresponding to the click state color field in the color scheme table corresponding to an element, modify the pixel values ​​of the non-transparent area of ​​the element's layer to obtain the rendered layer corresponding to the click state of the element; that is, based on the color values ​​corresponding to the click background color field, click foreground color field, and click border color field in the color scheme table corresponding to an element, modify the pixel values ​​of the non-transparent area of ​​the element's background layer, foreground layer, and border layer to obtain the rendered background layer, foreground layer, and border layer corresponding to the element's click state.

[0068] Finally, add the rendered element's default state layer and its clicked state layer to the element library.

[0069] In other words, for each layer in each element, there are two states in the element library: the default state and the clicked state.

[0070] Furthermore, in this embodiment, each element is rendered based on native Android controls and Google's Tint image coloring technology (which can directly modify the pixel values ​​of pixels in a layer without changing their transparency), combined with color values ​​from a color palette. During rendering, the entire non-transparent area of ​​each layer of the element is rendered. For example, for a button, the conventional approach to changing the background color is to use the native "TextView" to set a specific color value, which makes the entire rectangular (or square, or circular) area of ​​the button's background a solid color. However, using the Tint image coloring technology, only the non-transparent areas are changed, preserving the background halo effect. Moreover, when the element shape is not a regular shape such as a rectangle, square, or circle as defined by native Android controls, color changing for irregularly shaped elements can also be achieved.

[0071] S4: Select the rendered elements required for the page from the element library and generate the page.

[0072] The page is generated by selecting the required elements from the element library and generating the page based on the default layers corresponding to each selected element. The default layers corresponding to the same element are displayed overlaid.

[0073] S5: Detect click events and determine if any element on the page has been clicked. If so, proceed to step S6.

[0074] S6: Replace the default layer of the currently clicked element with the layer corresponding to the clicked state.

[0075] When a user selects an element, the element's layers are replaced from their default state to the selected state (i.e., clicked state) by replacing each layer with the layer corresponding to the clicked state.

[0076] S7: Determine if the click event has ended. If so, proceed to step S8.

[0077] S8: Replace the layer corresponding to the clicked state of the element that has ended the click with the layer corresponding to the default state.

[0078] In other words, when a user releases the selection of an element, the element's layers are replaced with the layers corresponding to the clicked state and the default state, thus changing the element from the selected state to the default state.

[0079] Furthermore, when it is necessary to change the skin of the page, the color values ​​of each field in the color scheme table corresponding to each element in the page are modified, and each element is re-rendered according to the modified color scheme table; the skinned page is generated according to the re-rendered elements.

[0080] In other words, you only need to modify the color values ​​in the color scheme table corresponding to each element on the page, re-render the elements to get the different colors, and apply the re-rendered elements to the page to get the pages with different skins.

[0081] This embodiment is particularly suitable for skin design on pages with two or more levels. Subsequently, for most pages in the application, only the colors of the elements on the page need to be configured to build a new skin pack, without having to re-cut and recreate each element, which greatly speeds up the production of skin packs. At the same time, when developing new pages in the application, historical skin packs can be used directly without having to recreate the skin packs, ensuring compatibility.

[0082] Example 2

[0083] This embodiment is a computer-readable storage medium corresponding to the above embodiments, on which a computer program is stored. When the program is executed by a processor, it implements the various steps of the page skin generation method based on element color as described in the above embodiments, and can achieve the same technical effect, which will not be repeated here.

[0084] In summary, this invention provides a method and storage medium for generating page skins based on element colors. By configuring color schemes for elements on a page and modifying the color values ​​of each field in the color scheme for each element, elements of different colors can be quickly created. By combining the required elements, the desired page can be generated. This invention is particularly suitable for skin design of pages other than the homepage. Subsequently, for most pages in the application, only the colors of the elements on the page need to be configured to build a new skin package, without the need to recreate images for each element, significantly speeding up the skin package creation process. Furthermore, when developing new pages in the application, historical skin packages can be directly used without recreating them, ensuring backward compatibility.

[0085] This invention solves the problem of heavy workload for graphic designers in traditional skin-changing solutions, making it more efficient for graphic designers to create skin packs. At the same time, the skin packs created can be adapted to future product updates, and can be adapted without updating when product functions are iterated.

[0086] The above description is merely an embodiment of the present invention and does not limit the patent scope of the present invention. Any equivalent modifications made based on the content of the present invention specification and drawings, or direct or indirect applications in related technical fields, are similarly included within the patent protection scope of the present invention.

Claims

1. A method for generating page skins based on element colors, characterized in that, include: Retrieve elements from the page, the types of which include at least one of buttons, text, radio buttons, and check boxes, and classify each element into a hierarchy; The fields in the color scheme table are preset, and the color values ​​corresponding to each field in the color scheme table are configured according to the type and level of each element. Each element is rendered according to its corresponding color scheme to obtain an element library; Select the rendered elements required for the page from the element library and generate the page; The fields in the color scheme table include a default state color field and a click state color field; The process of rendering each element according to its corresponding color scheme to obtain the element library is as follows: Based on the color value corresponding to the default state color field in the color scheme table corresponding to an element, modify the pixel value of the non-transparent area of ​​the layer of the element to obtain the rendered layer corresponding to the default state of the element. Based on the color value corresponding to the click state color field in the color scheme table corresponding to an element, modify the pixel value of the non-transparent area of ​​the element's layer to obtain the rendered layer corresponding to the click state of the element. Add the rendered element's default state layer and clicked state layer to the element library; The elements consist of layers of background, foreground, and border layers; The default state color field includes a default background color field, a default foreground color field, and a default border color field, and the click state color field includes a click background color field, a click foreground color field, and a click border color field.

2. The page skin generation method based on element color according to claim 1, characterized in that, The step of modifying the pixel values ​​of the non-transparent areas of the element's layer based on the color value corresponding to the default state color field in the color scheme table of the element, to obtain the rendered layer corresponding to the default state of the element, specifically involves: Based on the color value corresponding to the default background color field in the color scheme table of an element, modify the pixel value of the non-transparent area of ​​the background layer of the element to obtain the background layer of the element in its default state after rendering. Based on the color value of the default foreground color field in the color scheme table corresponding to an element, modify the pixel value of the non-transparent area of ​​the foreground layer of the element to obtain the foreground layer of the element in its default state after rendering. Based on the color value corresponding to the default border color field in the color scheme table of an element, modify the pixel value of the non-transparent area of ​​the border layer of the element to obtain the rendered border layer of the element in its default state.

3. The method for generating page skins based on element colors according to claim 1, characterized in that, The step of modifying the pixel values ​​of the non-transparent areas of the element's layer based on the color value corresponding to the click state color field in the color scheme table of the element to obtain the rendered layer corresponding to the click state of the element is as follows: Based on the color value corresponding to the click background color field in the color scheme table of an element, modify the pixel value of the non-transparent area of ​​the background layer of the element to obtain the rendered background layer of the element corresponding to the click state. Based on the color value corresponding to the click foreground color field in the color scheme table corresponding to an element, modify the pixel value of the non-transparent area of ​​the foreground layer of the element to obtain the rendered foreground layer corresponding to the click state of the element. Based on the color value corresponding to the click border color field in the color scheme table for an element, modify the pixel value of the non-transparent area of ​​the border layer of the element to obtain the rendered border layer of the element corresponding to the click state.

4. The method for generating page skins based on element colors according to claim 1, characterized in that, The specific steps for selecting the rendered elements required for the page from the element library and generating the page are as follows: Select the elements needed for the page from the element library, and generate the page according to the default layer corresponding to each selected element.

5. The page skin generation method based on element color according to claim 4, characterized in that, After selecting the rendered elements required for the page from the element library and generating the page, the process further includes: Detect click events. When a click is detected on an element on the page, replace the layer in the default state of that element with the layer in the clicked state. After the click ends, the layer corresponding to the clicked state of the element is replaced with the layer corresponding to the default state.

6. The method for generating page skins based on element colors according to claim 1, characterized in that, After selecting the rendered elements required for the page from the element library and generating the page, the process further includes: When it is necessary to change the skin of the page, modify the color values ​​of each field in the color scheme table corresponding to each element in the page, and re-render each element according to the modified color scheme table corresponding to each element. Generate the reskinned page based on the re-rendered elements.

7. The method for generating page skins based on element colors according to any one of claims 1-6, characterized in that, The levels are categorized as important, less important, and ordinary.

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

Images