CN104462574A - Method for locating flow chart nodes in browser window - Google Patents
Method for locating flow chart nodes in browser window Download PDFInfo
- Publication number
- CN104462574A CN104462574A CN201410837425.8A CN201410837425A CN104462574A CN 104462574 A CN104462574 A CN 104462574A CN 201410837425 A CN201410837425 A CN 201410837425A CN 104462574 A CN104462574 A CN 104462574A
- Authority
- CN
- China
- Prior art keywords
- browser window
- flow diagram
- process flow
- node
- painting canvas
- 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.)
- Granted
Links
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/957—Browsing optimisation, e.g. caching or content distillation
-
- 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
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
The invention provides a method for locating flow chart nodes in a browser window. The method comprises the following steps that A, the nodes needing to be displayed in a visual area of the browser window when a flow chart is opened are selected; B, the positions of the nodes in a flow chart canvas are obtained; C, the width and the height of the browser window are obtained; D, according to the positions of the nodes in the flow chart canvas and the width and the height of the browser window, the position of the flow chart canvas, which enables the nodes to be displayed on a display page of the browser window, in the browser window is determined. By the adoption of the method for locating flow chart nodes in the browser window, the fussy operation needed when target nodes in the flow chart are browsed is omitted, and the user experience of flow chart display in a computer is improved.
Description
Technical field
The present invention relates to the localization method of a kind of flow chart node in browser window.
Background technology
When browsing larger process flow diagram in a computer, more common process flow diagram acquiescence open mode is the top of process flow diagram.If user to want to browse in process flow diagram more rearward/node on the lower time, usually need more scrolling operations just can find the node wanting to browse, both time-consuming, require great effort again.
Summary of the invention
In view of this, fundamental purpose of the present invention is to provide the localization method of a kind of flow chart node in browser window, to reduce the destination node browsed in process flow diagram and the troublesome operation needed.
The localization method of a kind of flow chart node provided by the invention in browser window comprises the following steps:
A, select to need when process flow diagram is opened to appear at the node in browser window viewing area;
B, obtain the position of described node in process flow diagram painting canvas;
C, the width obtaining browser window and height;
D, according to the width of the position of described node in process flow diagram painting canvas and described browser window and height, determine to make described node to be presented at the position of process flow diagram painting canvas in described browser window on described browser window display page.
In the methods described above, described step B comprises:
The display object of described node in process flow diagram painting canvas is obtained, using the x in described display object attribute, y-axis coordinate as the position of described node in process flow diagram painting canvas according to the unique identification of described node.
In the methods described above, described step D comprises:
When the x-axis coordinate of described node and a predetermined deviation value sum are not more than the width of described browser window, the scroll bar of described browser window is remained on current horizontal level; Otherwise, in the horizontal direction by described scroll bar towards described node motion certain distance;
When the y-axis coordinate of described node and a predetermined deviation value sum are not more than the height of described browser window, described scroll bar is remained on current upright position; Otherwise, in vertical direction by described scroll bar towards described node motion certain distance.
In the methods described above, described scroll bar displacement is in the horizontal direction not less than the difference of a half width of described node x-axis coordinate and described browser window;
Described scroll bar displacement is in vertical direction not less than the difference of the half height of described node y-axis coordinate and described browser window.
In the methods described above, described step D comprises:
When the x-axis coordinate of described node and a predetermined deviation value sum are not more than the width of described browser window, process flow diagram painting canvas is remained on current horizontal level; Otherwise, pull described process flow diagram painting canvas in the horizontal direction, described process flow diagram painting canvas moved a certain distance towards described browser window in the horizontal direction;
When the y-axis coordinate of described node and a predetermined deviation value sum are not more than the height of described browser window, described process flow diagram painting canvas is remained on current upright position; Otherwise, pull described process flow diagram painting canvas in vertical direction, described process flow diagram painting canvas moved a certain distance towards described browser window in vertical direction.
In the methods described above, described process flow diagram painting canvas displacement is in the horizontal direction not less than the difference of a half width of described node x-axis coordinate and described browser window;
Described process flow diagram painting canvas displacement is in vertical direction not less than the difference of the half height of described node y-axis coordinate and described browser window.
As seen from the above, the inventive method can move process flow diagram painting canvas when process flow diagram is opened according to the position of selected node, be presented on the display page of browser window to make selected node, thereby reduce user and check operation needed for selected node, improve the Consumer's Experience of process flow diagram display in computing machine.
Accompanying drawing explanation
Fig. 1 is the localization method process flow diagram of flow chart node provided by the invention in browser window;
Fig. 2 is the effect schematic diagram using the inventive method realization flow node of graph location.
Embodiment
According to the localization method of flow chart node provided by the invention in browser window, when opening process flow diagram, automatically using as the default node locating of present node in the viewing area of browser.
Below in conjunction with accompanying drawing, introduce the localization method of flow chart node provided by the invention in browser window in detail.
As shown in Figure 1, above-mentioned localization method comprises the following steps:
Step 100: input and to need to appear at node in current browser window viewing area (hereafter will referred to as " present node ") when process flow diagram is opened.
For example, the unique identification of present node can be inputted in this step, to differentiate with other node.
Step 200: obtain the position of present node in process flow diagram painting canvas.
In this step, the display object of this present node in process flow diagram painting canvas (MovieClip) can be obtained according to the unique identification of present node.The position of present node in process flow diagram painting canvas is obtained thus according to the x in the display object attribute of present node, y-axis coordinate.
Step 300: the width and the height that obtain current browser window.
All comprise width and the height parameter of browser window in the attribute of current major browsers, therefore general need be read width and the height that browser attribute just can obtain browser window.
Step 400: according to width and the height of present node position and current browser window, determines to make present node to be presented at the position of process flow diagram painting canvas in current browser window on current browser window display page.
In general, the pattern of the manipulation process flow diagram painting canvas in the display page of browser window has two kinds: one is scroll bar pattern, namely comes the left and right of realization flow figure painting canvas in browser window display page/move up and down by slip horizontal/vertical scroll bar; Another kind pulls pattern, namely by pulling the left and right of process flow diagram painting canvas realization flow figure painting canvas in browser window display page/move up and down.It can thus be appreciated that, only need determine moving direction and the distance of scroll bar, and the drag direction of process flow diagram painting canvas and distance, the just position of adjustable process flow diagram painting canvas in browser window.The deterministic process of the position of process flow diagram painting canvas in current browser window is specific as follows:
Under scroll bar pattern, determine that the concrete grammar of (present node can be made to be presented on current browser window display page) process flow diagram painting canvas position in current browser window is as follows:
When the x-axis coordinate of present node and a predetermined deviation value (such as 80 pixels) sum are not more than the width of current browser window, can determine that the x-axis coordinate of present node is positioned within the width range of current browser window, therefore without the need to changing the current horizontal location of scroll bar, that is: scroll bar is remained on current horizontal level; Otherwise, need in the horizontal direction scroll bar to be moved a certain distance towards present node.This distance should be not less than the difference of a half width of present node x-axis coordinate and current browser window.Determine the horizontal level of scroll bar thus.
When the y-axis coordinate of present node and a predetermined deviation value (such as 80 pixels) sum are not more than the height of current browser window, can determine that the y-axis coordinate of present node is positioned within the altitude range of current browser window, therefore without the need to changing the current vertical position of scroll bar, that is: scroll bar is remained on current upright position; Otherwise, need in vertical direction scroll bar to be moved a certain distance towards present node.This distance should be not less than the difference of the half height of present node y-axis coordinate and current browser window.Determine the upright position of scroll bar thus.
By scroll bar being moved to the level and upright position that said process determines, just process flow diagram painting canvas can be made to be arranged in present node can be presented on the position of current browser window display page, and then demonstrate present node (as shown in Figure 2).
Determine that the concrete grammar of (present node can be made to be presented on current browser window display page) process flow diagram painting canvas position in current browser window is as follows pulling under pattern:
When the x-axis coordinate of present node and a predetermined deviation value (such as 80 pixels) sum are not more than the width of current browser window, can determine that the x-axis coordinate of present node is positioned within the width range of current browser window, therefore without the need to changing the current horizontal location of process flow diagram painting canvas, that is: process flow diagram painting canvas is remained on current horizontal level; Otherwise, need to pull process flow diagram painting canvas in the horizontal direction, process flow diagram painting canvas moved a certain distance towards current browser window in the horizontal direction.This distance should be not less than the difference of a half width of present node x-axis coordinate and current browser window.Determine the horizontal level of process flow diagram painting canvas thus.
When the y-axis coordinate of present node and a predetermined deviation value (such as 80 pixels) sum are not more than the height of current browser window, can determine that the y-axis coordinate of present node is positioned within the altitude range of current browser window, therefore without the need to changing the current vertical position of process flow diagram painting canvas, that is: process flow diagram painting canvas is remained on current upright position; Otherwise, need to pull process flow diagram painting canvas in vertical direction, process flow diagram painting canvas moved a certain distance towards current browser window in vertical direction.This distance should be not less than the difference of the half height of present node y-axis coordinate and current browser window.Determine the upright position of process flow diagram painting canvas thus.
By process flow diagram painting canvas being dragged to the level and upright position that said process determines, present node just can being made to be arranged on the position of current browser window display page, and then to demonstrate present node.
The foregoing is only preferred embodiment of the present invention, not in order to limit the present invention, within the spirit and principles in the present invention all, any amendment done, equivalent replacement, improvement etc., all should be included within protection scope of the present invention.
Claims (6)
1. the localization method of flow chart node in browser window, is characterized in that, comprise the following steps:
A, select to need when process flow diagram is opened to appear at the node in browser window viewing area;
B, obtain the position of described node in process flow diagram painting canvas;
C, the width obtaining browser window and height;
D, according to the width of the position of described node in process flow diagram painting canvas and described browser window and height, determine to make described node to be presented at the position of process flow diagram painting canvas in described browser window on described browser window display page.
2. method according to claim 1, is characterized in that, described step B comprises:
The display object of described node in process flow diagram painting canvas is obtained, using the x in described display object attribute, y-axis coordinate as the position of described node in process flow diagram painting canvas according to the unique identification of described node.
3. method according to claim 2, is characterized in that, described step D comprises:
When the x-axis coordinate of described node and a predetermined deviation value sum are not more than the width of described browser window, the scroll bar of described browser window is remained on current horizontal level; Otherwise, in the horizontal direction by described scroll bar towards described node motion certain distance;
When the y-axis coordinate of described node and a predetermined deviation value sum are not more than the height of described browser window, described scroll bar is remained on current upright position; Otherwise, in vertical direction by described scroll bar towards described node motion certain distance.
4. method according to claim 3, is characterized in that,
Described scroll bar displacement is in the horizontal direction not less than the difference of a half width of described node x-axis coordinate and described browser window;
Described scroll bar displacement is in vertical direction not less than the difference of the half height of described node y-axis coordinate and described browser window.
5. method according to claim 2, is characterized in that, described step D comprises:
When the x-axis coordinate of described node and a predetermined deviation value sum are not more than the width of described browser window, process flow diagram painting canvas is remained on current horizontal level; Otherwise, pull described process flow diagram painting canvas in the horizontal direction, described process flow diagram painting canvas moved a certain distance towards described browser window in the horizontal direction;
When the y-axis coordinate of described node and a predetermined deviation value sum are not more than the height of described browser window, described process flow diagram painting canvas is remained on current upright position; Otherwise, pull described process flow diagram painting canvas in vertical direction, described process flow diagram painting canvas moved a certain distance towards described browser window in vertical direction.
6. method according to claim 5, is characterized in that,
Described process flow diagram painting canvas displacement is in the horizontal direction not less than the difference of a half width of described node x-axis coordinate and described browser window;
Described process flow diagram painting canvas displacement is in vertical direction not less than the difference of the half height of described node y-axis coordinate and described browser window.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410837425.8A CN104462574B (en) | 2014-12-29 | 2014-12-29 | A kind of localization method of flow chart node in browser window |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410837425.8A CN104462574B (en) | 2014-12-29 | 2014-12-29 | A kind of localization method of flow chart node in browser window |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104462574A true CN104462574A (en) | 2015-03-25 |
| CN104462574B CN104462574B (en) | 2018-04-13 |
Family
ID=52908609
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410837425.8A Active CN104462574B (en) | 2014-12-29 | 2014-12-29 | A kind of localization method of flow chart node in browser window |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104462574B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107038176A (en) * | 2016-02-04 | 2017-08-11 | 阿里巴巴集团控股有限公司 | Network page rendering method, device and equipment |
| CN111159593A (en) * | 2019-12-18 | 2020-05-15 | 东软集团股份有限公司 | Method and device for generating flow chart, storage medium and electronic equipment |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102750269A (en) * | 2012-07-16 | 2012-10-24 | 西安体育学院 | Method for establishing navigation bookmark during browsing of ultra-long and ultra-wide webpage |
| CN104239325A (en) * | 2013-06-17 | 2014-12-24 | 阿里巴巴集团控股有限公司 | Block positioning method and block positioning device |
-
2014
- 2014-12-29 CN CN201410837425.8A patent/CN104462574B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102750269A (en) * | 2012-07-16 | 2012-10-24 | 西安体育学院 | Method for establishing navigation bookmark during browsing of ultra-long and ultra-wide webpage |
| CN104239325A (en) * | 2013-06-17 | 2014-12-24 | 阿里巴巴集团控股有限公司 | Block positioning method and block positioning device |
Non-Patent Citations (1)
| Title |
|---|
| 李素铎等: "网页定位技术探析", 《福建电脑》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107038176A (en) * | 2016-02-04 | 2017-08-11 | 阿里巴巴集团控股有限公司 | Network page rendering method, device and equipment |
| CN111159593A (en) * | 2019-12-18 | 2020-05-15 | 东软集团股份有限公司 | Method and device for generating flow chart, storage medium and electronic equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104462574B (en) | 2018-04-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9971749B2 (en) | Editor for website and website menu | |
| US8250482B2 (en) | Linking and managing mathematical objects | |
| US9761034B2 (en) | Animation emulating live web page content resizing | |
| US9747010B2 (en) | Electronic content visual comparison apparatus and method | |
| US20150046882A1 (en) | User interaction and display of tree hierarchy data on limited screen space | |
| CN101763234B (en) | Method and device for simulating various screen resolutions | |
| US9310988B2 (en) | Scroll end effects for websites and content | |
| CN104267871A (en) | Method for rendering pages and device thereof | |
| CN106648319A (en) | Operation method and apparatus used for mind map | |
| US20150212660A1 (en) | System and method for displaying multiple applications | |
| US20150178963A1 (en) | Graphical analysis system and graphical analysis method | |
| CN106126489A (en) | A kind of report file dynamic chart edit methods and system | |
| US20140006941A1 (en) | Method, system and computer program product for editing a displayed rendering of symbols | |
| CN103946783A (en) | Scrollable desktop navigation | |
| US20150093029A1 (en) | Image layers navigation | |
| CN106775614A (en) | Intelligent POS quick interface arrangement methods and system | |
| CN105607800A (en) | Method and device for input display of terminal screen | |
| CN105912516A (en) | Method for one-lick extraction of table data from AutoCAD file | |
| CN104991918A (en) | WEBGIS based online big data display method | |
| CN104462574A (en) | Method for locating flow chart nodes in browser window | |
| CN105550021A (en) | Cross-browser dynamic presentation method and cross-browser dynamic presentation apparatus | |
| CN105739962B (en) | Table cell editing machine control extended method based on HTML and system | |
| CN105094586A (en) | Display window adjustment method and electronic device | |
| CN103677524A (en) | Control method and device of presenting mode of navigation bar | |
| CN104978318B (en) | Browser control method and browser control device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: 100195 Haidian District, Beijing, North Village, a road, a static core Park, block N Applicant after: BEIJING SEEYON INTERNET SOFTWARE Corp. Address before: 100195 Haidian District, Beijing, North Village, a road, a static core Park, block N Applicant before: BEIJING SEEYON SOFTWARE Co.,Ltd. |
|
| COR | Change of bibliographic data | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20221226 Address after: Floor 12, Building 3, No. 71, Hele 1st Street, Hi tech Zone, Chengdu, Sichuan 610000 Patentee after: Chengdu Zhiyuan Xiangtai Software Technology Co.,Ltd. Address before: 100195 block n, jingxinyuan, No.25, beiwucun Road, Haidian District, Beijing Patentee before: BEIJING SEEYON INTERNET SOFTWARE Corp. |
|
| TR01 | Transfer of patent right |