Processing method of UI (User Interface) component, in-vehicle display equipment, storage medium and program product

Abstract

The invention provides a processing method of a UI component, a vehicle machine display device, a storage medium and a program product, the method comprises the steps of generating a water film wrapping layer according to target contour data of the UI component, the target contour data being used for representing geometric morphology characteristics of a target contour of the UI component, and the target contour data being used for representing the geometric morphology characteristics of the target contour of the UI component; the geometrical shape of the water film wrapping layer is matched with that of the target outline; in the embodiment of the invention, the water film wrapping layer is constructed according to the target contour data, and the form of the water film wrapping layer can be matched with the actual contour of the UI component, so that the visual distortion problems such as edge blurring caused by the fact that the actual contour form is not considered in the glassy state effect can be basically avoided; therefore, the visual display effect of the glassy state of the UI component is obviously improved.

Description

Technical Field

[0001] This application relates to the field of image processing technology, specifically to processing methods for UI components, in-vehicle display devices, storage media, and program products. Background Technology

[0002] User interface (UI) components, as the core carrier of human-computer interaction in in-vehicle displays and mobile terminals, directly impact the user's interactive experience through their visual presentation quality. Especially in the modern smart cockpit field, the in-vehicle interface is not only a medium for information transmission but also a key window showcasing the vehicle's technological level and brand image. In recent years, design styles represented by the "glassy" aesthetic, due to their transparent and lightweight visual characteristics, have been widely applied to the UI design of various operating systems.

[0003] In related technologies, achieving a glass-like effect typically employs a globally uniform image processing mode. Specifically, a uniform, preset Gaussian blur or similar filtering algorithm is applied to the entire UI component, and a fixed transparency mask is overlaid. However, for icons with complex outlines, this global blurring inevitably erodes their originally sharp edges, leading to problems such as blurred edges, which damages the visual refinement of the UI component and significantly impacts the user's visual experience.

[0004] It should be noted that the information disclosed in the background section of this application is intended only to enhance the understanding of the general background of this application, and should not be construed as an admission or in any way implying that the information constitutes prior art known to those skilled in the art. Summary of the Invention

[0005] This application provides a method for processing UI components, an in-vehicle display device, a storage medium, and a program product to help solve the problem of poor glass-like visual effects of UI components in related technologies, which affects the user's visual experience.

[0006] In a first aspect, embodiments of this application provide a method for processing UI components, applied to a vehicle, the vehicle including a vehicle-mounted infotainment interface, the vehicle-mounted infotainment interface including UI components, the method comprising: A water film wrapping layer is generated based on the target contour data of the UI component. The target contour data is used to characterize the geometric shape features of the target contour of the UI component. The water film wrapping layer matches the geometric shape of the target contour. The water film coating layer is superimposed on the first preset position of the UI component to obtain a UI component with a water glass effect.

[0007] In one possible implementation, the target contour data of the UI component includes the curvature and shape of the target contour of the UI component, and generating the water film coating layer based on the target contour data of the UI component includes: The thickness of the water film wrapping layer is determined based on the curvature of the target contour of the UI component, wherein the curvature is positively correlated with the thickness of the border. A water film wrapping layer is generated based on the shape of the target outline of the UI component and the thickness of the border.

[0008] In one possible implementation, generating the water film wrapping layer based on the shape of the target outline of the UI component and the border thickness includes: The water film generation anchor points are determined based on the curvature and shape of the target contour of the UI component, and the density of the water film generation anchor points is positively correlated with the curvature of the target contour. The water film wrapping layer is generated based on the water film generation anchor point and the border thickness.

[0009] One possible implementation also includes: Determine the type of the UI component; If the UI component is of type application, then the overlapping area of ​​the UI component is blurred to the first degree of blurring, and the overlapping area of ​​the UI component is the overlapping area of ​​the UI component and the water film coating layer.

[0010] One possible implementation also includes: Obtain the first sub-region and the second sub-region of the overlapping area of ​​the UI component. The contrast of the first sub-region is greater than or equal to the preset contrast, and the contrast of the second sub-region is less than the preset contrast. The overlapping area is the overlapping area of ​​the UI component and the water film coating layer. The first sub-region is subjected to a second degree of blurring, and the second sub-region is subjected to a third degree of blurring, wherein the second degree of blurring is less than the third degree of blurring.

[0011] One possible implementation also includes: The static visual effect parameters of the water film coating layer are determined according to the type of the UI component, and the static visual effect parameters include transparency, blur level and / or refraction level. Based on the vehicle's operating status, the dynamic visual effect parameters of the water film coating layer are determined. These dynamic visual effect parameters include the water film fluctuation amplitude and the attenuation rate of the water flow traces.

[0012] In one possible implementation, determining the static visual effect parameters of the water film coating layer based on the type of the UI component includes: If the type of the UI component is an application type, then the transparency of the water film coating layer is determined to be the first transparency, the blur level to be the fourth blur level, and the refraction level to be the first refraction level; If the UI component is a card type, then the transparency of the water film coating layer is determined to be the second transparency, the blur level to be the fifth blur level, and the refraction level to be the second refraction level; Wherein, the first transparency is less than the second transparency, the fourth blur degree is greater than the fifth blur degree, and the first refractive degree is greater than the second refractive degree.

[0013] One possible implementation also includes: The pressure applied is determined based on the user's touch input to the UI components. The water ripple diffusion effect of the water film coating layer is determined based on the pressing pressure, and the pressing pressure is positively correlated with the water ripple diffusion effect.

[0014] One possible implementation also includes: Highlights are rendered at a second preset position on the water film coating layer. The intensity of the highlights is negatively correlated with the vehicle illumination intensity. The second preset position is the position where the curvature of the outline of the water film coating layer is greater than a preset curvature.

[0015] Secondly, this application provides a vehicle-mounted display device, including: processor; Memory; And a computer program, wherein the computer program is stored in the memory, and when the computer program is executed by the processor, causes the vehicle display device to perform the method described in any one of the first aspects.

[0016] Thirdly, this application provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method described in any one of the first aspects.

[0017] Fourthly, this application provides a vehicle that includes the vehicle-mounted display device shown in the second aspect.

[0018] In this embodiment, a water film wrapping layer is generated based on the target contour data of the UI component, and then superimposed on the UI component to generate a UI component with a water glass effect. Since the water film wrapping layer is constructed based on the target contour data, the shape of the water film wrapping layer can match the actual contour of the UI component. Therefore, the visual distortion problems such as edge blurring caused by the glass effect not considering the actual contour shape can be largely avoided, thereby significantly improving the visual display effect of the glass effect of the UI component. Attached Figure Description

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

[0020] Figure 1 This is a schematic diagram of an application scenario provided by an embodiment of this application; Figure 2 A flowchart illustrating a method for processing a UI component provided in an embodiment of this application; Figure 3 A schematic diagram of an application-type UI component provided in an embodiment of this application; Figure 4 A schematic diagram of a card-type UI component provided in an embodiment of this application; Figure 5 A method provided for embodiments of this application based on Figure 3 The diagram shows the water film coating layer generated by the UI component. Figure 6 A method provided for embodiments of this application based on Figure 4 The diagram shows the water film coating layer generated by the UI component. Figure 7 An embodiment provided in this application Figure 4 The diagram shows the water film wrapping effect of the UI component. Figure 8 A schematic flowchart illustrating a method for generating a water film coating layer according to an embodiment of this application; Figure 9 A schematic flowchart illustrating another method for generating a water film coating layer provided in an embodiment of this application; Figure 10 An embodiment provided in this application Figure 3 The diagram shows the water film wrapping effect of the UI component. Figure 11 A flowchart illustrating a method for blurring an overlay region provided in an embodiment of this application; Figure 12 A flowchart illustrating a method for determining the visual effect of a water film coating layer provided in an embodiment of this application; Figure 13 An embodiment provided in this application Figure 3 A schematic diagram illustrating the static visual effect of the water film wrapping layer of the UI component shown; Figure 14 An embodiment provided in this application Figure 4 A schematic diagram illustrating the static visual effect of the water film wrapping layer of the UI component shown; Figure 15 A flowchart illustrating a method for implementing UI component interaction effects according to an embodiment of this application; Figure 16 A flowchart illustrating another method for processing a UI component provided in an embodiment of this application; Figure 17 This is a schematic diagram of the structure of a vehicle-mounted display device provided in an embodiment of this application. Detailed Implementation

[0021] To better understand the technical solution of this application, the embodiments of this application will be described in detail below with reference to the accompanying drawings.

[0022] It should be understood that the described embodiments are merely some, not all, of the embodiments in this application. All other embodiments obtained by those skilled in the art based on the embodiments in this application without inventive effort are within the scope of protection of this application.

[0023] The terminology used in the embodiments of this application is for the purpose of describing particular embodiments only and is not intended to be limiting of this application. The singular forms “a,” “the,” and “the” used in the embodiments of this application and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise.

[0024] It should be understood that the term "and / or" used in this article is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, or B existing alone. Additionally, the character " / " in this article generally indicates that the preceding and following related objects have an "or" relationship.

[0025] User interface (UI) components are the basic visual units that constitute the graphical user interface (GUI). They are the carriers of information content and the functional entities through which users interact with the system. UI components typically encapsulate specific visual styles, data content, and response logic, enabling them to independently display information or receive user input commands. In practical applications, UI components can include application types (such as music applications) and card types (such as navigation cards). As the core carrier of human-computer interaction in in-vehicle displays and mobile terminals, the visual presentation quality of UI components directly affects the user's interactive experience. Especially in the field of modern smart cockpits, the in-vehicle interface is not only a medium for information transmission but also a key window reflecting the vehicle's technological level and brand quality.

[0026] See Figure 1 This is a schematic diagram illustrating an application scenario provided in an embodiment of this application. For example... Figure 1 As shown, this application scenario specifically includes a vehicle 100, which is equipped with a vehicle-mounted display device 110. The vehicle-mounted display device 110 runs a vehicle-mounted system, and the vehicle-mounted system's interactive interface includes multiple UI components. The vehicle 100 includes, but is not limited to, new energy vehicles and gasoline-powered vehicles; the vehicle-mounted display device 110 includes, but is not limited to, the vehicle's central control display screen, the vehicle's instrument panel display screen, and the entertainment display screen; the UI components include, but are not limited to, application icon types (such as navigation application icons, music application icons, settings application icons, etc.) and card types (such as navigation information cards, vehicle status information cards, air conditioning control cards, etc.).

[0027] In one possible application scenario, users can perform touch operations (such as clicking, long-pressing, swiping, etc.) on UI components in the vehicle's infotainment interface to trigger and open the corresponding function page or perform the corresponding function (such as clicking the navigation function card to open the detailed navigation interface; clicking the music application icon to open the music playback interface).

[0028] In practical applications, the visual display effect of UI components in the vehicle's infotainment system directly affects the user's visual experience. In recent years, the UI design style represented by "glassy" has been widely used in various vehicle infotainment systems due to its transparent and light visual characteristics. Glassy is used to simulate the semi-transparent and blurred texture of real glass. Through visual processing methods such as background blurring, edge highlights, and low-saturation color overlay, UI components present a transparent, light, and layered visual effect.

