Interface to display animated icon

• US 10,599,289 B1
• Filed: 11/13/2017
• Issued: 03/24/2020
• Est. Priority Date: 11/13/2017
• Status: Active Grant

• Current Assignee: Snap, Inc.
• Original Assignee: Snap, Inc.
• Inventors: Voss, Jeremy, Chand, Jesse, Eirinberg, Dylan Shane, Wu, William, Lin, Chiayi, Liberman, Anna
• Primary Examiner(s): Hailu, Tadesse
• Application Number:
  US15/810,965
• Time in Patent Office: 862 Days
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06F 3/0488 using a touch-screen or digitiser, e.g. input of commands through traced gestures
• CPC Class Codes: G06F 3/04886 by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
• CPC Class Codes: G06T 13/80 2D [Two Dimensional] animation, e.g. using sprites

Abstract

Embodiments of the present disclosure relate generally to mobile computing technology and, more particularly, but not by way of limitation, to systems for generating and presenting a graphical user interface (GUI) that includes a presentation of an animated icon (e.g., a digital pet) on a display of a client device.

Claims

1. A method comprising:

causing display of a graphical user interface at a first client device, the graphical user interface including a presentation of an animated icon at a location within the graphical user interface;

receiving, from the first client device, a user input that includes a tactile input onto the location of the animated icon within the graphical user interface;

presenting a user input interface within the graphical user interface at the first client device in response to the receiving the user input onto the location of the animated icon, the user input interface comprising a display of a set of user input types;

receiving a selection of a user input type from among the set of user input types;

adjusting a display state model associated with the animated icon based on at least the user input and the user input type;

determining a state of the animated icon based on the display state model;

altering the presentation of the animated icon based on the state;

receiving a request to display the animated icon from a second client device; and

causing display of the presentation of the animated icon based on the state at the second client device.

2. The method of claim 1, wherein the display state model comprises a two-axis space, a state of the animated icon is based on a position of a state indicator within the two-axis space, and the adjusting the display state model includes:

determining the position of the state indicator based on the user input; and

wherein the determining the state of the animated icon is based on the position of the state indicator in the two-axis space.

3. The method of claim 1, wherein the user input interface comprises a carousel element that comprises a set of graphical elements, each graphical element among the set of graphical elements corresponding to a user input type from among the set of user input types.

4. The method of claim 1, wherein the method further comprises:

overlaying a user input indicator onto the animated icon in response to the receiving the user input onto the location within the graphical user interface.

5. The method of claim 1, wherein the altering the presentation of the animated icon based on the state includes:

causing the animated icon to perform an animation, the animation based on the state.

6. The method of claim 1, wherein the graphical user interface is displayed at a touch enabled device, and the user input includes a tactile input onto the graphical user interface, the tactile input including a swiping gesture.

7. The method of claim 1, wherein the adjusting the display state model associated with the animated icon based on the user input includes:

detecting an attribute of the user input, the attribute including a duration of the user input;

retrieving a threshold value in response to the receiving the user input, the threshold value indicating a threshold duration;

determining that the duration of the user input s the threshold duration; and

adjusting the display state model in response to the determining that the duration of the user input transcends the threshold value.

8. The method of claim 1, wherein the animated icon is associated with a first user device and a second user device, and wherein the causing display of the presentation of the animated icon within the graphical user interface includes:

detecting the first user device within a predefined range of the second user device; and

causing display of the presentation of the animated icon within the graphical user interface of the first client device and the second client device in response to the detecting the first user device within the predefined range of the second user device.

9. The method of claim 8, wherein the detecting the first user device within a predefined range of the second user device includes:

receiving first check-in data from the first user device, and second check-in data from the second user device;

determining a first location of the first user devices based on the first check-in data and a second location of the second user device based on the second check-in data; and

determining that the first user device and the second user device are within the predefined range based on the first location of the first user device and the second location of the second user device.

