Dynamically resizing bubbles for display in different-sized two-dimensional viewing areas of different computer display devices

• US 10,529,014 B2
• Filed: 07/12/2012
• Issued: 01/07/2020
• Est. Priority Date: 07/12/2012
• Status: Active Grant

• Current Assignee: MX Technologies Inc.
• Original Assignee: MX Technologies Inc.
• Inventors: Caldwell, John Ryan
• Primary Examiner(s): Niquette, Robert R
• Assistant Examiner(s): Nguyen, Liz P
• Application Number:
  US13/507,602
• Publication Number:
  US 20140236789A1
• Time in Patent Office: 2,735 Days
• Field of Search: 705 35
• CPC Class Codes: G06Q 40/02 Banking, e.g. interest calculation or account maintenance credit or loans G06Q40/03

Abstract

Computer software for creating and displaying intuitively understandable visual representations of personal budgeting information that use proportionate bubble graphics for portions of a budget, each graphic having a visual size depiction proportionate to its percentage of the total budget being considered.

Claims

1. A computer-implemented method for dynamically resizing bubbles for display in different-sized two-dimensional viewing areas of different computer display devices, the computer-implemented method comprising:

receiving a request to access larger and smaller bubbles on a two-dimensional viewing area of a larger computer display device, the larger and smaller bubbles representing budgets categories for a total budget represented by a largest bubble;

calculating a visual size for each of the larger and smaller bubbles relative to one another and based on the viewing area of the larger computer display device, each of the smaller and larger bubbles being sized proportionate to a percentage of the total budget represented by a size of the largest bubble such that the sum of the surface areas of each of the smaller and larger bubbles is equal to the surface area of the largest bubble;

automatically displaying the larger and smaller bubbles with the calculated sizes on the viewing area of the larger computer display device with an original surface area of the larger bubble being larger than an original surface area of the smaller bubble;

receiving a request to access the larger and smaller bubbles on a two-dimensional viewing area of a smaller computer display device, the viewing area of the smaller computer display device being smaller than the viewing area of the larger computer display device;

calculating a different visual size for each of the larger and smaller bubbles relative to one another and based on the viewing area of the smaller computer display device such that each of the larger and smaller bubbles remain sized proportionate to the percentage of a total budget represented by the size of the largest bubble such that the sum of the surface areas of each of the smaller and larger bubbles is equal to the surface area of the largest bubble;

automatically shrinking the surface areas of the larger and smaller bubbles to the calculated sizes to fit the viewing area of the smaller computer display device in order to display the larger and smaller bubbles on the viewing area with the shrunken surface area of the larger bubble remaining larger than the shrunken surface area of the smaller bubble;

receiving a request to again access the larger and smaller bubbles on the viewing area of the larger computer display device;

automatically restoring the larger and smaller bubbles to their originally calculated sizes to fit the viewing area of the larger computer display device in order to again display the larger and smaller bubbles on the viewing area of the larger computer display device;

receiving updated placement preferences from a user of the larger computer display device;

in response to receiving the updated placement preferences, fluidly moving the larger and smaller bubbles around the viewing area of the larger computer display device according to the updated placement preferences;

receiving a selection of one of the larger and smaller bubbles from a user;

calculating sizes of one or more breakdown bubbles associated with the selected bubble proportionate to a percentage of a budget represented by the selected bubble, each of the one or more breakdown bubbles representing one of a time period and an individual expense item associated with the selected bubble;

determining placement of each of the one or more breakdown bubbles relative to one another around the selected bubble according to the placement preferences; and

graphically emphasizing, on one of the smaller and larger computer display devices, a bubble that visually represents an amount of a budget that has been used in response to the used amount satisfying a threshold budget level, one or more graphical elements of the bubble being graphically altered such that the bubble stands out visually from other bubbles presented on the display device.

2. The computer-implemented method as recited in claim 1, wherein the larger and smaller bubbles are displayed as two-dimensional circular graphical objects.

3. The computer-implemented method as recited in claim 1, wherein:

the original surface area of the larger bubble is proportionate to a larger budget category of a budget and the original surface area of the smaller bubble is proportionate to a smaller budget category of the budget; and

the shrunken surface area of the larger bubble is proportionate to the larger budget category of the budget and the shrunken surface area of the smaller bubble is proportionate to the smaller budget category of the budget.

4. The computer-implemented method as recited in claim 3, further comprising:

displaying the larger bubble in green while expenses within the larger budget category are within the budget for the larger budget category;

changing the display of the larger bubble to yellow once expenses within the larger budget category are approaching the budget for the larger budget category; and

changing the display of the larger bubble to red once expenses within the larger budget category exceed the budget for the larger budget category.

5. The computer-implemented method as recited in claim 3, further comprising:

displaying a larger ring inside the larger bubble with a first color representing expenses to date in the larger budget category;

changing the first color of the larger ring inside the larger bubble to a second color as the expenses to date change in the larger budget category;

displaying a smaller ring inside the smaller bubble with the first color representing expenses to date in the smaller budget category; and

changing the first color of the smaller ring inside the smaller bubble to the second color as the expenses to date change in the smaller budget category.

6. The computer-implemented method as recited in claim 3, further comprising:

displaying a text label corresponding to the larger budget category inside the larger bubble;

displaying total expenses numeric data and total budget numeric data corresponding to the larger budget category inside the larger bubble;

displaying percentage of budget spent numeric data corresponding to the larger budget category inside the larger bubble; and

not displaying a text label, total expenses numeric data and total budget numeric data, and percentage of budget spent numeric data corresponding to the smaller budget category inside the smaller bubble due to space constraints.

7. The computer-implemented method as recited in claim 3, further comprising:

displaying total expenses numeric data and total budget numeric data corresponding to the larger budget category inside the larger bubble;

displaying percentage of budget spent numeric data corresponding to the larger budget category inside the larger bubble; and

displaying total expenses numeric data and total budget numeric data corresponding to the smaller budget category inside the smaller bubble, while not displaying the percentage of budget spent numeric data corresponding to the smaller budget category inside the smaller bubble due to space constraints.

8. The computer-implemented method as recited in claim 3, further comprising:

receiving a selection of the larger bubble from the user of the larger computer display device;

in response to receiving the selection, displaying an edit bubble proximate the larger bubble;

receiving a selection of the edit bubble from the user of the larger computer display device; and

in response to receiving the selection, allowing the user to edit the larger budget category.

9. The computer-implemented method as recited in claim 1, further comprising:

displaying a larger icon inside the larger bubble; and

displaying a smaller icon inside the smaller bubble.

10. The computer-implemented method as recited in claim 1, further comprising:

receiving second updated placement preferences from the user of the larger computer display device; and

in response to receiving the second updated placement preferences, fluidly moving the larger and smaller bubbles around the viewing area of the larger computer display device according to the second updated placement preferences.

11. A computer-implemented method for dynamically resizing bubbles for display in different-sized two-dimensional viewing areas of different computer display devices, the computer-implemented method comprising:

receiving a request to access a budget on a two-dimensional viewing area of a larger computer display device, the budget including larger and smaller budget categories, the larger budget category making up a larger portion of the budget, the smaller budget category making up a smaller portion of the budget;

calculating a visual size for each of one or more larger and smaller bubbles relative to one another and based on the viewing area of the larger computer display device, each of the one or more larger and smaller bubbles representing the larger and smaller budget categories, representatively, each of the smaller and larger bubbles being sized proportionate to a percentage of the budget represented by a size of a largest bubble such that the sum of the surface areas of each of the smaller and larger bubbles is equal to the surface area of the largest bubble;

automatically displaying the larger and smaller bubbles with the calculated sizes on the viewing area of the larger computer display device, the larger bubbles depicting the larger budget categories, the smaller bubbles depicting the smaller budget categories, the larger and smaller bubbles being displayed as two-dimensional circular graphical objects, an original surface area of the larger bubbles being larger than an original surface area of the smaller bubbles;

receiving a request to access the budget on a two-dimensional viewing area of a smaller computer display device, the viewing area of the smaller computer display device being smaller than the viewing area of the larger computer display device;

calculating a different visual size for each of the larger and smaller bubbles relative to one another and based on the viewing area of the smaller computer display device such that each of the larger and smaller bubbles remain sized proportionate to the percentage of a budget represented by the size of the largest bubble such that the sum of the surface areas of each of the smaller and larger bubbles is equal to the surface area of the largest bubble;

automatically shrinking the surface areas of the larger and smaller bubbles to the calculated sizes to fit the viewing area of the smaller computer display device in order to display the larger and smaller bubbles on the viewing area with the shrunken surface area of the larger bubble remaining larger than the shrunken surface area of the smaller bubble;

receiving a request to again access the larger and smaller bubbles on the viewing area of the larger computer display device;

automatically restoring the larger and smaller bubbles to their originally calculated sizes to fit the viewing area of the larger computer display device in order to again display the larger and smaller bubbles on the viewing area of the larger computer display device;

receiving updated placement preferences from a user of the larger computer display device;

in response to receiving the updated placement preferences, fluidly moving the larger and smaller bubbles around the viewing area of the larger computer display device according to the updated placement preferences;

receiving a selection of one of the larger and smaller bubbles from a user;

calculating sizes of one or more breakdown bubbles associated with the selected bubble proportionate to a percentage of a budget represented by the selected bubble, each of the one or more breakdown bubbles representing one of a time period and an individual expense item associated with the selected bubble;

determining placement of each of the one or more breakdown bubbles relative to one another around the selected bubble according to the placement preferences; and

graphically emphasizing, on one of the smaller and larger computer display devices, a bubble that visually represents an amount of a budget that has been used in response to the used amount satisfying a threshold budget level, the bubble being graphically altered to visually pulsate to provide a visual warning on the display device that an expense amount associated with the budget is within a threshold budget level of the budgeted amount.

12. The computer-implemented method as recited in claim 11, wherein:

the original surface area of the larger bubble is proportionate to the larger portion of the budget and the original surface area of the smaller bubble is proportionate to the smaller portion of the budget; and

the shrunken surface area of the larger bubble is proportionate to the larger portion of the budget and the shrunken surface area of the smaller bubble is proportionate to the smaller portion of the budget.

13. The computer-implemented method as recited in claim 11, further comprising:

displaying the larger bubble in green while expenses within the larger budget category are within the budget for the larger budget category;

changing the display of the larger bubble to yellow once expenses within the larger budget category are approaching the budget for the larger budget category; and

changing the display of the larger bubble to red once expenses within the larger budget category exceed the budget for the larger budget category.

14. The computer-implemented method as recited in claim 11, further comprising:

displaying a larger ring inside the larger bubble with a first color representing expenses to date in the larger budget category;

changing the first color of the larger ring inside the larger bubble to a second color as the expenses to date change in the larger budget category;

displaying a smaller ring inside the smaller bubble with the first color representing expenses to date in the smaller budget category; and

changing the first color of the smaller ring inside the smaller bubble to the second color as the expenses to date change in the smaller budget category.

15. The computer-implemented method as recited in claim 11, further comprising:

displaying a text label corresponding to the larger budget category inside the larger bubble;

displaying total expenses numeric data and total budget numeric data corresponding to the larger budget category inside the larger bubble;

displaying percentage of budget spent numeric data corresponding to the larger budget category inside the larger bubble; and

not displaying a text label, total expenses numeric data and total budget numeric data, and percentage of budget spent numeric data corresponding to the smaller budget category inside the smaller bubble due to space constraints.

16. The computer-implemented method as recited in claim 11, further comprising:

displaying total expenses numeric data and total budget numeric data corresponding to the larger budget category inside the larger bubble;

displaying percentage of budget spent numeric data corresponding to the larger budget category inside the larger bubble; and

displaying total expenses numeric data and total budget numeric data corresponding to the smaller budget category inside the smaller bubble, while not displaying the percentage of budget spent numeric data corresponding to the smaller budget category inside the smaller bubble due to space constraints.

17. The computer-implemented method as recited in claim 11, further comprising:

displaying a larger icon inside the larger bubble; and

displaying a smaller icon inside the smaller bubble.

18. The computer-implemented method as recited in claim 11, further comprising:

receiving second updated placement preferences from the user of the larger computer display device; and

in response to receiving the second updated placement preferences, fluidly moving the larger and smaller bubbles around the viewing area of the larger computer display device according to the second updated placement preferences.

19. The computer-implemented method as recited in claim 11, further comprising:

receiving a selection of the larger bubble from the user of the larger computer display device;

in response to receiving the selection, displaying an edit bubble proximate the larger bubble;

receiving a selection of the edit bubble from the user of the larger computer display device; and

in response to receiving the selection, allowing the user to edit the larger budget category.

20. The computer-implemented method as recited in claim 11, further comprising:

receiving a selection of the larger bubble from the user of the larger computer display device; and

in response to receiving the selection, displaying a graph proximate the larger bubble that shows historical expenses for the larger budget category.