[0029] In related technologies, the implementation of a glassy effect for UI components typically employs a globally uniform image processing mode. For example, a uniform, preset Gaussian blur or similar filtering algorithm is applied to the entire UI component, and a fixed transparency mask is overlaid. However, for icons with complex outlines, this global blurring inevitably erodes their originally sharp edges, leading to problems such as blurred edges. Simultaneously, for cards with rounded corners, because the blurring algorithm cannot perceive the curvature changes of the corners, the blurred edges of the glassy effect are awkwardly superimposed on the rounded corner outlines of the card, failing to form a natural, continuous visual fusion and presenting a textured appearance, severely disrupting the overall visual consistency and harmony of the interface. This glassy effect implementation method undermines the recognizability and refinement of the UI component's visual design, significantly impacting the user's visual experience. Therefore, the problem of the glassy effect affecting the user's visual experience due to the failure to consider the geometric shape of the UI component when implementing it is a technical problem that urgently needs to be solved by those skilled in the art.

[0030] To address the aforementioned issues, this application provides a method for processing UI components. A water film wrapping layer is generated based on the target contour data of the UI component, and this water film wrapping layer is superimposed on the UI component to generate a UI component with a water-glass effect. Since the water film wrapping layer is constructed based on the target contour data, its shape can match the actual contour of the UI component. Therefore, it largely avoids visual distortion problems such as edge blurring caused by neglecting the actual contour shape in the glass effect, thereby significantly improving the visual display effect of the glass-like appearance of the UI component.

[0031] Specifically, the following detailed description is provided in conjunction with the accompanying drawings and specific embodiments.

[0032] See Figure 2 This is a flowchart illustrating a UI component processing method provided in an embodiment of this application. This method can be applied to... Figure 1 The vehicle shown. Figure 1 As shown, the method specifically includes the following steps.

[0033] Step S201: Generate a water film wrapping layer based on the target contour data of the UI component.

[0034] The target contour refers to the specified contour within the UI component, specifically the contour that needs to be wrapped with a water film. In practical applications, the target contour is not limited to the overall external boundary of the UI component; it can also be any visual boundary within the UI component (such as an internal cutout contour, the contour of an internal graphic element, etc.). The target contour data is used to characterize the geometric features of the target contour of the UI component, and may include the shape, curvature, etc.

[0035] See Figure 3This is a schematic diagram of an application-type UI component provided in an embodiment of this application. Figure 3 As shown, the target outline can be the outer outline of the application icon, or it can be a circular or rectangular outline within the application icon.

[0036] See Figure 4 This is a schematic diagram of a card-type UI component provided in an embodiment of this application. Figure 4 As shown, the target outline can be the outer rounded rectangle outline of the card or the inner cartoon avatar outline.

[0037] In this embodiment, a water film coating layer is generated based on the target contour data. This directly mimics the geometric shape of the target contour, meaning the generated water film coating layer maintains a consistent geometric trend with the target contour. The water film coating layer can follow the trend of the target contour, but it is not necessarily completely fitted to the target contour (e.g., appropriate scaling is applied). It is understood that the water film coating layer can possess corresponding visual characteristics (such as transparency), thus presenting a transparent visual effect similar to water film coating.

[0038] See Figure 5 This application provides a method based on an embodiment of the present application. Figure 3 The diagram shows a water film coating layer generated by the UI component. Figure 5 As shown, the water film coating layer is based on Figure 3 The circular outline in the UI component shown is generated to match the geometry of the circular outline.

[0039] See Figure 6 This application provides a method based on an embodiment of the present application. Figure 4 The diagram shows a water film coating layer generated by the UI component. Figure 6 As shown, the water film coating layer is based on Figure 4 The rounded rectangle outline of the UI component shown is generated to match the geometry of the rounded rectangle outline.

[0040] In one possible implementation, the water film coating layer can be generated directly based on the shape of the target contour, thereby matching the shape of the target contour. Of course, those skilled in the art can adjust the specific implementation of generating the water film coating layer based on the target contour data according to their needs, such as calculating the coverage area of ​​the water film coating layer based on the size of the target contour. This application does not impose specific limitations in this regard.

[0041] Step S202: Overlay the water film coating layer onto the first preset position on the UI component to obtain a UI component with a water glass effect.

[0042] In this embodiment, instead of directly applying the glass effect to the UI component, the water film layer generated in step S201 is superimposed on the UI component. By superimposing the water film layer on the first preset position of the UI component, a water glass effect can be presented.

[0043] The first preset position refers to the position where the water film coating layer can present a visual effect that meets preset requirements, such as a specific position determined based on the geometric size of the UI component according to preset aesthetic proportions (such as the golden ratio or the third point).

[0044] It should be noted that the water film coating layer is superimposed on the UI component at a first preset position. The specific superposition area can be offset, scaled, or have a preset spacing relative to the target outline, and the edge of the water film coating layer is not required to strictly coincide with the edge of the target outline. In practical applications, those skilled in the art can adjust it according to actual needs, and the embodiments of this application do not impose specific limitations in this regard.

[0045] See Figure 7 This is a method provided in the embodiments of this application. Figure 4 The illustration shows a water film wrapping effect on a UI component. Figure 7 As shown, using Figure 6 The water film coating layer shown is Figure 4 The UI components shown are overlaid to generate Figure 7 UI components with a water glass effect.

[0046] In this embodiment, a water film wrapping layer is generated based on the target contour data of the UI component, and then superimposed on the UI component to generate a UI component with a water glass effect. Since the water film wrapping layer is constructed based on the target contour data, the shape of the water film wrapping layer can match the actual contour of the UI component. Therefore, the visual distortion problems such as edge blurring caused by the glass effect not considering the actual contour shape can be largely avoided, thereby significantly improving the visual display effect of the glass effect of the UI component.

