Rendering borders of elements of a graphical user interface

• US 9,396,565 B2
• Filed: 06/07/2013
• Issued: 07/19/2016
• Est. Priority Date: 06/07/2013
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Ording, Bas
• Primary Examiner(s): Thompson, James A
• Assistant Examiner(s): Mazumder, Tapas
• Application Number:
  US13/913,368
• Publication Number:
  US 20140362089A1
• Time in Patent Office: 1,138 Days
• US Class Current: 1/1
• CPC Class Codes: G06F 3/048 Interaction techniques based on graphical user interfaces [GUI]
• CPC Class Codes: G06T 11/203 Drawing of straight lines or curves

Abstract

Systems and methods are described to render borders of controls and indicators in a graphical user interface (GUI), such that the rendered borders have continuous curvatures. In one aspect, a method includes generating a border of a GUI element to be represented in a GUI. The border includes a first straight side, a second straight side, and a corner portion that joins together the first straight side and the second straight side, such that a portion of the border that includes the first straight side, the corner portion and the second straight side is continuous and has continuous curvature. Additionally, the method includes representing the GUI element in the GUI.

Claims

1. A system comprising:

one or more hardware processors; and

non-transitory computer readable medium encoding instructions that, when executed by the one or more hardware processors, cause the system to render a border in a graphical user interface (GUI) on a display device associated with the system, wherein the border comprises

a first straight side,

a second straight side, and

a corner portion that joins together the first straight side and the second straight side, such that a portion of the border that comprises the first straight side, the corner portion and the second straight side is continuous and has continuous curvature, wherein the corner portion comprises a first non-circular portion and a second non-circular portion, such that proximate ends of the first and second non-circular portions have a common curvature and distal ends have zero curvature.

2. The system of claim 1, wherein

the corner portion further comprises a circular portion with a radius corresponding to the common curvature, and

the circular portion is connected with the first straight side through the first non-circular portion and with the second straight side through the second non-circular portion.

3. The system of claim 2, wherein a length of the combined first and second non-circular portions is a specified fraction of a length of the corner portion.

4. The system of claim 3, wherein the radius of the circular portion and the fraction are pre-specified.

5. The system of claim 1, wherein the first and second non-circular portions are B-spline curves.

6. The system of claim 5, wherein the B-spline curves are Bezier curves.

7. The system of claim 6, wherein the Bezier curves are 3^rd order Bezier curves.

8. The system of claim 5, wherein the B-spline curves are non-uniform rational basis spline (NURBS) curves.

9. The system of claim 1, wherein the first and second non-circular portions are portions of Euler spirals.

10. The system of claim 1, wherein the border is part of an icon representation of the GUI.

11. The system of claim 1, wherein

the GUI comprises a keyboard representation, and

the border is part of a representation of a key from among a plurality of keys of the keyboard representation.

12. The system of claim 1, wherein the border is part of a text box representation of the GUI.

13. The system of claim 1, wherein the border is part of an image representation of the GUI.

14. A system comprises:

means for generating a border of a control or indicator to be rendered in a graphical user interface (GUI), wherein the border comprises

a first straight side,

a second straight side, and

a corner portion that joins together the first straight side and the second straight side, such that a portion of the border that comprises the first straight side, the corner portion and the second straight side is continuous and has continuous curvature, wherein the corner portion comprises a first non-circular portion and a second non-circular portion, such that proximate ends of the first and second non-circular portions have a common curvature and distal ends have zero curvature; and

a hardware processor to render the border of the control or indicator in the GUI.

15. The system of claim 14, wherein the means for generating the border is configured to

receive specification of a fraction of a length of the corner portion represented by a length of the combined first and second non-circular portions, and of a radius corresponding to the common curvature;

determine a Bezier curve that has (i) maximum curvature corresponding to specified radius at a point located half-way between its end points, (ii) zero curvature at the end points, and (iii) a length equal to the fraction of the length of the corner portion; and

generate (I) the first non-circular portion as half of the Bezier curve and (II) the second non-circular portion as a mirrored-instance of the half of the Bezier curve with respect to a bisector of an angle between the first and second straight sides, such that each of the first and second non-circular portions has zero curvature at one end and the common curvature corresponding to the specified radius at the other end.

16. The system of claim 15, wherein the Bezier curve is a 3^rd order Bezier curve.

17. The system of claim 14, wherein

the corner portion further comprises a circular portion with a radius corresponding to the common curvature, and

the circular portion is connected with the first straight side through the first non-circular portion and with the second straight side through the second non-circular portion.

18. The system of claim 17, wherein the circular portion is a circular arc.

19. The system of claim 17, wherein the circular portion is approximated by a B-spline curve.

20. A method comprising:

generating, by a computer system, a border of a control or indicator to be represented in a graphical user interface (GUI),

wherein the border comprises

a first straight side,

a second straight side, and

a corner portion that joins together the first straight side and the second straight side, such that a portion of the border that comprises the first straight side, the corner portion and the second straight side is continuous and has continuous curvature, wherein the corner portion comprises a first non-circular portion and a second non-circular portion, and

wherein said generating the border comprises arranging the first and second non-circular portions to have zero curvature at distal ends and a common curvature at proximal ends; and

representing, by the computer system in the GUI, the border of the control or indicator.

21. The method of claim 20, wherein said generating the border comprises

receiving specification of a fraction of a length of the corner portion represented by a length of the combined first and second non-circular portions, and of a radius corresponding to the common curvature;

determining a B-spline curve that has (i) maximum curvature corresponding to specified radius at a point located half-way between its end points, (ii) zero curvature at the end points, and (iii) a length equal to the fraction of the length of the corner portion; and

generating (I) the first non-circular portion as half of the B-spline curve and (II) the second non-circular portion as a mirrored-instance of the half of the B-spline curve with respect to a bisector of an angle between the first and second straight sides, such that each of the first and second non-circular portions has zero curvature at one end and the common curvature corresponding to the specified radius at the other end.

22. The method of claim 21, wherein the B-spline curve is a Bezier curve.

23. The method of claim 22, wherein the Bezier curve is a 3^rd order Bezier curve.

24. The method of claim 20, wherein

the corner portion further comprises a circular portion with a radius corresponding to the common curvature, and

said generating the border comprises connecting the circular portion with the first straight side through the first non-circular portion and with the second straight side through the second non-circular portion.

25. The method of claim 24, wherein said generating the border comprises generating the circular portion as a circular arc.

26. The method of claim 24, wherein said generating the border comprises generating the circular portion as a B-spline curve.

27. A device, comprising:

a display;

one or more processors; and

memory storing one or more programs, the one or more programs including instructions which, when executed by the one or more processors, cause the device to;

receive a request to display a user interface element with one or more curved corners; and

in response to receiving the request to display the user interface element, displaying the user interface element on the display with a curved boundary, wherein generating the curved boundary includes;

in accordance with a determination that the user interface element has a first set of one or more dimension parameters, generating, via the one or more processors, a first shape for the boundary of the user interface element, wherein the first shape includes;

a first straight side of the first shape,

a second straight side of the first shape, and

a corner portion of the first shape that joins together the first straight side of the first shape and the second straight side of the first shape, such that a portion of the boundary of the first shape that comprises the first straight side, the corner portion and the second straight side is continuous and has continuous curvature, wherein the corner portion of the first shape comprises a first non-circular portion and a second non-circular portion, such that proximate ends of the first and second non-circular portions of the first shape have a same first curvature, wherein the first curvature is determined based at least in part on the first set of dimensional parameters; and

in accordance with a determination that the user interface element has a second set of one or more dimension parameters different from the first set of dimension parameters, generating, via the one or more processors, a second shape for the boundary of the user interface element, wherein the second shape includes;

a first straight side of the second shape,

a second straight side of the second shape, and

a corner portion of the second shape that joins together the first straight side of the second shape and the second straight side of the second shape, such that a portion of the boundary of the second shape that comprises the first straight side, the corner portion and the second straight side is continuous and has continuous curvature, wherein the corner portion of the second shape comprises a first non-circular portion and a second non-circular portion, such that proximate ends of the first and second non-circular portions of the second shape have a same second curvature, wherein the second curvature is determined based at least in part on the second set of dimensional parameters and is different from the first curvature.

28. A method, comprising:

receiving a request to display a user interface element with one or more curved corners; and

in response to receiving the request to display the user interface element, displaying the user interface element on a display with a curved boundary,

wherein generating the curved boundary includes;

in accordance with a determination that the user interface element has a first set of one or more dimension parameters, generating, via one or more processors, a first shape for the boundary of the user interface element, wherein the first shape includes;

a first straight side of the first shape,

a second straight side of the first shape, and

a corner portion of the first shape that joins together the first straight side of the first shape and the second straight side of the first shape, such that a portion of the boundary of the first shape that comprises the first straight side, the corner portion and the second straight side is continuous and has continuous curvature, wherein the corner portion of the first shape comprises a first non-circular portion and a second non-circular portion, such that proximate ends of the first and second non-circular portions of the first shape have a same first curvature, wherein the first curvature is determined based at least in part on the first set of dimensional parameters; and

in accordance with a determination that the user interface element has a second set of one or more dimension parameters different from the first set of dimension parameters, generating, via the one or more processors, a second shape for the boundary of the user interface element, wherein the second shape includes;

a first straight side of the second shape,

a second straight side of the second shape, and

a corner portion of the second shape that joins together the first straight side of the second shape and the second straight side of the second shape, such that a portion of the boundary of the second shape that comprises the first straight side, the corner portion and the second straight side is continuous and has continuous curvature, wherein the corner portion of the second shape comprises a first non-circular portion and a second non-circular portion, such that proximate ends of the first and second non-circular portions of the second shape have a same second curvature, wherein the second curvature is determined based at least in part on the second set of dimensional parameters and is different from the first curvature.

29. A non-transitory computer-readable medium encoding instructions that, when executed by data processing apparatus, cause the data processing apparatus to perform operations comprising:

receiving a request to display a user interface element with one or more curved corners; and

in response to receiving the request to display the user interface element, displaying the user interface element on a display with a curved boundary,

wherein generating the curved boundary includes;

in accordance with a determination that the user interface element has a first set of one or more dimension parameters, generating a first shape for the boundary of the user interface element, wherein the first shape includes;

a first straight side of the first shape,

a second straight side of the first shape, and

a corner portion of the first shape that joins together the first straight side of the first shape and the second straight side of the first shape, such that a portion of the boundary of the first shape that comprises the first straight side, the corner portion and the second straight side is continuous and has continuous curvature, wherein the corner portion of the first shape comprises a first non-circular portion and a second non-circular portion, such that proximate ends of the first and second non-circular portions of the first shape have a same first curvature, wherein the first curvature is determined based at least in part on the first set of dimensional parameters; and

in accordance with a determination that the user interface element has a second set of one or more dimension parameters different from the first set of dimension parameters, generating a second shape for the boundary of the user interface element, wherein the second shape includes;

a first straight side of the second shape,

a second straight side of the second shape, and

a corner portion of the second shape that joins together the first straight side of the second shape and the second straight side of the second shape, such that a portion of the boundary of the second shape that comprises the first straight side, the corner portion and the second straight side is continuous and has continuous curvature, wherein the corner portion of the second shape comprises a first non-circular portion and a second non-circular portion, such that proximate ends of the first and second non-circular portions of the second shape have a same second curvature, wherein the second curvature is determined based at least in part on the second set of dimensional parameters and is different from the first curvature.