CN114115624A - User interface display method and device - Google Patents
User interface display method and device Download PDFInfo
- Publication number
- CN114115624A CN114115624A CN202111426245.7A CN202111426245A CN114115624A CN 114115624 A CN114115624 A CN 114115624A CN 202111426245 A CN202111426245 A CN 202111426245A CN 114115624 A CN114115624 A CN 114115624A
- Authority
- CN
- China
- Prior art keywords
- window
- display
- background image
- background
- user interface
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 80
- 230000008569 process Effects 0.000 claims abstract description 17
- 238000004590 computer program Methods 0.000 claims description 3
- 230000000694 effects Effects 0.000 abstract description 23
- 230000003993 interaction Effects 0.000 abstract description 6
- 238000013459 approach Methods 0.000 abstract description 3
- 238000004891 communication Methods 0.000 description 10
- 238000010586 diagram Methods 0.000 description 8
- 238000012545 processing Methods 0.000 description 8
- 239000005338 frosted glass Substances 0.000 description 7
- 238000005516 engineering process Methods 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 239000005337 ground glass Substances 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
- G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the application provides a user interface display method and a user interface display device, wherein the user interface display method comprises the following steps: acquiring a background image and a reference point of a display area; displaying a first window on the background map; popping up a second window relative to the reference point on the background map and the first window; and in the process that the second window pops up relative to the datum point, the first window moves a first distance close to the datum point and is reduced to a first proportion. When the user interface display method in the steps is adopted for displaying, the new display window pops up relative to the reference point, and meanwhile, the old display window approaches the reference point to a certain degree and shrinks to a certain degree; through the animation cooperation between the new display window and the old new display window, the three-dimensional (3D) display effect can be realized, and the interaction experience of a user interface is improved.
Description
Technical Field
The embodiment of the application relates to the technical field of user interface display, in particular to a user interface display method and device.
Background
The User Interface (abbreviated UI) is a channel through which a User and an electronic device exchange information, the User inputs information to the electronic device through the User Interface and performs operations, and the electronic device provides information to the User through the User Interface for reading, analyzing, and judging.
However, in the related art, when a new window is displayed on the user interface, the display animation is relatively single, and the display effect has certain limitations.
Disclosure of Invention
In view of this, an embodiment of the present application is directed to a method and an apparatus for displaying a user interface.
In a first aspect, an embodiment of the present application provides a user interface display method, including:
acquiring a background image and a reference point of a display area;
displaying a first window on the background map;
popping up a second window relative to the reference point on the background map and the first window; and in the process that the second window pops up relative to the datum point, the first window moves a first distance close to the datum point and is reduced to a first proportion.
When the user interface display method in the steps is adopted for displaying, the new display window pops up relative to the reference point, and meanwhile, the old display window approaches the reference point to a certain degree and shrinks to a certain degree; through the animation cooperation between the new display window and the old new display window, the three-dimensional (3D) display effect can be realized, and the interaction experience of a user interface is improved.
In one possible embodiment, the displaying a first window on the background map includes:
acquiring a background image bitmap corresponding to the background image;
acquiring first position information corresponding to the display position of the first window;
according to the first position information, cutting the background image bitmap to obtain a first background image corresponding to the first window;
obtaining a first filling image by Gaussian blurring of the first background image;
and filling the first window with the first filling graph as a background.
In a possible embodiment, said popping up a second window with respect to said reference point further comprises;
acquiring a background image bitmap corresponding to the background image;
acquiring second position information corresponding to the display position of the second window;
according to the second position information, cutting the background image bitmap to obtain a second background image corresponding to the second window;
obtaining a second filling image by Gaussian blurring of the second background image;
and filling the second window with the second filling graph as a background.
In one possible embodiment, there is an overlapping area between the first window and the second window, and the second window covers the first window in the overlapping area between the first window and the second window.
In a possible implementation manner, in the process of displaying the second window, the first window and the second window have an overlapping area in a first time interval; the display method comprises the following steps:
at the front section in the first time interval, in the overlapping area of the first window and the second window, the first window covers the second window for display;
and at the later stage in the first time interval, in the overlapping area of the first window and the second window, the second window covers the first window for display.
In a possible embodiment, the displaying of the first window by the second window in the overlapping area of the first window and the second window comprises:
sequentially extracting display windows in a window queue and generating a window bitmap corresponding to the display windows;
superposing the window bitmaps to obtain a third background image;
acquiring second position information corresponding to the display position of the second window;
according to the second position information, cutting the third background image to obtain a second background image corresponding to the second window;
obtaining a second filling image by Gaussian blurring of the second background image;
filling the second window with the second filling graph as a background;
the window queue is generated for the background image and the first window according to a display sequence.
In a possible implementation manner, the first window comprises a plurality of sub-windows sequentially displayed on the background image, and at least one of the sub-windows is a control area used for displaying a home page resident control;
the window queue is generated for the background picture and the sub-windows according to a display sequence.
In a possible embodiment, the displaying of the second window by the first window in the overlapping area of the first window and the second window includes:
sequentially extracting display windows in a window queue and generating a window bitmap corresponding to the display windows;
superposing the window bitmaps to obtain a third background image;
acquiring first position information corresponding to the display position of the first window;
according to the first position information, cutting the third background image to obtain a first background image corresponding to the first window;
obtaining a first filling image by Gaussian blurring of the first background image;
filling the first window with the first filling graph as a background;
wherein the window queue is generated for the background map and the second window according to a display order.
In one possible embodiment, the reference point is located on a vertical center line of the display area.
In one possible implementation, the display method includes:
acquiring user position information of a user relative to the display area;
and updating the reference point according to the user position information to enable the reference point to be opposite to the user.
In one possible implementation, the display method further includes: and after the reference point is updated, updating the position of the display window according to the position relation between the display window and the reference point.
In a possible embodiment, the first ratio is greater than 0 and less than 1 and is inversely related to the first distance.
In a second aspect, an embodiment of the present application provides a display device of a user interface, including:
an acquisition module configured to acquire a background map and a reference point of a display area;
a first display module configured to display a first window on the background map;
a second display module configured to pop up a second window with respect to the reference point on the background map and the first window; and in the process that the second window pops up relative to the datum point, the first window moves a first distance close to the datum point and is reduced to a first proportion.
In a third aspect, an embodiment of the present application provides an electronic device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the program, the method according to any one of the embodiments of the first aspect is implemented.
In a fourth aspect, embodiments of the present application provide a non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform the method according to any one of the embodiments of the first aspect.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments or related technologies, the drawings needed to be used in the description of the embodiments or related technologies are briefly introduced below, it is obvious that the drawings in the following description are only examples of the embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.
Fig. 1 is a first flowchart of a user interface display method according to an embodiment of the present disclosure;
fig. 2 is a flowchart of a user interface display method according to an embodiment of the present application;
fig. 3 is a flowchart three of a user interface display method according to an embodiment of the present application;
fig. 4 is a first application scenario diagram provided in the embodiment of the present application;
fig. 5 is a second application scenario diagram provided in the embodiment of the present application;
fig. 6 is a third application scenario diagram provided in the embodiment of the present application;
fig. 7 is a schematic diagram of a user interface display device according to an embodiment of the present application;
fig. 8 is a schematic view of an electronic device according to an embodiment of the present application.
Detailed Description
When a user interface in the related art displays a new window, the display animation is single, and the display effect has certain limitation. In view of this, an embodiment of the present application provides a user interface display method, in the display method, in a process that a new display window pops up relative to a reference point, an old display window displayed on a background image is controlled to move closer to the reference point to a certain extent, and is reduced by a certain proportion, and through cooperation between display actions of the new display window and the old display window, a stereoscopic (3D) display effect is achieved, and interaction experience of a user interface is improved.
In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
The user interface is a channel for information exchange between a user and the electronic equipment, the user inputs information to the electronic equipment through the user interface and operates the electronic equipment, and the electronic equipment provides information for the user through the user interface so as to read, analyze and judge the information.
The embodiment of the application provides a user interface display method, which can be applied to electronic equipment with a display screen and a processor, wherein the processor controls the display of the display screen and realizes information exchange with a user through a user interface displayed on the display screen. The electronic equipment can be a mobile phone, a tablet computer, a notebook computer, an intelligent television, a conference room tablet and the like, and the operating system operated by the electronic equipment can be Android, IOS, macOS, Linux, Windows, Hua-hong-meng system and the like.
As shown in fig. 1, the user interface display method includes:
step S100: acquiring a background image and a reference point of a display area;
the display area is a display area of a display screen in the electronic device, and the background picture is a background picture corresponding to the display area. The reference point is a reference point of the user interface in the animation display process, and can be any point in the display area. In a general case, the reference point may be disposed at a central position of the display area, for example, in a rectangular display area, the reference point may be located at an intersection of two diagonal lines.
In other embodiments, the reference point may be disposed on a vertical center line of the display area, and may be disposed at different heights on the vertical center line according to factors such as the size of the display area, the height of the display area, and the arrangement of the area opposite to the user. For example, for a display area with a larger display size or a higher placement position, the reference point is disposed at a position below the midpoint of the vertical centerline so that the reference point is as high as possible at the same height as the user.
It should be noted that, here, the vertical center line is a center line extending in the vertical direction and located at the middle position of the display area, and the display area is bilaterally symmetric with respect to the vertical center line.
The coordinates of the reference point are usually built in the electronic device and may be read when used.
Step S200: displaying a first window on the background picture;
the first window may be any display window that needs to be displayed on the background map, for example, the first window is a control area for displaying the UI control, and a control that needs to reside in the home page is disposed in the control area.
Step S300: popping up a second window relative to the reference point on the background picture and the first window; during the process of popping up the second window relative to the datum point, the first window moves a first distance close to the datum point and is reduced to a first proportion.
The distance between the second window and the reference point is defined as a second distance, and the pop-up of the second window relative to the reference point means that the window size of the second window gradually increases along with the increase of the second distance in the display process of the second window, namely in the process of being far away from the reference point.
The window size of the first window is controlled to be reduced in the process that the first window moves close to the datum point; the ratio of the reduced window size of the first window to the reduced window size is a first ratio, and the first ratio may be any value greater than 0 and smaller than 1.
The first ratio is generally inversely related to the first distance, i.e., the larger the first window moves closer to the reference point, the smaller the first ratio, the larger the degree of reduction of the first window.
As can be seen from the above description, when the first window is an old display window relative to the second window, and the second window is a new display window relative to the first window, and the display method in steps S100 to S300 is used for displaying, the new display window pops up relative to the reference point, and the old display window approaches the reference point to a certain extent, and is reduced to a certain extent; through the animation cooperation between the new display window and the old new display window, the three-dimensional (3D) display effect can be realized, and the interaction experience of a user interface is improved. Moreover, the implementation method is simple, the 3D display effect can be achieved without depending on a 3D engine in the electronic equipment, and the requirement on the processing capacity is low.
In order to increase the stereoscopic effect of the display window and achieve a more realistic stereoscopic effect, in some embodiments, the first window and the second window are background-filled with a view having a frosted glass effect corresponding to the background view, and based on this, as shown in fig. 2, the step S200 includes:
step S210: acquiring a background image bitmap corresponding to the background image;
the frosted glass effect is realized by adopting Gaussian blur processing on the background picture, and the background with the frosted glass effect is adopted to fill the display window, so that the display window has more stereoscopic impression. The processed picture of the gaussian blur needs to be a Bitmap (Bitmap), so a Bitmap corresponding to the background image needs to be acquired before the gaussian blur processing. The embodiment of the application utilizes ground glass processing class, converts the background picture into a corresponding background picture bitmap, and facilitates subsequent processing.
Step S220: acquiring first position information corresponding to the position of a first window;
in the display area, the position of the first window is different, the background image to be filled is different from the corresponding area in the background image, and in order to acquire the part of the area, corresponding to the first window, in the background image, the position information of the position of the first window, namely the first position information, needs to be determined;
the first position information includes information that can determine where the first window is located and the size of the window shape, and the format of the position information corresponding to display windows of different shapes may be different, for example, for a rectangular display window, the position information typically includes the coordinates and the length and width dimensions of the vertex at the top left corner; for a circular display window, the position information includes coordinates, typically including the center of the circle, and a diameter.
Step S230: according to the first position information, cutting the background image bitmap to obtain a first background image corresponding to the first window;
after the first position information is obtained, the background image bitmap can be cut according to the first position information, and a first background image corresponding to the first window is obtained.
Step S240: obtaining a first filling image by Gaussian blurring of the first background image;
after the first background image is obtained, the first filling image with the frosted glass effect is obtained by carrying out Gaussian blur treatment.
Step S250: and filling the first window with the first filling graph as background.
And filling the first window with a first filling picture with a frosted glass effect as a background.
By the display method described in steps S210 to S250, the filling background of the first window has a frosted glass effect and corresponds to the background map of the position where the filling background is located; therefore, the stereoscopic impression of the first window is increased, and the first window has a better stereoscopic display effect.
In an embodiment where there is no overlapping area between the first window and the second window, as shown in fig. 3, the background filling of the second window comprises the following steps:
step S310: acquiring a background image bitmap corresponding to the background image;
step S320: acquiring second position information corresponding to the display position of the second window;
step S330: according to the second position information, cutting the background image bitmap to obtain a second background image corresponding to the second window;
step S340: carrying out Gaussian blur on the second background image to obtain a second filling image;
step S350: and filling the second window with the second filling graph as background.
The above steps may refer to the descriptions in step S210 to step S250, and are not described herein again.
By the display method described in steps S310 to S350, the filling background of the second window has a frosted glass effect and corresponds to the background map of the position where the filling background is located; therefore, the stereoscopic impression of the second window is increased, and the second window has a better stereoscopic display effect.
In the embodiment that the first window and the second window have the overlapping region, in order to realize a more real stereoscopic effect, the second window covers the first window to display in the overlapping region of the first window and the second window.
The method comprises the steps that view hierarchy management is adopted for achieving the covering display effect, the view hierarchy management is used for recording display windows which pop up in sequence, positions are recorded according to the sequence, and a window queue is generated; when a new display window pops up or a user interface needs to be refreshed, sequentially taking out the display windows from the window queue according to the display sequence, generating a window bitmap corresponding to the display windows, and obtaining an overall bitmap queue; and then overlapping the bitmap queues, and generating a ground glass background image by using ground glass effect processing on the whole. Here, the window bitmap refers to a bitmap of a full screen view corresponding to a hierarchy where a display window is located, and is usually formed by capturing a screen and converting the screen into a bitmap when the display window is displayed.
The method corresponding to the first window and the second window comprises the following steps:
sequentially extracting display windows in the window queue and generating a window bitmap corresponding to the display windows;
superposing the window bitmaps to obtain a third background image;
acquiring second position information corresponding to the display position of the second window;
according to the second position information, cutting the third background image to obtain a second background image corresponding to the second window;
carrying out Gaussian blur on the second background image to obtain a second filling image;
filling the second window with the second filling picture as a background;
the window queue is generated by the background picture and the first window according to the display sequence.
In the above steps, the third background image formed by superimposing the window bitmaps is cut, and the cut third background image is filled into the second window after gaussian blurring, so that the display effect that the second window covers the first window can be realized.
Optionally, the first window includes a plurality of sub-windows sequentially displayed on the background map, and at least one of the sub-windows is a control area for displaying a homepage resident control; correspondingly, the window queue is generated by the background picture and the child window according to the display sequence.
In order to more vividly embody the change process, in the process of displaying the second window, the first window and the second window have overlapping of positions in the first time interval; the display method comprises the following steps:
at the front section in the first time interval, in the overlapping area of the first window and the second window, the first window covers the second window for display;
and at the later stage in the first time interval, the second window covers the first window to display in the overlapping area of the first window and the second window.
The second window covering the first window display may refer to the above description; the method for hiding the display of the second window by the first window comprises the following steps:
sequentially extracting display windows in the window queue and generating a window bitmap corresponding to the display windows;
superposing the window bitmaps to obtain a third background image;
acquiring first position information corresponding to a display position of a first window;
according to the first position information, cutting the third background image to obtain a first background image corresponding to the first window;
obtaining a first filling image by Gaussian blurring of the first background image;
filling the first window with the first filling picture as a background;
the window queue is generated for the background image and the second window according to the display sequence.
So design, through the upper and lower alternative display that covers, can build the visual effect that the second window worn out to first window top from first window bottom, the display effect is more three-dimensional and abundant.
As can be seen from the above description, the reference point is a key reference point displayed on the user interface, and is usually located on the vertical center line of the display area. However, in order to adapt to a larger display size and different users, in some possible embodiments, the position of the reference point is adjustable, and the adjusting method includes:
acquiring user position information of a user relative to a display area;
and updating the reference point according to the user position information to enable the reference point to be opposite to the user.
After the adjustment of the reference point is completed, the position of the display window can be updated according to the position relation between the display window and the reference point.
Here, the user position information of the user with respect to the display area may be acquired by an infrared sensor, an ultrasonic sensor, a camera, or the like.
Fig. 4 to 6 are schematic diagrams of an application scenario provided by an embodiment of the present application, and as shown in fig. 4 to 6, the user interface display method is used for a 110-inch large-sized television home page visual interaction, a display area a of the television is rectangular, a first window B is disposed near a bottom side, the first window B is a control area, and spaces B1, B2, B3, and B4 residing in a home page are disposed side by side; the reference point C is positioned at a position lower than the vertical middle line of the display area A;
referring to fig. 4 and 5, the second window D pops up relative to the reference point C, and the first window B moves close to the reference point C and shrinks; the second window D in the display position covers the first window B for display.
Referring to fig. 5 and 6, after the reference point C moves to the left, the first window B and the second window D also adjust the positions according to the relative position relationship with the reference point C.
It should be noted that the method of the embodiment of the present application may be executed by a single device, such as a computer or a server. The method of the embodiment can also be applied to a distributed scene and completed by the mutual cooperation of a plurality of devices. In such a distributed scenario, one of the multiple devices may only perform one or more steps of the method of the embodiment, and the multiple devices interact with each other to complete the method.
It should be noted that some of the embodiments of the present application have been described above. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments described above and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing may also be possible or may be advantageous.
Based on the same inventive concept, corresponding to the method of any of the above embodiments, the embodiments of the present application further provide a user interface display apparatus, which is characterized by comprising:
referring to fig. 7, the user interface display apparatus includes:
an acquisition module 100 configured to acquire a background map and a reference point of a display area;
a first display module 200 configured to display a first window on the background map;
a second display module 300 configured to pop up a second window with respect to the reference point on the background map and the first window; and in the process that the second window pops up relative to the datum point, the first window moves a first distance close to the datum point and is reduced to a first proportion. .
For convenience of description, the above devices are described as being divided into various modules by functions, and are described separately. Of course, the functions of the modules may be implemented in the same or multiple software and/or hardware when implementing the embodiments of the present application.
The apparatus of the foregoing embodiment is used to implement the corresponding user interface display method in any of the foregoing embodiments, and has the beneficial effects of the corresponding method embodiment, which are not described herein again.
Based on the same inventive concept, corresponding to the method of any embodiment described above, an embodiment of the present application further provides an electronic device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the program, the user interface display method described in any embodiment described above is implemented.
Fig. 8 is a schematic diagram illustrating a more specific hardware structure of an electronic device according to this embodiment, where the electronic device may include: a processor 1010, a memory 1020, an input/output interface 1030, a communication interface 1040, and a bus 1050. Wherein the processor 1010, memory 1020, input/output interface 1030, and communication interface 1040 are communicatively coupled to each other within the device via bus 1050.
The processor 1010 may be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an Application Specific Integrated Circuit (ASIC), or one or more Integrated circuits, and is configured to execute related programs to implement the technical solutions provided in the embodiments of the present disclosure.
The Memory 1020 may be implemented in the form of a ROM (Read Only Memory), a RAM (Random Access Memory), a static storage device, a dynamic storage device, or the like. The memory 1020 may store an operating system and other application programs, and when the technical solution provided by the embodiments of the present specification is implemented by software or firmware, the relevant program codes are stored in the memory 1020 and called to be executed by the processor 1010.
The input/output interface 1030 is used for connecting an input/output module to input and output information. The i/o module may be configured as a component in a device (not shown) or may be external to the device to provide a corresponding function. The input devices may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output devices may include a display, a speaker, a vibrator, an indicator light, etc.
The communication interface 1040 is used for connecting a communication module (not shown in the drawings) to implement communication interaction between the present apparatus and other apparatuses. The communication module can realize communication in a wired mode (such as USB, network cable and the like) and also can realize communication in a wireless mode (such as mobile network, WIFI, Bluetooth and the like).
It should be noted that although the above-mentioned device only shows the processor 1010, the memory 1020, the input/output interface 1030, the communication interface 1040 and the bus 1050, in a specific implementation, the device may also include other components necessary for normal operation. In addition, those skilled in the art will appreciate that the above-described apparatus may also include only those components necessary to implement the embodiments of the present description, and not necessarily all of the components shown in the figures.
The electronic device of the above embodiment is used to implement the corresponding user interface display method in any of the foregoing embodiments, and has the beneficial effects of the corresponding method embodiment, which are not described herein again.
Based on the same inventive concept, corresponding to any of the above-mentioned embodiment methods, the present application also provides a non-transitory computer-readable storage medium storing computer instructions for causing the computer to execute the user interface display method according to any of the above-mentioned embodiments.
Computer-readable media of the present embodiments, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device.
The computer instructions stored in the storage medium of the above embodiment are used to enable the computer to execute the user interface display method according to any of the above embodiments, and have the beneficial effects of the corresponding method embodiment, which are not described herein again.
Those of ordinary skill in the art will understand that: the discussion of any embodiment above is meant to be exemplary only, and is not intended to intimate that the scope of embodiments of the application, including the claims, is limited to those examples; within the context of the embodiments of the present application, features from the above embodiments or from different embodiments may also be combined, steps may be implemented in any order, and there are many other variations of the different aspects of the embodiments of the present application as described above, which are not provided in detail for the sake of brevity.
In addition, well-known power/ground connections to Integrated Circuit (IC) chips and other components may or may not be shown in the provided figures for simplicity of illustration and discussion, and so as not to obscure the embodiments of the application. Furthermore, devices may be shown in block diagram form in order to avoid obscuring embodiments of the application, and this also takes into account the fact that specifics with respect to implementation of such block diagram devices are highly dependent upon the platform within which the embodiments of the application are to be implemented (i.e., specifics should be well within purview of one skilled in the art). Where specific details (e.g., circuits) are set forth in order to describe example embodiments of the present application, it should be apparent to one skilled in the art that the present application embodiments may be practiced without, or with variation of, these specific details. Accordingly, the description is to be regarded as illustrative instead of restrictive.
While the embodiments of the present application have been described in conjunction with specific embodiments thereof, many alternatives, modifications, and variations of these embodiments will be apparent to those skilled in the art in light of the foregoing description. For example, other memory architectures (e.g., dynamic ram (dram)) may use the discussed embodiments.
The present embodiments are intended to embrace all such alternatives, modifications and variances which fall within the broad scope of the appended claims. Therefore, any omissions, modifications, substitutions, improvements, and the like that may be made without departing from the spirit and principles of the embodiments of the present application are intended to be included within the scope of the embodiments of the present application.
Claims (15)
1. A user interface display method, comprising:
acquiring a background image and a reference point of a display area;
displaying a first window on the background map;
popping up a second window relative to the reference point on the background map and the first window; and in the process that the second window pops up relative to the datum point, the first window moves a first distance close to the datum point and is reduced to a first proportion.
2. The method for displaying a user interface according to claim 1, wherein the displaying a first window on the background map comprises:
acquiring a background image bitmap corresponding to the background image;
acquiring first position information corresponding to the display position of the first window;
according to the first position information, cutting the background image bitmap to obtain a first background image corresponding to the first window;
obtaining a first filling image by Gaussian blurring of the first background image;
and filling the first window with the first filling graph as a background.
3. The method of claim 2, wherein said popping up a second window relative to said reference point further comprises;
acquiring a background image bitmap corresponding to the background image;
acquiring second position information corresponding to the display position of the second window;
according to the second position information, cutting the background image bitmap to obtain a second background image corresponding to the second window;
obtaining a second filling image by Gaussian blurring of the second background image;
and filling the second window with the second filling graph as a background.
4. The method for displaying the user interface of claim 2, wherein an overlapping area exists between the first window and the second window, and the second window covers the first window in the overlapping area of the first window and the second window.
5. The method for displaying a user interface of claim 2, wherein in the process of displaying the second window, the first window and the second window have an overlapping area in a first time interval; the display method comprises the following steps:
at the front section in the first time interval, in the overlapping area of the first window and the second window, the first window covers the second window for display;
and at the later stage in the first time interval, in the overlapping area of the first window and the second window, the second window covers the first window for display.
6. The method for displaying the user interface as claimed in claim 4 or 5, wherein the step of displaying the first window in the overlapping area of the first window and the second window by the second window comprises the steps of:
sequentially extracting display windows in a window queue and generating a window bitmap corresponding to the display windows;
superposing the window bitmaps to obtain a third background image;
acquiring second position information corresponding to the display position of the second window;
according to the second position information, cutting the third background image to obtain a second background image corresponding to the second window;
obtaining a second filling image by Gaussian blurring of the second background image;
filling the second window with the second filling graph as a background;
the window queue is generated for the background image and the first window according to a display sequence.
7. The method for displaying a user interface according to claim 6, wherein the first window includes a plurality of sub-windows sequentially displayed on the background map, at least one of the sub-windows being a control area for displaying a home page resident control;
the window queue is generated for the background picture and the sub-windows according to a display sequence.
8. The method for displaying the user interface according to claim 5, wherein the displaying of the second window by the first window is hidden by the first window in an overlapping area of the first window and the second window, and comprises:
sequentially extracting display windows in a window queue and generating a window bitmap corresponding to the display windows;
superposing the window bitmaps to obtain a third background image;
acquiring first position information corresponding to the display position of the first window;
according to the first position information, cutting the third background image to obtain a first background image corresponding to the first window;
obtaining a first filling image by Gaussian blurring of the first background image;
filling the first window with the first filling graph as a background;
wherein the window queue is generated for the background map and the second window according to a display order.
9. The user interface display method of claim 1, wherein the reference point is located on a vertical midline of the display area.
10. The user interface display method according to claim 9, wherein the display method comprises:
acquiring user position information of a user relative to the display area;
and updating the reference point according to the user position information to enable the reference point to be opposite to the user.
11. The user interface display method of claim 10, further comprising: and after the reference point is updated, updating the position of the display window according to the position relation between the display window and the reference point.
12. The method of claim 1, wherein the first ratio is greater than 0 and less than 1 and is inversely related to the first distance.
13. A user interface display device, comprising:
an acquisition module configured to acquire a background map and a reference point of a display area;
a first display module configured to display a first window on the background map;
a second display module configured to pop up a second window with respect to the reference point on the background map and the first window; and in the process that the second window pops up relative to the datum point, the first window moves a first distance close to the datum point and is reduced to a first proportion.
14. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the method of any one of claims 1 to 12 when executing the program.
15. A non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the method of any one of claims 1 to 12.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111426245.7A CN114115624A (en) | 2021-11-25 | 2021-11-25 | User interface display method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111426245.7A CN114115624A (en) | 2021-11-25 | 2021-11-25 | User interface display method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114115624A true CN114115624A (en) | 2022-03-01 |
Family
ID=80370820
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111426245.7A Pending CN114115624A (en) | 2021-11-25 | 2021-11-25 | User interface display method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114115624A (en) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JPH0922340A (en) * | 1995-07-07 | 1997-01-21 | Sharp Corp | Display method for information processor and information processor |
| CN1425151A (en) * | 1999-12-20 | 2003-06-18 | 苹果电脑有限公司 | User interface for providing consolidation and access |
| CN101354628A (en) * | 2007-07-24 | 2009-01-28 | 株式会社Ntt都科摩 | Information processing device and program |
| US20120131495A1 (en) * | 2010-11-23 | 2012-05-24 | Apple Inc. | Browsing and Interacting with Open Windows |
| CN111813469A (en) * | 2020-05-21 | 2020-10-23 | 摩拜(北京)信息技术有限公司 | Information display method and terminal equipment |
| CN113568549A (en) * | 2021-04-20 | 2021-10-29 | 华为技术有限公司 | Graphical interface display method, electronic device, medium, and program product |
| WO2021227770A1 (en) * | 2020-05-14 | 2021-11-18 | 华为技术有限公司 | Application window display method and electronic device |
-
2021
- 2021-11-25 CN CN202111426245.7A patent/CN114115624A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JPH0922340A (en) * | 1995-07-07 | 1997-01-21 | Sharp Corp | Display method for information processor and information processor |
| CN1425151A (en) * | 1999-12-20 | 2003-06-18 | 苹果电脑有限公司 | User interface for providing consolidation and access |
| CN101354628A (en) * | 2007-07-24 | 2009-01-28 | 株式会社Ntt都科摩 | Information processing device and program |
| US20120131495A1 (en) * | 2010-11-23 | 2012-05-24 | Apple Inc. | Browsing and Interacting with Open Windows |
| WO2021227770A1 (en) * | 2020-05-14 | 2021-11-18 | 华为技术有限公司 | Application window display method and electronic device |
| CN111813469A (en) * | 2020-05-21 | 2020-10-23 | 摩拜(北京)信息技术有限公司 | Information display method and terminal equipment |
| CN113568549A (en) * | 2021-04-20 | 2021-10-29 | 华为技术有限公司 | Graphical interface display method, electronic device, medium, and program product |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3274916B1 (en) | Automated three dimensional model generation | |
| US10957093B2 (en) | Scene-based foveated rendering of graphics content | |
| JP4696635B2 (en) | Method, apparatus and program for generating highly condensed summary images of image regions | |
| CN112288665B (en) | Image fusion method and device, storage medium and electronic equipment | |
| US20220230338A1 (en) | Depth image generation method, apparatus, and storage medium and electronic device | |
| CN111311756B (en) | Augmented reality AR display method and related device | |
| KR20160048901A (en) | System and method for determining the extent of a plane in an augmented reality environment | |
| CN110796664B (en) | Image processing method, device, electronic equipment and computer readable storage medium | |
| CN111242908A (en) | Plane detection method and device and plane tracking method and device | |
| CN110740309B (en) | Image display method and device, electronic equipment and storage medium | |
| CN112001923B (en) | Retina image segmentation method and device | |
| CN107766703B (en) | Watermark adding processing method and device and client | |
| CN110619683B (en) | Three-dimensional model adjustment method, device, terminal equipment and storage medium | |
| US20130236117A1 (en) | Apparatus and method for providing blurred image | |
| CN110197459B (en) | Image stylization generation method and device and electronic equipment | |
| US20190318449A1 (en) | Imaging method and apparatus for virtual reality device, and virtual reality device | |
| CN114419322B (en) | Image instance segmentation method and device, electronic equipment and storage medium | |
| US11810336B2 (en) | Object display method and apparatus, electronic device, and computer readable storage medium | |
| CN114115624A (en) | User interface display method and device | |
| KR20230034351A (en) | Face image display method, device, electronic device and storage medium | |
| CN109729285B (en) | Fuse grid special effect generation method and device, electronic equipment and storage medium | |
| US9077963B2 (en) | Systems and methods for generating a depth map and converting two-dimensional data to stereoscopic data | |
| CN107038746B (en) | Information processing method and electronic equipment | |
| CN111626919B (en) | Image synthesis method and device, electronic equipment and computer readable storage medium | |
| CN115714888B (en) | Video generation method, device, equipment and computer readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |