XAML-based UI image display method, terminal and storage medium

Abstract

The present invention provides a UI image display method based on XAML, a terminal and a storage medium, and the UI image display method based on XAML includes: S101: generating a bitmap based on XAML code and storing the bitmap; S102: displaying the stored bitmap based on a control, and after the business logic of the control is changed, judging whether the bitmap meets the display requirements, if so, displaying the bitmap according to the control, if not, executing S101. The present invention improves the display effect of the UI interface, reduces the learning difficulty, and by pre-storing the bitmap required by the control, greatly reduces the computing resources occupied by the UI interface display, improves the display speed and device adaptability, and meets the user needs.

Description

Technical Field

[0001] The present invention relates to the field of UI interface display, and in particular to a XAML-based UI image display method, terminal and storage medium. Background Art

[0002] In the current industrial control environment, many intelligent systems used to manage and control machines are equipped with specialized hardware, so in many cases, the available computing resources are limited. However, the vivid and intuitive display of the UI interface of the intelligent system is an important component.

[0003] In the current Windows system, the technologies used to handle this problem include GDI, WPF, browsers, etc. Since smart devices in industrial environments are more computationally intensive than rendering intensive, the only technology currently available is GDI.

[0004] However, GDI technology has a long learning cycle and many technical features. If you want to present complex graphics, the required algorithms are complex and the amount of code is large. Some special graphics are almost impossible to draw, making it difficult to meet actual needs. Summary of the invention

[0005] In order to overcome the shortcomings of the prior art, the present invention proposes a UI image display method, terminal and storage medium based on XAML, which draws the images required for the UI interface in the form of XAML code. Compared with GDI technology, it is simple to operate and has a small amount of code, and can be used to draw various special graphics, thereby improving the display effect of the UI interface and reducing the learning difficulty. In addition, by pre-storing the bitmaps required by the controls, the computing resources occupied by the UI interface display are greatly reduced, the display speed and device adaptability are improved, and user needs are met.

[0006] To solve the above problems, a technical solution adopted by the present invention is: a UI image display method based on XAML, and the UI image display method based on XAML includes: S101: obtaining the XAML code of the graphic based on the control, generating a bitmap according to the XAML code, and storing the bitmap; S102: displaying the stored bitmap based on the control, and after the business logic of the control is changed, determining whether the bitmap meets the display requirements, if so, displaying the bitmap according to the control, if not, executing S101.

[0007] Furthermore, the step of obtaining the XAML code of the graphics based on the control specifically includes: obtaining the type of the control to be loaded and the presentation content, and determining whether the type and presentation content meet the first preset condition; if so, when loading the control, obtaining the graphics requirements corresponding to the control, and combining the original graphics XAML code based on the graphics requirements and grammatical rules to form the XAML code of the graphics; if not, before loading the control, editing the original graphics XAML code according to the control, and combining the original graphics XAML code according to the graphics requirements and grammatical rules corresponding to the control to form the XAML code of the graphics.

[0008] Furthermore, the step of generating a bitmap according to the XAML code specifically includes: loading a WPF engine, converting the XAML code into a bitmap through the WPF engine, and when the type of the control is a non-regular control, marking the area in the bitmap that does not display the image with a color.

[0009] Furthermore, after the step of marking the area in the bitmap that does not display the image with color, the method further includes: after storing the bitmap, removing the color-marked area in the bitmap, determining the remaining area as the presentation area of ​​the control, and loading the control.

[0010] Furthermore, the business logic includes at least one of a control size, a control state, and a presentation area.

[0011] Furthermore, the step of determining whether the bitmap meets the display requirements specifically includes: obtaining the changed business logic, and determining whether the stored bitmap meets the display requirements based on the business logic, the control type, and the presentation content.

[0012] Furthermore, the step of performing bitmap display according to the control specifically includes: selecting a corresponding bitmap for display or adjusting the size and position of the displayed bitmap according to the changed business logic.

[0013] Furthermore, after the step of performing bitmap display according to the control, the step further includes: acquiring undisplayed content on the UI interface, and drawing the undisplayed content through a graphics device interface.

