Procedurally expressing graphic objects for web pages

• US 20060005114A1
• Filed: 06/02/2005
• Published: 01/05/2006
• Est. Priority Date: 06/25/2004
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Louch, John, Hyatt, David, Williamson, Richard
• Granted Patent: US 8,239,749 B2
• Time in Patent Office: Days
• US Class Current: 715/211
• 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 40/117 Tagging; Marking up details of markup languages G06F40/143; Designating a block; Setting of attributes style sheets, e.g. eXtensible Stylesheet Language Transformation [XSLT], G06F40/154
• CPC Class Codes: G06F 40/143 Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
• CPC Class Codes: G06F 40/146 Coding or compression of tree-structured data
• CPC Class Codes: G06T 11/20 Drawing from basic elements, e.g. lines or circles

Abstract

A graphics object can be expressed using procedural language embedded in a markup language document. In a embodiment, a drawing space is specified in markup language. A drawing command to arbitrarily draw a graphics object into the drawing space is specified in procedural language. Interpretation of the markup and procedural language commands results in the rendering of the arbitrary graphics object. In another embodiment, there is a browser comprising a rendering engine, an interpreter, and parser. The rendering engine is configured to interpret a markup language instruction that specifies a drawing space as well as drawing commands in procedural language for drawing an arbitrary graphic object into the drawing space. The parser can then parse the drawing commands and convert them into an execution tree of tree objects.

Claims

1. A method of expressing an arbitrary graphics object in computer code, the method comprising:

specifying a drawing space in a markup language; and

specifying a drawing command in a procedural language to draw the arbitrary graphics object into the drawing space.

2. The method of claim 1, further comprising specifying a retrieving command in the procedural language to retrieve the drawing space.

3. The method of claim 1, further comprising specifying a context command in the procedural language for retrieving a drawing object for performing the drawing command.

4. The method of claim 3, wherein the drawing object maintains a drawing state.

5. The method of claim 4, wherein the drawing state comprising at least one of:

a transformation matrix, a clip region, and a value of a graphics object attribute.

6. The method of claim 5, wherein the graphics object attribute comprises at least one of:

a color attribute, a style attribute, a line attribute, a shadow attribute, and a drawing attribute.

7. The method of claim 1, further comprising specifying a styling to be applied to the arbitrary graphics object using a content style sheet.

8. The method of claim 1, wherein the drawing command comprises a call to a library of graphics commands for rendering the arbitrary graphics object.

9. The method of claim 1, wherein the step of specifying a drawing space comprises using a markup tag to specify the drawing space.

10. The method of claim 1, wherein the step of specifying a drawing space comprises using a markup editor to specify the drawing space.

11. The method of claim 1, wherein the step of specifying a drawing space comprises using a graphical user interface to specify the drawing space.

12. The method of claim 1, wherein the drawing space comprises a two-dimensional drawing space.

13. The method of claim 1, wherein the drawing space comprises a three-dimensional drawing space.

14. The method of claim 1, wherein the markup language is one of hypertext markup language, extensible hypertext markup language, and extensible markup language.

15. The method of claim 1, wherein the procedural language is one of Javascript, Python, and Visual Basic.

16. The method of claim 1, wherein the drawing command is one of a vector graphics command and an OpenGL command.

17. The method of claim 1, wherein the drawing command consists of at least one of a shape drawing command, a masking command, a pathing command, a transparency command, and a fill command.

18. A computer program product, the computer program product comprising a computer readable medium and computer program instructions encoded on the medium for:

specifying a drawing space in a markup language; and

specifying a drawing command in a procedural language to arbitrarily draw a graphics object into the drawing space.

19. The computer program product of claim 18, further comprising an instruction for specifying a command in the procedural language to retrieve the drawing space.

20. The computer program product of claim 18, further comprising an instruction for specifying a command in the procedural language for retrieving a drawing object for performing the drawing command.

21. The computer program product of claim 20, wherein the drawing object supports a drawing state, the drawing state comprising at least one of:

a transformation matrix, a clip region, and a value of an arbitrary graphics object attribute.

22. The computer program product of claim 21, wherein the graphics object attribute consists of at least one of:

a color attribute, a style attribute, a line attribute, a shadow attribute, and a drawing attribute.

23. The computer program product of claim 18, further comprising instructions for specifying a styling to be applied to the graphics object.

24. A system for expressing a graphics object, the system comprising:

a display device for displaying a user interface for receiving input from a user; and

a processor coupled to the display device, for, responsive to input from the user, coding a markup language command to specify a drawing space and coding a procedural language command to draw the graphics object into the drawing space.

25. A method for expressing a graphics object using an interactive user interface, the method comprising:

responsive to user input, coding a markup language command for specifying the drawing space, wherein the markup language command specifies the height dimension and width dimension of the drawing space; and

responsive to user input representing a graphics object, coding a plurality of scripting language commands for arbitrarily drawing the graphics object into the drawing space.

26. The method of claim 25, wherein the markup language command specifies the position of the drawing space in a markup language document.

27. The method of claim 25, further comprising:

responsive to user input representing the graphics object, coding a scripting language command for retrieving a drawing object to arbitrarily draw the graphics object into the drawing space.

28. The method of claim 27, wherein the drawing object maintains a drawing state.

29. The method of claim 28, wherein the drawing state consists of at least one of:

a transformation matrix, a clip region, and a value of a graphics object attribute.

30. The method of claim 29, wherein the graphics object attribute consists of at least one of:

a color attribute, a style attribute, a line attribute, a shadow attribute, and a drawing attribute.

31. A computer program product, the computer program product comprising a computer readable medium and computer program instructions encoded on the medium for:

responsive to user input representing a drawing space having a height dimension and a width dimension, coding a markup language command for specifying the drawing space, wherein the markup language command specifies the height dimension and width dimension of the drawing space; and

responsive to user input representing an arbitrary graphics object, coding a plurality of scripting language commands for arbitrarily drawing the graphics object into the drawing space.

32. The computer program product of claim 31, wherein the instructions for coding the markup language command specify the position of the drawing space in a markup language document.

33. The computer program product of claim 31, further comprising an instruction for:

responsive to user input representing the graphics object, coding a scripting language command for retrieving a drawing object to arbitrarily draw the graphics object into the drawing space.

34. The computer program product of claim 31, wherein a scripting command of the plurality of scripting commands comprises a call to a library of graphics commands for rendering the graphics object.

35. The computer program product of claim 31, wherein coding a markup language command comprises coding a markup tag to specify the drawing space.

36. The computer program product of claim 31, further comprising an instruction for:

responsive to user input representing a drawing space having a height dimension, a width dimension, and a length dimension coding a markup language command for specifying the drawing space, wherein the markup language command specifies the height dimension, the width dimension, and the length dimension of the drawing space.

37. A system for expressing a graphics object, the system comprising:

a display device for displaying a user interface for receiving input from a user;

and

a processor coupled to the display device, for;

responsive to user input representing a drawing space having a height dimension and a width dimension, performing processing associated with coding a markup language command for specifying the drawing space, wherein the markup language command specifies the height dimension and width dimension of the drawing space; and

responsive to user input representing an arbitrary graphics object, performing processing associated with coding a plurality of scripting language commands for arbitrarily drawing the graphics object into the drawing space.

38. A method for defining a command for drawing an arbitrary graphics object, the method comprising associating a procedural language command with at least one arbitrary drawing function implemented by a graphics language command.

39. The method of claim 38, further comprising defining a markup language command to specify a drawing space.

40. The method of claim 39, wherein the markup language is one of hypertext markup language, extensible hypertext markup language, and extensible markup language.

41. The method of claim 38, further comprising defining a command to retrieve a drawing space on which the procedural command can be performed.

42. The method of claim 41, wherein the drawing space comprises a two-dimensional drawing space.

43. The method of claim 42, wherein the drawing space comprises a three-dimensional drawing space.

44. The method of claim 38, further comprising defining a command to retrieve a drawing object to perform the procedural language command.

45. The method of claim 44, wherein the drawing object maintains a drawing state.

46. The method of claim 45, wherein the drawing state consists of at least one of:

a transformation matrix, a clip region, and a value of a graphics object attribute.

47. The method of claim 38, wherein the at least one arbitrary drawing function comprises one of:

a pathing function, a filling function, a stroking function, a curve-drawing function, a line-drawing function, a rotating function, a compositing function, a coloring function, a style function, a shadowing function, and a shape function.

48. The method of claim 38, wherein the graphics language command is one of a vector graphics command and an OpenGL command.

49. The method of claim 38, wherein the procedural language command calls a graphics command of a library of graphics commands for arbitrarily rendering the arbitrary graphics object.

50. The method of claim 38, wherein the procedural language is one of Javascript, Python, and Visual Basic.

51. A system for defining a command for drawing an arbitrary graphics object, the system comprising:

a display device for displaying a user interface for receiving input from a user; and

a processor coupled to the display device for, responsive to user input, associating a procedural language command with at least one arbitrary drawing function implemented by a graphics language command.

52. A method of generating an arbitrary graphics object, the method comprising:

executing a markup language command to create a drawing space; and

executing a plurality of procedural commands to draw the arbitrary graphics object in the drawing space.

53. The method of claim 52, further comprising executing a procedural language command to retrieve the drawing space.

54. The method of claim 52, further comprising executing a procedural language command for retrieving a drawing object for executing the plurality of procedural commands.

55. The method of claim 54, wherein the drawing object maintains a drawing state.

56. The method of claim 52, further comprising applying a styling to the arbitrary graphics object responsive to a content style sheet.

57. The method of claim 52, wherein the drawing space comprises one of:

a three-dimensional drawing space and a two-dimensional drawing space.

58. The method of claim 52, wherein at least a procedural command of the plurality of procedural commands comprises:

a shape drawing command, a masking command, a pathing command, a transparency command, and a fill command.

59. The method of claim 52, wherein the method is performed by an application configured to interpret at least one of:

hypertext markup language, extensible hypertext markup language, and extensible markup language.

61. The method of claim 52, wherein the method is performed by one of a desktop application, a game application, and a graphics application.

62. The method of claim 52, further comprising applying a styling to the arbitrary graphics object responsive to a content style sheet.

60. The method of 59, wherein the method is performed by a browser.

63. A computer program product, the computer program product comprising a computer readable medium and computer program instructions encoded on the medium for:

executing a markup language command to create a drawing space; and

executing a plurality of procedural commands to draw the arbitrary graphics object in the drawing space.

64. The computer program product of claim 63, further comprising instructions for executing a procedural language command to retrieve the drawing space.

65. A system for expressing a graphics object, the system comprising:

an interpreter configured to interpret a markup language instruction that specifies a drawing space and a plurality of drawing commands in procedural language for drawing an arbitrary graphical object into the drawing space.

66. The system of claim 65, wherein the interpreter is coupled to a graphics library and interprets each of the plurality of drawing commands by selecting a command from the graphics library.

67. The system of claim 65, wherein at least one of the plurality of drawing commands comprises one of:

a pathing command, a fill command, a stroking command, a curve-drawing command, a line-drawing command, a rotating command, a compositing command, a color command, a style command, a shadowing command, and a shape command.

68. The system of claim 65, wherein the markup language instruction specifies one of:

a two-dimensional drawing space and a three-dimensional drawing space.

69. The system of claim 65, wherein the interpreter is configured to interpret a plurality of drawing commands in procedural language for drawing by a drawing object the arbitrary graphical object into the drawing space.

70. The system of claim 69, wherein the drawing object maintains a drawing state.

71. The system of claim 70, wherein the drawing state consists of at least one of:

a transformation matrix, a clip region, and a value of a graphics object attribute.

72. A browser, the browser comprising:

the rendering engine of claim 65;

and

a parser configured to parse the plurality of drawing commands and convert the drawing commands into an execution tree comprised of a plurality of tree objects.

73. The browser of claim 72, wherein the interpreter is configured to evaluate the execution tree and apply commands from the graphics library to execute each of the plurality of tree objects.

74. A method of expressing a graphics object in a markup language page for a website, the method comprising:

defining a drawing space in markup language;

