Overlay images and texts in user interface

• US 8,984,428 B2
• Filed: 06/05/2012
• Issued: 03/17/2015
• Est. Priority Date: 02/01/2012
• Status: Active Grant

• Current Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Original Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Inventors: Matas, Michael, Tsinteris, Kimon, Sarner, Austin, Melcher, Charles
• Primary Examiner(s): Kim, Matt
• Assistant Examiner(s): IPAKCHI, MARYAM M
• Application Number:
  US13/489,265
• Publication Number:
  US 20130198666A1
• Time in Patent Office: 1,015 Days
• Field of Search: None
• US Class Current: 715/766
• CPC Class Codes: G06F 2203/04808 Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen
• CPC Class Codes: G06F 3/017 Gesture based interaction, e.g. based on a set of recognized hand gestures interaction based on gestures traced on a digitiser G06F3/04883
• 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/04815 Interaction with a metaphor-based environment or interaction object displayed as three-dimensional, e.g. changing the user viewpoint with respect to the environment or object
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• 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 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/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• CPC Class Codes: G06F 3/0485 Scrolling or panning
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text
• 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 40/137 Hierarchical processing, e.g. outlines
• CPC Class Codes: G06F 8/34 Graphical or visual programming
• CPC Class Codes: G06T 11/60 Editing figures and text; Combining figures or text
• CPC Class Codes: G06T 15/60 Shadow generation
• CPC Class Codes: H04L 67/06 specially adapted for file transfer, e.g. file transfer protocol [FTP]
• CPC Class Codes: H04L 67/52 specially adapted for the location of the user terminal

Abstract

In one embodiment, overlaying a first element on top of a second element in a user interface; and adjusting visual appearance of the first element based on a portion of the second element underneath the first element.

Claims

1. A method, performed by one or more computing devices, comprising:

receiving a first input from a user in a user interface, the first input comprising a text element;

receiving a second input from the user in the user interface, the second input comprising an image element;

overlapping the text element directly on top of the image element in the user interface; and

automatically adjusting a visual appearance of the text element based on a portion of the image element underneath the text element, in response to the overlapping of the text element on top of the image element, based on a portion of the image element,

wherein adjusting the visual appearance of the text element comprises;

left aligning each line of text of the text element relative to the left edge of the image element when the text element is positioned at a left portion of the image element,

right aligning each line of text of the text element relative to the right edge of the image element when the text element is positioned at a right portion of the image element, and

center aligning each line of text of the text element relative to a center of the image element when the text element is positioned at a center portion of the image element.

2. The method of claim 1, further comprising

adjusting visual appearance of the portion of the second element underneath the first element based on the first element.

3. The method of claim 1, wherein adjusting the visual appearance of the text element comprises

selecting a first luminosity level for the text element that is in contrast to a second luminosity level of the portion of the image element underneath the text element.

4. The method of claim 1, wherein adjusting the visual appearance of the text element comprises

selecting a first color for the text element that is in contrast to a second color of the portion of the image element underneath the text element.

5. The method of claim 1, wherein adjusting the visual appearance of the text element comprises

adding or removing a shadow around the text element based on visual characteristics of the portion of the image element underneath the text element.

6. A system comprising:

a memory comprising instructions executable by one or more processors; and

the one or more processors coupled to the memory and operable to execute the instructions, the one or more processors being operable when executing the instructions to;

receive a first input from a user in a user interface, the first input comprising a text element;

receive a second input from the user in the user interface, the second input comprising an image element;

overlap the text element directly on top of the image element in the user interface; and

automatically adjust a visual appearance of the text element based on a portion of the image element underneath the text element, in response to the overlap of the text element on top of the image element, based on a portion of the image element,

wherein the adjusting of the visual appearance of the text element comprises;

left aligning each line of text of the text element relative to the left edge of the image element when the text element is positioned at a left portion of the image element,

right aligning each line of text of the text element relative to the right edge of the image element when the text element is positioned at a right portion of the image element, and

center aligning each line of text of the text element relative to a center of the image element when the text element is positioned at a center portion of the image element.

7. The system of claim 6, wherein the one or more processors are further operable when executing the instructions to

adjust visual appearance of the portion of the second element underneath the first element based on the first element.

8. One or more computer-readable non-transitory storage media embodying software operable when executed by one or more computer systems to:

receive a first input from a user in a user interface, the first input comprising a text element;

receive a second input from the user in the user interface, the second input comprising an image element;

overlap the text element directly on top of the image element in the user interface; and

automatically adjust a visual appearance of the text element based on a portion of the image element underneath the text element, in response to the overlap of the text element on top of the image element, based on a portion of the image element,

wherein the adjusting of the visual appearance of the text element comprises;

left aligning each line of text of the text element relative to the left edge of the image element when the text element is positioned at a left portion of the image element,

right aligning each line of text of the text element relative to the right edge of the image element when the text element is positioned at a right portion of the image element, and

center aligning each line of text of the text element relative to a center of the image element when the text element is positioned at a center portion of the image element.

9. The media of claim 8, wherein the software is further operable when by the one or more computer systems to

adjust visual appearance of the portion of the second element underneath the first element based on the first element.

10. The media of claim 8, wherein adjust the visual appearance of the text element comprises

select a first luminosity level for the text element that is in contrast to a second luminosity level of the portion of the image element underneath the text element.

11. The media of claim 8, wherein adjust the visual appearance of the text element comprises

select a first color for the text element that is in contrast to a second color of the portion of the image element underneath the text element.

12. The media of claim 8, wherein adjust the visual appearance of the text element comprises

add or remove a shadow around the text element based on visual characteristics of the portion of the image element underneath the text element.