Patent Description:
<CIT> discloses methods and devices for displaying a document on a touch screen display. The method for displaying a document on a touch screen display includes: displaying an edge region of an electronic document on the touch screen display, the edge region containing an edge of the electronic document and one or more display elements; detecting a movement of an object acting on the touch screen display; and in response to the movement of the object, stretching, for display, the one or more display elements in a direction away from the edge.

<CIT> discloses a computing device. The device includes a processor, the processor may display a current display of a list of items, and may receive a user input to scroll to an end of the list. In response to receiving the user input, the processor may determine whether the current display of the list includes the end of the list, and if the current display includes the end of the list, the processor may display a stretched version of the end of the list.

<CIT> discloses a method for navigating within displayable content using navigation commands, a navigation device and an associated program.

<CIT> discloses a mobile terminal device that includes a display section having a display surface for displaying a screen including information, an accepting section which accepts a moving operation for moving the screen, and a display control section which controls the display section based on the moving operation. When the moving operation for moving an end of the screen inside the end of the display surface is performed, the display control section controls the display section so that the screen is deformed to a moving direction of the screen in a direction of movement of the screen by the moving operation.

<CIT> discloses a method of outputting graphics to a display comprising: detecting an input from a user representative of an image manipulation request; performing a first image manipulation process on at least part of the retrieved image data set in accordance with the image manipulation request to produce second graphics; outputting the second graphics to a display area of the display; determining that a boundary condition relating to the retrieved image data set has been satisfied, the boundary condition relating to a limit of the retrieved image data set beyond which there is no further element of the retrieved image data set to be displayed; performing a second image manipulation process on at least part of the retrieved image data set to produce third graphics, the second image manipulation process providing a second type of alteration to the retrieved image data set, the second type of alteration being of a different type than the first type of alteration; and outputting the third graphics to the display area of the display.

<CIT> discloses methods and devices that provide a user interface that provides visual cues when a document pan or scroll has reached an end or boundary by distorting the document image in response to further user inputs. The image distortion functionality may include shrinking, stretching, accordion expansion, or bouncing of a document image. The degree of image distortion may be proportional to the distance that a user input would have the document move beyond the encountered boundary. When a boundary of a document image is reached during a rapid pan or scroll, a bouncing image distortion may be applied to the document image to inform the user that the document reached a boundary during the movement.

In general, aspects of this disclosure are directed to techniques that enable a computing device to provide a visual indication that there is no additional content to scroll. When a user continues to perform a scroll gesture and scrolls to the end of the content and attempts to continue to scroll the content (i.e., overscrolls the content), a computing device configured in accordance with the techniques of this disclosure may visually stretch at least a portion of the displayed content. In various instances, the computing device may determine various characteristics of the scroll gesture, such as location on a presence-sensitive screen of the computing device, velocity, acceleration, duration, etc. Based on one or more of these scroll gesture characteristics, the computing device may determine a stretch ratio and may apply the stretch ratio to at least a portion of the displayed content. For example, the computing device may generate a bitmap representation of at least a portion of the displayed content and may apply the stretch ratio to the bitmap representation to generate a stretched bitmap representation. As another example, the computing device may apply the stretch ratio to the low-level surface that holds and controls what the end pixels will look like on the display prior to the pixels being displayed. The computing device generates an updated graphical user interface that includes the stretched bitmap representation and displays the updated graphical user interface showing the stretched content. In this way, the computing device may provide a visual indication that there is no additional content to scroll.

In one example, the disclosure is directed to a method according to claim <NUM>.

In another example, the disclosure is directed to a computing device according to claim <NUM>.

In another example, the disclosure is directed to a non-transitory computer-readable storage medium according to claim <NUM>.

In another example, the disclosure is directed to an apparatus that includes means for performing the method of claim <NUM>.

<FIG> is a conceptual diagram illustrating an example computing device <NUM> configured to stretch content in response to an overscroll, in accordance with one or more aspects of the present disclosure. As shown in <FIG>, computing device <NUM> is a mobile computing device (e.g., a mobile phone). However, in other examples, computing device <NUM> may be a tablet computer, a laptop computer, a desktop computer, a gaming system, a media player, an e-book reader, a television platform, an automobile navigation system, a wearable computing device (e.g., a computerized watch, computerized headset, computerized eyewear, a computerized glove), or any other type of mobile or non-mobile computing device.

