Many diagramming applications allow for the creation of a flowchart to illustrate a business process. Specific shapes are often used in the flowchart to identify various types of steps within the process. For example, a rectangle may identify an action step in the process, while a diamond represents a decision step in the process. To create a flowchart using a diagramming application, a user may add shapes to a flowchart through the use of shape insertion controls that exist on the drawing canvas. For example, in MICROSOFT OFFICE VISIO from MICROSOFT CORPORATION of Redmond, Wash., when a mouse cursor is hovered over an existing shape in a flowchart diagram, connection controls are displayed on the drawing canvas in proximity to the shape. If one of the connection controls is then selected, a new diagram shape of the default shape type is placed in the flowchart at the location indicated by the utilized connection control and a connector is inserted to connect the new shape to the existing shape. Similarly, if two adjacent shapes exist in the flowchart diagram, and the connection control of one shape indicating the direction of the adjacent shape is selected, a connector is inserted into the flowchart to connect the adjacent shapes.
Another method for adding shapes to a diagram involves the use of a mini-toolbar. When a mouse cursor is moved close to a connection control, a mini-toolbar may be displayed near the cursor on the drawing canvas, allowing the user to select from the various shape types available in the mini-toolbar. When the user selects one of the shape types, a diagram shape of that type is placed in the flowchart at the location indicated by the connection control and a connector is inserted connecting the new shape to the existing shape.
However, in these scenarios a user cannot be sure of what actual changes will be made to the flowchart diagram by selecting a connection control or shape type from the mini-toolbar until the operation is complete. If the outcome is not as expected, the user must use the undo functionality of the diagramming application to remove the inserted shape and/or connector and attempt the desired operation again, perhaps using another method. Because diagramming is often a rapid process, having to perform an operation multiple times may cause a decrease in efficiency.
It is with respect to these considerations and others that the disclosure made herein is provided.
Technologies are described herein for providing a dynamic preview of diagram elements to be inserted into a flowchart or other diagram. Through the utilization of the concepts presented herein, a diagramming application, or other type of application program, displays a preview of the diagram elements to be inserted into the diagram when a user moves the mouse cursor over an element insertion control on the drawing canvas. The preview may be displayed until the user moves the mouse cursor away from the element insertion control or the element insertion control is selected.
According to one aspect presented herein, a diagramming application detects that a cursor is in proximity to an element insertion control on the drawing canvas for a threshold period of time. The element insertion control may be a connection control associated with an active shape on the drawing canvas. In response to detecting that the cursor in proximity to the element insertion control for the threshold period of time, the diagramming application determines what shapes and/or connectors would be inserted into the diagram if the element insertion control was selected. For instance, selecting a connection control may cause a diagram shape to be inserted into the diagram and connected to the active shape, or it may cause a connector to be inserted into the diagram between the active shape and an adjacent shape.
Once the shapes and/or connectors to be inserted into the diagram are determined, the diagramming application displays a preview of the shapes and/or connectors on the drawing canvas. The preview shows precisely what the diagram will look like if the element insertion control is selected. According to aspects presented herein, the diagramming application may display the shapes and/or connectors with attributes different from those of other elements on the drawing canvas, to indicate they represent a preview of the pending operation. The diagram application displays the preview of the shapes and/or connectors until the element insertion control is selected, or until the diagram application detects that the cursor is no longer in proximity to the element insertion control.
According to further aspects, a user interface (UI) is displayed on the drawing canvas in addition to the preview of the shapes and/or connectors to be inserted. The UI includes selectable controls corresponding to multiple types of diagram elements available for insertion into the diagram. In one aspect, the UI may consist of a number of selectable shape controls corresponding to the multiple diagram shapes available for placement in the diagram. If the diagramming application detects that the cursor is in proximity to one of the selectable controls, the diagramming application re-displays the preview of the shapes and/or connectors on the drawing canvas, with the shapes being of the type corresponding to the selectable control.
It should be appreciated that although the implementations described herein are presented in the context of a diagramming application, any type of program that creates or displays visual representations of a process may utilize the concepts presented herein. The above-described subject matter may also be implemented as a computer-controlled apparatus, a computer process, a computing system, or as an article of manufacture such as a computer-readable medium. These and various other features will be apparent from a reading of the following Detailed Description and a review of the associated drawings.
This Summary is provided to introduce a selection of concepts in a simplified form that is further described below in the Detailed Description. This Summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended that this Summary be used to limit the scope of the claimed subject matter. Furthermore, the claimed subject matter is not limited to implementations that solve any or all disadvantages noted in any part of this disclosure.
The following detailed description is directed to technologies for providing a preview of diagram elements to be inserted into a diagram. Through the use of the embodiments presented herein, a diagramming application, or other type of application program, displays a preview of the diagram elements to be inserted into the diagram when a user moves the mouse cursor over an element insertion control on the drawing canvas. This allows the user to preview the diagram elements that will be inserted and their positions before selecting the element insertion control. In this way, the user can avoid performing an operation with an unexpected outcome, and being forced to utilize the undo functionality of the diagramming application to remove the unwanted diagram elements.
While the subject matter described herein is presented in the general context of program modules that execute in conjunction with the execution of an operating system and application programs on a computer system, those skilled in the art will recognize that other implementations may be performed in combination with other types of program modules. Generally, program modules include routines, programs, components, data structures, and other types of structures that perform particular tasks or implement particular abstract data types. Moreover, those skilled in the art will appreciate that the subject matter described herein may be practiced with other computer system configurations, including hand-held devices, multiprocessor systems, microprocessor-based or programmable consumer electronics, minicomputers, mainframe computers, and the like.
In the following detailed description, references are made to the accompanying drawings that form a part hereof, and which show by way of illustration specific embodiments or examples. Aspects of the various implementations will first be described with respect to
Referring now to the drawings, in which like numerals represent like elements through the several figures, aspects of a computing system and methodology for providing a preview of diagram elements to be inserted into a diagram will be described. In particular,
The window 102 includes a number of controls located adjacent to the drawing canvas 104. A shape gallery 108 is one control area that may be located adjacent to the drawing canvas 104. The shape gallery 108 provides shape controls 110A-110D corresponding to different diagram shapes that are most commonly used when creating a diagram. It should be appreciated that any number and type of diagram shapes may be included within the shape gallery 108. The shape gallery 108 allows for the placement of diagram shapes 114 on the drawing canvas 104 through a method such as the drag-and-drop method described above. In addition, the shape gallery 108 allows the user to select one of the shape controls 110A-110D to identify a default shape type 112, which will be used by controls on the drawing canvas for shape insertion operations, as will be described in detail below.
To facilitate the rapid insertion of diagram elements into the diagram 106, a diagramming application may provide element insertion controls on the drawing canvas. These controls allow for the insertion of diagram elements into the diagram 106 without requiring the user to move the cursor 120 from the drawing canvas 104 to the shape gallery 108. For example, the MICROSOFT OFFICE VISIO diagramming application provides an auto-connect control 128. When the auto-connect control 128 is selected, the diagramming application displays connection controls 118A-118C on the drawing canvas when the user moves the cursor 120 in a position proximate to, or hovers over, any of the diagram shapes 114A-114C on the drawing canvas. It should be appreciated that the term “proximate” as used throughout this disclosure in describing the movement of the cursor 120 with respect to any other diagram element or control includes movement of the cursor 120 in close proximity to the diagram element or control, as well as movement of the cursor 120 that equates to hovering over the diagram element or control. In addition to the connection controls illustrated, the element insertion control may include any control that, when activated, causes one or more diagram elements to be placed on the drawing canvas.
The connection controls 118A-118C identify the available placement locations for the next diagram elements to be inserted into the diagram 106. It should be appreciated that any number of connection controls may be located around any diagram element corresponding to any number of placement locations. Selecting one of the connection controls 118A-118C results in one or more diagram elements being added to the diagram 106 in the location indicated by the connection control 118A-118C. According to implementations provided herein, when the user navigates the cursor 120 over a connection control 118 corresponding to the desired location for the insertion of the next diagram elements into the diagram 106, the diagramming application will display a preview of the diagram elements to be inserted into the diagram 106 on the drawing canvas 104. This allows the user to assess whether the diagram element insertion operation will result in the desired outcome before selecting the connection control 118.
For example, as illustrated in
The diagramming application displays the previewed shape 114D and connector 116C on the drawing canvas 104 in the location corresponding to where they would be inserted into the diagram 106 if the user was to select the connection control 118B. In one embodiment, the diagramming application displays the previewed shape 114D and connector 116C with dashed lines, as shown in
As shown in
By way of further example,
In a further embodiment shown in
For example, as shown in
Turning now to
The routine 400 begins at operation 402, where the diagramming application detects whether the cursor 120 is in proximity to or hovering over an element insertion control on the drawing canvas 104 for a threshold period of time. In one embodiment, the threshold period of time is a sufficient amount of time to eliminate the flashing of preview displays as the cursor 120 is navigated across the diagram 106, such as 200ms. In alternative embodiments, the threshold time may be zero, resulting in the immediate display of the preview. If the diagramming application detects the cursor 120 is in proximity to an element insertion control, the routine 400 moves to operation 404, where the diagramming application determines whether there is an existing shape adjacent to the element insertion control. By doing so, the diagramming application can determine what diagram elements will be inserted into the diagram 106 if the element insertion control is selected.
For example, in one embodiment the element insertion control may be a connector control 118 associated with an active shape 114C in the diagram 106. To determine what diagram elements will be inserted into the diagram by the connector control 118, the diagramming application determines if any shapes exist on the drawing canvas 104 adjacent to the active shape 114C in the direction indicated by the connection control 118. This determination may be made by detecting if another shape in the diagram 106 is currently positioned on the drawing canvas 104 within a threshold proximity of the active shape 114C in the region indicated by the connection control 118.
In operation 404, if no adjacent shape is found on the diagram 106, the routine 400 proceeds to operation 406, where the diagramming application displays a preview of a new shape 114D and connector 116C on the drawing canvas 104 as described in detail above in regard to
The routine 400 then proceeds to operation 410, where the diagramming application determines if a diagram element type selection UI 322 is displayed on the drawing canvas. If a diagram element type selection UI 322 is displayed, the routine 400 proceeds to operation 412, where the diagramming application detects that a changed to the type of the previewed diagram elements is required. For example, as described in detail above in regard to
If no changes to the type of the diagram elements is detected at operation 412, or if no diagram element type selection UI 322 is displayed at operation 410, the routine 400 proceeds to operation 420, where the diagramming application determines if the element insertion control is selected. If the element insertion control is selected, the routine 400 proceeds to operation 422 where the diagramming application removes the previewed diagram elements from the drawing canvas 104 and performs the requested operation. For example, as described in detail above in regard to
At operation 420, if the element insertion control is not selected by the user, the routine 400 moves to operation 424, where the diagramming application determines if the cursor 120 remains in proximity to or hovering over the element insertion control. If the cursor 120 remains in proximity to the element insertion control, the diagramming application continues to display the preview of the diagram elements, and the routine 400 returns to operation 420. If the cursor 120 is moved away from the element insertion control, the routine 400 proceeds to operation 426 where the diagramming application removes the previewed diagram elements from the drawing canvas 104. While embodiments described above characterize an element insertion control as a connector control 118, it will be appreciated by one of ordinary skill in the art that the operations described herein may be applied equally to any control displayed by the diagramming application on the drawing canvas 104 that is operative to insert diagram elements into the diagram 106.
The computer architecture shown in
The mass storage device 510 is connected to the CPU 502 through a mass storage controller (not shown) connected to the bus 504. The mass storage device 510 and its associated computer-readable media provide non-volatile storage for the computer 500. Although the description of computer-readable media contained herein refers to a mass storage device, such as a hard disk or CD-ROM drive, it should be appreciated by those skilled in the art that computer-readable media can be any available computer storage media that can be accessed by the computer 500.
By way of example, and not limitation, computer-readable media may include volatile and non-volatile, removable and non-removable media implemented in any method or technology for storage of information such as computer-readable instructions, data structures, program modules or other data. For example, computer-readable media includes, but is not limited to, RAM, ROM, EPROM, EEPROM, flash memory or other solid state memory technology, CD-ROM, digital versatile disks (DVD), HD-DVD, BLU-RAY, or other optical storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can be accessed by the computer 500.
According to various embodiments, the computer 500 may operate in a networked environment using logical connections to remote computers through a network such as the network 520. The computer 500 may connect to the network 520 through a network interface unit 506 connected to the bus 504. It should be appreciated that the network interface unit 506 may also be utilized to connect to other types of networks and remote computer systems. The computer 500 may also include an input/output controller 512 for receiving and processing input from a number of other devices, including a keyboard, mouse, or electronic stylus (not shown in
As mentioned briefly above, a number of program modules and data files may be stored in the mass storage device 510 and RAM 514 of the computer 500, including an operating system 518 suitable for controlling the operation of a networked desktop, laptop, or server computer. The mass storage device 510 and RAM 514 may also store one or more program modules. In particular, the mass storage device 510 and the RAM 514 may store the diagramming application 522.
Based on the foregoing, it should be appreciated that technologies for providing a dynamic preview of diagram elements to be inserted into a flowchart or other diagram are presented herein. Although the subject matter presented herein has been described in language specific to computer structural features, methodological acts, and computer readable media, it is to be understood that the invention defined in the appended claims is not necessarily limited to the specific features, acts, or media described herein. Rather, the specific features, acts and mediums are disclosed as example forms of implementing the claims.
The subject matter described above is provided by way of illustration only and should not be construed as limiting. Various modifications and changes may be made to the subject matter described herein without following the example embodiments and applications illustrated and described, and without departing from the true spirit and scope of the present invention, which is set forth in the following claims.
Number | Name | Date | Kind |
---|---|---|---|
4686522 | Hernandez et al. | Aug 1987 | A |
4723211 | Barker et al. | Feb 1988 | A |
4815029 | Barker et al. | Mar 1989 | A |
5555357 | Fernandes et al. | Sep 1996 | A |
5588108 | Kumar et al. | Dec 1996 | A |
5600779 | Palmer et al. | Feb 1997 | A |
5774661 | Chatterjee et al. | Jun 1998 | A |
5786816 | Macrae et al. | Jul 1998 | A |
6002399 | Haine et al. | Dec 1999 | A |
6029172 | Jorna et al. | Feb 2000 | A |
6154756 | Hearn et al. | Nov 2000 | A |
6239813 | Erskine | May 2001 | B1 |
6243092 | Okita et al. | Jun 2001 | B1 |
6246411 | Strauss | Jun 2001 | B1 |
6289513 | Bentwich | Sep 2001 | B1 |
6384851 | Takasu et al. | May 2002 | B1 |
6393425 | Kelly | May 2002 | B1 |
6628285 | Abeyta et al. | Sep 2003 | B1 |
6697087 | Kelly | Feb 2004 | B1 |
6715127 | Eschbach et al. | Mar 2004 | B1 |
6725428 | Pareschi et al. | Apr 2004 | B1 |
6751780 | Neff et al. | Jun 2004 | B1 |
6851089 | Erickson et al. | Feb 2005 | B1 |
6931288 | Lee et al. | Aug 2005 | B1 |
7047502 | Petropoulos et al. | May 2006 | B2 |
7093192 | Mullen et al. | Aug 2006 | B2 |
7117449 | Levin et al. | Oct 2006 | B1 |
7137077 | Iwema et al. | Nov 2006 | B2 |
7503012 | Chen et al. | Mar 2009 | B2 |
7685527 | Yan et al. | Mar 2010 | B2 |
7698635 | Grigoriadis et al. | Apr 2010 | B2 |
7721200 | Grigoriadis et al. | May 2010 | B2 |
7721201 | Grigoriadis et al. | May 2010 | B2 |
20030076364 | Martinez et al. | Apr 2003 | A1 |
20030158832 | Sijacic et al. | Aug 2003 | A1 |
20040119763 | Mizobuchi et al. | Jun 2004 | A1 |
20040261029 | Skjaervik | Dec 2004 | A1 |
20050028094 | Allyn | Feb 2005 | A1 |
20050108620 | Allyn et al. | May 2005 | A1 |
20050149882 | Iwema et al. | Jul 2005 | A1 |
20050254859 | Kim et al. | Nov 2005 | A1 |
20060036964 | Satterfield et al. | Feb 2006 | A1 |
20060259872 | Mullen et al. | Nov 2006 | A1 |
20070036403 | Albertson et al. | Feb 2007 | A1 |
20070101321 | Mahoney et al. | May 2007 | A1 |
20070118793 | Arora et al. | May 2007 | A1 |
20080109472 | Underwood et al. | May 2008 | A1 |
20080147634 | Diaz et al. | Jun 2008 | A1 |
20080148164 | Read | Jun 2008 | A1 |
20080148188 | Read | Jun 2008 | A1 |
20080148192 | Read et al. | Jun 2008 | A1 |
20080270932 | Diaz et al. | Oct 2008 | A1 |
20080313565 | Albertson | Dec 2008 | A1 |
20100122192 | Hanna | May 2010 | A1 |
Number | Date | Country |
---|---|---|
0947911 | Oct 1999 | EP |
7-282003 | Oct 1995 | JP |
WO 2004063862 | Jul 2004 | WO |
Entry |
---|
Landy et al., Borland JBuilder Developer's Guide, Published Dec. 18, 2002, excerpts from chap. 2, Safari Books Online, pp. 7-11. |
Biofore, Visio 2007 Bible, John Wiley and Sons, Pub. Apr. 2, 2007, chapter 4, sections 1,2, and 8, entire chapter 5, “Connecting Shapes”. |
“The Fastest Way to Make Great Looking Flow Charts”, pp. 5. |
Tooke, “Creating Effective UML Diagrams has never been Easier”, pp. 5. |
“Create Flowcharts and Block Diagrams using Microsoft Office Visio 2007”, Microsoft Office Visio, 2007, Microsoft Corporation, pp. 6. |
“Edge Diagrammer 5.08.1831”, 1997-2007, Super Shareware, pp. 3. |
“RFFlow Professional Flowcharting”, pp. 3. |
International Search Report dated Nov. 27, 2008 in International Application No. PCT/US08/065462. |
Rekimoto, “Multiple Computer User Interfaces: ‘Beyond the Desktop’,” 2000, Sony Computer Science Laboratories Inc., 2 pages. |
Rekimoto, “Pick-and-Drop: A Direct Manipulation Technique for Multiple Computer Environments,” Sony Computer Laboratories Inc, 8 pages. |
U.S. Official Action dated Apr. 2, 2010 in U.S. Appl. No. 11/763,656. |
U.S. Official Action dated Sep. 15, 2010 in U.S. Appl. No. 11/763,656. |
Chinese Official Action dated Jun. 15, 2011 in Chinese Application No. 200880020260.8. |
U.S. Official Action dated Jun. 13, 2011 in U.S. Appl. No. 11/763,656. |
“The Fastest Way to Make Great Looking Flow Charts”, downloaded Jan. 2, 2008 from http://www.breezetree.com/flowcharting-software/Pages 5. |
Tooke, “Creating Effective UML Diagrams has never been Easier”, Oct. 11, 2005 downloaded from http://www.ibm.com/developerworks/rational/library/05/1011—tooke/, pp. 5. |
“Edge Diagrammer 5.08.1831”, downloaded Jan. 2, 2008 from http://www.supershareware.com/info/edge-diagrammer.html Super Shareware, pp. 3. |
“RFFlow Professional Flowcharting” downloaded Jan. 2, 2008 from http://www.sharewareconnection.com/rfflow-professional-flowcharting.htm pp. 3. |
U.S. Official Action dated Dec. 21, 2012 in U.S. Appl. No. 11/763,656. |
Japanese Official Action dated Apr. 27, 2012 in Japanese Application No. 2010-512261. |
European Search Report dated Sep. 5, 2013 in European Application No. 08756580.0. |
U.S. Notice of Allowance dated Jan. 16, 2014 in U.S. Appl. No. 11/763,656. |
Number | Date | Country | |
---|---|---|---|
20090199123 A1 | Aug 2009 | US |