[0014] Based on the same inventive concept, the present invention also proposes an intelligent terminal, which includes a processor and a memory, wherein the memory stores a computer program, the processor is communicatively connected to the memory, and the processor executes the XAML-based UI image display method as described above through the computer program.

[0015] Based on the same inventive concept, the present invention further proposes a computer-readable storage medium, wherein the computer-readable storage medium stores program data, and the program data is used to execute the XAML-based UI image display method as described above.

[0016] Compared with the prior art, the beneficial effects of the present invention are: drawing the images required for the UI interface in the form of XAML code is simple to operate and requires less code than GDI technology, and can be used to draw various special graphics, thereby improving the display effect of the UI interface and reducing the learning difficulty. In addition, by pre-storing the bitmaps required for the controls, the computing resources occupied by the UI interface display are greatly reduced, the display speed and device adaptability are improved, and user needs are met. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 It is a flowchart of an embodiment of a UI image display method based on XAML of the present invention;

[0018] Figure 2 This is a structural diagram of an embodiment of a smart terminal of the present invention;

[0019] Figure 3 This is a structural diagram of an embodiment of a computer-readable storage medium of the present invention. DETAILED DESCRIPTION

[0020] The following describes the implementation methods of the present application through specific specific examples, and those skilled in the art can easily understand other advantages and effects of the present application from the contents disclosed in this specification. The present application can also be implemented or applied through other different specific implementation methods, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present application. It should be noted that the various embodiments of the present disclosure generally described and shown in the accompanying drawings here can be combined with each other without conflict, and the structural components or functional modules therein can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present disclosure provided in the accompanying drawings is not intended to limit the scope of the present disclosure claimed for protection, but merely represents the selected embodiments of the present disclosure. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in the field without making creative work belong to the scope of protection of the present disclosure.

[0021] The terms used in the disclosure of this application are for the purpose of describing specific embodiments only and are not intended to limit the disclosure. The singular forms "a", "the" and "the" used in the disclosure and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term "and / or" used herein refers to and includes any or all possible combinations of one or more associated listed items.

[0022] See also Figure 1 ,in, Figure 1 This is a flow chart of an embodiment of a XAML-based UI image display method of the present invention. Figure 1 The XAML-based UI image display method of the present invention is described.

[0023] In this embodiment, the device that executes the XAML-based UI image display method is a smart terminal, which can be a mobile phone, a tablet computer, a notebook computer, a server, or other devices capable of displaying a UI interface.

[0024] In this embodiment, the XAML-based UI image display method executed by the intelligent terminal includes:

[0025] S101: Obtaining XAML code of the graphic based on the control, generating a bitmap according to the XAML code, and storing the bitmap.

[0026] In this embodiment, the step of obtaining the XAML code of the graphic based on the control specifically includes: obtaining the type and presentation content of the control to be loaded, and judging whether the type and presentation content meet the first preset condition; if so, when loading the control, obtaining the graphic requirements corresponding to the control, and combining the original graphic XAML code based on the graphic requirements and grammatical rules to form the XAML code of the graphic; if not, before loading the control, editing the original graphic XAML code according to the control, and combining the original graphic XAML code based on the graphic requirements and grammatical rules corresponding to the control to form the XAML code of the graphic. Among them, the graphic requirements include requirements such as the presentation area position, shape, and presentation content.

[0027] In this embodiment, the types of controls include non-rectangular regular controls, rectangular regular controls, and controls without non-rectangular rendering requirements, and the rendering content includes pictures and animations. If the type of the control to be loaded is a control without non-rectangular rendering requirements, and the rendering content is a picture, it is determined that the first preset condition is met. Among them, the controls without non-rectangular rendering requirements include controls whose appearance is not changed by the control state change, controls whose appearance is changed by the state change, and controls whose appearance is changed by the control size.

[0028] In this embodiment, the input XAML code is debugged and edited by a WPF editor or SVG browser or other related tools to obtain the original graphic XAML code. The original graphic XAML code can be pre-existing in the intelligent terminal, and the generation efficiency of the graphic XAML code is improved by pre-storing.

[0029] In a specific embodiment, if the first preset condition is met, when loading the control, the original graphic XAML code is grammatically spliced ​​according to the actual graphic requirements corresponding to the control and the XAML grammar rules and dynamic combination to obtain the graphic XAML code.

