Method, system and computer program product for facilitating the prototyping and previewing of dynamic interactive graphical design widget state transitions in an interactive documentation environment

• US 9,753,620 B2
• Filed: 08/01/2014
• Issued: 09/05/2017
• Est. Priority Date: 08/01/2014
• Status: Active Grant

• Current Assignee: Axure Software Solutions Incorporated
• Original Assignee: Axure Software Solutions Incorporated
• Inventors: Hsu, Victor, Smith, Martin, Fraser, Ben
• Primary Examiner(s): To, Jennifer
• Assistant Examiner(s): Molina, Hugo
• Application Number:
  US14/449,472
• Publication Number:
  US 20160034144A1
• Time in Patent Office: 1,131 Days
• Field of Search: 715763
• CPC Class Codes: G06F 2203/04806 Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
• CPC Class Codes: G06F 3/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/0485 Scrolling or panning
• CPC Class Codes: G06F 8/00 Arrangements for software engineering testing or debugging G06F11/36; administrative, planning or organisation aspects of software project management G06Q10/06
• CPC Class Codes: G06F 8/20 Software design
• CPC Class Codes: G06F 8/30 Creation or generation of source code
• CPC Class Codes: G06F 8/73 Program documentation

Abstract

Various methods and systems for documenting interactive graphical design are provided. An exemplary graphical design environment stored on a non-transitory computer-readable medium comprises a documentation element in an interactive graphical design. The design environment also comprises a design element that displays a plurality of states in a rendering of the interactive graphical design in an external player. The documentation element: (i) is enabled to receive a selection from the user of a state in the plurality of states; and (ii) displays a representation of the design element in the state in response to receiving the selection from the user. The documentation element and design element are both instantiated by a processor operating in combination with the non-transitory computer-readable medium.

Claims

1. A computer-implemented method, wherein each step is conducted using a processor and a memory, the method comprising:

receiving a documentation element addition command to add a documentation element to a documentation for an interactive graphical design, wherein the documentation and the interactive graphical design are both instantiated in a graphical design environment, and wherein the documentation element addition command is conducted via a drag-and-drop between a tool bar and a design window of the graphical design environment;

receiving a design element selection command to select a design element, wherein the design element is displayed in the interactive graphical design in the graphical design environment, and wherein the design element has been preprogrammed to display a plurality of states when the interactive graphical design is rendered in a player;

linking the documentation element and the design element such that the documentation element displays a representation of the design element, wherein the representation of the design element is an image of the design element;

receiving a configuration of an action in a documentation element state display interface in the graphical design environment, wherein the action includes at least one event handler, wherein execution of the action when the interactive graphical design is rendered in the player places the design element in a state from the plurality of states; and

displaying, after receiving the configuration of the action in the documentation element state display interface, the representation of the design element in the state, wherein the representation of the design element is placed in the state by applying the action.

2. The method of claim 1, further comprising:

receiving an image adjustment command from the user, via an image adjustment interface, to adjust a relative location of the representation of the design element within an area defined by the documentation element; and

cropping the representation of the design element if the image adjustment command moves a portion of the representation of the design element outside of the area defined by the documentation element.

3. The method of claim 1, further comprising:

receiving a modification for the design element after the design element and the documentation element are linked; and

automatically altering the representation of the design element to reflect the modification.

4. The method of claim 1, further comprising:

deriving a set of actions that place the design element in each of a plurality of states when executed; and

presenting the set of actions to the user, via the documentation element state display interface, after deriving the plurality of actions, wherein the receiving the action step is conducted via a selection of one of the set of actions in the documentation element state display interface.

5. A non-transitory computer-readable medium having stored thereon instructions configured to be executed by a processor to provide an interactive graphical design environment, the instructions comprising:

initiating a documentation within the interactive graphical design environment;

receiving a documentation element addition command to add a documentation element to the initiated documentation within the interactive graphical design environment, wherein the documentation element is added to the documentation via a drag-and-drop operation between a toolbar and a design window of the interactive graphical design environment, wherein the documentation element is executed by the processor operating in combination with the non-transitory computer-readable medium;

initiating an interactive graphical design within the interactive graphical design environment;

receiving a design element selection command to select a design element to be displayed in the initiated interactive graphical design within the interactive graphical design environment, wherein the design element in the interactive graphical design that has been preprogrammed to display a plurality of states when the interactive graphical design is rendered in an external player, wherein the design element is executed by the processor operating in combination with the non-transitory computer-readable medium;

linking the documentation element and the design element such that the documentation element displays a representation of the design element, wherein the documentation element captures information regarding the design element and provides a representation of the design element based on that information, wherein the representation of the design element is an image of the design element;

receiving a configuration of an action in a documentation element state display interface in the interactive graphical design environment, wherein the action includes at least one event handler, wherein execution of the action when the interactive graphical design is rendered in the player places the design element in a state from the plurality of states; and

displaying, after receiving the configuration of the action in the documentation element state display interface, the representation of the design element in the state, wherein the representation of the design element is placed in the state by applying the action.

6. The non-transitory computer readable medium of claim 5, wherein the instructions stored in the non-transitory computer-readable medium and configured to be executed by the processor further comprising:

receiving a plurality of image adjustment commands from a user on an image adjustment interface, wherein the plurality of image adjustment commands includes pan and zoom the representation of the design element.

7. The non-transitory computer readable medium of claim 6, wherein the instructions stored in the non-transitory computer-readable medium and configured to be executed by the processor further comprising:

