CN113282848A - Front-end step guiding method and system - Google Patents
Front-end step guiding method and system Download PDFInfo
- Publication number
- CN113282848A CN113282848A CN202110578598.2A CN202110578598A CN113282848A CN 113282848 A CN113282848 A CN 113282848A CN 202110578598 A CN202110578598 A CN 202110578598A CN 113282848 A CN113282848 A CN 113282848A
- Authority
- CN
- China
- Prior art keywords
- position information
- guiding
- guided element
- information
- boundary
- 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 38
- 238000004590 computer program Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 230000006870 function Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
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/954—Navigation, e.g. using categorised browsing
Abstract
The invention discloses a method and a system for guiding front-end steps, wherein the method comprises the following steps: configuring the sequence of the guiding step and guiding information; marking the elements to be guided; acquiring a guided element according to the mark; and acquiring the position information of the guided element, and displaying a guide information area according to the position information. The method and the system realize automatic positioning through a program, do not need to consider the size of a front-section display screen, and can realize accurate positioning and guiding.
Description
Technical Field
The invention relates to the field of Internet guidance, in particular to a front-end step guidance method and a front-end step guidance system.
Background
In the prior art, a front-end guidance method and a front-end guidance system usually adopt a background picture to guide a user to execute related operations, but elements needing guidance cannot be positioned only by using the background picture, guidance can only be simulated by highlighting in a screen, and because the sizes of display screens at different front ends are different, a positioning error or a disorder phenomenon exists.
Disclosure of Invention
One of the objectives of the present invention is to provide a front-end step guiding method and system, which can achieve automatic positioning through a program, and can achieve precise positioning and guiding without considering the size of a front-end display screen.
The invention also aims to provide a front-end step guiding method and a front-end step guiding system, wherein the method and the system adopt a code decoupling mode, and a program can automatically execute guiding display operation according to marks in sequence only by setting the marks on html nodes.
Another object of the present invention is to provide a method and a system for guiding a front-end procedure, which can set boundary conditions through a program, so as to avoid the phenomenon of guiding confusion during a guidance display process, and achieve accurate guidance.
To achieve at least one of the above objects, the present invention further provides a front end step guide method, comprising the steps of:
configuring the sequence of the guiding step and guiding information;
marking the elements to be guided;
acquiring a guided element according to the mark;
and acquiring the position information of the guided element, and sequentially displaying the guide information area according to the position information.
According to one preferred embodiment of the invention, the guided element is marked with id on the html page, and the element with the mark id is automatically obtained on the html page.
According to another preferred embodiment of the present invention, the position information of the guided element is obtained according to the tag id, wherein the position information includes primary position information and secondary position information, and the guiding information area is presented according to the primary position information and the secondary position information.
According to another preferred embodiment of the present invention, after the primary position information of the guided element is acquired, if it is determined that the primary position information belongs to the upper or lower position of the guided element, it is further determined that the secondary position information of the guided element belongs to the left, middle or right position, the position information of the target element is acquired, the offset amounts of the primary position and the secondary position of the guided element with respect to the target element are calculated, the primary position information is located, and the sequential presentation of the guide information area from the current guided element to the target element is performed.
According to another preferred embodiment of the present invention, after the primary position information of the guided element is acquired, if it is determined that the primary position information belongs to the left or right position of the guided element, it is further determined that the secondary position information of the guided element belongs to the upper, middle or lower position of the guided element, the position information of the target element is acquired, the offset amounts of the primary position and the secondary position of the guided element with respect to the target element are calculated, the primary position information is located, and the sequential presentation of the guide information area from the current guided element to the target element is performed.
According to another preferred embodiment of the present invention, after the offset of the main position information and the auxiliary position information is obtained, the distance between the boundary of the guidance information area to be displayed and the screen boundary is calculated respectively, so as to determine whether the displayed guidance information exceeds the display boundary.
According to another preferred embodiment of the present invention, if the position corresponding to the main position is the upper or lower guided element, the vertical coordinate height H1 of the upper or lower guided element is obtained, the upper and lower boundary height H2 of the guide information area is obtained, the height of the upper and lower boundaries of the screen is H, and if H1+ H2 > H, it indicates that the upper or lower boundary of the guide information area has exceeded the display range of the screen, and the width of the upper and lower boundaries of the guide information area is readjusted.
According to another preferred embodiment of the present invention, if the position corresponding to the main position is the left or right guided element, the abscissa length s of the left or right guided element is obtained1Obtaining the left and right boundary width s of the guide information area2The width of the left and right boundaries of the screen is S, if S1+s2If the width of the left boundary or the right boundary of the guide information area exceeds the screen display range, the width of the left boundary or the right boundary of the guide information area is readjusted.
To achieve at least one of the above objects, the present invention further provides a front-end step guiding system, which employs the above front-end step guiding method.
The present invention further provides a computer-readable storage medium for storing and applying a front-end-step boot system as described above.
Drawings
FIG. 1 is a schematic flow chart of a front-end step guidance method of the present invention;
fig. 2 is a schematic diagram showing a boot operation process of a front-end step boot method according to the present invention.
Detailed Description
The following description is presented to disclose the invention so as to enable any person skilled in the art to practice the invention. The preferred embodiments in the following description are given by way of example only, and other obvious variations will occur to those skilled in the art. The basic principles of the invention, as defined in the following description, may be applied to other embodiments, variations, modifications, equivalents, and other technical solutions without departing from the spirit and scope of the invention.
It is understood that the terms "a" and "an" should be interpreted as meaning that a number of one element or element is one in one embodiment, while a number of other elements is one in another embodiment, and the terms "a" and "an" should not be interpreted as limiting the number.
Referring to fig. 1-2, the present invention discloses a front-end step guiding method and system, wherein the method mainly comprises the following steps: configuring a step sequence and guiding information which need to be guided, and establishing a plurality of guided elements, wherein the guided elements comprise 12 directions, specifically: upper (divided into upper left, upper right), lower (divided into lower left, lower right), left (divided into upper left, lower left), right (upper right, lower right), the above-mentioned guided elements form a ring structure. And setting guide information according to the position of the guided element for displaying the guide information. In a preferred embodiment of the present invention, a display frame of the guidance information is set according to the main position information of the guidance information, where the main position information includes: the main orientations corresponding to the four guided elements, such as the position corresponding to the upper guided element or the lower guided element, may be set to the upper side of the upper guided element or the lower side of the lower guided element, or to the left side of the left guided element or the right side of the right guided element.
Further, the elements that need to be guided are marked, for example, the upper guided element, the upper left guided element, and the upper right guided element are marked as needed, and the marking mode includes setting ids for the elements that need to be guided, respectively, where the ids can be identified by a set program, so that the identification information of the elements that need to be guided can be automatically identified after the ids are marked, it should be noted that, in a preferred embodiment of the present invention, the mark ids include position information, that is, the position information of the corresponding elements can be obtained after the ids of the elements that need to be guided are identified. And displaying the guide information according to the position information, wherein the guide information can be displayed through a square frame structure, display sequence information is obtained in the display process of the guide information, and the display is sequentially performed according to the display sequence.
It should be noted that the step guiding method of the present invention also considers the boundary problem, and since the conventional guiding display frame may exceed the display boundary due to being too large, the present invention further provides the following method for adjusting the guiding information display frame: if the main position information of the current guided element is located, acquiring the position information of the current guided element, wherein the position information of the guided element can be preset and can be determined when constructing the guided element in the above 12 directions, it should be noted that the guided position information is the position information on the display interface, a coordinate system with an abscissa and an ordinate can be automatically established in the system with the lower left corner as an origin, and a specific numerical value of the position information can be acquired according to the position of the guided element in the coordinate system to determine the relationship between the guided element and the display interface. If the main position information of the current guided element belongs to the upper boundary, the heights of the upper boundary and the lower boundary of the guide display frame and the widths of the left boundary and the right boundary are also required to be obtained, wherein the height of the upper boundary and the lower boundary is H2, the height of the current guided element in the coordinate system is H1, the height H of the upper edge and the lower edge of the display interface is calculated, and if the calculation result is H1+ H2 > H, the height of the guide information display frame at the moment is proved to exceed the upper boundary of the display interface, so that the upper boundary and the lower boundary of the guide information display frame are required to be readjusted. Of course, in another possible embodiment of the present invention, the position information of the guided element may also be readjusted so that the guidance information display frame is within the upper boundary of the display interface. In another preferred embodiment, if the main position of the currently guided element is right, the range of the left and right boundaries of the display interface needs to be considered, so as to adjust the size of the left and right boundaries of the guidance information display frame, specifically: acquiring the position information of the current guided element, acquiring a value S1 on the abscissa of the current guided element, acquiring the width S2 of the left and right boundaries of the guide information display frame corresponding to the current guided element, and calculating the width S of the left and right boundaries of the display interface, wherein if S1+ S2 > S, it indicates that the display frame corresponding to the current guided element exceeds the right boundary of the display interface, so that the width of the left and right boundaries of the display frame needs to be adjusted. It should be noted that the above two embodiments are examples, and in other preferred embodiments, the position relationship between the lower boundary and the left boundary of the corresponding guide information display frame and the display interface may be determined according to the position of the guided element. Such as: and if so, judging whether the upper and lower boundaries of the display frame of the guided element under the main position information exceed the lower boundary of the display interface. Judging the values of h1-h2, if h1-h2 is less than 0, indicating that the lower boundary of the guide display frame corresponding to the current guided element exceeds the lower boundary of the display interface, and further adjusting the height of the upper boundary and the lower boundary of the current guide display frame.
After the program obtains the guided elements marked with id, the program respectively calculates the position relationship between the guide information display frame corresponding to each guided element and the display interface, and if the guided elements are overlapped, the boundary of the guide information display frame needs to be adjusted according to the method. And sequentially displaying the target elements from the current guided element to the current guided element according to a preset display sequence.
In particular, according to the embodiments of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network via the communication section, and/or installed from a removable medium. The computer program, when executed by a Central Processing Unit (CPU), performs the above-described functions defined in the method of the present application. It should be noted that the computer readable medium mentioned above in the present application may be a computer readable signal medium or a computer readable storage medium or any combination of the two. The computer 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 of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wire segments, a portable computer diskette, 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. In the present application, a computer 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. In this application, however, a computer readable signal medium may include a propagated data signal with computer 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 computer readable signal medium may also be any computer readable medium that is not a computer 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 computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless section, wire section, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
It will be understood by those skilled in the art that the embodiments of the present invention described above and illustrated in the drawings are given by way of example only and not by way of limitation, the objects of the invention having been fully and effectively achieved, the functional and structural principles of the present invention having been shown and described in the embodiments, and that various changes or modifications may be made in the embodiments of the present invention without departing from such principles.
Claims (10)
1. A front end step guidance method, characterized in that the method comprises the steps of:
configuring the sequence of the guiding step and guiding information;
marking the elements to be guided;
acquiring a guided element according to the mark;
and acquiring the position information of the guided element, and sequentially displaying the guide information area according to the position information.
2. The front-end step guide method as claimed in claim 1, wherein id is marked on the guided element on the html page, and the element with the mark id is automatically obtained on the html page.
3. The front-end step guiding method as claimed in claim 2, wherein the position information of the guided element is obtained according to the tag id, wherein the position information includes primary position information and secondary position information, and the guiding information area is displayed according to the primary position information and the secondary position information.
4. The front-end step guiding method as claimed in claim 3, wherein after the primary position information of the guided element is acquired, if the primary position information is determined to belong to the upper or lower position of the guided element, it is further determined that the secondary position information of the guided element belongs to the left, middle or right position, the position information of the target element is acquired, the offset of the primary position and the secondary position of the guided element with respect to the target element is calculated, the primary position information is located, and the sequential presentation of the guiding information area from the current guided element to the target element is performed.
5. The front-end step guiding method as claimed in claim 3, wherein if it is determined that the primary position information belongs to the left or right position of the guided element, it is further determined that the secondary position information of the guided element belongs to the upper, middle or lower position of the guided element, the position information of the target element is obtained, the offset of the primary and secondary positions of the guided element with respect to the target element is calculated, the primary position information is located, and the sequential presentation of the guiding information area from the current guided element to the target element is performed.
6. The front-end step guiding method according to claim 4, wherein after the offset of the main position information and the auxiliary position is obtained, the distance between the boundary of the guiding information to be displayed and the screen boundary is calculated respectively, and is used for judging whether the displayed guiding information area exceeds the display boundary.
7. The front end step guiding method as claimed in claim 6, wherein if the position corresponding to the main position is an upper or lower guided element, the vertical coordinate height H1 of the upper or lower guided element is obtained, the upper or lower boundary height H2 of the guiding information region is obtained, the upper or lower boundary height of the screen is H, if H1+ H2 > H, it indicates that the upper or lower boundary of the guiding information region has exceeded the display range of the screen, and the upper or lower boundary width of the guiding information region is readjusted.
8. The front end step guiding method as claimed in claim 6, wherein if the position corresponding to the main position is the left or right guided element, the abscissa length s of the left or right guided element is obtained1Obtaining the left and right boundary width s of the guide information area2The width of the left and right boundaries of the screen is S, if S1+s2If the width of the left boundary or the right boundary of the guide information area exceeds the screen display range, the width of the left boundary or the right boundary of the guide information area is readjusted.
9. A front-end step guidance system, characterized in that it employs a front-end step guidance method according to any one of the preceding claims 1-8.
10. A computer-readable storage medium for storing and applying a front-end-step booting system as claimed in claim 9.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110578598.2A CN113282848A (en) | 2021-05-26 | 2021-05-26 | Front-end step guiding method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110578598.2A CN113282848A (en) | 2021-05-26 | 2021-05-26 | Front-end step guiding method and system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113282848A true CN113282848A (en) | 2021-08-20 |
Family
ID=77281825
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110578598.2A Pending CN113282848A (en) | 2021-05-26 | 2021-05-26 | Front-end step guiding method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113282848A (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104063653A (en) * | 2014-05-30 | 2014-09-24 | 小米科技有限责任公司 | Verification interface display method and device |
| CN109857506A (en) * | 2019-02-19 | 2019-06-07 | 天津字节跳动科技有限公司 | Implementation method, device, electronic equipment and the storage medium of guidance information |
| CN110334352A (en) * | 2019-07-08 | 2019-10-15 | 腾讯科技（深圳）有限公司 | Guidance information display methods, device, terminal and storage medium |
| CN111258576A (en) * | 2018-12-03 | 2020-06-09 | 阿里巴巴集团控股有限公司 | Interface generation method and device, electronic equipment and computer storage medium |
| CN111928868A (en) * | 2020-09-22 | 2020-11-13 | 蘑菇车联信息科技有限公司 | Navigation map road name display method and device and electronic equipment |
| CN112487328A (en) * | 2020-12-11 | 2021-03-12 | 政采云有限公司 | Method and device for realizing universal guide assembly, electronic equipment and medium |
-
2021
- 2021-05-26 CN CN202110578598.2A patent/CN113282848A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104063653A (en) * | 2014-05-30 | 2014-09-24 | 小米科技有限责任公司 | Verification interface display method and device |
| CN111258576A (en) * | 2018-12-03 | 2020-06-09 | 阿里巴巴集团控股有限公司 | Interface generation method and device, electronic equipment and computer storage medium |
| CN109857506A (en) * | 2019-02-19 | 2019-06-07 | 天津字节跳动科技有限公司 | Implementation method, device, electronic equipment and the storage medium of guidance information |
| CN110334352A (en) * | 2019-07-08 | 2019-10-15 | 腾讯科技（深圳）有限公司 | Guidance information display methods, device, terminal and storage medium |
| CN111928868A (en) * | 2020-09-22 | 2020-11-13 | 蘑菇车联信息科技有限公司 | Navigation map road name display method and device and electronic equipment |
| CN112487328A (en) * | 2020-12-11 | 2021-03-12 | 政采云有限公司 | Method and device for realizing universal guide assembly, electronic equipment and medium |
Non-Patent Citations (1)
| Title |
|---|
| 尹彦芝: "《C语言高级实用教程》", 30 October 1991 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105069453A (en) | Image correction method and apparatus | |
| CN109685870A (en) | Information labeling method and device, tagging equipment and storage medium | |
| CN106845508A (en) | The methods, devices and systems of release in a kind of detection image | |
| CN111709322A (en) | Method and device for calculating lane line confidence | |
| CN114146865B (en) | Intelligent dispensing method for 3D vision-guided vehicle-mounted glass screen and related equipment | |
| CN113282848A (en) | Front-end step guiding method and system | |
| EP4080479A2 (en) | Method for identifying traffic light, device, cloud control platform and vehicle-road coordination system | |
| CN111429469B (en) | Berth position determining method and device, electronic equipment and storage medium | |
| CN114140813A (en) | High-precision map marking method, device, equipment and storage medium | |
| CN112949358A (en) | Road description file generation method and equipment | |
| CN113792601B (en) | Parking space line fitting method and system based on Hough straight line detection result | |
| CN104598904A (en) | Graphic code correction graphic center positioning method and device | |
| CN112381059B (en) | Target detection labeling method and device | |
| CN113096436B (en) | Indoor parking method and device | |
| CN112902919B (en) | Method, device, equipment and storage medium for measuring pipe trench section data | |
| CN113434935B (en) | Method, apparatus, computer device and readable storage medium for marking temporary size | |
| CN112925867B (en) | Method and device for acquiring positioning truth value and electronic equipment | |
| CN113298271B (en) | Digital inspection method and system for optical fiber network resources | |
| CN112950748B (en) | Building drawing splicing method and related device | |
| CN113269728B (en) | Visual edge-tracking method, device, readable storage medium and program product | |
| CN114187382B (en) | Method, device, equipment and medium for determining map element drawing data | |
| CN112700491B (en) | Method and device for determining visual field dividing line | |
| CN115879186B (en) | Method, device, equipment and storage medium for determining placement position of part number | |
| CN113886745B (en) | Page picture testing method and device and electronic equipment | |
| CN113806236B (en) | Method and system for one-machine multi-control of cloud real machine in mobile test field |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210820 |