[0047] In practical applications, in order to make the generated water film coating layer more closely match the outline of the UI component and have a better visual display effect, the target outline data of the UI component can include the curvature and shape of the target outline of the UI component, and the water film coating layer is generated based on the curvature and shape of the target outline.

[0048] See Figure 8 This is a schematic flowchart illustrating a method for generating a water film coating layer according to an embodiment of this application. Figure 8 As shown, the method specifically includes the following steps.

[0049] Step S801: Determine the border thickness of the water film wrapping layer based on the curvature of the target outline of the UI component.

[0050] The curvature of the target contour of a UI component refers to the degree of geometric bending at a specific location on the target contour, used to characterize the rate of change of the contour curve at that point. The curvature of the target contour of a UI component can serve as a quantitative indicator of the smoothness or sharpness of the target contour edge, reflecting the degree to which the target contour deviates from a straight line at a specified location. For example, a low curvature (e.g., 0.01) corresponds to a relatively gentle contour position (e.g., long straight edges or large rounded corners), while a high curvature (e.g., 0.9) corresponds to a position where the contour changes abruptly (e.g., sharp corners or tight small rounded corners).

[0051] In this embodiment, curvature is positively correlated with border thickness. It can be understood that the greater the curvature of the target contour, the more pronounced the deformation of the target contour, and the greater the corresponding border thickness of the water film coating layer should be. This enhances the volume and gloss of the water film coating layer at that location, creating a more dynamic water glass effect. Conversely, the smaller the curvature of the target contour, the closer the target contour is to a straight line, and the smaller the corresponding border thickness of the water film coating layer should be. This simulates the natural extension and thinning characteristics of the water film in flat areas, avoiding a visually heavy feel and maintaining the overall lightness and transparency of the interface.

[0052] For example, suppose a UI component's target outline contains three arc segments with gradually changing curvature (0.9, 1.5, and 1.1 respectively). The thickness of the water film border for the arc segment with curvature of 1.5 can be set to 1.7 pixels, the thickness for the arc segment with curvature of 0.9 can be set to 1.3 pixels, and the thickness for the arc segment with curvature of 1.1 can be set to 1.5 pixels, achieving a smooth transition in thickness with varying curvature. Suppose a UI component's target outline is an irregular guitar-shaped outline, including four arc segments and six sharp corners. The water film border thickness can be 2.2 pixels at the sharp corners (positions with higher curvature), and 1.8 pixels at the arc segments. Suppose a UI component's target outline is a rounded rectangle. The border thickness of the water film wrapping layer corresponding to the four corners of the rounded rectangle can be set to 1.9 pixels, while the border thickness in other areas can be set to 1.6 pixels.

[0053] Step S802: Generate a water film wrapping layer based on the shape of the target outline of the UI component and the border thickness.

[0054] For example, a water film wrapping layer with a specified border thickness can be drawn according to the shape of the target contour, that is, the target contour is used as a reference, and the corresponding offset contour is generated by offsetting it inward or outward by a specified distance.

[0055] In practical applications, in order to make the generated water film wrapping layer fit the target outline of the UI component better, the anchor point for water film generation can be determined by the shape and curvature of the target outline, and the water film wrapping layer can be generated based on the anchor point and the thickness of the water film border.

[0056] See Figure 9 This is a schematic flowchart illustrating another method for generating a water film coating layer provided in an embodiment of this application. Figure 9 As shown, step S802 specifically includes the following steps.

[0057] Step S8021: Determine the anchor point for water film generation based on the curvature and shape of the target contour of the UI component.

[0058] In this embodiment, a specific water film generation path can be determined based on the shape of the target contour. Water film generation anchor points are set along this path, and a water film coating layer can be generated subsequently based on these anchor points. Simultaneously, the density of the water film generation anchor points can be adjusted according to the curvature, and the density of the water film generation anchor points is positively correlated with the curvature of the target contour. It can be understood that a higher curvature in the target contour indicates a greater degree of deformation, meaning more anchor points are needed at that location to better conform to the contour; conversely, a lower curvature indicates that the target contour is closer to a straight line, meaning fewer water film generation anchor points are needed at that location.

[0059] For example, assuming the target outline is a standard rounded rectangle, a water film generation anchor point can be set every 100 pixels in the straight area with zero curvature, while a water film generation anchor point needs to be set every 2 pixels for the four corners of the rounded rectangle to adapt to the shape changes at the rounded corners and ensure the smoothness of the water film coating layer at the bends.

[0060] Step S8022: Based on the anchor points and border thickness of the water film generation, generate the water film wrapping layer. In this embodiment, the water film wrapping layer is generated based on the water film generation anchor point and the water film edge thickness, which can effectively generate a water film wrapping layer that can fit the target contour and has a good visual effect.

[0061] In practical applications, to make the visual effect of UI components more layered, the UI components can also be blurred. In one possible implementation, the overlapping area between the UI component and the water film coating layer is blurred (e.g., using Gaussian blur or filtering algorithms).

[0062] However, since card-type UI components usually display some key information (such as vehicle speed, vehicle condition, etc.), directly blurring them may cause this key information to be unclear, affecting user experience and even driving safety.

[0063] Therefore, in one possible implementation, the decision to blur the UI component can be determined based on its type. Specifically, the type of the UI component is first determined; if the UI component is an application type, then the overlapping area of ​​the UI component is blurred to the first degree, where the overlapping area is the area where the UI component overlaps with the water film layer. It can be understood that application type UI components are typically composed of icons and usually do not contain key information, so they can be directly blurred to enhance the visual hierarchy of the UI component; while card type UI components, because they contain key information, can be left unblurred to ensure the visual clarity of the key information.

[0064] See Figure 10 This is a method provided in the embodiments of this application. Figure 3 The diagram illustrates the water film effect on the UI component. Figure 10 As shown, due to Figure 3 The UI components shown are application-type, so the overlapping areas can be blurred to achieve the visual effect shown in the image.

[0065] In practical applications, the specific content of the overlay area can also be identified. Key content areas are not blurred or are only slightly blurred, while non-key content areas are blurred normally, thus achieving personalized blurring based on the specific content.

[0066] See Figure 11 This is a flowchart illustrating a method for blurring overlay regions provided in an embodiment of this application. Figure 11 As shown, the method specifically includes the following steps.

[0067] Step S1101: Obtain the first and second sub-regions of the overlapping area of ​​the UI component.

[0068] The overlay area refers to the area where the UI component overlaps with the water film coating layer. The contrast of the first sub-region is greater than or equal to the preset contrast, and the contrast of the second sub-region is less than the preset contrast. The preset contrast is the reference contrast for the key information area.

[0069] It should be noted that the aforementioned contrast ratio typically refers to the contrast ratio between the target area and the background area of ​​the UI component. Of course, those skilled in the art can adjust the method of determining the contrast ratio according to actual needs, and this application does not impose specific limitations on this.

[0070] Understandably, key information areas are typically composed of foreground elements such as text and graphics. To ensure good display, these text and graphic elements usually need to maintain a significant contrast difference with the background area below, so that users can clearly distinguish the key information from the background.

[0071] Of course, those skilled in the art can adjust the method of determining the first sub-region and the second sub-region according to their needs, such as using deep learning recognition or classification algorithms to determine the first sub-region and the second sub-region. This application does not impose specific limitations on this.

[0072] Step S1102: Perform blurring processing of the first sub-region with the second degree of blurring, and perform blurring processing of the second sub-region with the third degree of blurring.

[0073] The second degree of blur is less than the third degree of blur. In this embodiment, the second sub-region is the key information region with high contrast, while the third sub-region is the non-key information region. By applying different degrees of blur to the key information region and the non-key information region, the clarity of the key region and the visual hierarchy of the non-key region can be achieved simultaneously.

[0074] In practical applications, in order to make UI components have better visual effects, corresponding static and dynamic visual effects can also be configured for the water film coating layer.

[0075] For example, suppose the UI component is a navigation card. The key information area inside the navigation card includes the name of the road ahead ("Technology Avenue", bold white high-contrast font), the remaining distance ("3.2km", bold high-contrast number), and the turn arrow icon (red fill). All three are high-contrast areas. When using Gaussian blur for blurring, the blur radius is set to 50% of the preset blur radius (e.g., 3 pixels), while other areas can be blurred using the preset blur radius.

[0076] Assuming the UI component is for a music application, the key information areas of this component are the guitar strings (three thin black lines) and the sound hole indicator (a circular white pattern). Therefore, when applying Gaussian blur to this area, the blur radius can be set to 40% of the preset blur radius (e.g., 4 pixels), while other areas can be blurred using the preset blur radius.

[0077] Assuming the UI component is a vehicle status card, its key information areas include remaining battery power ("85%", green number), driving range ("320km", blue number), tire pressure ("2.4bar", black number), and coolant temperature ("90℃", red number). Therefore, when applying Gaussian blur to this area, the blur radius can be set to 40% of the preset blur radius (e.g., 7 pixels), while other areas can be blurred using the preset blur radius.

[0078] See Figure 12 This is a flowchart illustrating a method for determining the visual effect of a water film coating layer according to an embodiment of this application. Figure 12As shown, the method specifically includes the following steps.

[0079] Step S1201: Determine the static visual effect parameters of the water film coating layer according to the type of UI component. The static visual effect parameters include transparency, blur level and / or refraction level.

[0080] Transparency simulates the ease with which light passes through the water film layer, determining the clarity of UI components viewed through it. Visually, lower transparency makes the water film more transparent, revealing the colors and details of the underlying components; higher transparency makes the water film more murky, resembling solid color occlusion. Blur refers to the intensity of smoothing the image details within the water film layer. Greater blur makes the outlines and textures of the underlying UI components less discernible; less blur preserves more detail. Refraction refers to the pixel offset or geometric distortion of the image when viewing UI components through the water film layer. Refraction simulates the path deflection of light passing through media with different refractive indices. Greater refraction makes the image of the underlying UI components appear more misaligned or distorted, exhibiting the physical distortion seen through a lens or flowing water; less refraction makes the image closer to its original position. By setting these three parameters of the water film coating layer, the visual effects such as the transparency of the water film can be flexibly adjusted to simulate a texture ranging from clear to frosted, thereby meeting diverse UI visual design needs.

[0081] As mentioned above, card-type UI components contain a lot of key information, so clarity should be the primary consideration for card-type UI components; while visual effects should be the primary consideration for application-type UI components.

[0082] In one possible implementation, if the UI component is an application type, then the transparency of the water film wrapping layer is determined to be a first transparency, the blur level to be a fourth blur level, and the refraction level to be a first refraction level; if the UI component is a card type, then the transparency of the water film wrapping layer is determined to be a second transparency, the blur level to be a fifth blur level, and the refraction level to be a second refraction level. Specifically, the first transparency (e.g., 60%-70%) is less than the second transparency (e.g., 70%-80%), the fourth blur level (e.g., a Gaussian blur radius set to 5-8 pixels) is greater than the fifth blur level (e.g., a Gaussian blur radius set to 3-5 pixels), and the first refraction level (e.g., a refractive index of 1.35-1.4) is greater than the second refraction level (e.g., a refractive index of 1.33-1.35).

[0083] It is understandable that by applying different static visual effect parameters to different types of UI components, the UI components can be presented in a differentiated visual manner, so that the texture of the water film coating layer matches its functional attributes, and a user interface with distinct layers can be constructed.