specifying a scripting language command to create the graphics object in the drawing space;

requesting the retrieval of the drawing space; and

requesting from the drawing space a drawing context for performing the scripting language command.

75. The method of claim 74, wherein the step of specifying a scripting language command further comprises specifying a graphics command in a vector graphics format responsive to the scripting language command for execution.

76. The method of claim 74, wherein the drawing space is a three-dimensional space.

77. A system for expressing a graphics object, the system comprising:

an interface module for receiving an input from a user; and

a programming engine for;

responsive to user input representing a drawing space, coding a markup language command for specifying the drawing space, wherein the markup language command specifies a height dimension and a width dimension of the drawing space; and

responsive to user input representing a graphics object, coding a plurality of scripting language commands for drawing the graphics object into the drawing space.

78. A computer-implemented method of expressing a canvas drawing space, the method comprising:

specifying a markup language tag representing the canvas drawing space, the tag to be included in a markup language page including procedural commands to draw into the canvas drawing space.

79. The method of claim 78, wherein the canvas drawing space comprises at least one of:

a bitmap, a mask, a two-dimensional drawing space, and a three-dimensional drawing space.

80. An apparatus comprising a module for coding a markup language tag representing a canvas drawing space, the tag to be included in a markup language page including procedural commands to draw an arbitrary graphics object into the canvas drawing space.

81. A computer program product, the computer program product comprising a computer readable medium and computer program instructions encoded on the medium for coding a markup language tag representing a canvas drawing space, the tag to be included in a markup language page including procedural commands to draw into the canvas drawing space.

82. An application program interface situated between a browser and an operating environment of a computing device, the interface configured to:

retrieve commands from a graphics library to execute a procedural language command to draw into a drawing context specified in markup language from the operating environment; and

return the commands from the graphics library to the browser for execution.

83. A computer program product, the computer program product comprising a computer readable medium and computer program instructions encoded on the medium for:

retrieving commands from a graphics library to execute a procedural language command to draw into a drawing context specified in markup language from an operating environment of a computing device; and

returning the commands from the graphics library to a browser of the computing device for execution.

84. A method of expressing a graphics object in computer code, the method comprising:

specifying a drawing space in a markup language;

specifying a drawing command in a procedural language to draw the graphics object into the drawing space; and

specifying content to be rendered into the drawing space.

85. A computer program product, the computer program product comprising a computer readable medium and computer program instructions encoded on the medium for:

specifying a drawing space in a markup language;

specifying a drawing command in a procedural language to draw the graphics object into the drawing space; and

specifying content to be rendered into the drawing space.

86. A system for expressing a graphics object, the system comprising:

an interface module for receiving an input from a user; and

a programming engine for;

responsive to user input representing a drawing space, coding a markup language command for specifying the drawing space;

responsive to user input representing a graphics object, coding a plurality of scripting language commands for drawing the graphics object into the drawing space; and

responsive to user input representing content, coding a command for rendering the content into the drawing space, wherein the content comprises one of;

textual content, graphical content, web content, and non-graphical content.

87. A method of expressing a graphics object in computer code, the method comprising:

specifying a drawing space in a markup language;

specifying content in the markup language to be rendered in the drawing space; and

specifying a drawing command in a procedural language to draw the graphics object into the drawing space.

88. The method of claim 87, wherein the step of specifying content in the markup language comprises specifying an attribute of the drawing space associated with the content.

89. The method of claim 87, wherein the content comprises at least one of:

web content, text, graphical content, and non-graphical content.

90. A method of expressing a graphics object in computer code, the method comprising:

specifying a drawing space in a markup language;

specifying a drawing command in a procedural language to draw the arbitrary graphics object into the drawing space; and

specifying a rendering command in the procedural language to render content into the drawing space, the content comprising at least one of;

web content, text content, graphical content, and non-graphical content.

91. The method of claim 90, wherein the drawing command instructs the drawing object to perform the rendering command.

92. The method of claim 90, wherein the rendering command specifies a document fragment to be rendered into the drawing space.

93. The method of claim 90, wherein the rendering command specifies a DOM document object to be rendered into the drawing space.