10. The method of claim 1, wherein the animated icon is associated with a first user device and a second user device, and wherein the causing display of the presentation of the animated icon within the graphical user interface includes:

initiating a communication session between the first user device and the second user device; and

causing display of the presentation of the animated icon within the graphical user interface of the first client device and the second client device in response to the initiating the communication session.

11. The method of claim 10, wherein the communication session includes at least one of a:

video chat, an ephemeral message, and a text message.

12. The method of claim 1, wherein the graphical user interface is presented at a client device, wherein the client device includes a first camera and a second camera, and wherein the causing display of the presentation of the animated icon within the graphical user interface includes:

activating the first camera of the client device;

causing display of the graphical user interface at the client device in response to the activating the first camera, wherein the presentation of the animated icon is based on the first camera;

receiving a user input to activate the second camera of the client device;

deactivating the first camera in response to the user input;

activating the second camera in response to the user input; and

altering the presentation of the animated icon based on the activating the second camera.

13. A system comprising:

a memory; and

at least one hardware processor coupled to the memory and comprising instructions that causes the system to perform operations comprising;

causing display of a graphical user interface at a first client device, the graphical user interface including a presentation of an animated icon at a location within the graphical user interface;

receiving, from the first client device, a user input that includes a tactile input onto the location of the animated icon within the graphical user interface;

presenting a user input interface within the graphical user interface at the first client device in response to the receiving the user input onto the location of the animated icon, the user input interface comprising a display of a set of user input types;

receiving a selection of a user input type from among the set of user input types;

adjusting a display state model associated with the animated icon based on at least the user input and the user input type;

determining a state of the animated icon based on the display state model;

altering the presentation of the animated icon based on the state;

receiving a request to display the animated icon from a second client device; and

causing display of the presentation of the animated icon based on the state at the second client device.

14. The system of claim 13, wherein the display state model comprises a two-axis space, a state of the animated icon is based on a position of a state indicator within the two-axis space, and the adjusting the display state model includes:

determining the position of the state indicator based on the user input; and

wherein the determining the state of the animated icon is based on the position of the state indicator in the two-axis space.

15. The system of claim 13, wherein the user input interface comprises a carousel element that comprises a set of graphical elements, each graphical element among the set of graphical elements corresponding to a user input type from among the set of user input types.

16. The system of claim 13, wherein the instructions cause the system to perform operations further comprising:

overlaying a user input indicator onto the animated icon in response to the receiving the user input onto the location within the graphical user interface.

17. The system of claim 13, wherein the altering the presentation of the animated icon based on the state includes:

causing the animated icon to perform an animation, the animation based on the state.

18. The system of claim 13, wherein the graphical user interface is displayed at a touch enabled device, and the user input includes a tactile input onto the graphical user interface, the tactile input including a swiping gesture.

19. The system of claim 13, wherein the adjusting the display state model associated with the animated icon based on the user input includes:

detecting an attribute of the user input, the attribute including a duration of the user input;

retrieving a threshold value in response to the receiving the user input, the threshold value indicating a threshold duration;

determining that the duration of the user input transcends the threshold duration; and

adjusting the display state model in response to the determining that the duration of the user input transcends the threshold value.

20. A non-transitory machine-readable storage medium comprising instructions that, when executed by one or more processors of a machine, cause the machine to perform operations comprising:

causing display of a graphical user interface at a first client device, the graphical user interface including a presentation of an animated icon at a location within the graphical user interface;

receiving, from the first client device, a user input that includes a tactile input onto the location of the animated icon within the graphical user interface;

presenting a user input interface within the graphical user interface at the first client device in response to the receiving the user input onto the location of the animated icon, the user input interface comprising a display of a set of user input types;

receiving a selection of a user input type from among the set of user input types;

adjusting a display state model associated with the animated icon based on at least the user input and the user input type;

determining a state of the animated icon based on the display state model;

altering the presentation of the animated icon based on the state;

receiving a request to display the animated icon from a second client device; and

causing display of the presentation of the animated icon based on the state at the second client device.