Computing device <NUM> includes a user interface device (UID) <NUM>. UID <NUM> of computing device <NUM> may function as an input device for computing device <NUM> and as an output device for computing device <NUM>. UID <NUM> may be implemented using various technologies. For instance, UID <NUM> may function as an input device using a presence-sensitive input screen, such as a resistive touchscreen, a surface acoustic wave touchscreen, a capacitive touchscreen, a projective capacitive touchscreen, a pressure sensitive screen, an acoustic pulse recognition touchscreen, or another presence-sensitive display technology. UID <NUM> may function as an output (e.g., display) device using any one or more display devices, such as a liquid crystal display (LCD), dot matrix display, light emitting diode (LED) display, microLED, organic light-emitting diode (OLED) display, e-ink, or similar monochrome or color display capable of outputting visible information to a user of computing device <NUM>.

UID <NUM> of computing device <NUM> may include a presence-sensitive display that may receive tactile input from a user of computing device <NUM>. UID <NUM> may receive indications of the tactile input by detecting one or more gestures from a user of computing device <NUM> (e.g., the user touching or pointing to one or more locations of UID <NUM> with a finger or a stylus pen). UID <NUM> may present output to a user, for instance at a presence-sensitive display. UID <NUM> may present the output as a graphical user interface (e.g., graphical user interfaces 110A and 110B), which may be associated with functionality provided by computing device <NUM>. For example, UID <NUM> may present various user interfaces of components of a computing platform, operating system, applications, or services executing at or accessible by computing device <NUM> (e.g., an electronic message application, an Internet browser application, a mobile operating system, etc.). A user may interact with a respective user interface to cause computing device <NUM> to perform operations relating to a function.

Computing device <NUM> includes UI module <NUM>, which manages user interactions with UID <NUM> and other components of computing device <NUM>. In other words, UI module <NUM> may act as an intermediary between various components of computing device <NUM> to make determinations based on user input detected by UID <NUM> and generate output at UID <NUM> in response to the user input. UI module <NUM> may receive instructions from an application, service, platform, or other module of computing device <NUM> to cause UID <NUM> to output a user interface (e.g., user interfaces <NUM>). UI module <NUM> may manage inputs received by computing device <NUM> as a user views and interacts with the user interface presented at UID <NUM> and update the user interface in response to receiving additional instructions from the application, service, platform, or other module of computing device <NUM> that is processing the user input.

Graphical user interfaces (GUIs) 110A and 110B (collectively "GUIs <NUM>") are example graphical user interfaces of a web browser application executing at computing device <NUM>. GUI 110A includes application interface portion 112A and content portion 114A and GUI 110B includes application interface portion 112B and content portion 114B. Application interface portions 112A and 112B may collectively be referred to as "application interface portions <NUM>" and content portions 114A and 114B may be collectively referred to as "content portions <NUM>. " As shown in <FIG>, GUI 110A illustrates a GUI at time t1 and GUI 110B illustrates the same GUI at a later time t2, which is after the user has overscrolled the content and the content is visually stretched, in accordance with techniques of this disclosure. As shown in GUI 110B, application interface portion 112B does not include content that is visually stretched while content portion 114B does include content that is visually stretched.

Application interface portion 112A includes elements of the graphical user interface for the particular application (e.g., the web browser application). For example, application interface portion 112A may include a home button, an address bar, a browser tab switch button, and a menu button. While application interface portion 112A illustrates an example application interface for a web browser application, application interface portion 112A may include any elements of any application interface for any application including, as non-limiting examples, a mapping application, a messaging application, an email application, a game, a camera application, a photo management application, a movie application, a music application, a social media application, a shopping application, a financial application, a weather application, a fitness application, a nutrition application, a shipping application, etc..

As shown in <FIG>, content portion 114A includes content of a web page loaded by the web browser application. The web page includes text 116A and image 118A. As illustrated in GUI 110A, application interface portion 112A and content portion 114A do not include stretched content. Instead, application interface portion 112A and content portion 114A include content rendered as originally configured by the content creator (e.g., as specified by the code for the website).

UID <NUM> may detect a user input (e.g., a start of a scroll gesture) at a location of UID <NUM> (e.g., location 120A). The user may drag their finger in a downward direction from initial location 120A to location 120B along path <NUM> to form the scroll gesture. As the user performs the scroll gesture, UI module <NUM> causes the content included within content portion 114A to scroll in a direction based on a direction of the scroll gesture. UI module <NUM> may be configured to scroll the content included in content portion 114A in the same direction as the scroll gesture or in an opposite direction of the scroll gesture. In the example shown in <FIG>, the user is scrolling in a downward direction (i.e., from a location closer to the top of GUI 110A to a location closer to the bottom of GUI 110A) and, for purposes of this example, UI module <NUM> is configured to scroll the content included in content portion 114A in the same downward direction of the scroll gesture. As the user continues to perform the scroll gesture, additional content not currently displayed within content portion 114A may be displayed within content portion 114A. Responsive to there being no additional content to scroll, UI module <NUM> may determine that the user is overscrolling the content and may initiate a visual indication of the overscroll.

UI module <NUM> determines how to visually indicate the overscroll based at least in part on one or more characteristics of the scroll gesture. For example, UI module <NUM> may determine a velocity, distance, acceleration, location, etc. of the scroll gesture at any point during the scroll gesture and may continually determine one of more of these characteristics during the duration of the scroll gesture. That is, UI module <NUM> may determine a respective numerical or other type of value associated with each scroll gesture characteristic.

Using one or more values of these scroll gesture characteristics, UI module <NUM> may determine an intensity of the scroll gesture. Based on the intensity and/or on one or more values of one or more of the scroll gesture characteristics without calculating the intensity, UI module <NUM> determines a stretch ratio. The stretch ratio is an amount by which UI module <NUM> stretches content included in content portion 114A. The stretch ratio may increase as the intensity, the velocity, or the acceleration of the scroll gesture increase.

UI module <NUM> may continually update the stretch ratio as UID <NUM> continues to detect the scroll gesture. For example, if the user stops moving their finger at location 120B, UI module <NUM> may continue to determine that the stretch ratio is the same stretch ratio as the stretch ratio right before the user ceased moving their finger such that the content continues to appear to be visually stretched the same amount even though the user is no longer moving their finger. That is, UI module <NUM> may continually or periodically calculate a stretch ratio to add to the previously calculated stretch ratio. For example, if UI module <NUM> determines, based on the intensity of the scroll gesture, an initial stretch ratio of <NUM>:<NUM> and the user continues to move their finger (e.g., along path <NUM>), UI module <NUM> may determine a new stretch ratio of <NUM>:<NUM>, which is the same as the previous stretch ratio. However, as the user is continuing to move their finger, UI module <NUM> may combine the initial <NUM>:<NUM> stretch ratio with the new <NUM>:<NUM> stretch ratio. The resulting stretch ratio may be <NUM>:<NUM>, <NUM>:<NUM>, or another ratio that is greater than or equal to <NUM>:<NUM> as UI module <NUM> may combine the stretch ratios in any manner. By continuing to increase the stretch ratio as the user continues to scroll, the indication to the user that extent of scrolling has been reached may become increasingly pronounced, thereby improving the noticeability of the indication and increasing the likelihood that the user will discontinue the scrolling input.

In some instances, if the current location of the scroll gesture is proximate to an edge of GUI 110A, UI module <NUM> may apply a proportionality inverse function to determine the stretch ratio. That is, as the scroll gesture moves closer to the edge of GUI 110A, UI module <NUM> may stretch content included in content portion 114A by a smaller stretch ratio. In other words, the additional amount that UI module <NUM> increases the stretch as the user continues to perform the scroll gesture and the scroll gestures approaches the edge of UID <NUM> may be less than if the current location of the scroll gesture was farther away from the edge of UID <NUM>. For example, if the location of the scroll gestures is proximate to an edge of UID <NUM>, UI module <NUM> may determine that the new stretch ratio is only <NUM>:<NUM> whereas if the location of the scroll gestures with the same characteristics were farther away from the edge of UID <NUM>, UI module <NUM> may determine that the new stretch ratio is <NUM>:<NUM>. By utilizing a higher stretch ratio when the input is further from the edge (and so the scroll gesture could potentially continue for longer), the indication of overscrolling may be more pronounced. This may increase the noticeability of the indication and so reduce the likelihood of the user continuing the scroll gesture for the full extent possible, thereby saving on computational resources associated with processing such a gesture.

UI module <NUM> may also adjust the stretch ratio based on the length of the scroll gesture. For example, UI module <NUM> may determine a length of the user input (e.g., an amount of distance the detected user input traveled while the user is performing the scroll gesture) and may increase or decrease the stretch ratio based on the length of the user input. In some instances, UI module <NUM> adjusts the stretch ratio inversely proportional to the length of the user input.

As the particular values for one or more of the scroll gestures characteristics change while the user continues to perform the scroll gesture even after the visual indication of overscrolling is output by UID <NUM>, UI module <NUM> may continually update the values of the scroll gesture characteristics and may update the visual indication of the overscroll based on the updated values of one or more of the scroll gesture characteristics.