identifying an area surrounded by a border in the documentation element; and

automatically cropping the image of the design element when the image adjustment commands move a portion of the representation of the design element outside of the area.

8. The non-transitory computer readable medium of claim 7, wherein the instructions stored in the non-transitory computer-readable medium and configured to be executed by the processor further comprising:

applying a border style to a portion of the border that crops the image of the design element when the representation of the design element is automatically cropped, wherein the border style distinguishes the portion of the border from a remainder of the border.

9. The non-transitory computer readable medium of claim 5, wherein the instructions stored in the non-transitory computer-readable medium and configured to be executed by the processor further comprising:

linking the design element and the documentation element; and

altering, by the interactive graphical design environment, the representation of the design element displayed in the documentation element in order to reflect a received modification from the user to the design element displayed in the interactive graphical design;

(i) when the documentation element is loaded into a memory; and

(ii) after the design element and the documentation element are linked.

10. The non-transitory computer readable medium of claim 5, wherein the instructions stored in the non-transitory computer-readable medium and configured to be executed by the processor further comprising:

linking the design element and the documentation element; and

automatically altering, by the interactive graphical design environment, the representation of the design element displayed in the documentation element to reflect a received modification from the user to the design element displayed in the interactive graphical design in response to linking the design element and the documentation element.

11. The non-transitory computer readable medium of claim 10, wherein the instructions stored in the non-transitory computer-readable medium and configured to be executed by the processor further comprising:

presenting the representation of the design element in the documentation element and the design element in the interactive graphical design to the user via a pointer to a common location in data.

12. The non-transitory computer readable medium of claim 5, wherein the instructions stored in the non-transitory computer-readable medium and configured to be executed by the processor further comprising:

receiving a first modification to the representation of the design element that is directly entered by the user through the documentation element;

modifying, by the interactive graphical design environment, the representation of the design element to reflect a second modification to the design element that is received from the user through the interactive design environment; and

modifying the representation of the design element displayed in the documentation element to reflect the second modification when the second modification does not conflict with the first modification.

13. The non-transitory computer readable medium of claim 5, wherein the instructions stored in the non-transitory computer-readable medium and configured to be executed by the processor further comprising:

defining the plurality of states of the design element based on a set of events and event handlers; and

presenting the plurality of states of the design element based on a set of events and event handlers to the user through the documentation element state display interface.

14. The non-transitory computer readable medium of claim 5, wherein the instructions stored in the non-transitory computer-readable medium and configured to be executed by the processor further comprising:

deriving, by the processor, a set of actions that places the design element in each of the plurality of states, wherein the derived set of actions includes the action; and

presenting the set of actions that places the design element in each of the plurality of states in the documentation element state display interface to the user for selection.

15. A non-transitory computer-readable medium storing instructions and configured to be executed by a processor to execute a documentation tool within an interactive graphical design environment, the instructions comprising:

initiating, by the processor, a documentation generator interface within an interactive graphical design environment that allows a user to generate documentation for a design element in an interactive graphical design;

receiving a documentation element addition command to add a documentation element to the initiated documentation generator interface within the interactive graphical design environment, wherein the documentation element is added to the documentation generator interface via a drag-and-drop operation between a toolbar and a design window of the interactive graphical design environment, wherein the documentation generator interface is executed by the processor operating in combination with the non-transitory computer-readable medium;

initiating, by the processor, an interactive graphical design within the interactive graphical design environment;

receiving a design element selection command to select a design element to be displayed in the initiated interactive graphical design within the interactive graphical design environment, wherein the design element in the interactive graphical design has been preprogrammed to display a plurality of states when the interactive graphical design is rendered in an external player;

linking the documentation element and the design element through a link manager component such that the documentation element displays a representation of the design element, wherein the representation of the design element is an image of the design element, wherein the link manager component applies a modification made by the user to the design element displayed within the interactive graphical design to the representation of the design element displayed in the documentation generator interface, and wherein the link manager component is executed by the processor operating in combination with the non-transitory computer-readable medium;

receiving a configuration of an action in a documentation element state display interface in the interactive graphical design environment, wherein the action includes at least one event handler, wherein execution of the action when the interactive graphical design is rendered in the player places the design element in a state from the plurality of states; and

displaying, after receiving the configuration of the action in the documentation element state display interface, the representation of the design element in the state, wherein the representation of the design element is placed in the state by applying the action.

16. The non-transitory computer-readable medium of claim 15, wherein the instructions stored in the non-transitory computer-readable medium and configured to be executed by the processor further comprising:

receiving a user input to activate a capture button displayed in the interactive graphical design environment to configure the interactive graphical design environment into a capture mode;

receiving the design element selection command from the user to provide a selection operation to the design element during the interactive graphical design environment is in the capture mode;

automatically generating a new documentation element in response to receiving the design element selection operation during the interactive graphical design environment is in the capture mode;

storing the generated new documentation element in an exportable format; and

presenting to the user the new documentation element for review outside of the interactive graphical design environment.

17. The non-transitory computer-readable medium of claim 15, wherein the instructions stored in the non-transitory computer-readable medium and configured to be executed by the processor further comprising:

receiving a user input to activate a capture button displayed in the interactive graphical design environment to configure the interactive graphical design environment into a capture mode; and

receiving the design element selection command from the user to capture a selection operation of the design element during the interactive graphical design environment is in the capture mode, wherein the capture of the selection operation of the design element includes deriving a set of actions that places the design element in each of the plurality of states.