[0084] Of course, those skilled in the art can adjust specific parameters according to actual needs (such as the first degree of refraction being greater than the second degree of refraction), and the embodiments of this application do not impose specific limitations on this.

[0085] In practical applications, to enhance the visual effect at the edge of the water film coating layer, one possible implementation is to create a teardrop-shaped outward expansion visual effect at a second preset position on the water film coating layer, conforming to the surface tension aggregation characteristics of water. The second preset position is where the curvature of the water film coating layer's outline is greater than a preset curvature, such as a corner or edge of the water film coating layer's border. This treatment simulates the physical property of liquids gathering towards the edge under surface tension, enhancing the realistic texture of the water film coating layer by presenting teardrop-shaped protrusions in high-curvature areas.

[0086] In practical applications, to improve the visual effect of the water film coating layer's edge and simultaneously enable interaction with the in-vehicle scene, one possible implementation involves rendering highlights at a second preset position on the water film coating layer. This second preset position is where the curvature of the water film coating layer's outline exceeds a preset curvature, such as a corner or edge of the water film coating layer's border. The highlight intensity is negatively correlated with the vehicle's ambient light intensity; that is, the highlight brightness is increased when the ambient light is weak and decreased when the ambient light is strong.

[0087] For example, if the current light intensity is greater than or equal to 3000 lux, the highlight intensity is 80% of the preset light intensity, used in strong light scenarios to avoid interference with the driver's vision due to excessive brightness or reflection. If the current light intensity is less than or equal to 100 lux, the highlight intensity is 130% of the preset light intensity, used to improve the distinguishability of UI components in low light scenarios at night.

[0088] In practical applications, the aforementioned static visual effect parameters (transparency, refraction, and blurriness) can be adjusted according to the light intensity emanating from the vehicle. For example, transparency can be reduced in strong light scenes, while blurriness and refraction can be reduced in low light scenes. Those skilled in the art can adjust the specific parameter settings according to actual needs, and this application embodiment will not elaborate on this further.

[0089] Of course, those skilled in the art can adjust the position of the above visual effects as needed (such as at the edge where the outline of the water film wrapping layer overlaps with the UI component), and this application embodiment does not impose specific limitations on this.

[0090] See Figure 13 This is a method provided in the embodiments of this application. Figure 3 This is a schematic diagram illustrating the static visual effect of the water film wrapping layer on the shown UI component. (See diagram for example.) Figure 13 As shown, the water film coating layer is in Figure 3 On the UI component shown, a water droplet-shaped outward expansion visual effect and a highlight effect can be seen at the edge where the water film wrapping layer overlaps with the UI component. At the same time, the overlapping area is blurred, which has a good sense of visual hierarchy.

[0091] See Figure 14 This is a method provided in the embodiments of this application. Figure 4 This is a schematic diagram illustrating the static visual effect of the water film wrapping layer on the shown UI component. (See diagram for example.) Figure 14 As shown, the water film coating layer is in Figure 4 On the UI component shown, at the edge where the water film wrapping layer overlaps with the UI component, a water droplet-shaped outward expansion visual effect and a highlight effect can be seen, which has a good visual experience.

[0092] Step S1202: Determine the dynamic visual effect parameters of the water film coating layer based on the vehicle's operating status. The dynamic visual effect parameters include the water film fluctuation amplitude and the water flow trace decay rate.

[0093] The vehicle's operating status can include both a driving state and a stationary state, which can be determined based on the vehicle's current speed. If the vehicle's speed is greater than a first preset speed (e.g., 10 km / h), the vehicle's operating status is determined to be a driving state; if the vehicle's speed is less than a second preset speed (e.g., 0.1 km / h), the vehicle's operating status is determined to be a stationary state.

[0094] The amplitude of water film fluctuation is used to characterize the intensity of the undulations generated on the surface of the water film; the decay rate of water flow traces is used to characterize how quickly the flow texture generated on the surface of the water film disappears over time.

[0095] In one possible implementation, if the vehicle is in motion, the water film undulation amplitude is determined as a first amplitude, and the water flow mark decay rate is determined as a first decay rate; if the vehicle is stationary, the water film undulation amplitude is determined as a second amplitude, and the water flow mark decay rate is determined as a second decay rate. The first amplitude is smaller than the second amplitude, and the first decay rate is greater than the second decay rate. This setting can reduce the interference of dynamic visual effects on the driver's vision during driving, and ensure driving safety by suppressing water film swaying and accelerating the disappearance of visual persistence.

[0096] For example, when the vehicle is stationary, the water film undulation amplitude is set to a radius of 0.4 pixels, and the water flow trace decay rate is 0.5 seconds; while when the vehicle is in motion, the water film undulation amplitude can be reduced by 40%, and the water flow trace decay rate can be set to 0.25 seconds.

[0097] Furthermore, the aforementioned dynamic visual effect parameters can be determined based on the state of the UI component. For example, assuming the current UI component is a music application, the amplitude of the water film ripples can be determined based on the decibel level of the music being played. The amplitude of the water film ripples is positively correlated with the decibel level of the music, thereby enhancing the fun of the scene.

[0098] Furthermore, the state of the UI components and the operating state of the vehicle can be combined to jointly determine the dynamic visual effect parameters of the water film coating layer. Those skilled in the art can set these parameters according to actual needs, and this application will not elaborate further on this.

[0099] Of course, those skilled in the art can adjust the method for determining the dynamic visual effect parameters of the water film coating layer based on the vehicle's operating status according to actual needs, such as directly determining the degree of dynamic visual effect based on vehicle speed. This application does not impose specific limitations on this.

