3D button implementation method based on VAPS-XT

Abstract

The invention provides a 3D button implementation method based on VAPS-XT, and the method comprises the steps: designing an initial state style template of a 3D button assembly based on a VAPS-XT project, designing style templates of the 3D button assembly in different display states through employing a VAPS-XT basic control on the basis of the initial state style template of the 3D button assembly, and carrying out the design of the 3D button assembly in different display states through employing a VAPS-XT basic control. A VAPS-XT event component is used for realizing hovering, leaving, pressing and releasing events and response of the 3D button mouse; completing the design of the 3D button assembly, and testing the switching process of the 3D button assembly in different display states; and after the test is passed, designing an application program by using the designed 3D button assembly, and running on a target platform based on the application program. The invention provides a self-defined 3D button implementation mode, and 3D buttons with self-defined styles in different states of hovering, leaving, pressing and releasing can be designed through VAPS-XT according to needs.

Description

Technical Field

[0001] The present invention relates to the field of human-machine interface development, and more specifically, to a 3D button implementation method based on VAPS-XT. Background Art

[0002] As a professional graphical human-machine interface development tool, VAPS-XT builds virtual cockpits for aviation and aerospace in defense applications, and is also widely used in the automotive industry, medical and manufacturing industries. In human-machine interaction, the display of 3D buttons is particularly important for judging whether a button is touched.

[0003] In the human-machine interface developed based on VAPS-XT, most buttons are implemented using the button controls that come with VAPS-XT, which have a fixed and single style and cannot provide richer button effects. Summary of the invention

[0004] The present invention aims at solving the technical problems in the prior art and provides a 3D button implementation method based on VAPS-XT, comprising:

[0005] Step 1, create a VAPS-XT project;

[0006] Step 2, designing an initial state style template of the 3D button component based on the VAPS-XT project, and using the VAPS-XT basic control to design style templates of the 3D button component in different display states, the different display states including hover state, leave state, press state and release state;

[0007] Step 3, use VAPS-XT event component to implement 3D button mouse hover, leave, press, release events and responses;

[0008] Step 4, complete the design of the 3D button component, and test the switching process of the 3D button component under different display states;

[0009] Step 5, after the test is passed, use the designed 3D button component to design an application and run it on the target platform based on the application.

[0010] Based on the above technical solution, the present invention can also make the following improvements.

[0011] Optionally, in step 2, an initial state style template of a 3D button component is designed based on the VAPS-XT project, including:

[0012] The initial state style template of the 3D button component is designed using VAPS-XT basic graphic elements, wherein the basic graphic elements include line, circle, ellipse, triangle, rectangle and polygon.

[0013] Optionally, in step 2, based on the initial state style template of the 3D button component, the style templates of the 3D button component in different display states are designed using the VAPS-XT basic control, including:

[0014] On the basis of the initial state style template of the 3D button component, the colors of different parts are set to achieve the light and dark shadow display effects of the 3D button in different display states. Different display effects correspond to different display states. The display states of the 3D button component include hovering display state, releasing display state, entering display state, pressing display state and leaving display state.

[0015] Optionally, in step 3, use the VAPS-XT event component to implement 3D button mouse hover, leave, press, and release events and responses, including:

[0016] Use the RectActiveArea component to capture mouse events;

[0017] According to different captured mouse events and in accordance with the style templates of the 3D button components with different designed display states, the local color and position of the 3D button components are modified to realize the switching of the display states.

[0018] Optionally, the use of the RectActiveArea component to capture mouse events includes:

[0019] An area is provided in the RectActiveArea component, the RectActiveArea component covers the designed 3D button component, and the mouse event is bound to different display states of the 3D button component in the area;

[0020] Provide an external button event interface for the 3D button component, add hover, leave, press, and release events to the project event table of the 3D button component, and associate them with the mouse events captured by the RectActiveArea component.

[0021] Optionally, the method of modifying the local color and position of the 3D button component according to different captured mouse events and the style templates of the 3D button components in different display states to switch the display states includes:

[0022] According to the captured mouse events, the fill colors of different parts of the 3D button component and the display positions of different parts of the 3D button component are modified according to the style templates of the designed display states of the 3D button component, so as to achieve different display effects of the 3D button component.

[0023] The present invention provides a VAPS-XT-based 3D button implementation method, which can design a custom-style 3D button with different states of hovering, leaving, pressing, and releasing through VAPS-XT as needed, and can implement different styles of 3D buttons. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 A flow chart of a 3D button implementation method based on VAPS-XT provided by the present invention;

[0025] Figure 2 An overall flow chart of a 3D button implementation method based on VAPS-XT provided by the present invention;

[0026] Figure 3 This is the hover state effect diagram of the drawn 3D button;

[0027] Figure 4 This is the rendering of the 3D button entering the state;

[0028] Figure 5 The 3D button pressed state effect diagram drawn;

[0029] Figure 6 The released state effect diagram of the drawn 3D button;

[0030] Figure 7 The present invention is a flowchart of the specific steps of a 3D button implementation method based on VAPS-XT according to a specific embodiment of the present invention. DETAILED DESCRIPTION

[0031] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments in the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention. In addition, the technical features in the various embodiments or single embodiments provided by the present invention can be arbitrarily combined with each other to form a feasible technical solution. This combination is not subject to the constraints of the sequence of steps and / or the structural composition mode, but must be based on the ability of ordinary technicians in this field to achieve. When the combination of technical solutions is contradictory or cannot be achieved, it should be considered that such a combination of technical solutions does not exist and is not within the scope of protection required by the present invention.

[0032] During the interaction of some cockpit display systems, it is necessary to clarify whether the button enters the button area, leaves the button area, is pressed, or is lifted. The display effect of the button needs to be consistent with the display style of the entire system, rather than using the fixed button style provided by VAPS-XT.

[0033] In the graphical interface designed using VAPS-XT, it was found that the button components provided by VAPS-XT had the following problems:

[0034] Button component: cannot provide 3D display effect;

[0035] PushButton component: provides a fixed 3D button style, cannot provide hover and leave display states, the shape style cannot be changed, and cannot be integrated with the designed system.

[0036] Based on this, the present invention provides a 3D button implementation method based on VAPS-XT, aiming to provide a 3D button implementation method with a more comprehensive custom style, which can help to develop a 3D button component with more functions in the human-computer interaction interface developed by VAPS-XT.

[0037] like Figure 1 As shown, the 3D button implementation method based on VAPS-XT provided by the present invention mainly includes the following steps:

[0038] Step 1, create a VAPS-XT project;

[0039] Step 2: Design an initial state style template for the 3D button component based on the VAPS-XT project. Based on the initial state style template for the 3D button component, use the VAPS-XT basic control to design style templates for the 3D button component in different display states, including hover state, leave state, press state, and release state.

[0040] It is understandable that a VAPS-XT project is created, a button style draft is designed according to the requirements, the actual style of the draft is designed through the basic components of the VAPS-XT tool, and then the actual style of the button draft based on the created basic components of the VAPS-XT tool is called the initial state style template of the 3D button component, and then the initial state style templates of the 3D button component with different display states are designed based on the initial state style template. Figure 2 A 3D button template designed for hover state. Figure 3 Designed 3D button template for the release state. Figure 4 Designed 3D button template for entry state. Figure 5 A 3D button template for the designed away state.

[0041] Among them, when designing the initial state style template of the 3D button component, the VAPS-XT basic graphics, lines, circles, ellipses, triangles, rectangles, polygons, etc. are used to design the initial state style of the 3D button component. Then, on the basis of the initial state style of the 3D button component, the colors of different parts are set to achieve light and dark shadow effects. Different display effects correspond to different display states, that is, 3D button components with different display states are designed.

[0042] Step 3: Use VAPS-XT event component to implement 3D button mouse hover, leave, press, release events and responses.

[0043] It is understandable that the style templates of the 3D button components in different display states are designed in step 2. When the button is clicked by the mouse, the corresponding display state of the 3D button component is realized based on the triggering event of the mouse, and the current display state is switched.

[0044] Specifically, the RectActiveArea component is used to capture mouse events. The RectActiveArea component provides an area in which mouse events can be captured. The component is overlaid with the designed 3D button component, and the mouse events in the area can be bound to the 3D button component.

[0045] Provide an external button event interface for the designed 3D button component. Add hover, leave, press, and release events to the button's project event table, and associate them with the mouse events captured by the RectActiveArea component.

[0046] Use the Internal Transition graphical interface of VAPS-XT to capture mouse events in the button area and implement the button response mechanism.

[0047] The specific response mechanism is: by capturing different mouse events, according to the designed 3D button display state template, modify the fill color of different parts of the designed button component and the display position of different parts of the button. The display effect of the 3D button is achieved by changing the local color and position of the button component.

[0048] Step 4, complete the design of the 3D button component, and test the switching process of the 3D button component under different display states.

[0049] It is understandable that after the 3D button component is designed, the switching of the 3D button component in different display states and the response process of the mouse events are tested to verify whether the design can achieve different display effects of the 3D button component.

[0050] Step 5, after the test is passed, use the designed 3D button component to design an application and run it on the target platform based on the application.

[0051] It is understandable that, when the test is passed, the design will generate a target code, and the target code will be run on the target platform to achieve different display effects of the 3D button component.

[0052] The present invention is implemented in a specific way in the development environment of FT2000 / 4 in Kylin V10, and its specific flow chart is as follows: Figure 6 As shown:

[0053] (1) Create a VAPS-XT root project and create a Graphical Object subproject in the root project. This subproject is similar to a class in C++.

[0054] (2) The Graphical Object sub-item is an encapsulated object. Add the properties that need to be provided to the outside in the property list, and add the events that need to be provided to the outside in the event list. Here, add the hover (ButtonEnterEvt), leave (ButtonMoveEvt), press (ButtonPressEvt), and release (ButtonReleaseEvt) events.

[0055] (3) Design a 3D button style template. Based on the designed 3D button style template, use the basic graphic components provided by VAPS-XT, such as lines, circles, ellipses, triangles, rectangles, and polygons, to design a 3D button style. The designed 3D button style is as follows Figure 1 shown.

[0056] (4) Use the RectActiveArea component to capture mouse events. The RectActiveArea component provides an area where mouse events can be captured. Cover the designed button with this component, and the mouse events in this area can be bound to the button.

[0057] (5) Use the Internal Transition graphical interface of VAPS-XT to capture mouse events in the button area and the corresponding response mechanism. Capture different mouse events and modify the fill colors of different parts of the designed button component to achieve a 3D button display effect.

[0058] (6) Associate button events and provide them to the outside. In the Internal Transition graphics interface of VAPS-XT, complete the capture of the RectActiveArea mouse event and call the event created in step 2 in the corresponding response mechanism to complete the provision of custom button response events to the outside.

[0059] (7) Drag and drop the Text component to the button position to provide text information for the button.

[0060] (8) Simulation test: Run the test Graphical Object project in the development environment to confirm that the target effect is achieved. At this time, the 3D button becomes a basic component.

[0061] (9) Create a Format project and enter the graphic canvas design interface. Drag the GraphicalObject project completed in the previous step directly to the graphic canvas interface. Use the designed 3D button to drag and drop four Label controls to display the current status of the button.

[0062] (10) Use the Internal Transition graphical interface of VAPS-XT to set the response mechanism associated with the button's hover event to modify the label name of label1 to button hover, set the response mechanism associated with the button's leave event to modify the label name of label2 to button leave, set the response mechanism associated with the button's press event to modify the label name of label3 to button press, and set the response mechanism associated with the button's release event to modify the label name of label4 to button release.

[0063] (11) Simulation test: Run the test Format project in the development environment to confirm whether the target effect is achieved.

[0064] (12) Code generation: Use the CodeGen tool to generate the target code based on Kirin V10.

[0065] (13) Compile and run on the Kylin V10 target machine. Use the mouse to control the button. The button changes the color of each area according to the mouse operation, and the label control modifies the corresponding label name.

[0066] The present invention provides a 3D button implementation method based on VAPS-XT, which fills the deficiency that the VAPS-XT button cannot modify the style, provides more possibilities for the button implementation of VAPS-XT, and can design its own unique button according to the designed system style, thereby improving the overall aesthetics of the page.

[0067] The 3D button implemented by the present invention realizes a variety of interactive effects, such as hovering, leaving, pressing, releasing, etc., and realizes a 3D display effect by switching the colors of different areas of the designed button. Compared with traditional flat buttons, it has more visual impact and enhances the user's sense of participation and interactive experience.

[0068] It should be noted that in the above embodiments, the description of each embodiment has its own emphasis, and for parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0069] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0070] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded computer, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0071] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0072] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0073] Although the preferred embodiments of the present invention have been described, those skilled in the art may make other changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0074] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.

Claims

1. A 3D button implementation method based on VAPS-XT, characterized in that: include: Step 1, create a VAPS-XT project; Step 2, designing an initial state style template of the 3D button component based on the VAPS-XT project, and using the VAPS-XT basic control to design style templates of the 3D button component in different display states, the different display states including hover state, leave state, press state and release state; Step 3, use VAPS-XT event component to implement 3D button mouse hover, leave, press, release events and responses; Step 4, complete the design of the 3D button component, and test the switching process of the 3D button component under different display states; Step 5, after the test is passed, use the designed 3D button component to design an application and run it on the target platform based on the application.

2. The 3D button implementation method based on VAPS-XT according to claim 1, characterized in that: In step 2, an initial state style template of the 3D button component is designed based on the VAPS-XT project, including: The initial state style template of the 3D button component is designed using VAPS-XT basic graphic elements, wherein the basic graphic elements include line, circle, ellipse, triangle, rectangle and polygon.

3. The 3D button implementation method based on VAPS-XT according to claim 2, characterized in that: In step 2, based on the initial state style template of the 3D button component, the style templates of the 3D button component in different display states are designed using the VAPS-XT basic control, including: On the basis of the initial state style template of the 3D button component, the colors of different parts are set to achieve the light and dark shadow display effects of the 3D button in different display states. Different display effects correspond to different display states. The display states of the 3D button component include hovering display state, releasing display state, entering display state, pressing display state and leaving display state.

4. The 3D button implementation method based on VAPS-XT according to claim 1, characterized in that: Step 3: Use VAPS-XT event component to implement 3D button mouse hover, leave, press, release events and responses, including: Use the RectActiveArea component to capture mouse events; According to different captured mouse events and in accordance with the style templates of the 3D button components with different designed display states, the local color and position of the 3D button components are modified to realize the switching of the display states.

5. The 3D button implementation method of VAPS-XT according to claim 3, characterized in that: The use of the RectActiveArea component to capture mouse events includes: An area is provided in the RectActiveArea component, the RectActiveArea component covers the designed 3D button component, and the mouse event is bound to different display states of the 3D button component in the area; Provide an external button event interface for the 3D button component, add hover, leave, press, and release events to the project event table of the 3D button component, and associate them with the mouse events captured by the RectActiveArea component.

6. The 3D button implementation method of VAPS-XT according to claim 5, characterized in that: The method of modifying the local color and position of the 3D button component according to the captured different mouse events and the style templates of the 3D button component in different display states to switch the display state includes: According to the captured mouse events, the fill colors of different parts of the 3D button component and the display positions of different parts of the 3D button component are modified according to the style templates of the designed display states of the 3D button component, so as to achieve different display effects of the 3D button component.

Images