[0030] In another specific embodiment, if it is determined that the first preset condition is not met, the control is not loaded first, and the graphic requirements corresponding to the control are obtained first to determine the original graphic XAML code that needs to be edited, and then the original graphic XAML code is grammatically spliced ​​according to the actual graphic requirements corresponding to the control and the XAML grammar rules and dynamic combination forms to obtain the XAML code of the graphic.

[0031] In the above embodiment, in order to further reduce the amount of calculation and improve the efficiency of graphic presentation, when obtaining the XAML code of the graphic, it is ensured that the XAML code of all graphics that can be displayed by the control when it is actually displayed is obtained. In addition, when generating the XAML code of the graphic, it is also determined whether the graphic has been stored. If so, the XAML code of the graphic is not generated.

[0032] In this embodiment, the step of generating a bitmap according to the XAML code specifically includes: loading the WPF engine, converting the XAML code into a bitmap through the WPF engine, and marking the area in the bitmap where the image is not displayed with a color when the type of the control is a non-regular control. The area where the image is not displayed is marked with a color different from the image display area of ​​the bitmap.

[0033] Furthermore, after the step of marking the area in the bitmap that does not display the image with a color, the method further includes: after storing the bitmap, removing the color-marked area in the bitmap, determining the remaining area as the rendering area of ​​the control, and loading the control.

[0034] In a specific embodiment, DrawingVisual (WPF engine) or WPF renderer is used to draw a vector image, and BmpBitmapEncoder is used to convert the WPF vector image into a bitmap.

[0035] In this embodiment, when storing the bitmap, an index of each bitmap is generated, and the index and the bitmap are stored in a specified storage location, which can be stored in the memory of the smart terminal or in a storage control such as a server, hard disk, or cloud disk connected to the smart terminal.

[0036] S102: Display the stored bitmap based on the control, and after the business logic of the control is changed, determine whether the bitmap meets the display requirements. If so, display the bitmap according to the control; if not, execute S101.

[0037] In this embodiment, a bitmap in a corresponding state is selected from the stored bitmaps for display according to the state of the control, display requirements, etc. The bitmap may be at least one of an appearance picture, a photo, and an animation.

[0038] In this embodiment, the business logic includes at least one of the size of the control, the state of the control, and the presentation area, wherein the stored bitmap corresponds to the business logic of the control, the control type, and the presentation content.

[0039] In this embodiment, the step of determining whether the bitmap meets the display requirements specifically includes: obtaining the changed business logic, and determining whether the stored bitmap meets the display requirements based on the business logic, the control type, and the presentation content.

[0040] The step of displaying the bitmap according to the control specifically includes: selecting the corresponding bitmap for display or adjusting the size and position of the displayed bitmap according to the changed business logic.

[0041] The following describes the specific process of the smart terminal judging whether the business logic meets the requirements through the graphic display process of different types of controls under different business logics and presentation contents.

[0042] In a specific embodiment, the control type is a control without non-rectangular requirements, wherein, for controls whose appearance is not changed by the change of the control state. S101 is executed when the control is loaded. The bitmap is then presented using the stored bitmap (the presented bitmap is displayed on the screen through the UI layout). When the size of the control changes. The stored graphics are used to zoom in or out for presentation. For controls whose appearance is changed by the change of state (the states include disabled, available, active, inactive, mouse over, pressed, etc.), step S101 is executed when the control is loaded to generate appearance pictures of different states. The subsequent presentation uses the pictures of the corresponding state from the stored pictures according to the different states of the control. When the size of the control changes, the pictures of the corresponding state are used from the stored pictures according to the state of the control to zoom in or zoom in for presentation. For controls whose appearance is changed by the size of the control, when the size of the control changes, the stored pictures are deleted, and S101 is executed to generate and store the appearance pictures of the different states of the current size of the control. The subsequent presentation uses the appearance pictures of the corresponding state to present according to the different states of the control. Among them, when executing S101, the above three controls directly generate the XAML code of the graphic according to the XAML code of the original graphic.

[0043] In another specific embodiment, the type of the control is a non-rectangular irregular control, and S101 is executed before the control is loaded. In addition, when the XAML code of the graphic is generated, the color of the area that does not need to be displayed is described as a color (Cx) that is different from other parts through the code. The required photos are generated and stored in combination with the actual needs of the control. After excluding the color (Cx) area from the stored photos, an irregular area Region without (Cx) color will be obtained. The Region is used as the rendering area of ​​the control and maintained until its size changes. When presenting, the photos of the corresponding state are selected from the stored photos for presentation according to the different states of the control. When the size changes or the presentation area changes, S101 is executed again, and the corresponding photos are selected from the generated and stored photos for presentation.

[0044] In another specific embodiment, when the content to be presented is an animation, for a control of a rectangular regular control type, before loading the control, S101 is executed to store photos of frames corresponding to the animation of the control in various states. In combination with the state of the control, photos of corresponding states and frames are selected from the storage for presentation. When different frames are switched, the corresponding photos are selected for presentation.

[0045] For a control of a non-rectangular irregular control type, before loading the control, execute S101, and when generating the XAML code of the graphic, describe the color of the area that does not need to be displayed as a color (Cx) that is different from other parts through the code. Generate and store the required photos in combination with the actual needs of the control. After excluding the color (Cx) area from the stored photos, an irregular area Region without (Cx) color will be obtained. Use the Region as the rendering area of ​​the control and present the corresponding photos. When switching between different frames, repeatedly obtain the rendering area of ​​the control, and present the photos corresponding to the switched frame number through the rendering area.

[0046] In this embodiment, after the step of performing bitmap display according to the control, the step further includes: acquiring undisplayed content on the UI interface, and drawing the undisplayed content through a graphics device interface.

[0047] Specifically, for information that needs to change in real time and needs to be displayed with uncertain rules, such as characters and numbers on controls used to display the internal running information of the program, traditional GDI (Graphics Device Interface) technology is used to execute GDI drawing after the control completes the graphic display.

[0048] The present invention uses graphics to calculate the area Region to be presented by the control. When the size of the control changes, it must be recalculated (based on the pixel points of the graphics, the color that belongs to the hollow mark is removed, and the non-hollow color is marked in the Region object as part of the control on the screen display area, so that the display area of ​​the control can be freely edited). In addition, in order to reduce the steps of regenerating photos, the generation of photos required by the control is completed at one time when the control is loaded. For controls that have no special requirements for the presentation area, image scaling is used as much as possible to meet the requirements. When generating, the smallest possible photo of the control is generated to ensure that the control presentation achieves an undistorted effect when scaling. Comprehensively consider the balance of the control's requirements for size, state, area, and animation. For example, controls that display animations do not support the regeneration of photos for size changes as much as possible, and do not support the regeneration of photos for state changes to reduce the size of the control; for controls that require the display area to display animations, the boundaries of each frame of animation are made consistent, so that when the size of the control changes, the control area Region can be recalculated once; for controls that have requirements for the display area and state, the frequency of their size changes is reduced as much as possible. For photos stored in the same type of controls, use the memory uniqueness feature as much as possible (generate and store the same photo only once), so that the same type of controls use only one image storage, and the relevant steps of generating photos are only once, so as to maximize the photo sharing rate. In addition, when presenting animations, control the frame rate of the animation as much as possible, because this is just an interactive control rather than a video playback, so the animation is sufficient to illustrate the information.

[0049] Based on the same inventive concept, the present invention also proposes an intelligent terminal, see Figure 2 , Figure 2 This is a structural diagram of an embodiment of the intelligent terminal of the present invention, combined with Figure 2 The intelligent terminal of the present invention is described in detail.

[0050] In this embodiment, the intelligent terminal includes a processor and a memory, the memory stores a computer program, the processor is communicatively connected with the memory, and the processor executes the XAML-based UI image display method as described in the above embodiment through the computer program.

[0051] In some embodiments, the memory may include, but is not limited to, high-speed random access memory, non-volatile memory. For example, one or more disk storage devices, flash memory devices, or other non-volatile solid-state storage devices. The processor may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it may also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA), or other programmable functional devices, discrete gates or transistor functional devices, discrete hardware components.

[0052] Based on the same inventive concept, the present invention also provides a computer-readable storage medium, see Figure 3 , Figure 3 The structure diagram of an embodiment of the computer readable storage medium of the present invention is shown in FIG. Figure 3 The computer-readable storage medium of the present invention is described.

[0053] In this embodiment, a computer-readable storage medium stores program data, and the program data is used to execute the XAML-based UI image display method as described in the above embodiment.

[0054] The computer-readable storage medium may include, but is not limited to, a floppy disk, an optical disk, a CD-ROM (compact disk-read only memory), a magneto-optical disk, a ROM (read only memory), a RAM (random access memory), an EPROM (erasable programmable read-only memory), an EEPROM (electrically erasable programmable read-only memory), a magnetic card or an optical card, a flash memory, or other types of media / machine-readable media suitable for storing machine-executable instructions. The computer-readable storage medium may be a product that is not connected to a computer device, or a component that is connected to a computer device for use.

[0055] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0056] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present invention. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to the embodiments shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A UI image display method based on XAML, characterized in that: The XAML-based UI image display method includes: S101: obtaining XAML code of a graphic based on a control, generating a bitmap according to the XAML code, and storing the bitmap; when storing the bitmap, generating an index of each bitmap, and storing the index of each bitmap and the corresponding bitmap in a designated storage location; the step of generating a bitmap according to the XAML code specifically includes: loading a WPF engine, converting the XAML code into a bitmap through the WPF engine, and when the type of the control is a non-regular control, marking the area in the bitmap that does not display the image with a color; The step of obtaining the XAML code of the graphic based on the control specifically includes: Obtain the type of the control to be loaded and the presentation content, and determine whether the type and presentation content meet the first preset condition; when the type of the control to be loaded is a control without non-rectangular presentation requirements, and the presentation content is a picture, it is determined that the first preset condition is met; controls without non-rectangular presentation requirements include controls whose appearance is not changed by changes in the control state, controls whose appearance is changed by changes in the state, and controls whose appearance is changed by changes in the control size; graphic requirements include presentation area position, shape and presentation content; presentation content includes pictures and animations; control types include non-rectangular regular controls, rectangular regular controls, and controls without non-rectangular presentation requirements; If so, when loading the control, the actual graphic requirement corresponding to the control is obtained, and the original graphic XAML code is grammatically spliced ​​based on the actual graphic requirement corresponding to the control, XAML grammar rules, and dynamic combination to form the XAML code of the graphic; If not, before loading the control, the original graphic XAML code is edited according to the control, and the original graphic XAML code is grammatically spliced ​​according to the graphic requirements corresponding to the control, XAML grammar rules and the form of dynamic combination to form the graphic XAML code; S102: Displaying the stored bitmap based on the control, and after the business logic of the control is changed, determining whether the bitmap meets the display requirements, if so, displaying the bitmap according to the control, if not, executing S101.

2. The XAML-based UI image display method according to claim 1, characterized in that: After the step of marking the area in the bitmap where no image is displayed with a color, the following step is further performed: After storing the bitmap, the color-marked area in the bitmap is removed, the remaining area is determined as the rendering area of ​​the control, and the control is loaded.

3. The XAML-based UI image display method according to claim 1, characterized in that: The business logic includes at least one of control size, control state, and presentation area.

4. The XAML-based UI image display method according to claim 3, wherein the step of determining whether the bitmap meets the display requirements specifically comprises: Get the changed business logic, and determine whether the stored bitmap meets the display requirements based on the business logic, control type, and presentation content.

5. The XAML-based UI image display method according to claim 1, characterized in that: The step of performing bitmap display according to the control specifically includes: According to the changed business logic, a corresponding bitmap is selected for display or the size and position of the displayed bitmap are adjusted.

6. The XAML-based UI image display method according to claim 1, characterized in that: After the step of performing bitmap display according to the control, the following steps are further included: Obtain undisplayed content on the UI interface, and draw the undisplayed content through a graphics device interface.

7. An intelligent terminal, characterized in that: The intelligent terminal includes a processor and a memory, the memory stores a computer program, the processor is communicatively connected to the memory, and the processor executes the XAML-based UI image display method according to any one of claims 1 to 6 through the computer program.

8. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores program data, and the program data is used to execute the XAML-based UI image display method according to any one of claims 1 to 6.

Images