[0100] In practical applications, to improve the scene adaptability of the water-glass effect of UI components, one possible implementation is to determine the color of the water film coating layer based on the vehicle's battery charge. For example, when the battery charge is lower than a preset level (e.g., 20%), the color of the water film coating layer is determined to be light red, thereby visually conveying a low battery warning message to the user through color.

[0101] In practical applications, the interactive effects of the water film coating layer can be configured to improve the user's interaction experience with UI components.

[0102] See Figure 15 This is a flowchart illustrating a method for implementing UI component interaction effects according to an embodiment of this application. Figure 15 As shown, the method specifically includes the following steps.

[0103] Step S1501: Determine the pressure applied based on the user's touch operation on the UI component.

[0104] The pressure applied can be directly collected by the pressure sensor built into the vehicle's infotainment system, or estimated based on changes in the touch contact area. In practical applications, the pressure applied and subsequent operations can be determined when the user touches the interactive area of ​​the UI component.

[0105] Step S1502: Determine the water ripple diffusion effect of the water film coating layer based on the pressure applied.

[0106] The pressure applied is positively correlated with the water ripple effect. That is, the greater the pressure, the wider the water ripple spreads and the more intense the ripple oscillations, thus simulating realistic liquid force feedback. For example, when clicking on an interactive location of a UI component, a water ripple effect centered on the touch point is triggered based on the pressure applied. The maximum diffusion radius adjusts between 5 and 15 pixels as the pressure increases (e.g., a light press produces a small ripple with a radius of 5 pixels, while a heavy press produces a large ripple with a radius of 15 pixels).

[0107] In practical applications, to simulate realistic optical refraction characteristics and enhance the three-dimensionality and immersiveness of UI components, one possible implementation involves determining the refractive offset of the water film coating layer based on the incident angle of ambient light. For example, when ambient light is incident perpendicularly, non-critical information areas are refracted and offset by a preset pixel value (e.g., 0.9 pixels) in a specified direction. When ambient light is incident obliquely at a certain angle (e.g., 45 degrees), the refractive offset increases accordingly with the increase of the incident angle (e.g., increasing to 1.5 pixels), thereby reproducing the visual differences when light passes through media of different thicknesses.

[0108] Of course, those skilled in the art can adjust the above parameters according to actual needs, and the embodiments of this application do not impose specific limitations on this.

[0109] In practical applications, to improve the rendering speed of the water glass effect on UI components in vehicles, one possible implementation is to use layered rendering. Specifically, blurring, water film layer generation, optical refraction calculation, and interactive effect compositing are performed on the UI components sequentially. By decomposing the complex visual effects into multiple independent rendering levels, the computational burden of a single rendering is reduced.

[0110] In practical applications, to improve the rendering speed of the water-glass effect on UI components, a layered rendering strategy can be adopted as one possible implementation. First, background mapping of the UI components is performed, capturing the background image below the UI component in real time (such as the map background of a navigation card or the wallpaper background of an application). To ensure natural edge blending, the sampling range can cover a preset pixel area extending beyond the target outline of the UI component, reserving buffer pixels to avoid black borders and a disjointed appearance due to insufficient edge sampling in subsequent blurring or refraction calculations. Then, rendering is performed sequentially on top of the background mapping layer. This layered rendering operation involves sequentially performing blurring, water film layer generation, optical refraction effects (such as the degree and angle of refraction), and interactive effects (such as water ripple diffusion effects) on the UI components. By decomposing complex visual effects into multiple independent rendering levels, the computational burden of a single rendering is reduced.

[0111] To better illustrate the processing of UI components, the following explanation will be provided in conjunction with specific examples.

[0112] See Figure 16 This is a flowchart illustrating another method for processing a UI component provided in an embodiment of this application. Figure 16 As shown, the method specifically includes the following steps.

[0113] Specifically, the process begins by activating the vehicle's display device to initialize the display system, providing a foundational environment for subsequent UI component processing and rendering. Next, the type of the UI component is determined, such as whether it's a navigation card, music application, vehicle status card, or another type. Then, the target contour data of the UI component is extracted, obtaining its shape, curvature, and other information. Following this, blurring is performed based on the UI component's type, and a water film wrapping process is applied based on the target contour data to generate a wrapping layer with a water film texture. The visual effect parameters of the water film wrapping layer are then determined, such as adjusting the water film fluctuation amplitude and water flow attenuation speed based on the vehicle's operating status, and adjusting static parameters like highlight intensity based on light intensity. Next, the interaction scenarios for the UI component are set, such as determining the pressure applied based on the user's touch operation and triggering the corresponding water ripple diffusion effect. Finally, the UI component with a final water glass-like effect is generated, completing the entire processing flow. The final generated UI components can dynamically adjust visual effect parameters such as the high light intensity of the water film coating layer, the water ripple diffusion effect, and the water film fluctuation amplitude based on real-time light intensity, vehicle operating status, and user touch operations, thereby maintaining a good visual experience and interactive feedback in different scenarios.

[0114] Corresponding to the above embodiments, this application also provides an in-vehicle display device.

[0115] See Figure 17 This is a schematic diagram of the structure of a vehicle-mounted display device provided in an embodiment of this application. Figure 17 As shown, the vehicle-mounted display device 1700 may include a processor 1701, a memory 1702, and a communication unit 1703. These components communicate via one or more buses. Those skilled in the art will understand that the structure of the vehicle-mounted display device shown in the figure does not constitute a limitation on the embodiments of this application. It may be a bus-shaped structure or a star-shaped structure, and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0116] The communication unit 1703 is used to establish a communication channel, so that the vehicle display device can communicate with other devices.

[0117] The processor 1701 serves as the control center of the vehicle-mounted display device. It connects various parts of the display device via interfaces and lines, and executes software programs and / or modules stored in the memory 1702, as well as accessing data stored in the memory, to perform various functions and / or process data for the display device. The processor can be composed of integrated circuits (ICs), such as a single packaged IC or multiple packaged ICs with the same or different functions connected together. For example, the processor 1701 may consist only of a central processing unit (CPU). In this embodiment, the CPU may have a single processing core or include multiple processing cores.

[0118] Memory 1702 is used to store the execution instructions of processor 1701. Memory 1702 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk or optical disk.

[0119] When the execution instructions in memory 1702 are executed by processor 1701, the vehicle display device 1700 is able to perform some or all of the steps in the above method embodiments.

[0120] Corresponding to the above embodiments, this application also provides a vehicle that includes an in-vehicle display device.

[0121] Corresponding to the above embodiments, this application also provides a computer-readable storage medium, wherein the computer-readable storage medium may store a program, wherein when the program runs, it can control the device where the computer-readable storage medium is located to execute some or all of the steps in the above method embodiments. In specific implementation, the computer-readable storage medium may be a magnetic disk, an optical disk, read-only memory (ROM), or random access memory (RAM), etc.

[0122] In this application embodiment, "at least one" refers to one or more, and "more than one" refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent the existence of A alone, the simultaneous existence of A and B, or the existence of B alone. A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects have an "or" relationship. "At least one of the following" and similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, and c can represent: a, b, c, ab, ac, bc, or abc, where a, b, and c can be single or multiple.

[0123] Those skilled in the art will recognize that the units and algorithm steps described in the embodiments disclosed herein can be implemented using electronic hardware, computer software, or a combination of electronic hardware and software. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0124] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0125] In the several embodiments provided in this application, any function, if implemented as a software functional unit and sold or used as an independent product, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0126] The above description is merely a specific embodiment of this application. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the protection scope of this application. The protection scope of this application should be determined by the protection scope of the claims.

Claims

1. A method for processing UI components, characterized in that, Applied to a vehicle, the vehicle including a vehicle-mounted infotainment interface, the vehicle-mounted infotainment interface including UI components, the method includes: A water film wrapping layer is generated based on the target contour data of the UI component. The target contour data is used to characterize the geometric shape features of the target contour of the UI component. The water film wrapping layer matches the geometric shape of the target contour. The water film coating layer is superimposed on the first preset position of the UI component to obtain a UI component with a water glass effect.

2. The method according to claim 1, characterized in that, The target contour data of the UI component includes the curvature and shape of the target contour of the UI component, and the generation of the water film coating layer based on the target contour data of the UI component includes: The thickness of the water film wrapping layer is determined based on the curvature of the target contour of the UI component, wherein the curvature is positively correlated with the thickness of the border. A water film wrapping layer is generated based on the shape of the target outline of the UI component and the thickness of the border.

3. The method according to claim 2, characterized in that, The step of generating a water film wrapping layer based on the shape of the target outline of the UI component and the border thickness includes: The water film generation anchor points are determined based on the curvature and shape of the target contour of the UI component, and the density of the water film generation anchor points is positively correlated with the curvature of the target contour. The water film wrapping layer is generated based on the water film generation anchor point and the border thickness.

4. The method according to claim 1, characterized in that, Also includes: Determine the type of the UI component; If the UI component is of type application, then the overlapping area of ​​the UI component is blurred to the first degree of blurring, and the overlapping area of ​​the UI component is the overlapping area of ​​the UI component and the water film coating layer.

5. The method according to claim 1, characterized in that, Also includes: Obtain the first sub-region and the second sub-region of the overlapping area of ​​the UI component. The contrast of the first sub-region is greater than or equal to the preset contrast, and the contrast of the second sub-region is less than the preset contrast. The overlapping area is the overlapping area of ​​the UI component and the water film coating layer. The first sub-region is subjected to a second degree of blurring, and the second sub-region is subjected to a third degree of blurring, wherein the second degree of blurring is less than the third degree of blurring.

6. The method according to claim 1, characterized in that, Also includes: The static visual effect parameters of the water film coating layer are determined according to the type of the UI component, and the static visual effect parameters include transparency, blur level and / or refraction level. Based on the vehicle's operating status, the dynamic visual effect parameters of the water film coating layer are determined. These dynamic visual effect parameters include the water film fluctuation amplitude and the attenuation rate of the water flow traces.

7. The method according to claim 6, characterized in that, Determining the static visual effect parameters of the water film coating layer based on the type of the UI component includes: If the type of the UI component is an application type, then the transparency of the water film coating layer is determined to be the first transparency, the blur level to be the fourth blur level, and the refraction level to be the first refraction level; If the UI component is a card type, then the transparency of the water film coating layer is determined to be the second transparency, the blur level to be the fifth blur level, and the refraction level to be the second refraction level; Wherein, the first transparency is less than the second transparency, the fourth blur degree is greater than the fifth blur degree, and the first refractive degree is greater than the second refractive degree.

8. The method according to claim 1, characterized in that, Also includes: The pressure applied is determined based on the user's touch input to the UI components. The water ripple diffusion effect of the water film coating layer is determined based on the pressing pressure, and the pressing pressure is positively correlated with the water ripple diffusion effect.

9. The method according to claim 1, characterized in that, Also includes: Highlights are rendered at a second preset position on the water film coating layer. The intensity of the highlights is negatively correlated with the vehicle illumination intensity. The second preset position is the position where the curvature of the outline of the water film coating layer is greater than a preset curvature.

10. A vehicle-mounted display device, characterized in that, include: processor; Memory; And a computer program, wherein the computer program is stored in the memory, and when the computer program is executed by the processor, causes the vehicle display device to perform the method of any one of claims 1 to 9.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the method described in any one of claims 1 to 9.

12. A vehicle, characterized in that, Includes the vehicle display device as shown in claim 10.

Images