CN108108417B - Cross-platform adaptive control interaction method, system, equipment and storage medium - Google Patents
Cross-platform adaptive control interaction method, system, equipment and storage medium Download PDFInfo
- Publication number
- CN108108417B CN108108417B CN201711340458.1A CN201711340458A CN108108417B CN 108108417 B CN108108417 B CN 108108417B CN 201711340458 A CN201711340458 A CN 201711340458A CN 108108417 B CN108108417 B CN 108108417B
- Authority
- CN
- China
- Prior art keywords
- display
- level menu
- style
- menu bar
- trigger signal
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides an interaction method, a system, equipment and a storage medium for cross-platform self-adaptive control, which are used for a display terminal with a display page and comprise the following steps: presetting a display page into a first display style and a second display style, wherein the display page comprises a menu bar and a display area, and the menu bar is preset into a storage style and an expansion style which can be switched according to a first trigger signal; the method comprises the steps of obtaining the size of a display screen of a display terminal, displaying a first display style on a display page when the size of the display screen is larger than or equal to a preset size threshold, displaying a second display style on the display page when the size of the display screen is smaller than the preset size threshold, displaying a containing style on a menu bar, and switching to the expanding style according to a first trigger signal. According to the invention, the display page is preset into the first display style and the second display style, so that various size changes from the mobile segment to the desktop end display can be compatible, and the development and maintenance cost of the webpage is reduced.
Description
Technical Field
The invention relates to webpage display, in particular to an interaction method, a system, equipment and a storage medium for cross-platform adaptive control.
Background
With the increasing of the display content and the page hierarchy of the website data report pages, the operation on the tablet devices with different screen sizes needs to be compatible. With the increasing requirements of users on system interaction experience, the problem of consistency of cross-platform operation experience brought along with the system interaction experience is more and more obvious.
In order to improve the operation experience of users, websites generally adopt a response design mode or a separate design mode for tablet devices. But the response type design mode can not control the folding display of the multi-level menu items, and the problem of sub-page jump highlight can not be controlled; the development and maintenance cost of the independently designed flat web page is high, and the experience consistency cannot be guaranteed. Therefore, a technical solution for displaying a web page is needed, which is compatible with the size change of the display screen from the flat panel to the desktop display, and simultaneously, optimized display of menu folding of the second-level sub-page is needed.
Disclosure of Invention
In view of the problems in the prior art, an object of the present invention is to provide an interactive method, system, device and storage medium for cross-platform adaptive control.
According to an aspect of the present invention, there is provided a cross-platform adaptive control interaction method for a display terminal having a display page, including: the method comprises the following steps:
s1: presetting the display page into a first display mode and a second display mode, wherein the display page comprises a menu bar and a display area, the menu bar is preset into a receiving mode and an expanding mode which can be switched according to a first trigger signal, when the display page shows the first display mode, the menu bar presents the receiving mode, and when the display page shows the second display mode, the menu bar presents the expanding mode;
s2: acquiring the size of a display screen of a display terminal, wherein when the size of the display screen is greater than or equal to a preset size threshold, a display page displays a first display style, a menu bar displays an expansion style, when the size of the display screen is less than the preset size threshold, the display page displays a second display style, the menu bar displays a storage style and can be switched to the expansion style according to a first trigger signal, the width of the expansion style of the menu bar is greater than that of the storage style of the menu bar, the display terminal has a horizontal screen display state and a vertical screen display state, and the first trigger signal is generated when the display terminal is detected to be switched from the vertical screen display state to the horizontal screen display state;
s3: when the menu bar shows the expansion style, a plurality of first-level menu items which are sequentially arranged on the menu bar are triggered according to a second trigger signal, at least one first-level menu item comprises a plurality of second-level menu items which are sequentially arranged, and when the second trigger signal triggers one first-level menu item with the second-level menu items, the first-level menu items are sequentially expanded along the direction deviating from the first-level menu items.
Preferably, when the display terminal is in the landscape display state or the portrait display state, the display terminal has a first moving direction and a second moving direction, the first moving direction and the second moving direction are opposite, the menu bar is close to the first moving direction relative to the display area, and the display area is close to the second moving direction relative to the menu bar;
when the motion sensor of the display terminal captures that the display terminal moves towards the second motion direction at a first acceleration and a first time, then the display terminal moves towards the first motion direction at a second acceleration and a second time, the difference value between the first acceleration and the second acceleration is smaller than a preset acceleration threshold value, and the difference value between the first time and the second time is smaller than a preset time threshold value, the first trigger signal is generated, so that the menu bar is switched from the receiving mode to the expanding mode.
Preferably, when the display screen is smaller than a preset size threshold, the first trigger signal is generated by:
establishing a coordinate system by taking the center of the display page as an origin, the length direction as an X axis and the width direction as a Y axis, wherein the menu bar is displayed in a negative axis area of the X axis, and a plurality of first-level menu items are sequentially arranged along the Y axis;
acquiring a head image of a user by a camera of the display terminal within a preset time to generate a plurality of first target images, aligning the center of each first target image with the origin of the coordinate system, wherein the length direction is parallel to the X axis, and the width direction is parallel to the Y axis;
the method comprises the steps of identifying an eye area of each first target image, determining a first coordinate range of the eye area, and generating a first trigger signal when the first coordinate ranges of the eye areas of a plurality of first target images present negative movement to the X axis in time sequence from morning to evening and the movement distance is larger than a preset first threshold value.
Preferably, when the display screen is smaller than a preset size threshold, the second trigger signal is generated by:
collecting first reference images when users focus on first-level menu items arranged at a first position in the menu bar, wherein the center of each first reference image is aligned with the origin of the coordinate system, the length direction is parallel to the X-axis, the width direction is parallel to the Y-axis, identifying the eye area of each first reference image, determining a second coordinate range of the eye area of each first reference image, and corresponding the Y coordinate range of the second coordinate range to the Y coordinate range of a third coordinate range of the first-level menu items at the first position;
collecting a second reference image when the user focuses on a first-level menu item arranged at the last position in the menu bar, wherein the center of the second reference image is aligned with the origin of the coordinate system, the length direction is parallel to the X axis, the width direction is parallel to the Y axis, identifying the eye area of each second reference image, determining a fourth coordinate range of the eye area of the second reference image, and corresponding the Y coordinate range of the fourth coordinate range to the Y coordinate range of a fifth coordinate range of the first-level menu item at the last position;
equally dividing the Y coordinate range between the third coordinate range and the fifth coordinate range according to the number between the first-level menu item and the last-level menu item, and further generating a Y coordinate range corresponding to each first-level menu item one by one according to the Y coordinate ranges of the first-level menu item and the last-level menu item;
when a camera of the display terminal collects the head portrait of the user to generate a second target image, aligning the center of the second target image with the origin of the coordinate system, wherein the length direction is parallel to the X axial direction, and the width direction is parallel to the Y axial direction;
identifying the eye area of the second target image, determining the Y coordinate range of the eye area of the second target image, solving the overlapping interval of the Y coordinate range of the eye area of the second target image and the Y coordinate range corresponding to each first-level menu item one by one, selecting the first-level menu item with the largest overlapping interval, and generating a second trigger signal of the first-level menu item with the largest overlapping interval.
Preferably, when the menu bar is in an expanded mode, the menu bar displays names and identifications of the first-level menu items; and when the menu bar is in a storage mode, the menu bar only displays the identification of the first-level menu item.
Preferably, the first level menu items and the second level menu items have a first presentation color; the first level menu items and the second level menu items are configured to a second presentation color when the first level menu items and the second level menu items are triggered.
Preferably, when the first-level menu item includes a plurality of second-level menu items arranged in sequence, the first-level menu item is provided with a first attribute mark and a second attribute mark;
when the first-level menu item is not triggered, the first-level menu item shows the first attribute mark;
when a plurality of second-level menu items of the first-level menu items are opened, the first-level menu items show the second attribute tags.
The invention also provides an interactive system for cross-platform adaptive control, which is used for realizing the interactive method for cross-platform adaptive control and comprises the following steps:
the display style presetting module comprises: the display page comprises a menu bar and a display area, the menu bar is preset to be a receiving mode and an expanding mode which can be switched according to a first trigger signal, when the display page shows the first display mode, the menu bar presents the receiving mode, and when the display page shows the second display mode, the menu bar presents the expanding mode;
the first trigger signal execution module: the method comprises the steps that the size of a display screen of a display terminal is obtained, when the size of the display screen is larger than or equal to a preset size threshold, a display page displays a first display style, a menu bar displays an expansion style, when the size of the display screen is smaller than the preset size threshold, the display page displays a second display style, the menu bar displays a storage style and can be switched to the expansion style according to a first trigger signal, the width of the expansion style of the menu bar is larger than that of the storage style of the menu bar, when the size of the display screen is smaller than the preset size threshold, the display terminal has a horizontal screen display state and a vertical screen display state, and when the fact that the display terminal is switched from the vertical screen display state to the horizontal screen display state is detected, the first trigger signal is generated;
the second trigger signal execution module: when the menu bar shows the expansion style, a plurality of first-level menu items which are sequentially arranged on the menu bar are triggered according to a second trigger signal, at least one first-level menu item comprises a plurality of second-level menu items which are sequentially arranged, and when the second trigger signal triggers one first-level menu item with the second-level menu items, the first-level menu items are sequentially expanded along the direction deviating from the first-level menu items.
The invention also provides an interactive device for cross-platform adaptive control, which comprises:
a processor;
a memory having stored therein executable instructions of the processor;
wherein the processor is configured to perform the steps of the cross-platform adaptive control interaction method via execution of the executable instructions.
The present invention also provides a computer readable storage medium for storing a program which, when executed, implements the steps of the interactive method for cross-platform adaptive control.
Compared with the prior art, the invention has the following advantages:
according to the method, a browser or application software at the desktop end is enabled to display a second display style when a first display style of a display page is under a small-size screen, such as a tablet, a mobile phone and other mobile devices browse the page, namely the display page of the browser or application software is automatically switched into an icon menu mode with a narrower width and a menu mode switching button is displayed, when a user triggers a second-level menu to enter sub-page browsing through a trigger signal, a plurality of second-level sub-menus under the first-level classification menu are automatically expanded, the current sub-menu is positioned to enable the sub-menu to be displayed in a highlighted mode, and therefore the user can operate the menu at the desktop end or the tablet end, and the situation that the menu is displayed incompletely or the highlighted second-level sub-menu cannot be displayed is avoided; according to the invention, the display page is preset into the first display style and the second display style, so that various size changes from the mobile segment to the desktop end display can be compatible, and the development and maintenance cost of the webpage is reduced.
Drawings
Other features, objects and advantages of the present invention will become more apparent upon reading of the following detailed description of non-limiting embodiments thereof, with reference to the accompanying drawings.
FIG. 1 is a flow chart of the steps of an interactive method of cross-platform adaptive control according to the present invention;
FIG. 2 is a diagram illustrating a display page showing a first display style in an embodiment of the present invention;
FIG. 3 is a diagram illustrating a second display style of a display page in an embodiment of the invention;
FIG. 4 is a diagram illustrating a first display style of a display page according to an alternative embodiment of the present invention;
FIG. 5 is a diagram illustrating a second display style of a display page according to an alternative embodiment of the present invention;
FIG. 6 is a block diagram of an interactive system for cross-platform adaptive control according to the present invention;
FIG. 7 is a schematic structural diagram of an interactive device for cross-platform adaptive control according to the present invention; and
fig. 8 is a schematic structural diagram of a computer-readable storage medium according to the present invention.
Detailed Description
Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of example embodiments to those skilled in the art. The same reference numerals in the drawings denote the same or similar structures, and thus their repetitive description will be omitted.
Fig. 1 is a flowchart of steps of an interaction method for cross-platform adaptive control according to the present invention, and as shown in fig. 1, the interaction method for cross-platform adaptive control provided by the present invention is applied to a display terminal having a display page, and includes: the method comprises the following steps:
s1: the display page is preset to be a first display mode and a second display mode, the display page comprises a menu bar and a display area, the menu bar is preset to be a storage mode and an expansion mode which can be switched according to a first trigger signal, when the display page displays the first display mode, the menu bar presents the storage mode, and when the display page displays the second display mode, the menu bar presents the expansion mode.
When the menu bar is in an expansion mode, the menu bar displays names, marks, propaganda icons and the like of the first-level menu items; when the menu bar is in the storage mode, the menu bar only displays the identification of the first-level menu item. In the present embodiment, the menu bar presents a container style, and the width of the menu bar is 40 pixels. The menu bar presents an expansion style, and the width of the menu bar is 200 pixels. In a modification, a ratio of a width of the menu bar presentation accommodating pattern to a width of the menu bar presentation expanding pattern may be 1: 4 or 1: 3, etc.
S2: the method comprises the steps of obtaining the size of a display screen of a display terminal, displaying a first display style on a display page when the size of the display screen is larger than or equal to a preset size threshold, displaying an expansion style on a menu bar, displaying a second display style on the display page when the size of the display screen is smaller than the preset size threshold, displaying a storage style on the menu bar, switching to the expansion style according to a first trigger signal, enabling the width of the expansion style on the menu bar to be larger than the width of the storage style on the menu bar, enabling the display terminal to have a horizontal screen display state and a vertical screen display state, and generating the first trigger signal when the display terminal is detected to be switched from the vertical screen display state to the horizontal screen display state.
In this embodiment, the preset size threshold is 1280 pixels. The display terminal is mobile devices such as tablet personal computers and smart phones, and in order to keep the display page to face the user at the best angle all the time, the display effect of the vertical screen display state is often not as good as that of the horizontal screen display state, the menu bar is stored to improve the display effect when the vertical screen display is performed, and the menu bar is expanded again when the horizontal screen display is performed, so that the user can operate the display terminal conveniently.
S3: when the menu bar shows the expansion mode, a plurality of first-level menu items which are sequentially arranged on the menu bar are triggered according to a second trigger signal, at least one first-level menu item comprises a plurality of second-level menu items which are sequentially arranged, and when one first-level menu item with the second-level menu items is triggered by the second trigger signal, the first-level menu items are sequentially expanded along the direction deviating from the first-level menu items.
In the present embodiment, the first level menu item and the second level menu item have a first presentation color; when the first level menu items and the second level menu items are triggered, the first level menu items and the second level menu items are configured in a second presentation color, i.e., highlighted, to mark the triggered first level menu items and second level menu items. In this embodiment, the first display color is gray, and the second display color is blue, but not limited thereto. Under a display visual angle, a plurality of first-level menu items are positioned at the left end of the display page and sequentially extend along the width direction of the display page.
When the first-level menu item comprises a plurality of second-level menu items which are sequentially arranged, the first-level menu item is provided with a first attribute mark and a second attribute mark;
when the first-level menu item is not triggered, the first-level menu item shows a first attribute mark, and the first attribute mark is specifically a downward arrow; when a plurality of second-level menu items of the first-level menu items are opened, the first-level menu items show second attribute marks, and the first attribute marks are specifically upward arrows.
When the display terminal is in the horizontal screen display state or the vertical screen display state, the display terminal is provided with a first movement direction and a second movement direction, the first movement direction and the second movement direction are opposite, the menu bar is close to the first movement direction relative to the display area, and the display area is close to the second movement direction relative to the menu bar;
the first movement direction and the second movement direction are directions extending along the width or length direction of the mobile phone. When the display terminal moves towards the second movement direction, the menu bar moves towards the display area, and when the display terminal moves towards the first movement direction, the display area moves towards the menu bar.
Fig. 2 is a schematic diagram illustrating a display page showing a first display style in the embodiment of the present invention, where a menu bar is in a storage state. When the motion sensor of the display terminal captures that the display terminal moves towards the second movement direction at the first acceleration and the first time, then the display terminal moves towards the first movement direction at the second acceleration and the second time, the difference value between the first acceleration and the second acceleration is smaller than the preset acceleration threshold, and the difference value between the first time and the second time is smaller than the preset time threshold, a first trigger signal is generated, so that the menu bar is switched from the receiving mode to the expanding mode, as shown in fig. 3, a schematic diagram of the display page showing the second display mode in the embodiment of the invention. In the present embodiment, the time threshold is 0.5S. The acceleration threshold is 0.1m/s2
Fig. 4 is a schematic diagram of a display page showing a first display style in the modified embodiment of the present invention, and fig. 5 is a schematic diagram of a display page showing a second display style in the modified embodiment of the present invention. As shown in fig. 4, 5, the triggering process of the first trigger signal is demonstrated. When the display screen is smaller than the preset size threshold, the first trigger signal is generated by the following steps:
establishing a coordinate system by taking the center of a display page as an origin, the length direction as an X axis and the width direction as a Y axis, displaying a menu bar in a negative axis area of the X axis, and sequentially arranging a plurality of first-level menu items along the Y axis; at this time, the display terminal is displayed in a landscape state.
Acquiring a head image of a user by a camera of a display terminal within a preset time to generate a plurality of first target images, aligning the center of each first target image with the origin of a coordinate system, wherein the length direction is parallel to the X axial direction, and the width direction is parallel to the Y axial direction;
the method comprises the steps of identifying an eye area of each first target image, determining a first coordinate range of the eye area, and generating a first trigger signal when the first coordinate ranges of the eye areas of the plurality of first target images display negative movement towards the X axis in time sequence from morning to evening and the movement distance is larger than a preset first threshold value.
When a user wants to trigger a menu bar located in the negative axis area of the X axis, the user can slowly turn the gaze to the negative axis area of the X axis and move along the X axis, at the moment, the head portrait of the user is collected through the camera, and when the tendency that the user moves to the negative axis area of the X axis is analyzed through the image, the menu bar is triggered to be switched from the storage mode to the expansion mode.
When the display screen is smaller than the preset size threshold, the second trigger signal is generated by the following steps:
collecting first reference images when users focus on first-level menu items arranged in a first place in a menu bar, wherein the center of each first reference image is aligned with the origin of a coordinate system, the length direction is parallel to the X-axis direction, the width direction is parallel to the Y-axis direction, the eye area of each first reference image is identified, the second coordinate range of the eye area of each first reference image is determined, and the Y coordinate range of the second coordinate range corresponds to the Y coordinate range of the third coordinate range of the first-level menu items of the first place;
collecting a second reference image when the user focuses on the last first-level menu item in the menu bar, wherein the center of the second reference image is aligned with the origin of a coordinate system, the length direction is parallel to the X-axis direction, the width direction is parallel to the Y-axis direction, identifying the eye area of each second reference image, determining the fourth coordinate range of the eye area of the second reference image, and corresponding the Y coordinate range of the fourth coordinate range to the Y coordinate range of the fifth coordinate range of the last first-level menu item;
equally dividing a Y coordinate range between a third coordinate range and a fifth coordinate range according to the number between the first-order menu item and the last-order menu item, and further generating a Y coordinate range corresponding to each first-order menu item one by one according to the Y coordinate ranges of the first-order menu item and the last-order menu item;
when a camera of the display terminal collects a head portrait of a user to generate a second target image, aligning the center of the second target image with the origin of a coordinate system, wherein the length direction is parallel to the X axial direction, and the width direction is parallel to the Y axial direction;
identifying the eye area of the second target image, determining the Y coordinate range of the eye area of the second target image, solving the overlapping interval of the Y coordinate range of the eye area of the second target image and the Y coordinate range corresponding to each first-level menu item one by one, selecting the first-level menu item with the largest overlapping interval, and generating a second trigger signal of the first-level menu item with the largest overlapping interval.
That is, in the present embodiment, the Y-coordinate range of each first-level menu item is one-to-one corresponding to the range in which the user's eyes move along the Y-axis, so that each first-level menu item is triggered by capturing the moving direction of the user's eyes along the Y-axis when the menu bar is expanded.
Fig. 6 is a schematic block diagram of an interactive system for cross-platform adaptive control according to the present invention, and as shown in fig. 6, the present invention further provides an interactive system for cross-platform adaptive control, which is used for implementing the interactive method for cross-platform adaptive control shown in fig. 1, and includes:
the display style presetting module comprises: the display page comprises a menu bar and a display area, the menu bar is preset to be a storage type and an expansion type which can be switched according to a first trigger signal, when the display page displays the first display type, the menu bar presents the storage type, and when the display page displays the second display type, the menu bar presents the expansion type;
the first trigger signal execution module: the method comprises the steps that the size of a display screen of a display terminal is obtained, when the size of the display screen is larger than or equal to a preset size threshold value, a display page displays a first display style, a menu bar displays an expansion style, when the size of the display screen is smaller than the preset size threshold value, the display page displays a second display style, the menu bar displays a containing style, the display screen can be switched to the expansion style according to a first trigger signal, the width of the expansion style of the menu bar is larger than that of the containing style of the menu bar, when the size of the display screen is smaller than the preset size threshold value, the display terminal has a horizontal screen display state and a vertical screen display state, and when the fact that the display terminal is switched from the vertical screen display state to the horizontal screen display state is detected, the first trigger signal is;
the second trigger signal execution module: when the menu bar shows the expansion mode, a plurality of first-level menu items which are sequentially arranged on the menu bar are triggered according to a second trigger signal, at least one first-level menu item comprises a plurality of second-level menu items which are sequentially arranged, and when one first-level menu item with the second-level menu items is triggered by the second trigger signal, the first-level menu items are sequentially expanded along the direction deviating from the first-level menu items.
The embodiment of the invention also provides cross-platform self-adaptive control interaction equipment, which comprises a processor. A memory having stored therein executable instructions of the processor. Wherein the processor is configured to perform the steps of the cross-platform adaptive control interactive method via execution of executable instructions.
As described above, the embodiment enables the first display style and the second display style preset in the display page to be compatible with various size changes from the mobile segment to the desktop display, and reduces the cost for developing and maintaining the web page.
As will be appreciated by one skilled in the art, aspects of the present invention may be embodied as a system, method or program product. Thus, various aspects of the invention may be embodied in the form of: an entirely hardware embodiment, an entirely software embodiment (including firmware, microcode, etc.) or an embodiment combining hardware and software aspects that may all generally be referred to herein as a "circuit," module "or" platform.
Fig. 7 is a schematic structural diagram of the interactive device for cross-platform adaptive control according to the present invention. An electronic device 600 according to this embodiment of the invention is described below with reference to fig. 7. The electronic device 600 shown in fig. 7 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present invention.
As shown in fig. 7, the electronic device 600 is embodied in the form of a general purpose computing device. The components of the electronic device 600 may include, but are not limited to: at least one processing unit 610, at least one memory unit 620, a bus 630 connecting the different platform components (including the memory unit 620 and the processing unit 610), a display unit 640, etc.
Wherein the storage unit stores program code executable by the processing unit 610 to cause the processing unit 610 to perform steps according to various exemplary embodiments of the present invention described in the above-mentioned electronic prescription flow processing method section of the present specification. For example, processing unit 610 may perform the steps as shown in fig. 1.
The storage unit 620 may include readable media in the form of volatile memory units, such as a random access memory unit (RAM)6201 and/or a cache memory unit 6202, and may further include a read-only memory unit (ROM) 6203.
The memory unit 620 may also include a program/utility 6204 having a set (at least one) of program modules 6205, such program modules 6205 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which, or some combination thereof, may comprise an implementation of a network environment.
The embodiment of the invention also provides a computer readable storage medium for storing a program, and the program realizes the steps of the interactive method of cross-platform adaptive control when being executed. In some possible embodiments, the aspects of the present invention may also be implemented in the form of a program product comprising program code for causing a terminal device to perform the steps according to various exemplary embodiments of the present invention described in the above-mentioned electronic prescription flow processing method section of this specification, when the program product is run on the terminal device.
As shown above, when the program of the computer-readable storage medium of this embodiment is executed, the first display style and the second display style preset in the display page can be compatible with various size changes from the mobile segment to the desktop display, and the development and maintenance costs of the web page are reduced.
Fig. 8 is a schematic structural diagram of a computer-readable storage medium of the present invention. Referring to fig. 8, a program product 800 for implementing the above method according to an embodiment of the present invention is described, which may employ a portable compact disc read only memory (CD-ROM) and include program code, and may be run on a terminal device, such as a personal computer. However, the program product of the present invention is not limited in this regard and, in the present document, a readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
A computer readable storage medium may include a propagated data signal with readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A readable storage medium may also be any readable medium that is not a readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
Program code for carrying out operations of the present invention may be written in any combination of one or more programming languages, including AN object oriented programming language such as Java, C + +, or the like, as well as conventional procedural programming languages, such as the "C" language or similar programming languages.
According to the method, a browser or application software at the desktop end is enabled to display a second display style when a first display style of a display page is under a small-size screen, such as a tablet, a mobile phone and other mobile devices browse the page, namely the display page of the browser or application software is automatically switched into an icon menu mode with a narrower width and a menu mode switching button is displayed, when a user triggers a second-level menu to enter sub-page browsing through a trigger signal, a plurality of second-level sub-menus under the first-level classification menu are automatically expanded, the current sub-menu is positioned to enable the sub-menu to be displayed in a highlighted mode, and therefore the user can operate the menu at the desktop end or the tablet end, and the situation that the menu is displayed incompletely or the highlighted second-level sub-menu cannot be displayed is avoided; according to the invention, the display page is preset into the first display style and the second display style, so that various size changes from the mobile segment to the desktop end display can be compatible, and the development and maintenance cost of the webpage is reduced.
The foregoing is a more detailed description of the invention in connection with specific preferred embodiments and it is not intended that the invention be limited to these specific details. For those skilled in the art to which the invention pertains, several simple deductions or substitutions can be made without departing from the spirit of the invention, and all shall be considered as belonging to the protection scope of the invention.
Claims (9)
1. An interactive method for cross-platform adaptive control, which is used for a display terminal with a display page, comprises the following steps: the method comprises the following steps:
s1: presetting the display page into a first display mode and a second display mode, wherein the display page comprises a menu bar and a display area, the menu bar is preset into a storage mode and an expansion mode which can be switched according to a first trigger signal, when the display page displays the first display mode, the menu bar presents the expansion mode, and when the display page displays the second display mode, the menu bar presents the storage mode;
s2: acquiring the size of a display screen of a display terminal, wherein when the size of the display screen is greater than or equal to a preset size threshold, a display page displays a first display style, a menu bar displays an expansion style, when the size of the display screen is less than the preset size threshold, the display page displays a second display style, the menu bar displays a storage style and can be switched to the expansion style according to a first trigger signal, the width of the expansion style of the menu bar is greater than that of the storage style of the menu bar, the display terminal has a horizontal screen display state and a vertical screen display state, and the first trigger signal is generated when the display terminal is detected to be switched from the vertical screen display state to the horizontal screen display state;
s3: when the menu bar shows an expansion style, triggering a plurality of first-level menu items which are sequentially arranged on the menu bar according to a second trigger signal, wherein at least one first-level menu item comprises a plurality of second-level menu items which are sequentially arranged, and when the second trigger signal triggers one first-level menu item with the second-level menu items, the first-level menu items are sequentially expanded along the direction deviating from the first-level menu item;
when the display terminal is in a horizontal screen display state or a vertical screen display state, the display terminal has a first moving direction and a second moving direction, the first moving direction and the second moving direction are opposite, the menu bar is close to the first moving direction relative to the display area, and the display area is close to the second moving direction relative to the menu bar;
when the motion sensor of the display terminal captures that the display terminal moves towards the second motion direction at a first acceleration and a first time, then the display terminal moves towards the first motion direction at a second acceleration and a second time, the difference value between the first acceleration and the second acceleration is smaller than a preset acceleration threshold value, and the difference value between the first time and the second time is smaller than a preset time threshold value, the first trigger signal is generated, so that the menu bar is switched from the receiving mode to the expanding mode.
2. The interactive method for cross-platform adaptive control according to claim 1, wherein: when the display screen is smaller than a preset size threshold, the first trigger signal is generated by the following steps:
establishing a coordinate system by taking the center of the display page as an origin, the length direction as an X axis and the width direction as a Y axis, wherein the menu bar is displayed in a negative axis area of the X axis, and a plurality of first-level menu items are sequentially arranged along the Y axis;
acquiring a head image of a user by a camera of the display terminal within a preset time to generate a plurality of first target images, aligning the center of each first target image with the origin of the coordinate system, wherein the length direction is parallel to the X axis, and the width direction is parallel to the Y axis;
the method comprises the steps of identifying an eye area of each first target image, determining a first coordinate range of the eye area, and generating a first trigger signal when the first coordinate ranges of the eye areas of a plurality of first target images present negative movement to the X axis in time sequence from morning to evening and the movement distance is larger than a preset first threshold value.
3. The interactive method for cross-platform adaptive control according to claim 2, wherein: when the display screen is smaller than a preset size threshold, the second trigger signal is generated by the following steps:
collecting first reference images when users focus on first-level menu items arranged at a first position in the menu bar, wherein the center of each first reference image is aligned with the origin of the coordinate system, the length direction is parallel to the X-axis, the width direction is parallel to the Y-axis, identifying the eye area of each first reference image, determining a second coordinate range of the eye area of each first reference image, and corresponding the Y coordinate range of the second coordinate range to the Y coordinate range of a third coordinate range of the first-level menu items at the first position;
collecting a second reference image when the user focuses on a first-level menu item arranged at the last position in the menu bar, wherein the center of the second reference image is aligned with the origin of the coordinate system, the length direction is parallel to the X axis, the width direction is parallel to the Y axis, identifying the eye area of each second reference image, determining a fourth coordinate range of the eye area of the second reference image, and corresponding the Y coordinate range of the fourth coordinate range to the Y coordinate range of a fifth coordinate range of the first-level menu item at the last position;
equally dividing the Y coordinate range between the third coordinate range and the fifth coordinate range according to the number between the first-level menu item and the last-level menu item, and further generating a Y coordinate range corresponding to each first-level menu item one by one according to the Y coordinate ranges of the first-level menu item and the last-level menu item;
when a camera of the display terminal collects the head portrait of the user to generate a second target image, aligning the center of the second target image with the origin of the coordinate system, wherein the length direction is parallel to the X axial direction, and the width direction is parallel to the Y axial direction;
identifying the eye area of the second target image, determining the Y coordinate range of the eye area of the second target image, solving the overlapping interval of the Y coordinate range of the eye area of the second target image and the Y coordinate range corresponding to each first-level menu item one by one, selecting the first-level menu item with the largest overlapping interval, and generating a second trigger signal of the first-level menu item with the largest overlapping interval.
4. The interactive method for cross-platform adaptive control according to claim 1, wherein: when the menu bar is in an expansion mode, the menu bar displays the name and the identification of the first-level menu item; and when the menu bar is in a storage mode, the menu bar only displays the identification of the first-level menu item.
5. The interactive method for cross-platform adaptive control according to claim 1, wherein: the first level menu items and the second level menu items have a first presentation color; the first level menu items and the second level menu items are configured to a second presentation color when the first level menu items and the second level menu items are triggered.
6. The interactive method for cross-platform adaptive control according to claim 1, wherein: when the first-level menu item comprises a plurality of second-level menu items which are sequentially arranged, the first-level menu item is provided with a first attribute mark and a second attribute mark;
when the first-level menu item is not triggered, the first-level menu item shows the first attribute mark;
when a plurality of second-level menu items of the first-level menu items are opened, the first-level menu items show the second attribute tags.
7. An interactive system for cross-platform adaptive control, which is used for implementing the interactive method for cross-platform adaptive control of any one of claims 1 to 6, and is characterized by comprising:
the display style presetting module comprises: the display page comprises a menu bar and a display area, the menu bar is preset to be a receiving mode and an expanding mode which can be switched according to a first trigger signal, when the display page shows the first display mode, the menu bar presents the receiving mode, and when the display page shows the second display mode, the menu bar presents the expanding mode;
the first trigger signal execution module: the method comprises the steps that the size of a display screen of a display terminal is obtained, when the size of the display screen is larger than or equal to a preset size threshold, a display page displays a first display style, a menu bar displays an expansion style, when the size of the display screen is smaller than the preset size threshold, the display page displays a second display style, the menu bar displays a storage style and can be switched to the expansion style according to a first trigger signal, the width of the expansion style of the menu bar is larger than that of the storage style of the menu bar, when the size of the display screen is smaller than the preset size threshold, the display terminal has a horizontal screen display state and a vertical screen display state, and when the fact that the display terminal is switched from the vertical screen display state to the horizontal screen display state is detected, the first trigger signal is generated;
the second trigger signal execution module: when the menu bar shows the expansion style, a plurality of first-level menu items which are sequentially arranged on the menu bar are triggered according to a second trigger signal, at least one first-level menu item comprises a plurality of second-level menu items which are sequentially arranged, and when the second trigger signal triggers one first-level menu item with the second-level menu items, the first-level menu items are sequentially expanded along the direction deviating from the first-level menu items.
8. An interactive device for cross-platform adaptive control, comprising:
a processor;
a memory having stored therein executable instructions of the processor;
wherein the processor is configured to perform the steps of the cross-platform adaptive control interaction method of any one of claims 1 to 6 via execution of the executable instructions.
9. A computer readable storage medium storing a program which when executed performs the steps of the method of interacting cross-platform adaptive control of any of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711340458.1A CN108108417B (en) | 2017-12-14 | 2017-12-14 | Cross-platform adaptive control interaction method, system, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711340458.1A CN108108417B (en) | 2017-12-14 | 2017-12-14 | Cross-platform adaptive control interaction method, system, equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108108417A CN108108417A (en) | 2018-06-01 |
| CN108108417B true CN108108417B (en) | 2020-07-28 |
Family
ID=62216914
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711340458.1A Active CN108108417B (en) | 2017-12-14 | 2017-12-14 | Cross-platform adaptive control interaction method, system, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108108417B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109144645B (en) * | 2018-08-20 | 2020-01-10 | 海南大学 | Region definition, display and identification method of user-defined interaction region |
| CN110083205B (en) * | 2019-04-23 | 2023-03-28 | 努比亚技术有限公司 | Page switching method, wearable device and computer-readable storage medium |
| CN112579927A (en) * | 2019-09-30 | 2021-03-30 | 北京国双科技有限公司 | Method and device for displaying navigation bar |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103577051A (en) * | 2013-10-12 | 2014-02-12 | 优视科技有限公司 | Method and device for controlling menu |
| CN106020628A (en) * | 2016-06-12 | 2016-10-12 | 浙江慧脑信息科技有限公司 | Tab bar and menu bar display status control method |
| CN107168609A (en) * | 2017-06-06 | 2017-09-15 | 广东欧珀移动通信有限公司 | status bar display method, device and terminal |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080072177A1 (en) * | 2006-03-10 | 2008-03-20 | International Business Machines Corporation | Cascade menu lock |
-
2017
- 2017-12-14 CN CN201711340458.1A patent/CN108108417B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103577051A (en) * | 2013-10-12 | 2014-02-12 | 优视科技有限公司 | Method and device for controlling menu |
| CN106020628A (en) * | 2016-06-12 | 2016-10-12 | 浙江慧脑信息科技有限公司 | Tab bar and menu bar display status control method |
| CN107168609A (en) * | 2017-06-06 | 2017-09-15 | 广东欧珀移动通信有限公司 | status bar display method, device and terminal |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108108417A (en) | 2018-06-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8812996B1 (en) | Methods and apparatus for processing application windows | |
| US9196227B2 (en) | Selecting techniques for enhancing visual accessibility based on health of display | |
| US9519369B2 (en) | Touch screen selection | |
| EP2613244A2 (en) | Apparatus and method for displaying screen on portable device having flexible display | |
| US9792268B2 (en) | Zoomable web-based wall with natural user interface | |
| US10013156B2 (en) | Information processing apparatus, information processing method, and computer-readable recording medium | |
| US20140009395A1 (en) | Method and system for controlling eye tracking | |
| CN108108417B (en) | Cross-platform adaptive control interaction method, system, equipment and storage medium | |
| CN113536173B (en) | Page processing method and device, electronic equipment and readable storage medium | |
| US20140223341A1 (en) | Method and electronic device for controlling dynamic map-type graphic interface | |
| WO2017004141A1 (en) | Systems and methods for providing multi-focus to applications for collaboration | |
| CN113741763A (en) | Electronic book display method and device and electronic equipment | |
| CN107479795B (en) | Scroll processing method and device and electronic equipment | |
| EP3104267A1 (en) | Information-processing program, display control device, display control system, and display method | |
| KR20160084629A (en) | Content display method and electronic device implementing the same | |
| US20140223339A1 (en) | Method and electronic device for controlling dynamic map-type graphic interface | |
| CN107862728B (en) | Picture label adding method and device and computer readable storage medium | |
| US20110161870A1 (en) | Enhanced graphical display for hand-held devices | |
| CN113204299B (en) | Display method, display device, electronic equipment and storage medium | |
| CN111796736B (en) | Application sharing method and device and electronic equipment | |
| JP2015114955A (en) | Information processing apparatus, information processing method, and program | |
| JP6520674B2 (en) | Display system, display terminal, display method, and display program | |
| CN105677749B (en) | Page display method and device | |
| KR20160109238A (en) | Method of browsing digital content using gesture and computing device operating with the method | |
| CN104571844A (en) | Information processing method and electronic equipment |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |