Environment for responsive graphical designs

• US 8,751,945 B1
• Filed: 02/07/2014
• Issued: 06/10/2014
• Est. Priority Date: 05/07/2013
• Status: Active Grant

• Current Assignee: Axure Software Solutions Incorporated
• Original Assignee: Axure Software Solutions Incorporated
• Inventors: Hsu, Victor, Smith, Martin, Gardner, Ian, Fraser, Ben
• Primary Examiner(s): Nunez, Jordany
• Application Number:
  US14/175,921
• Time in Patent Office: 123 Days
• Field of Search: 715/760, 715/764, 715/810, 715/786
• US Class Current: 715/760
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 16/958 Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
• CPC Class Codes: G06F 3/0481 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
• CPC Class Codes: G06F 3/0484 for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191
• CPC Class Codes: G06F 8/34 Graphical or visual programming

Abstract

Embodiments of the present invention provide tools and methods for the development and specification of a responsive graphical design. A graphical user interface allows a user to specify a design. The graphical user interface has an area for displaying a rendering of the design according to a first dimension specification. The system also has a dimension specification interface that allows the user to set a second dimension specification. The system also has a widget interface that allows the user to (i) add a widget to said design, (ii) specify a first state for the widget when the design is rendered according to the first dimension specification, and (iii) specify a second state for the widget when the design is rendered according to the second dimension specification.

Claims

1. A system comprising:

a processor providing a design window that displays an editable instantiation of an interactive graphical design, wherein the interactive graphical design comprises a plurality of interactive widgets, and wherein the plurality of interactive widgets can be arranged in the design window;

a widget interface, provided by the processor, that displays a property from a set of properties for a widget in the design window;

a dimension specification interface, provided by the processor, with a first threshold dimension field, and a second threshold dimension field, wherein the first threshold dimension field accepts a first threshold between a first dimension version of the interactive graphical design and a second dimension version of the interactive graphical design, wherein the second threshold dimension field accepts a second threshold that is larger than the first threshold, and wherein the first and second thresholds each comprise a rendering space width;

an export module that generates renderable instantiation of the interactive graphical design for rendering in a player, wherein the renderable instantiation includes;

(i) HTML frames defining an interactive graphical design rendering window and a selector window with selectable entries for navigating the interactive graphical design that is independent of a rendering space dimension afforded to the interactive graphical design rendering window; and

(ii) JavaScript code for switching all of the interactive widgets in the plurality of interactive widgets between the first and second dimension versions that is performed as a result of a comparison of a rendering space of the player to the first threshold, and wherein the first dimension version is rendered when the rendering space of the player lies within a range of values from the first threshold to the second threshold; and

a memory storing;

(i) a first set of values for the set of properties of the widget in the first dimension version; and

(ii) a second set of values for the set of properties of the widget in the second dimension version;

wherein a value in the first set of values is the same in the second set of values; and

wherein the value is stored at a single location in the memory.

2. The system of claim 1, the renderable instantiation further comprising:

instructions for the player to render the interactive graphical design in a predetermined fashion without regard to the rendering space of the player.

3. The system of claim 1, the widget interface further comprising:

an absolute position specification interface having an x-input and a y-input;

wherein the x-input and y-input specify a location of the widget in the interactive graphical design.

4. The system of claim 3, wherein the x-input and the y-input reflect a position of the widget both before and after the widget is repositioned via a command entered in the design window.

5. The system of claim 1, wherein the comparison takes place when a page of the interactive graphical design loads.

6. The system of claim 1, wherein a page of the interactive graphical design is rendered in the first dimension version and the second dimension version using different web pages.

7. The system of claim 1, wherein the JavaScript Code is performed in an object model event handler.

8. The system of claim 1, wherein the JavaScript Code is performed in a fake event handler.

9. A system comprising:

a processor providing a design window that displays an editable instantiation of an interactive graphical design, wherein the interactive graphical design comprises a plurality of interactive widgets, and wherein the plurality of interactive widgets can be arranged in the design window;

a widget interface, provided by the processor, that displays a property from a set of properties for a widget in the design window, wherein each of the plurality of interactive widgets has a first characterization in a first dimension version of the design and a second characterization in a second dimension version of the design;

a dimension specification interface, provided by the processor, with a first threshold dimension field, and a second threshold dimension field, wherein the first threshold dimension field sets a first threshold between the first dimension version of the design and the second dimension version of the design, wherein the second threshold dimension field sets a second threshold, wherein the second threshold is larger than the first threshold, and wherein the first and second thresholds comprise a rendering space width;

an export interface that triggers the generation of an exported instantiation of the interactive graphical design that includes;

(i) HTML frames defining an interactive graphical design rendering window and a selector window with selectable entries for navigating the interactive graphical design that is independent of a rendering space dimension afforded to the interactive graphical design rendering window;

(ii) HTML code to define the first dimension version and the second dimension version for rendering in a player; and

(ii) JavaScript code for switching all of the interactive widgets in the plurality of interactive widgets between their corresponding first and second characterizations that is performed as a result of a comparison of a rendering space of the player to the first threshold, wherein the first dimension version is rendered when the rendering space of the player lies within a range of values from the first threshold to the second threshold; and

a memory storing a first set of values for the set of properties of the first characterization of the widget.

10. The system of claim 9, wherein the exported instantiation further comprises:

instructions that allow the player to render the interactive graphical design in a predetermined fashion without regard to the rendering space of the player.

11. The system of claim 9, wherein the widget interface further comprises:

an absolute position specification interface having an x-input and a y-input;

wherein the x-input and y-input are used to both specify and display a location of the widget in the interactive graphical design.

12. The system of claim 9, wherein:

the first characterization and the second characterization of the widget differ as to an interactivity of the widget; and

the interactivity of the widget comprises a page to which the widget links.

13. The system of claim 9, wherein the comparison takes place when a page of the interactive graphical design loads.

14. The system of claim 9, wherein a page of the interactive graphic design in the first dimension version and the page of the interactive graphic design in the second dimension version are rendered in the player using HTML associated with different web pages.

15. The system of claim 9, wherein:

the memory stores a second set of values for the set of properties of the second characterization of the widget;

a value in the first set of values is the same in the second set of values; and

the value is stored at a single location in the memory.

16. The system of claim 9, wherein the JavaScript Code is performed in an object model event handler.

17. The system of claim 9, wherein the JavaScript Code is performed in a fake event handler.

18. A computer-implement method for allowing a user to specify an interactive graphical design, comprising:

providing a design window to display an editable instantiation of the interactive graphical design to the user, whereby the user can add a plurality of widgets to the interactive graphical design;

providing a widget interface that allows the user to specify a property for a widget in the interactive graphical design;

accepting a first widget characterization from the user via the widget interface, wherein the first widget characterization is for a first dimension version of the interactive graphical design and is different than a second widget characterization for a second dimension version of the interactive graphical design;

providing a dimension specification interface that accepts a first threshold dimension and a second threshold dimension from the user, wherein the first threshold dimension defines a first threshold at which the interactive graphical design switches from the first dimension version to the second dimension version, wherein the second threshold dimension is larger than the first threshold dimension, and wherein the first and second threshold dimensions each comprise a rendering space width; and

generating a renderable instantiation of the interactive graphical design that includes;

(i) HTML frames defining an interactive graphical design rendering window and a selector window with selectable entries for navigating the interactive graphical design that is independent of a rendering space dimension afforded to the interactive graphical design rendering window;

(ii) HTML code to define the first dimension version and the second dimension version for rendering in a player; and

(iii) JavaScript code for switching all of the interactive widgets in the plurality of interactive widgets between the first and second dimension versions that is performed as a result of a comparison of a rendering space of the player to the first threshold, and wherein the first dimension version is rendered when the rendering space of the player lies within a range of values from the first threshold to the second threshold.

19. The computer-implement method of claim 18, the method further comprising:

storing a common characterization from said first widget characterization and said second widget characterization at a single location in a memory.

20. The computer-implement method of claim 18, wherein the renderable instantiation of the interactive graphical design further comprises:

instructions for the player to render the interactive graphical design in a predetermined fashion without regard to the rendering space of the player.

21. The computer-implement method of claim 18, wherein the widget interface further comprises:

an absolute position specification interface having an x-input and a y-input;

wherein the x-input and y-input specify a location of the widget in the interactive graphical design; and

wherein the x-input and the y-input reflect a position of the widget both before and after the widget is repositioned via a command entered in the design window.

22. The computer-implement method of claim 18, wherein the comparison takes place when a page of the interactive graphical design loads.

23. The computer-implement method of claim 18, further comprising:

rendering a page of the interactive graphical design in the first dimension version using HTML code for a first web page; and

rendering the page of the interactive graphical design in the second dimension version using HTML code for a second web page.

24. The computer-implemented method of claim 18, wherein the JavaScript Code is performed in an object model event handler.

25. The computer-implemented method of claim 18, wherein the JavaScript Code is performed in a fake event handler.

26. A computer-implemented method, comprising:

providing a design window to display an editable instantiation of an interactive graphical design to the user, wherein the interactive graphical design comprises a plurality of interactive widgets, and wherein the plurality of interactive widgets can be arranged in the design window;

providing a widget interface that allows the user to specify a property for a widget in the plurality of interactive widgets in the interactive graphical design;

accepting a first widget property specification from the user via the widget interface, wherein the first widget property specification is for a first dimension version of the interactive graphical design;

accepting a second widget property specification from the user via the widget interface, wherein the second widget property specification is for a second dimension version of the interactive graphical design;

providing a dimension specification interface to the user that accepts a first threshold dimension from the user, and a second threshold dimension from the user, wherein the first threshold dimension defines a first threshold at which the interactive graphical design switches from the first dimension version to the second dimension version, wherein the second threshold dimension defines a second threshold that is larger than the first threshold, and wherein the first and second thresholds each comprise a rendering space width; and

generating a renderable instantiation of the interactive graphical design that includes;

(ii) HTML frames defining an interactive graphical design rendering window and a selector window with selectable entries for navigating the interactive graphical design that is independent of a rendering space dimension afforded to the interactive graphical design rendering window;

(ii) HTML code to render the interactive graphical design in a player; and

(iii) JavaScript code for switching all of the widgets in the plurality of interactive widgets between the first and second dimension versions that is performed as a result of a comparison of a rendering space of the player to the first threshold, and wherein the first dimension version is rendered when the rendering space of the player lies within a range of values from the first threshold to the second threshold;

wherein the first widget property specification and the second widget property specification define an interactivity of the widget.

27. The computer-implemented method of claim 26, wherein the interactivity of the widget comprises a page to which the widget links.