In some examples, even though the user may no longer be performing the scroll gesture (i.e., UID <NUM> is no longer detecting a user input), UI module <NUM> may still determine that that user overscrolled the content included in content portion 114A and may still cause UID <NUM> to output a visual indication of the overscroll. For example, a user may "throw" the content using the scroll gesture. That is, the user may terminate the scroll gesture while continuing to positively accelerate their finger at UID <NUM>. Responsive to determining that the scroll gesture was positively accelerating (i.e., increasing in velocity) at the time of termination, UI module <NUM> may determine that the content should continue to scroll even though the user is no longer performing the scroll gesture. In such examples, in response to determining that there is no additional content to scroll, UI module <NUM> may determine the stretch ratio based on the speed at which the content is scrolling when reaching the end of the content to scroll. This may provide a clear indication that the scrolling of the content has stopped because the extent of the scrolling has been reached, and not for some other reason, and so may prevent the user from providing a subsequent scrolling input.

UI module <NUM> may apply the stretch ratio by taking a bitmap of the content included within content portion 114A and increasing the amount of space each pixel in the bitmap occupies. For example, if the stretch ratio is <NUM>:<NUM>, UI module <NUM> will cause each pixel from the original, unstretched, content to occupy <NUM> pixels in the direction of the scroll gesture. That is, if the scroll gesture is in a downward direction, UI module <NUM> will increase the length of each pixel to be <NUM> pixels while maintaining the same width (i.e., <NUM> pixel). In some examples, UI module <NUM> will cause the pixels to be displayed prior to applying the stretch ratio to the bitmap of the content included within content portion 114A. UI module <NUM> may then generate a bitmap of the content as displayed and apply the stretch ratio to the generated bitmap as described above.

In some instances, UI module <NUM> may apply the stretch ratio prior to the content be displayed by UID <NUM>. Rather than generating a bitmap of the content already displayed, UI module <NUM> may apply the stretch ratio to the low-level surface that holds and controls what the end pixels will look like on the display prior to the pixels being displayed. That is, prior to UID <NUM> displaying content, the graphics pipeline, which may include UI module <NUM>, applies the stretch ratio to the content that will be included within content portion 114A such that the content appears stretched when displayed by UID <NUM>.

In the example shown in <FIG>, UI module <NUM> has stretched text 116B and image 118B to indicate the overscroll. While illustrated as text 116B and image 118B being uniformly stretched, in other examples, text 116B may not be stretched while image 118B is stretched. That is, UI module <NUM> may selectively stretch elements included in the content based on a type of each element or may apply different stretch ratios to different types of elements included with the content. As another example, UI module <NUM> may only apply the stretch ratio to pixels located between the current location of the scroll gesture (e.g., location 120B) and the side of UID <NUM> away from which the scroll gesture is moving. In such an example, UI module <NUM> may stretch text 116B and the portion of image 118B located between location 120B and the top of UID <NUM>. Such examples may minimize the amount of stretching performed while enabling the user to detect the overscrolling promptly by providing the stretching at a location of the display at which the user is most likely to be looking. In various instances, rather than stretching text 116B and image 118B, UI module <NUM> may, instead, stretch the whitespace between text 116B and image 118B while maintaining the same <NUM>:<NUM> pixel ratio for text 116B and image 118B. This may ensure that the indication of overscrolling is provided to the user without reducing the "readability" of the text and image. In this way, the user may be able to finish consuming the displayed content, even if they have started overscrolling.

In some examples, rather than uniformly stretching the content included in content portions <NUM>, UI module <NUM> may apply different stretch ratios to different portions of content included in content portions <NUM> based on a distance from an edge of UID <NUM>. For example, UI module <NUM> may apply a larger stretch ratio to content located away from the current location of the scroll gesture (e.g., top of UID <NUM> away from location 120B) while applying a smaller stretch ratio to content closer to the current location of the scroll gesture (e.g., closer to location 120B). UI module <NUM> may generate a stretch ratio gradient to apply to the content or may generate a stepped stretch ratio change for each unit of distance away from the edge of UID <NUM>, as non-limiting examples. Such a gradient or stepped changes may not be uniform or consistent for each unit of distance. Instead, the size of changes in the stretch ratio may also change based on the distance of the particular pixels of content from the edge of UID <NUM> away from which the scroll gesture is moving.

Further, UI module <NUM> may cause the content to visually bounce back to the original, unstretched, size. That is, UI module <NUM> may gradually reduce the additional amount the content is visually stretched and then cause the content to visually return to the original size as if the content has weight and elasticity. For example, while the content is being stretched out, UI module <NUM> may determine that the stretch ratio is initially <NUM>:<NUM>, then <NUM>:<NUM>, then <NUM>:<NUM>, then <NUM>:<NUM>, then <NUM>:<NUM>, and finally <NUM>:<NUM>. The percentages are mere examples and indicate an additional amount of space each pixel may occupy when stretched. The stretch ratios may be significantly larger, such as <NUM>:<NUM>, <NUM>:<NUM>, or more. After reaching the maximum stretch ratio, UI module <NUM> reduces the stretch ratio until the stretch ratio is back to <NUM>:<NUM>. In some examples, UI module <NUM> may reduce the stretch ratio to less than <NUM>:<NUM> (e.g., <NUM>:<NUM>, <NUM>:<NUM>, etc.) and then increase the stretch ratio again until it is <NUM>:<NUM>, thereby causing the content portion to visually bounce. Once UID <NUM> has ceased displaying the visual indication of the overscroll, the content is displayed at a <NUM>:<NUM> ratio, which is the original, unstretched, size of the content.

While described in the context of overscrolling, the visual stretching techniques described herein may also be used to visually indicate other actions. For example, when a user pulls down to refresh content (e.g., to reload a web page, update sensor data, update current weather information, etc.), UI module <NUM> may determine a stretch ratio as described above and may visually stretch content displayed by UID <NUM>.

Techniques of this disclosure may provide one or more technical benefits. For example, by visually stretching content in accordance with the techniques of this disclosure, a user may more quickly realize that the end of the content has been reached and may cease performing the scroll gesture sooner than if there is no or a different visual indication of overscrolling the content, thereby saving processor cycles and power. Further, for other actions, visually stretching the content may provide the user a visual confirmation that the computing device has received the user's input and is initiating the requested action, which may also prevent the user from repeatedly performing the same input due to uncertainty if the computing device receives the input and initiates the requested action.

<FIG> is a block diagram illustrating an example computing device <NUM>, in accordance with one or more aspects of the present disclosure. Computing device <NUM> of <FIG> is an example of computing device <NUM> of <FIG>. Computing device <NUM> is only one particular example of computing device <NUM> of <FIG>, and many other examples of computing device <NUM> may be used in other instances. In the example of <FIG>, computing device <NUM> may be a wearable computing device, a mobile computing device (e.g., a smartphone), or any other computing device. Computing device <NUM> of <FIG> may include a subset of the components included in example computing device <NUM> or may include additional components not shown in <FIG>.

As shown in the example of <FIG>, computing device <NUM> includes user interface device <NUM> ("UID <NUM>"), one or more processors <NUM>, one or more input devices <NUM>, one or more communication units <NUM>, one or more output devices <NUM>, and one or more storage devices <NUM>. Storage devices <NUM> of computing device <NUM> also include operating system <NUM> and UI module <NUM>.

Communication channels <NUM> may interconnect each of the components <NUM>, <NUM>, <NUM>, <NUM>, <NUM>, <NUM>, and <NUM> for inter-component communications (physically, communicatively, and/or operatively). In some examples, communication channels <NUM> may include a system bus, a network connection, an inter-process communication data structure, or any other method for communicating data.

One or more input devices <NUM> of computing device <NUM> may be configured to receive input. Examples of input are tactile, audio, and video input. Input devices <NUM> of computing device <NUM>, in one example, includes a presence-sensitive display, touch-sensitive screen, mouse, keyboard, voice responsive system, video camera, microphone or any other type of device for detecting input from a human or machine.

One or more output devices <NUM> of computing device <NUM> may be configured to generate output. Examples of output are tactile, audio, and video output. Output devices <NUM> of computing device <NUM>, in one example, includes a presence-sensitive display, sound card, video graphics adapter card, speaker, cathode ray tube (CRT) monitor, liquid crystal display (LCD), or any other type of device for generating output to a human or machine.

One or more communication units <NUM> of computing device <NUM> may be configured to communicate with external devices via one or more wired and/or wireless networks by transmitting and/or receiving network signals on the one or more networks. Examples of communication unit <NUM> include a network interface card (e.g., such as an Ethernet card), an optical transceiver, a radio frequency transceiver, a GPS receiver, or any other type of device that can send and/or receive information. Other examples of communication units <NUM> may include short wave radios, cellular data radios, wireless network radios, as well as universal serial bus (USB) controllers.

One or more storage devices <NUM> within computing device <NUM> may store information for processing during operation of computing device <NUM>. In some examples, storage device <NUM> is a temporary memory, meaning that a primary purpose of storage device <NUM> is not long-term storage. Storage devices <NUM> on computing device <NUM> may be configured for short-term storage of information as volatile memory and therefore not retain stored contents if powered off. Examples of volatile memories include random access memories (RAM), dynamic random access memories (DRAM), static random access memories (SRAM), and other forms of volatile memories known in the art.

Storage devices <NUM>, in some examples, also include one or more computer-readable storage media. Storage devices <NUM> may be configured to store larger amounts of information than volatile memory. Storage devices <NUM> may further be configured for long-term storage of information as non-volatile memory space and retain information after power on/off cycles. Examples of non-volatile memories include magnetic hard discs, optical discs, floppy discs, flash memories, or forms of electrically programmable memories (EPROM) or electrically erasable and programmable (EEPROM) memories. Storage devices <NUM> may store program instructions and/or information (e.g., data) associated with UI module <NUM>, stretch module <NUM>, and operating system <NUM>.

One or more processors <NUM> may implement functionality and/or execute instructions within computing device <NUM>. For example, processors <NUM> on computing device <NUM> may receive and execute instructions stored by storage devices <NUM> that execute the functionality of UI module <NUM> and stretch module <NUM>. These instructions executed by processors <NUM> may cause UI module <NUM> of computing device <NUM> to visually stretch content in response to an overscroll as described herein.

In some examples, UID <NUM> of computing device <NUM> may include functionality of input devices <NUM> and/or output devices <NUM>. In the example of <FIG>, UID <NUM> may be or may include a presence-sensitive input device. In some examples, a presence sensitive input device may detect an object at and/or near a screen. As one example range, a presence-sensitive input device may detect an object, such as a finger or stylus that is within <NUM> inches or less of the screen. The presence-sensitive input device may determine a location (e.g., an (x,y) coordinate) of a screen at which the object was detected. In another example range, a presence-sensitive input device may detect an object six inches or less from the screen and other ranges are also possible. The presence-sensitive input device may determine the location of the screen selected by a user's finger using capacitive, inductive, and/or optical recognition techniques. In some examples, a presence sensitive input device also provides output to a user using tactile, audio, or video stimuli as described with respect to output device <NUM>, e.g., at a display. In the example of <FIG>, UID <NUM> may present a user interface.

While illustrated as an internal component of computing device <NUM>, UID <NUM> also represents an external component that shares a data path with computing device <NUM> for transmitting and/or receiving input and output. For instance, in one example, UID <NUM> represents a built-in component of computing device <NUM> located within and physically connected to the external packaging of computing device <NUM> (e.g., a screen on a mobile phone). In another example, UID <NUM> represents an external component of computing device <NUM> located outside and physically separated from the packaging of computing device <NUM> (e.g., a monitor, a projector, etc. that shares a wired and/or wireless data path with a tablet computer).

UI module <NUM> may include all functionality of UI module <NUM> of computing device <NUM> of <FIG> and may perform similar operations as UI module <NUM> for managing a user interface (e.g., user interfaces 110A and 110B) that computing device <NUM> provides at UID <NUM>. For example, UI module <NUM> of computing device <NUM> may include stretch module <NUM> that determines the stretch ratio and applies the stretch ratio to the content included in content portion 114A to generate the updated content portion 114B, as discussed above with respect to <FIG>. That is, stretch module <NUM> may apply the stretch ratio to the bitmap representation of the content included in content portion 114A or to the low-level surface that holds and controls what the end pixels will look like on UID <NUM> prior to the pixels being displayed by UID <NUM> (i.e., within the graphics pipeline prior to the pixels being displayed by UID <NUM>). UI module <NUM> may cause UID <NUM> to display the updated content portion within GUI 110B.

<FIG> is a conceptual diagram illustrating an example of stretching content during a horizontal axis overscroll event, in accordance with aspects of this disclosure. For purposes of illustration only, this horizontal axis overscroll content stretching is described within the context of computing device <NUM> of <FIG>.

<FIG> includes GUI 310A and GUI 310B. GUI 310A is an example GUI that includes unstretched content displayed by UID <NUM>. GUI 310B is an example GUI that includes content stretched along a horizontal axis displayed by UID <NUM> at a second, later time, after a horizontal overscroll.

UID <NUM> may detect a user input at location 320A (e.g., a user may place their finger on or near UID <NUM> and a presence-sensing element of UID <NUM> may detect an object proximate to a surface of UID <NUM> at location 320A). The user may move their finger horizontally (e.g., from right to left as shown in <FIG>) along path <NUM> to scroll the content horizontally. UI module <NUM> may determine that there is no additional content to scroll and stretch module <NUM> may determine a stretch ratio based on one or more characteristics of the scroll gesture detected by UID <NUM> and being performed by the user. Based on the determined stretch ratio, UI module <NUM> may generate an updated content portion that is stretched in the horizontal direction and cause UID <NUM> to display the updated content portion (e.g., as shown in GUI 310B).

UI module <NUM> may stretch content horizontally in the same manner as described with respect to the vertical stretching in <FIG>. That is, UI module <NUM> may change the stretch ratio based on the distance of the scroll gesture, the distance of each pixel from the edge of UID <NUM> away from the which scroll gesture is moving, etc. Further, as described with respect to UI module <NUM> and vertical scroll gestures in <FIG>, UI module <NUM> may also only stretch content located between a current location of the scroll gesture (e.g., location 320B) and the edge of UID <NUM> away from the which scroll gesture is moving.

<FIG> is a conceptual diagram illustrating example of stretching content during a two axes overscroll event, in accordance with aspects of this disclosure. For purposes of illustration only, this horizontal axis overscroll content stretching is described within the context of computing device <NUM> of <FIG>.

UI module <NUM> and stretch module <NUM> may also simultaneously stretch content along two axes, as shown in <FIG>. GUI 410A is an example GUI that includes unstretched content displayed by UID <NUM>. GUI 410B is an example GUI that includes content stretched along both a horizontal axis and a vertical axis, which is displayed by UID <NUM> at a second, later time, after a two-axis overscroll.

During two axis scrolling gesture user inputs that result in a two axis overscroll, stretch module <NUM> may determine the stretch ratio based on the direction of the scroll gesture user input. One example two axis scrolling gesture is shown in <FIG>. UID <NUM> detects the initial location of the scroll gesture user input at location 420A and then the user moves their finger along path <NUM> to location 420B. Path <NUM> is not only horizontal or only vertical in direction or nearly only horizontal or vertical. Instead, path <NUM> is in a direction that is substantially along a combination of horizontal and vertical axis.

When UID <NUM> detects such a two axis scroll gesture user input, stretch module <NUM> may determine the stretch ratio based on the vertical and horizontal components of the scroll gesture. For example, stretch module <NUM> may determine a first stretch ratio in a direction away from the first edge of UID <NUM> based on component of the user input moving away from the first edge, a first stretch ratio in a direction away from the first edge. Stretch module <NUM> may determine a second stretch ratio in a direction away from a second edge of UID <NUM> based on a component of the user input moving away from the second edge. UI module <NUM> may generated an updated content portion of the GUI (e.g., as shown in GUI 410B) by applying the first stretch ratio and the second stretch ratio to the content included in the content portion of the GUI when there is no additional content to scroll in the direction such that the portion of the content is visually stretched relative to the first edge and the second edge.

As one example, the two axis scroll gesture user input may have a vertical component that is two times the horizontal component. That is, for each unit of vertical movement of the scroll gesture, there is one-half of a unit of horizontal movement of the scroll gesture. In such an example, stretch module <NUM> may determine that the first stretch ratio is <NUM>:<NUM> in the vertical direction and the second stretch ratio is <NUM>:<NUM> in the horizontal direction. While these example stretch ratios are linearly related to the relative size of the vertical and horizontal components of the two axis scroll gesture user input, such a relationship is not required. Instead, in some examples, the horizontal and vertical stretch ratios may be logarithmically related, exponentially related, fractionally related, or may not have any direct correspondence.

UI module <NUM> applies the first and second stretch ratios to at least a portion of the content included in the content portion of the GUI. For example, in applying the <NUM>:<NUM> vertical and the <NUM>:<NUM> horizontal stretch ratios, UI module <NUM> may cause each pixel of the portion of the content to be <NUM> pixels tall and <NUM> pixels wide. UI module <NUM> may apply these stretch ratios to textual content, graphical content, whitespace, or any other type of content included within the GUI, collectively or independently.

<FIG> is a flowchart illustrating example operations for stretching content, in accordance with one or more aspects of the present disclosure. For purposes of illustration only, the example operations are described below within the context of GUIs <NUM> of <FIG> and computing device <NUM> of <FIG>.

UID <NUM> outputs a graphical user interface that includes a content portion and an application interface portion (<NUM>). The application interface portion (e.g., application interface portion 112A) may include various UI elements for controlling an application currently executing at computing device <NUM>. The content portion (e.g., content portion 114A) may include content loaded from a remote server, entered by a user, dynamically generated by the application, etc. that is distinct from the application interface elements.

Computing device <NUM> receives an indication of user input to scroll, in a direction, content included in the content portion (<NUM>). For example, UID <NUM> may detect the start of a scroll gesture user input (e.g., at location 120A) to scroll content included in content portion 114A in a direction. UI module <NUM> may visually scroll the content in the direction (<NUM>). The direction of the scroll gesture may specify the direction in which to scroll the content. For example, if the scroll gesture user input moved from the top of the content portion towards the bottom of the content portion (e.g., from location 120A to location 120B along path <NUM>), UI module <NUM> may cause the content to visually scroll in a downward direction. As one example, the content may scroll as if the scroll gesture stuck to the content at the initial location and dragged the content such that the portion of content at the initial location moves such that the portion of content is still located at the current location of the scroll gesture.

UI module <NUM> may continue to scroll the content so long as there is additional content to scroll ("YES" branch of <NUM>). That is, UI module <NUM> continues to scroll the content included within content portion 114A until there is no additional content not currently displayed within content portion 114A and that may be displayed within content portion 114A. As shown in content portion 114A, text 116A is the top of the web page. As such, there is no additional content above text 116A for the user to scroll.

Responsive to determining that there is no additional content to scroll ("NO" branch of <NUM>), UI module <NUM> determines one or more characteristics of the scroll gesture user input (<NUM>). For example, UI module <NUM> may determine a velocity, distance, acceleration, location, etc. of the scroll gesture user input. While initially described as occurring in response to there being no additional content to scroll, UI module <NUM> determine one or more characteristics of the scroll gesture user input at any point during the scroll gesture and may continually determine one of more of these characteristics during the duration of the scroll gesture. In some examples, UI module <NUM> may determine an intensity of the scroll gesture based on at least one of the one or more characteristics of the scroll gesture. The intensity of the scroll gesture indicates the magnitude of the scroll gesture.

Stretch module <NUM> determines a stretch ratio based on the intensity of the scroll gesture user input and/or at least one of the one or more characteristics of the scroll gesture (<NUM>). The stretch ratio may be a single stretch ratio that may be applied to a portion of all of the content included in content portion 114B or two or more different stretch ratios applied to different portions of the content included in content portion 114B. For example, stretch module <NUM> may determine a larger stretch ratio to be applied to content located along the edge away from which the scroll gesture user input is moving than a stretch ratio applied to content located closer to the current location of the scroll gesture user input.

UI module <NUM> generates an updated content portion of the GUI (e.g., GUI 110B) by at least applying the stretch ratio(s) to at least a portion of the content included in the content portion of the GUI (<NUM>). UI module <NUM> may apply the stretch ratio(s) to a bitmap representation of at least the portion of the content or during the rendering process in the graphics pipeline prior to the content being displayed by UID <NUM>. When UI module <NUM> applies the stretch ratio(s), UI module <NUM> may apply one or more stretch ratios to white space between graphical and/or textual content elements, may apply different stretch ratios to different types of elements included with in the content portion, and may apply different stretch ratios based on the location of pixels included in the bitmap relative to the location of an edge of the content portion, an edge of UID <NUM>, and/or a current location of the scroll gesture user input.

After UI module <NUM> generates the updated content portion, UID <NUM> outputs the graphical user interface including the updated content portion having at least the portion of content stretched by the stretch ratio (<NUM>). Examples of a GUI having content stretch in response to a vertical overscroll, horizontal overscroll, and two axis overscroll are show in GUI 110B of <FIG>, GUI 310B of <FIG>, and GUI 410B of <FIG>, respectively.

Accordingly, the term "processor," as used herein may refer to any of the foregoing structures or any other structure suitable for implementation of the techniques described herein. In addition, in some aspects, the functionality described herein may be provided within dedicated hardware and/or software modules.

Rather, as described above, various units may be combined in a hardware unit or provided by a collection of intraoperative hardware units, including one or more processors as described above, in conjunction with suitable software and/or firmware.

Claim 1:
A method comprising:
outputting (<NUM>), for display by a display device, a graphical user interface (110A, 110B, 310A, 310B, 410A, 410B) of an application executing at a computing device (<NUM>), wherein the graphical user interface includes a content portion and an application interface portion different from the content portion;
receiving (<NUM>), by the computing device, an indication of a scrolling user input, in a direction, content included in the content portion of the graphical user interface; and
responsive to determining (<NUM>), by the computing device, that there is no additional content to scroll in the direction:
determining (<NUM>), by the computing device, one or more characteristics of the scrolling user input;
determining (<NUM>), by the computing device and based on at least one of the one or more characteristics of the scrolling user input, a stretch ratio;
generating (<NUM>), by the computing device, an updated content portion by at least applying the stretch ratio to at least a portion of content included in the content portion of the graphical user interface when there is no additional content to scroll in the direction; and
outputting (<NUM>), for display, the graphical user interface including the updated content portion having at least the portion of the content stretched by the stretch ratio,
increasing, by the computing device, the stretch ratio as the computing device continues to receive the indication of the scrolling user input,
characterised in that an additional amount by which the stretch ratio is increased as the user continues to perform the scrolling user input decreases i) as the length of the scrolling user input increases or ii) as a distance of a current location of the scrolling user input to an edge of the application interface in the direction of the scrolling user input decreases.