JP6047587B2 - Fan-editing user interface controls for media editing applications - Google Patents

Description

  The present invention relates to a fan-shaped user interface control for a media editing application.

  Today, many image editing applications provide various tools for managing and manipulating digital images. Examples of such applications include iPhoto (registered trademark) (supplier: Apple Inc.), Picasa (registered trademark) (supplier: Google), Photoshop (registered trademark) (supplier: Adobe), and Express Media ( (Supplier: Microsoft). Some image editing applications allow the user to view images, edit images, and / or organize images.

  In many cases, the user desires to edit the image for the purpose of improving the appearance of the image, expressing the image with a specific taste, or applying an effect to the image. In many instances, the user needs to go through many steps iteratively using many different tools in an attempt to modify the image in the desired manner. For this reason, it is common for a user to spend an prohibitive amount of time editing an image and still end up without being able to edit the image as desired.

  No matter how the user wants to look at the image, the user does not know how to make the image look the desired and / or there is a tool to make the image look the desired There are many cases that cannot be found in image editing applications. Therefore, users often require a significant amount of time to learn how to use media editing applications.

  When an image is edited with an image editing application, the editing is typically. Therefore, the user may have to edit the original image file and start again from the beginning if he / she makes a mistake, wants to change the editing contents, or wants to restore the original. You may need to edit further to correct the mistake.

  For image editing applications, some embodiments of the present invention provide a novel UI tool that provides a series of fanning user interface (UI) controls. In some embodiments, when the UI tool is activated, the UI tool provides an animation that fans out the UI control. When you select one of the UI tool UI controls to use, the UI tool provides an animation that fans out the UI control so that the selected UI control is displayed. .

  Various types of UI tooling provide different types of fan-out animations. For example, some embodiments of the UI tool fan out the UI control by fanning out the UI control in one direction around a fixed location. In this way, the UI control may have the appearance of a pinned UI control at one end of the UI control, or may be fanned around the location where the UI control is pinned. The appearance of the issued UI control may be exhibited.

  In some embodiments, the UI tool fans out the UI control by fanning out the UI control in two directions around a fixed location. In such an embodiment, the UI tool fans out some of the UI controls in one direction around the fixed location and fans out the other UI controls in the opposite direction around the fixed location.

  The UI tool of some embodiments allows the UI control to slide from outside the display area onto the display area (eg, the entire computing device screen) while the UI control is fanned out to the open state. The UI control is displayed with such an appearance. Similarly, the UI tool of some embodiments has a UI that looks as if the UI control slides from near the center of the display area to the outside of the display area while the UI control is fanned out in a closed state. Display the control.

  Different types of UI controls are provided by the UI tools of the various embodiments. For example, in some embodiments, UI tools provide UI controls for applying effects to images. In this application, these types of UI controls can also be referred to as effect controls. Examples of effects include various filter effects, duotone effects, non-realistic low saturation, gradation effects, vignette effects, tilt shift effects, and the like.

  Various types of effect controls are provided by various embodiments. For example, the first type of effect control displays a series of selectable thumbnail images of the image being edited. Each selectable thumbnail image displays a different range of effects associated with the effect control applied to the thumbnail image. When a thumbnail image is selected, the application is made to apply the effect to the image being edited within a range where the effect is applied to the thumbnail image. In this manner, a preview of an effect in which a selectable thumbnail image is applied to an image being edited is provided in advance when the effect is applied to the image.

  The second type of effect control includes a sliding area. Different locations along the sliding area correspond to the purpose of applying different ranges of effects to the image being edited. The user can apply different ranges of effects to the image being edited by selecting different locations along the sliding area (e.g., touching a location on the touch screen). Alternatively, the user can apply different ranges of effects to the image by touching the sliding area and subsequently touching the sliding area while sliding along different locations of the sliding area.

  In the second type of effect control, a series of thumbnail images of the image being edited is displayed at different locations along the sliding area. Each thumbnail image displays a different range of effects associated with the effect control applied to the thumbnail image. A location where there is a specific thumbnail image along the sliding area or a location in the vicinity thereof corresponds to the range of effects applied to the thumbnail image. Thus, the location of a thumbnail image that includes the full range of effects on the thumbnail image corresponds to the purpose of applying the full range of effects to the image being edited, and the location of the thumbnail image that contains half the range of effects on the thumbnail image. Corresponds to the purpose of applying half the range of effects to the image being edited.

  Another type of UI control provided by the UI tools of some embodiments addresses the purpose of applying a brush effect to a portion of an image. In this application, these types of UI controls can also be referred to as brush controls. Examples of brush controls include brush controls for removing red eyes and black spots, and brush controls for increasing or decreasing saturation, lightening, darkening, sharpening, or softening part of an image. Is mentioned.

  In some embodiments, an image editing application according to some embodiments provides various tools for image editing. When various editing is performed on an image using various tools, the application applies the various editing contents in a specific order. For example, an application can apply exposure editing to an image before effect editing is applied to the image. If the user wants to apply the first type of editing to the image, to ensure that the first type of editing is applied to the image before the second type of editing is applied, In some embodiments of the application, the second type of editing (if any) is temporarily removed from the image. After the user finishes applying the first type of editing, the application reapplies the second type of editing that has been removed from the image to the image. In some embodiments, the application provides a peel-on and peel-off animation that indicates to the user to unedit or reapply to the image.

  The application of some embodiments stores information in a data structure that represents images managed by the application. In some embodiments, the application stores the data structure in such a way that the original image is retained when the image is edited. Some embodiments of the application cache different versions of images that are frequently accessed, used, and / or displayed so that a quick view of the images is provided via the application's GUI. In some embodiments, the application provides functionality that allows the user to switch between the edited version of the current image and the original image. In order to facilitate rapid switching between different versions of an image, the application of some embodiments utilizes a non-destructive image storage method.

  In addition to the functionality described above, the application of some embodiments also provides functionality that allows the user of the application to send images to users of other devices that are also running the application. In some embodiments, the application sends the image to a data structure that stores the image in a non-destructive manner. In this way, the recipient of the image may view the original image, the version edited by the sender, additional and / or separate edits to the image, send the image to other users, etc. it can.

  The above summary is provided to briefly introduce some embodiments of the present invention. It does not imply an introduction or summary of all inventive content disclosed in this specification. The following detailed description and the drawings cited in the detailed description further describe the embodiments described in the Summary of the Invention and other embodiments. Therefore, in order to understand all the embodiments described in this specification, a thorough examination of the summary of the invention, the form for carrying out the invention, and the drawings is required. Further, since the claimed subject matter may be embodied in other specific forms without departing from the spirit of the subject matter, the claimed subject matter is illustrative in the summary of the invention, the detailed description and the drawings. It is not intended to be limited by the details, but rather is to be defined by the appended claims.

While the novel features of the invention are set forth in the appended claims, certain embodiments of the invention are set forth in the following drawings for purposes of explanation.
FIG. 2 conceptually illustrates a graphical user interface (GUI) of an image editing application that includes an effect tool of some embodiments, and activation of the effect tool. It is a figure which shows notionally the selection of the effect control of the effect tool shown in FIG. FIG. 2 is a diagram conceptually showing a change of a selected effect control of the effect tool shown in FIG. 1. FIG. 2 conceptually illustrates a GUI including an effect tool of some embodiments and activation of the effect tool. FIG. 2 is a diagram conceptually illustrating an image editing application GUI including an effect tool and activation of the effect tool according to some embodiments. FIG. 6 is a diagram conceptually showing selection of effect control of the effect tool shown in FIG. 5. FIG. 6 is a diagram conceptually illustrating a change in selected effect control of the effect tool illustrated in FIG. 5. FIG. 2 conceptually illustrates an effect tool of some embodiments that includes certain types of effect controls. FIG. 5 conceptually illustrates an effect tool of some embodiments that includes another type of effect control. FIG. 5 conceptually illustrates an effect tool of some embodiments that includes another type of effect control. FIG. 3 conceptually illustrates an effect tool of some embodiments that includes several types of effect controls. FIG. 4 conceptually illustrates thumbnail slider control and application of effects to an image using the thumbnail slider control of some embodiments. FIG. 4 conceptually illustrates thumbnail slider control and application of effects to an image using the thumbnail slider control of some embodiments. FIG. 6 conceptually illustrates thumbnail slider controls of some embodiments and the application of various effects to an image using thumbnail slider controls. FIG. 6 conceptually illustrates thumbnail slider control and some effects application to an image using the thumbnail slider control of some embodiments. FIG. 5 conceptually illustrates a process of some embodiments for generating a thumbnail for an effect tool thumbnail slider control. FIG. 3 conceptually illustrates a state diagram of an application of some embodiments that provides an effects tool. FIG. 2 conceptually illustrates a GUI including a brush tool and activation of the brush tool of some embodiments. It is a figure which shows notionally selection of the brush control of the brush tool shown by FIG. FIG. 19 conceptually illustrates a technique for changing a selected brush control of the brush tool illustrated in FIG. FIG. 19 conceptually illustrates another technique for changing a selected brush control of the brush tool illustrated in FIG. It is a figure which shows the brush control of a respectively different external appearance notionally. FIG. 2 conceptually illustrates a GUI including a brush tool and activation of the brush tool of some embodiments. It is a figure which shows notionally selection of the brush control of the brush tool shown in FIG. FIG. 2 conceptually illustrates a GUI including a brush tool and activation of the brush tool of some embodiments. FIG. 26 is a diagram conceptually illustrating selection of a brush control of the brush tool illustrated in FIG. 25. FIG. 26 conceptually illustrates a change in selected brush control of the brush tool illustrated in FIG. It is a figure which shows notionally the brush control from which an external appearance differs, respectively. FIG. 5 conceptually illustrates the application of a brush effect to an image using the brush control of a brush tool of some embodiments. FIG. 30 conceptually illustrates applying a brush effect to an image using a brush control of a brush tool of some embodiments and disabling the brush effect applied in FIG. 29. FIG. 3 conceptually illustrates a state diagram of an application of some embodiments that provides a brush tool. FIG. 2 conceptually illustrates a software architecture of an application of some embodiments that provides a UI tool that includes a sector creation UI control. FIG. 5 conceptually illustrates an example of ordered editing operations according to some embodiments. FIG. 5 conceptually illustrates an example of ordered editing operations according to some embodiments. FIG. 5 conceptually illustrates an example of ordered editing operations according to some embodiments. FIG. 5 conceptually illustrates an example of ordered editing operations according to some embodiments. FIG. 5 conceptually illustrates an example of ordered editing operations according to some embodiments. FIG. 5 conceptually illustrates an example of ordered editing operations according to some embodiments. It is a figure which shows the table | surface which showed the application order of the edit content by some embodiment. FIG. 2 conceptually illustrates a software architecture of some embodiments of an image editing application that provides ordered editing functionality. FIG. 2 conceptually illustrates a data structure of an image stored by an application of some embodiments. It is a figure which shows notionally the toggle operation of some embodiment in which the user can switch between the original image and the image currently edited. It is a figure which shows notionally another toggle operation of some embodiment with which a user can switch between an edited image and an original image. It is a figure which shows notionally another toggle operation of some embodiment in which the user can switch between an original image and an edited image. FIG. 7 conceptually illustrates a toggle operation of some embodiments that allows a user to switch between a cropped image and an original image when the crop tool is active. FIG. 3 is a diagram conceptually illustrating an example of two devices using a beaming service of an image editing application of some embodiments. It is a figure which shows notionally the example in which a 1st device beams an edited image to a 2nd device. FIG. 2 conceptually illustrates an example where a user browses a library of images to be beamed on a device. FIG. 2 conceptually illustrates a process of some embodiments for broadcasting a beaming service to receive a beamed image. FIG. 3 conceptually illustrates a process of some embodiments for detecting a beaming service and identifying candidate devices for receiving beamed images. It is a figure which shows the detailed figure of GUI corresponding to the browsing, editing, and organization of the image which concerns on some embodiment. FIG. 2 conceptually illustrates a data structure of an image stored by an application of some embodiments. FIG. 3 is a diagram illustrating an example of an architecture of a mobile computing device. FIG. 2 conceptually illustrates an electronic device in which some embodiments of the invention are implemented.

  Many details, examples and embodiments of the invention are described and illustrated in the detailed description below. However, as will be readily apparent to those skilled in the art, the present invention is not limited to the described embodiments and may be practiced without consideration of some specific details and examples. obtain.

  For image editing applications, some embodiments of the present invention provide a novel UI tool that includes a series of fanning user interface (UI) controls. In some embodiments, when the UI tool is activated, the UI tool provides an animation that fans out the UI control. When you select one of the UI tool UI controls to use, the UI tool provides an animation that fans out the UI control so that the selected UI control is displayed. .

  Various types of UI tooling provide different types of fan-out animations. For example, some embodiments of the UI tool fan out the UI control by fanning out the UI control in one direction around a fixed location. In this way, the UI control may have the appearance of a pinned UI control at one end of the UI control, or may be fanned around the location where the UI control is pinned. The appearance of the issued UI control may be exhibited.

  In some embodiments, the UI tool fans out the UI control by fanning out the UI control in two directions around a fixed location. In such an embodiment, the UI tool fans out some of the UI controls in one direction around the fixed location and fans out the other UI controls in the opposite direction around the fixed location.

  The UI tool of some embodiments allows the UI control to slide from outside the display area onto the display area (eg, the entire computing device screen) while the UI control is fanned out to the open state. The UI control is displayed with such an appearance. Similarly, the UI tool of some embodiments has a UI that looks as if the UI control slides from near the center of the display area to the outside of the display area while the UI control is fanned out in a closed state. Display the control.

  Different types of UI controls are provided by the UI tools of the various embodiments. For example, in some embodiments, UI tools provide UI controls for applying effects to images. In this application, these types of UI controls can also be referred to as effect controls. Examples of effects include various filter effects, duotone effects, non-realistic low saturation effects, gradation effects, vignette effects, tilt shift effects, and the like.

  Various types of effect controls are provided by various embodiments. For example, the first type of effect control displays a series of selectable thumbnail images of the image being edited. Each selectable thumbnail image displays a different range of effects associated with the effect control applied to the thumbnail image. When a thumbnail image is selected, the application is made to apply the effect to the image being edited within a range where the effect is applied to the thumbnail image. In this manner, a preview of an effect in which a selectable thumbnail image is applied to an image being edited is provided in advance when the effect is applied to the image.

  The second type of effect control includes a sliding area. Different locations along the sliding area correspond to the purpose of applying different ranges of effects to the image being edited. The user can apply different ranges of effects to the image being edited by selecting different locations along the sliding area (e.g., touching a location on the touch screen). Alternatively, the user can apply different ranges of effects to the image by touching the sliding area and subsequently touching the sliding area while sliding along different locations of the sliding area.

  In the second type of effect control, a series of thumbnail images of the image being edited is displayed at different locations along the sliding area. Each thumbnail image displays a different range of effects associated with the effect control applied to the thumbnail image. A location where there is a specific thumbnail image along the sliding area or a location in the vicinity thereof corresponds to the range of effects applied to the thumbnail image. Thus, the location of a thumbnail image that includes the full range of effects on the thumbnail image corresponds to the purpose of applying the full range of effects to the image being edited, and the location of the thumbnail image that contains half the range of effects on the thumbnail image. Corresponds to the purpose of applying half the range of effects to the image being edited.

  Another type of UI control provided by the UI tools of some embodiments addresses the purpose of applying a brush effect to a portion of an image. In this application, these types of UI controls can also be referred to as brush controls. Examples of brush controls include brush controls for removing red eyes and black spots, and brush controls for increasing or decreasing saturation, lightening, darkening, sharpening, or softening part of an image. Is mentioned.

  In some embodiments, an image editing application according to some embodiments provides various tools for image editing. When various editing is performed on an image using various tools, the application applies the various editing contents in a specific order. For example, an application can apply exposure editing to an image before effect editing is applied to the image. If the user wants to apply the first type of editing to the image, to ensure that the first type of editing is applied to the image before the second type of editing is applied, In some embodiments of the application, the second type of editing (if any) is temporarily removed from the image. After the user finishes applying the first type of editing, the application reapplies the second type of editing that has been removed from the image to the image. In some embodiments, the application provides peel-on and peel-off animations that indicate to the user that the edit should be removed or applied to the image.

  The application of some embodiments stores information in a data structure that represents images managed by the application. In some embodiments, the application stores the data structure in such a way that the original image is retained when the image is edited. Some embodiments of the application cache different versions of images that are frequently accessed, used, and / or displayed so that a quick view of the images is provided via the application's GUI. In some embodiments, the application provides functionality that allows the user to switch between the edited version of the current image and the original image. In order to facilitate rapid switching between different versions of an image, the application of some embodiments utilizes a non-destructive image storage method.

  In addition to the functions described above, the application of some embodiments also provides the ability for an application user to send images to users of other devices that are also running the application. In some embodiments, the application sends the image to a data structure that stores the image in a non-destructive manner. In this way, the recipient of the image may view the original image, the version edited by the sender, additional and / or separate edits to the image, send the image to other users, etc. it can.

  Some more detailed embodiments of the present invention are described in the sections below. Section I conceptually describes the details of the UI tool with fan-shaped UI control. The following Section II conceptually describes the details of the ordered editing process according to some embodiments of the present invention. Subsequent Section III describes a data structure for representing an image according to some embodiments. The following Section IV details the beam functionality provided by the application of some embodiments. Section V describes examples of image viewing, editing and organization applications of some embodiments. Finally, Section VI describes several electronic systems that implement some embodiments of the present invention.

I. User Interface Tool with Sector Create UI Control As described above, the image editing application of some embodiments provides a UI tool that includes a series of sector create UI controls. Different types of UI controls are provided by various embodiments of UI tools. Examples of UI tools for applying effects to images and examples of UI tools for applying brush effects to images are described in the following sections.

A. Effect Tool FIG. 1 conceptually illustrates the graphical user interface (GUI) 100 of an image editing application including the effect tool 175 of some embodiments, and the activation of the effect tool 175. Specifically, FIG. 1 illustrates the GUI 100 in four separate stages 105-120 of the effect tool activation operation. Each of the stages 105 to 120 will be described in detail later. First, elements of the GUI 100 will be described.

  As illustrated, the GUI 100 includes a thumbnail display area 125, an image display area 145, a first toolbar 150, a second toolbar 135, and a third toolbar 195. In the thumbnail display area 125, thumbnails of images in the selected collection are displayed. A thumbnail is a reduced size representation of a full size image, and in some embodiments represents only a portion of the image. The user can select one or more images within the thumbnail display area (eg, touching a thumbnail image). The selected thumbnail is highlighted or displayed with other selection indicators. In the thumbnail display area 125, the thumbnail 130 is selected.

  The thumbnail image selected in the image display area 145 is displayed with a higher resolution. A thumbnail image is typically not the full size of the image (often with a higher resolution than the display screen of the device on which the image is displayed by the application). In some embodiments, the image in the image display area 145 is displayed in the aspect ratio of the full size image.

  The first toolbar 150 displays title information (for example, the name of the collection displayed in the GUI, the caption added by the user to the currently selected image, etc.). In addition, the toolbar 150 includes a first series of UI items 151-154 and a second series of UI items 155-158.

  Using the back button 151 in the first series of items, the user can navigate back to the collection organization GUI. Selection of the grid button 152 causes the application to move the thumbnail display area on the GUI or away from the GUI (eg, via slide animation). In some embodiments, the user can also slide the thumbnail display area onto or away from the GUI 100 via a swipe gesture. The help button 153 activates a context-sensitive help function for the user that identifies a set of currently active tools and provides the user with a help indicator that briefly describes these tools. In some embodiments, the help indicator is selectable to allow access to additional information about the tool. When the user selects the undo button 154, the application is made to release the latest editing content for the image regardless of whether the editing is a cutout, color adjustment, or other.

  The user can share images in various ways with the share button 155 in the second series of UI items. In some embodiments, the user sends the selected image to another compatible device on the same network (eg, Wi-Fi or Bluetooth network) and uploads the image to an image hosting or social media website. A journal (ie, a presentation of images arranged so that additional content can be added) can be created based on a series of images selected from among other images.

  A display area displaying additional information regarding one or more selected images is activated with an information button 156. Information displayed within the activated display area may include Exif data (eg, camera settings, time stamps, etc.) stored for the image. The user can switch between the original version of the image and the edited version of the current image with the original display button 157.

  The edit button 158 allows the user to start edit mode or exit edit mode. When the user is selecting one of a series of editing tools in the toolbar 135, the user can return to viewing and organizing mode with the edit button 158. If the user selects the edit button 158 while in view mode, the application returns to the series of editing tools last used in the order displayed in the toolbar 135. That is, the items in the toolbar 135 are arranged in a specific order, and the rightmost item among the items edited on the selected image is activated by the edit button 158.

  The toolbar 135 includes five UI items 132-140 arranged in a specific order from left to right. The crop item 132 activates a crop and rotate tool that allows the user to align misaligned images and remove unwanted portions of the image. The exposure item 134 activates a series of exposure tools that allow the user to modify black spots, shadows, contrast, brightness, highlights, and white spots in the image. In some embodiments, the series of exposure tools is a series of linked sliders that work in concert to modify the brightness histogram of the image. Details of the exposure tool are described in US Patent Application Publication No. 13 / 629,514 entitled “Unified Slider Control for Modifying Multiple Image Properties” filed on Sep. 27, 2012. US Patent Application Publication No. 13 / 629,514 is hereby incorporated by reference. Color item 136 activates a series of color tools that allow the user to modify saturation and vibrancy, as well as color-specific saturation (eg, blue or green pixels) and white balance. In some embodiments, some of these tools are represented as a series of sliders. The brush item 138 activates a series of correction tools that allow the user to identify corrections to the image. Users can use brushes to perform rubbing actions on the image to remove red eyes and smudges, and also apply or remove saturation and other features to specific parts of the image You can also Finally, the effect item 140 activates a series of special effects that the user can apply to the image. Examples of these effects include gradation, tilt shift, non-realistic low saturation effect, gray scale effect, and various filters. In some embodiments, the application presents these effects as a series of items that fan out outward from the toolbar 195.

  The toolbar 195 includes setting items 170. Settings button 170 activates a context sensitive menu that provides different menu options depending on the currently active toolset. For example, in browse mode, the menus of some embodiments include creating a new album, setting a key photo for the album, options for copying settings from one photo to another, and other Provide options. When another set of editing tools is active, the menu provides options related to a particular active tool set.

  Those skilled in the art will recognize that the GUI 100 is just one of many examples of a graphical user interface that may be considered for an image editing application. For example, different items may be placed in different areas or in different orders, and some embodiments may include items with additional or different functionality. In some embodiments, thumbnails that match the aspect ratio of the corresponding full-size image can be displayed in the thumbnail display area.

  Here, an example of the activation operation of the effect tool 175 will be described with reference to the four stages 105 to 120 shown in FIG. The first stage 105 of the GUI 100 shows the activation of the effects tool 175. As shown, the user has selected the selectable effect tool UI item 140 (eg, by touching the UI item 140) and activated the effect tool 175.

  The second stage 110 illustrates the GUI 100 after the effects tool 175 has been activated. As shown in the figure, the GUI 100 displays the start of the fan-shaped creation opening animation of the effect control of the effect tool 175, and the effect tool UI item 140 is highlighted. As shown, the effects tool 175 includes a series of effect controls 180-188 and selectable UI items 190. Each of the effect controls 180-188 corresponds to the purpose of applying a series of effects to the image being edited (image 142 in this example). The selectable UI item 190 corresponds to the purpose of starting the fan-shaped creation opening animation of the effect controls 180 to 188.

  When the image editing application receives the selection of the effect tool UI item 140, the application highlights the UI item 140 and begins displaying a fanning open animation of a series of effect controls 180-188. In this example, the start position and the location of the effect control 180 to 188 for the fan-shaped projecting opening animation are the positions of the effect control 188 arranged on the toolbar 195. That is, at the start of the fan-shaped creation opening animation, the effect controls 180 to 188 all start at the location and position of the effect control 188. The image editing application displays the fanning of the effect controls 180-188 by indicating that separate effect controls rotate from the starting position and location by a different amount around a fixed location (eg, pivot point). Display animation. In this example, the fixed location is UI item 190. As shown, each of the effect controls 180-186 pivots around a fixed location in a reduced amount, but the effect controls 188 do not pivot at all. In other words, the effect control 180 rotates around the fixed location by the maximum amount, the effect control 182 rotates around the fixed location by the second largest amount, and the effect control 184 moves around the fixed location. The third largest amount rotates and the effect control 186 rotates around the fixed location by the fourth largest amount, but the effect control 188 does not rotate around the fixed location.

  In some embodiments, the image editing application displays the effect controls 180-by displaying that separate effect controls rotate from the starting position and location around the fixed location at different speeds for a defined time interval. 188 fan-shaped projecting opening animation is displayed. The effect control 180 rotates around the fixed location at the fastest speed, the effect control 182 rotates around the fixed location at the second highest speed, and the effect control 184 third around the fixed location. While rotating at a fast speed, the effect control 186 rotates around the fixed location at the fourth fastest speed, but the effect control 188 does not rotate around the fixed location.

  The image editing application of some embodiments displays the fanning opening animation of the effect controls 180-188 by displaying that the effect controls rotate from the starting position and location around the fixed location at the same speed. To do. In order to display the fanning open animation while moving effect controls 180-188 at the same speed, the image editing application starts moving different effect controls at different times (eg, a defined amount of time has elapsed). And then start moving certain effect controls). Based on this approach, the application starts moving effect control 180 first, effect control 182 second, effect control 184 third, effect control 186 fourth, and finally effect control 188.

  The third stage 115 illustrates the GUI 100 in which the fan-shaped projecting opening animation of the effect controls 180 to 188 of the effect tool 175 is nearing the end. As shown in the figure, the positions of the effect controls 180 to 188 are fan-shaped so as to be further open than the positions of the effect controls 180 to 188 illustrated in the second stage 110.

  The fourth stage 120 shows the GUI 100 after the fan-shaped creation opening animation of the effect controls 180 to 188 is completed. As shown, effect control 180 rotates approximately 90 ° clockwise around UI item 190 from its starting location and position (in this example, the location and position of effect control 188), and effect control 182 From its starting location and position, it rotates approximately 67.5 ° clockwise around UI item 190, and effect control 184 rotates approximately 45 ° around UI item 190 from its starting location and position. The effect control 186 has rotated approximately 22.5 ° clockwise around the UI item 190 from its starting location and position.

  FIG. 1 illustrates an example of a fanning-out opening animation of the effect control of the effect tool when the effect tool is activated. In some embodiments, the image editing application does not display the fanning opening animation of the effect control of the effect tool when the effect tool is activated. Instead, the application of some such embodiments displays the final state (eg, most recent state) of the effects tool. For example, if the effect tool is activated and the effect control of the effect tool is selected in the final state of the effect tool, the image editing application will refer to the selected effect control later in FIG. Can be displayed in a manner similar to the fourth stage 220 described in FIG.

  FIG. 2 conceptually illustrates selection of effect controls of the effect tool 175 illustrated in FIG. In particular, FIG. 2 illustrates the GUI 100 in four separate stages 205-220 of an effect control selection operation.

  The first stage 205 of the GUI 100 shows selection of effect control of the effect tool 175. As shown, the user has selected effect control 184 (eg, by touching effect control 184). When the image editing application receives the selection of effect control 184, the application highlights the selected effect control (in this example, effect control 184) and displays a series of closed animations of effect controls 180-188. Start.

  The second stage 210 illustrates the GUI 100 after the effect control 184 has been selected and the series of effect controls 180-188 has started a fanning closed animation. The image editing application highlights the effect control 184 by boldly displaying the boundary line of the effect control 184. In this example, the position and location of the series of effect controls 180-188 shown in the fourth stage 120 of FIG. 1 is the starting position and location of the series of effect controls 180-188 for the fan-shaped closed animation.

  The image editing application displays the effect controls 180 by indicating that the different effect controls rotate by different amounts around the fixed location (in this example, the UI item 190) from the effect control start position and location. Display a fan-shaped closing animation of 188. As shown, each of the effect controls 180-186 pivots around a fixed location in a reduced amount, but the effect controls 188 do not pivot at all. In other words, the effect control 180 rotates around the fixed location by the maximum amount, the effect control 182 rotates around the fixed location by the second largest amount, and the effect control 184 moves around the fixed location. The third largest amount rotates and the effect control 186 rotates around the fixed location by the fourth largest amount, but the effect control 188 does not rotate around the fixed location. The rotation direction (in this example, counterclockwise) of the effect controls 180 to 186 shown in FIG. 2 is the rotation direction of the effect controls 180 to 186 during the fan-shaped creation opening animation shown in FIG. Is the opposite direction.

  In some embodiments, the image editing application displays that different effect controls rotate at different speeds around the fixed location from different starting positions and locations of the effect controls for a defined time interval. To display the fan-shaped edit closing animation of the effect controls 180-188. The effect control 180 rotates around the fixed location at the fastest speed, the effect control 182 rotates around the fixed location at the second highest speed, and the effect control 184 third around the fixed location. While rotating at a fast speed, the effect control 186 rotates around the fixed location at the fourth fastest speed, but the effect control 188 does not rotate around the fixed location.

  In some embodiments, the image editing application displays a fan of effect controls 180-188 by indicating that the effect controls rotate around the fixed location from a separate starting position and location of the effect controls. Display the edit closing animation. In order to display the fanning closed animation while moving effect controls 180-188 at the same speed, the application starts moving different effect controls at different points in time (eg, after a certain amount of time has passed, Start moving effect control). Based on this approach, the image editing application begins moving the effect control 180 first, the effect control 182 second, the effect control 184 third, the effect control 186 fourth, and finally the effect control 188. In some embodiments, the application begins moving the second effect control 182 when the first effect control 180 is at or near the position of the effect control 182. In this way, the effect controls 180 and 182 have an appearance that moves integrally as one effect control. The image editing application initiates movement of effect controls 184 and 186 in a similar manner. That is, the application begins to move the effect control 184 when the effect controls 180 and 182 are at or near the position of the effect control 184, and the application can move the effect controls 180-184 to or near the position of the effect control 186. The movement of the effect control 186 is started when it comes near.

  The third stage 215 illustrates the GUI 100 in which the fan-shaped closing animation of the effect controls 180 to 188 of the effect tool 175 is nearing the end. As shown, the effect controls 184 and 186 have stopped rotating around a fixed location. The positions of the effect controls 186 and 188 that underlap the selected effect control 184 are the same as the position of the selected effect control 184. Effect controls 180 and 182 still rotate counterclockwise around the fixed location. As shown in the third stage 215, the position of the effect controls 180 to 188 is more closed than the position of the effect controls 180 to 188 shown in the second stage 210. Has been issued.

  The fourth stage 220 shows the GUI 100 after the fan-shaped closing animation of the effect controls 180 to 188 is completed. As the image editing application displays a fanning closed animation of a series of effect controls 180-188, the application overlies the selected effect control that rotates around a fixed location beyond the location and position of the effect control 188. Display the effect control to wrap. The position and location at which the fan control closing animation of the effect control that overlaps the selected effect control ends are fixed from the location and position at which the selected effect control wraps and the selected effect control ends. This is a position and location rotated about 90 ° counterclockwise around the location. At the end of the fanning closed animation of a series of effect controls 180-188, an effect control that overlaps the selected effect control is suspended from a fixed location around which effect controls 180-186 have rotated. Appearance.

  In the example illustrated in the fourth stage 220 of FIG. 2, the selected effect control is the effect control 184. Therefore, the effect controls 184 to 188 end at the location and position shown in the fourth stage 220 at the end of the sector-shaped closing animation. In addition, the effect controls 180 and 182 that overlap the selected effect control 184 are at locations and positions that are rotated approximately 90 ° counterclockwise around the fixed location from the end location and position of the effect controls 184-188. finish.

  FIG. 2 illustrates the selection of a particular effect control for an effect tool, but as will be appreciated by those skilled in the art, any effect control for an effect tool may be selected after the effect tool is activated. . For example, the effect control 180, 182, 186, or 188 may also have been selected by the user.

  The user may wish to change the effect control selection after selecting the effect control of the effect tool. FIG. 3 conceptually illustrates a change in the effect control selected with the effect tool 175 illustrated in FIG. Specifically, FIG. 3 illustrates the GUI 100 in four separate stages 305-320 of the effect control change operation.

  The first stage 305 of the GUI 100 is similar to the fourth stage 220 of the GUI 100 illustrated in FIG. That is, in the first stage 305, the GUI 100 after the effect control 184 is selected, the effect control 184 is highlighted by the bold display of the boundary line, and the fan-shaped closing animation of the series of effect controls 180 to 188 is completed. Is shown. In addition, the first stage 305 also illustrates invoking an operation that changes the effect control selection of the effect tool 175. As shown, the user selects a selectable UI item 190 (eg, by touching UI item 190) and invokes an operation to change the selection of effect controls.

  The second stage 310 illustrates the GUI 100 after the image editing application has finished a series of fanning out animations of the effect controls 180-188. When the application receives a selection of the UI item 190, the application displays a fanning open animation of a series of effect controls 180-188. This animation is similar to the fan-shaped opening and opening animation described above with reference to FIG. As shown, the effect control 184 remains highlighted because the effect control 184 is the effect control currently selected in the effect tool 175.

  The GUI 100 in the third stage 315 illustrates the selection of different effect controls for the effect tool 175. As shown, the user has selected effect control 180 (eg, by touching effect control 180). When the image editing application receives the selection of the effect control 180, the application highlights the effect control 180 and creates a series of closed closing animations for the effect control 180-188 described above with reference to FIG. A fan-shaped closing animation of a series of similar effect controls 180-188 is displayed.

  The fourth stage 320 illustrates the GUI 100 with the selected effect control 180 highlighted after the end of the fanning closed animation of the series of effect controls 180-188. In this example, a series of effect controls 180-186 rotate around the UI item 190 and end at the selected effect control 190 position. Since none of the other effect controls of effect tool 175 (ie, effect controls 182-188) overlap with the selected effect control 180, the end positions of effect controls 182-188 are at the end of selected effect control 180. Same as end position. Thus, none of the effect controls will look like they hang from a fixed location around which effect controls 180-186 have rotated.

  FIG. 3 illustrates an example of changing the selected effect control of the effect tool. As will be appreciated by those skilled in the art, when changing the selected effect control of an effect tool, any effect control of the effect tool can also be selected. Moreover, the selected effect control of the effect tool can be changed any number of times.

  In some embodiments, the image editing application provides the GUI described in FIGS. 1-3 above when the application is in landscape viewing mode. In such an embodiment of the application, the GUI provided when the application is in the portrait viewing mode is shown in the figure below.

  FIG. 4 conceptually illustrates the GUI 400 including the effects tool 175 of some embodiments, and the activation of the effects two 175. In particular, FIG. 4 illustrates a GUI 400 in four separate stages 405-420 of an effect tool activation operation. The GUI 400 is similar to the GUI 100 described above with reference to FIG. 1 except that the thumbnail display area 125 is arranged below the image display area 145 and above the toolbar 195 in the GUI 400. The GUI 400 does not include the toolbar 135. Therefore, UI items 132 to 140 are displayed in the toolbar 195 instead.

  The stages 400-420 of GUI 400 are similar to stages 105-120 described above with reference to FIG. That is, the first stage 405 indicates activation of the effect tool 175, the second stage 410 indicates the start of a fan-shaped opening and closing animation of the effect controls 180 to 188, and the third stage 415 indicates a fan-shaped closing animation. Shows the effect controls 180 to 188 that are approaching the end, and the fourth stage 420 shows the effect controls 180 to 188 at the end of the fan-shaped creation opening animation.

  In addition, the fan-shaped closing animation of the effect tool 175 (when effect control of the effect tool 175) in the GUI 400 is similar to the animation described above with reference to FIG. The technique for changing the selection of the effect control of the effect tool 175 in the GUI 400 and the accompanying animation are the same as the technique and animation described above with reference to FIG.

  In some embodiments, the image editing application may provide a GUI corresponding to the example operation described above with reference to FIGS. 1-3 when the application is in landscape viewing mode. The image editing application according to some embodiments provides the GUI described above with reference to FIG. 4 for an example operation when the application is in portrait viewing mode. However, in some cases, the image editing application provides additional GUIs depending on the operation example. For example, the display screen of a mobile computing device (for example, a smartphone) that is running an application may not have enough free space to display the operation examples illustrated in FIGS.

  FIG. 5 conceptually illustrates the GUI 500 of an image editing application including the effects tool 175 of some embodiments and the activation of the effects tool 175. Specifically, FIG. 5 illustrates a GUI 500 in four separate stages 505-520 of the effect tool activation operation.

  The GUI 500 is similar to the GUI 100 described above with reference to FIG. 1 except that the thumbnail display area 125 is arranged below the image display area 145 and above the toolbar 195 in the GUI 500. Further, the GUI 500 does not include the toolbar 135. Therefore, UI items 132 to 140 are displayed in the toolbar 195 instead.

  The first stage 505 of the GUI 500 shows the activation of the effects tool 175. At this stage, the user has selected a selectable effect tool UI item 140 (e.g., touching UI item 140) and activated effect tool 175.

  The second stage 510 illustrates the GUI 500 after the effects tool 175 has been activated. As shown, the GUI 500 displays the start of the fanning out animation of a series of effect controls 180-188, and the effect tool UI item 140 is highlighted. When the image editing application receives the selection of the effects tool UI item 140, the application highlights the UI item 140 and displays an animation of the UI items 132-140 that slide (for example, to the left and away from the toolbar 195). UI items 132-140 are removed from toolbar 195 and UI item 140 is displayed on the left side of toolbar 195.

  When the image editing application receives a selection of the effect tool UI item 140, the application also begins to display a fanning open animation of a series of effect controls 180-188. In this example, the start position of the fan-shaped creation opening animation of the effect controls 180 to 188 is indicated by a broken-line rectangle in the tool bar 195. When the fanning out animation starts, the image editing application displays effect controls 180-186 that rotate clockwise around a fixed location (in this example, selectable UI item 190) relative to the effect control 188. To do. The application also fans out effect controls 180-188 and simultaneously moves the fixed location, and further effects controls 180-186 towards the center on the right side of image display area 145. In other words, the application displays the effect controls 180 to 188 that are fan-shaped in an open state, and at the same time, slides the effect controls 180 to 188 upward and toward the center on the right side of the image display area 145. indicate.

  The image editing application displays the fanning out animation of effect controls 180-188 by displaying that different effect controls rotate by a different amount around the fixed location from the starting position and location. As shown, each of the effect controls 180-186 pivots around a fixed location in a reduced amount relative to the effect control 188.

  In some embodiments, the image editing application displays the effect controls 180-by displaying that separate effect controls rotate from the starting position and location around the fixed location at different speeds for a defined time interval. 188 fan-shaped projecting opening animation is displayed. In some embodiments, the time interval stops moving so that the application moves the effect controls 180-188 away from the center of the right side of the image display area 145 after the application starts moving the effect controls 180-188 from the toolbar 195. It is defined as the time until. In such embodiments, effect control 180 rotates around the fixed location at the fastest speed, effect control 182 rotates around the fixed location at the second fastest speed, and effect control 184 is fixed. While rotating around the location at the third fastest speed, the effect control 186 rotates around the fixed location at the fourth highest speed, but the effect control 188 does not rotate around the fixed location.

  The image editing application of some embodiments displays the fanning opening animation of the effect controls 180-188 by displaying that the effect controls rotate from the starting position and location around the fixed location at the same speed. To do. To display the fanning opening animation while moving effect controls 180-188 at the same speed, the application starts moving different effect controls at different times (eg, after a defined amount of time has passed). Start moving effect controls). Based on this approach, the application starts moving effect control 180 first, effect control 182 second, effect control 184 third, effect control 186 fourth, and finally effect control 188.

  The third stage 515 illustrates the GUI 500 in which the fanning-out opening animation of the effect controls 180-188 of the effect tool 175 is nearing the end. As shown in the figure, the positions of the effect controls 180 to 188 are fan-shaped so as to be further open than the positions of the effect controls 180 to 188 illustrated in the second stage 510. Further, the location of the fixed location, and further the effect controls 180 to 188 are closer to the center on the right side of the image display area 145 than the location of the fixed location shown in the second stage 510.

  The fourth stage 520 shows the GUI 500 after the fan-shaped creation opening animation of the effect controls 180 to 188 is completed. As shown, the effect control 180 is rotated approximately 90 ° clockwise around its fixed location from its starting location and position, and the effect control 182 is clockwise around its fixed location from its starting location and position. Rotate approximately 67.5 °, effect control 184 rotates approximately 45 ° clockwise around its fixed location from its starting location and position, and effect control 186 moves around its fixed location from its starting location and position Was rotated approximately 22.5 ° clockwise.

  FIG. 5 illustrates an example of a fan-shaped opening / closing animation of the effect control of the effect tool when the effect tool is activated. In some embodiments, the image editing application does not display a fan-out animation of the effect control of the effect tool even when the effect tool is activated. Instead, the application of some such embodiments displays the final state (eg, most recent state) of the effects tool. For example, when the effect tool is activated and the effect control of the effect tool is selected in the final state of the effect tool, the application will select the selected effect control as the fourth effect illustrated in FIG. It can be displayed in a similar manner to stage 620.

  FIG. 6 conceptually illustrates selection of effect controls for the effect tool 175 illustrated in FIG. In particular, FIG. 6 illustrates a GUI 500 in four separate stages 605-620 of the effect control selection operation.

  The first stage 605 of the GUI 500 shows selection of effect control of the effect tool 175. As shown, the user has selected effect control 184 (eg, by touching effect control 184). When the image editing application receives the selection of effect control 184, the application highlights the selected effect control (in this example, effect control 184) and displays a series of closed animations of effect controls 180-188. To start.

  The second stage 610 illustrates the GUI 500 after the effects control 184 has been selected and the fanning closed animation of the series of effect controls 180-188 has begun. The application highlights the effect control 184 by bolding the border of the effect control 184. In this example, the position and location of the series of effect controls 180-188 shown in the fourth stage 510 of FIG. 5 is the starting position and location of the series of effect controls 180-188 for fan-shaped closed animation.

  When the sector-shaped closing animation starts, the image editing application displays effect controls 180-186 that rotate counterclockwise around a fixed location (for example, UI item 190 in this example) with reference to effect control 188. . Simultaneously fanning out the effect controls 180-188, the application also moves the fixed location, and even the effect controls 180-188, from the center on the right side of the image display area 145 toward the right side of the toolbar 195. In other words, the application displays effect controls 180-188 that fan out in a closed state, while the application displays a fixed location that slides from the center on the right side of the image display area 145 toward the right side of the toolbar 195.

  The image editing application displays the fanning closed animation of the effect controls 180-188 by displaying that different effect controls rotate by a different amount around the fixed location from the starting position and location of the effect controls. . As shown, each of the effect controls 180-186 pivots in a reduced amount about a fixed location relative to the effect control 188, as described above with reference to FIG. The rotation direction (in this example, counterclockwise) of the effect controls 180 to 186 shown in FIG. 6 is opposite to the rotation direction of the effect controls 180 to 186 during the fan-shaped creation opening animation shown in FIG. Direction.

  In some embodiments, the image editing application displays by displaying different effect controls rotating from a different starting position and location of the effect control around the fixed location at different speeds for a defined time interval. The fan-shaped edit closing animation of the effect controls 180 to 188 is displayed. In some embodiments, the time interval is the time that the application begins to move the fixed location, and even the effect controls 180-188, from the center of the right side of the image display area 145 toward the right side of the toolbar 195. It is defined as the time until 180-188 is moved onto the toolbar 195.

  The image editing application of some embodiments allows the effect control 180-188 to be fanned by displaying that the effect control rotates at the same speed around the fixed location from the separate start position and location of the effect control. Display the opening / closing animation. In order to display the fanning closed animation while moving effect controls 180-188 at the same speed, the application starts moving different effect controls at different points in time (eg, after a certain amount of time has passed, Start moving effect control). Based on this approach, the image editing application begins moving the effect control 180 first, the effect control 182 second, the effect control 184 third, the effect control 186 fourth, and finally the effect control 188. In some embodiments, the application begins moving the second effect control 182 when the first effect control 180 is at or near the position of the effect control 182. Therefore, the effect controls 180 and 182 have an appearance that moves integrally as one effect control. The image editing application initiates movement of effect controls 184 and 186 in a similar manner. When effect controls 180 and 182 are at or near the position of effect control 184, the application begins to move effect control 184, and when effect controls 180-184 are at or near the position of effect control 186, the application Starts moving the effect control 186.

  The third stage 615 illustrates the GUI 500 where the fan-shaped opening and opening animation of the effect controls 180 to 188 of the effect tool 175 is nearing the end. As shown in the drawing, the positions of the effect controls 180 to 188 are fan-shaped so as to be more closed than the positions of the effect controls 180 to 188 illustrated in the second stage 610. Also, the location of the fixed location, and further the effect controls 180-188, are closer to the right side of the toolbar 195 than the location of the fixed location illustrated in the second stage 610.

  The fourth stage 620 shows the GUI 500 after the fan-shaped closing animation of the effect controls 180 to 188 is completed. The image editing application displays the selected effect control on the toolbar 195 when the fan-shaped edit closing animation is finished. The application also displays effect controls that overlap the selected effect controls in a manner similar to that illustrated in the fourth stage 220 of FIG. That is, the image editing application is selected at a position and location that is rotated approximately 90 ° counterclockwise around the selectable UI item 190 from the location and position where the application displays the selected effect control. Display effect controls in an overlapping state with effect controls. At the end of the fanning closed animation of the series of effect controls 180-188 in the fourth stage 620, the effect control that overlaps the selected effect control appears to hang from the selectable UI item 190. Present.

  In the example illustrated in the fourth stage 620 of FIG. 6, the selected effect control is the effect control 184. Therefore, the image editing application overlaps the selected effect control 184 at a location and position rotated about 90 ° counterclockwise around the UI item 190 from the selected effect control 184. Controls 180 and 182 are displayed.

  FIG. 6 illustrates the selection of a particular effect control for an effect tool, but as will be appreciated by those skilled in the art, any effect control for an effect tool may be selected after the effect tool is activated. . For example, the effect control 180, 182, 186, or 188 may also have been selected by the user.

  As described above, the user may wish to change the selection of the effect control after selecting the effect control of the effect tool. FIG. 7 conceptually illustrates changing selected effect controls of the effect tool 175 illustrated in FIG. Specifically, FIG. 7 illustrates a GUI 500 in four separate stages 705-720 of an effect control change operation.

  The first stage 705 of the GUI 500 is similar to the fourth stage 620 of the GUI 500 illustrated in FIG. That is, in the first stage 705, the effect control 184 is selected, the effect control 184 is highlighted by the bold display of the boundary line, and the fanning closed animation of the series of effect controls 180 to 188 is completed and selected. The GUI 500 after the effect control 184 displayed on the toolbar 195 is shown. In addition, the first stage 705 also illustrates invoking an operation that changes the effect control selection of the effect tool 175. As shown, the user selects a selectable UI item 190 (eg, by touching UI item 190) and invokes an operation to change the selection of effect controls.

  The second stage 710 illustrates the GUI 500 after the image editing application has completed a series of fanning out animations of effect controls 180-188. When the application receives a selection of UI item 190, the application displays a series of effect controls 180-188 fanning open animation. This animation is similar to the fanning and opening animation described above with reference to FIG. As shown, the effect control 184 remains highlighted because the effect control 184 is the effect control currently selected in the effect tool 175.

  The GUI 100 in the third stage 715 illustrates the selection of separate effect controls for the effect tool 175. As shown, the user has selected effect control 180 (eg, by touching effect control 180). When the image editing application receives the selection of effect control 180, the application de-highlights the previously selected effect control 186 and highlights the newly selected effect control 180, see FIG. 2 above. The series of effect control 180-188 fan-shaped closing animations similar to the series of effect control 180-188 fan-shaped closing animations described above is displayed.

  The fourth stage 720 illustrates the GUI 500 in a state in which the selected effect control 180 is highlighted and displayed on the tool bar 195 after the series of effect control 180 to 188 is finished. Since none of the other effect controls of effect tool 175 (ie, effect controls 182-188) overlap with the selected effect control 180, the end positions of effect controls 182-188 are at the end of selected effect control 180. Same as end position. Thus, none of the effect controls will appear to hang from the UI item 190.

  FIG. 7 illustrates an example of changing the selected effect control of the effect tool. As will be appreciated by those skilled in the art, when changing the selected effect control of an effect tool, any effect control of the effect tool can also be selected. Moreover, the selected effect control of the effect tool can be changed any number of times.

  FIGS. 5-7 show example layouts and animations of the effect controls 180-188 when the effect controls are fanned out in the open and closed states. In some embodiments, the layout and animation of the effect controls 180-188 illustrated in FIGS. 5-7 are provided when the image editing application is in right hand mode, in which the user moves the right hand. This makes it easy to interact with the application GUI 500. In some such embodiments, when the image editing application is in the left-hand mode, the application is different in effect controls 180-188 when fanning out the effect controls into an open state and a closed state. Provide layout and animation. For example, in the left-hand mode of the application, the image editing application of some embodiments allows the effect control to move from the left side of the image display area 145 to the center of the image display area 145 while the effect control is in the image display area 145. A fan-shaped opening and opening animation is displayed in a manner similar to that shown in FIG. 5, except that the fan-shaped setting is started near the lower left and opened to the upper right of the image display area 145. In the left-hand mode of the application of such an embodiment, the effect control moves inwardly toward the left side of the image display area 145 while the effect control moves from near the center of the image display area 145 to the left side of the image display area 145. Except for fanning out, the fanning closing animation is displayed in a manner similar to that shown in FIG. In some embodiments, when the image editing application is in left hand mode, an array of effect controls 180-188 illustrated in FIGS. 5-7 is provided, and when the application is in right hand mode, instead, An array of effect controls 180-188 as described above for the left hand mode is provided. As understood by those skilled in the art, any of the GUIs in FIGS. 1-7 above can use any of the animations illustrated in FIGS. 1-7 above.

  FIGS. 1-7 above show several techniques for fanning out the UI controls in the open and closed states. For example, FIGS. 3 and 7 select another UI control by selecting a UI item (in this example, UI item 190) and fanning out that UI control, and selecting a UI control. In the closed state of the UI control, the fan shape is shown. However, in some embodiments, other techniques may be utilized when fanning out the UI controls to the open and closed states. For example, in the UI tool of some embodiments, the user can fan out the UI control by performing a gesture (eg, a swipe up gesture) on the selected UI control. Similarly, in some embodiments, if a UI control is fanned out and the user does not want to select another UI control (ie, the user does not select the currently selected UI control). If the user wants to keep it selected, the user can fan out the UI control to a closed state by performing a gesture (eg, swipe down gesture) on the image display area using the UI tool. it can. Other techniques are also conceivable.

  As described above, each effect control of the effect tool of some embodiments corresponds to the purpose of applying a series of effects to the image being edited. Various embodiments of the effect tool each include different types of effect controls. FIGS. 8-11 below illustrate some examples of various effect tools including different types of effect controls.

  FIG. 8 conceptually illustrates an effect tool 175 of some embodiments that includes one type of effect control. As shown, the effects tool 175 includes a series of slider controls 880-888. Each of the slider controls 880-888 includes a sliding area and a slider that is movable along the axis of the sliding area so that effects associated with the slider control can be adjusted. In some embodiments, the different positions of the slider along the sliding area indicate different ranges of effects associated with the slider control that are applied to the image being edited.

  FIG. 9 conceptually illustrates an effect tool 175 of some embodiments that includes another type of effect control. FIG. 9 illustrates that the effects tool 175 includes a series of thumbnail slider controls 980-988. Each of the thumbnail slider controls 980-988 includes a series of selectable UI items located at different locations along the thumbnail slider control. Each series of selectable UI items corresponds to the purpose of applying a different range of effects associated with the thumbnail slider control to the image being edited (image 142 in this example).

  As shown, each UI item of the thumbnail slider control is associated with a thumbnail image of the image being edited (eg, a full size version of the image being edited in reduced size) and a thumbnail slider control. Displays the effect range applied to the thumbnail image. In this example, some of the effects are represented by various types of lines (vertical lines, horizontal lines, and diagonal lines). The larger the number of lines displayed on the image, the wider the range of effects applied to the image. The smaller the number of lines displayed on the image, the smaller the range of effects applied to the image. Represents that.

  For example, the thumbnail slider control 988 corresponds to the purpose of applying an effect represented by displaying a vertical line on the image. Each UI item of the thumbnail slider control 988 displays the thumbnail image of the image 142 and the range of effects associated with the thumbnail slider control 988 applied to the thumbnail image. The UI item at the left end of the thumbnail slider control 988 has no vertical line displayed on the thumbnail image. This indicates that the range of the effect applied to the thumbnail image of the leftmost UI item is extremely narrow. The second UI item from the left end of the thumbnail slider control 988 has two vertical lines displayed on the thumbnail image. This indicates that the range of the effect applied to the thumbnail image of the second UI item from the left end is narrow. The UI item at the center of the thumbnail slider control 988 has three vertical lines displayed on the thumbnail image. This indicates that the range of the effect applied to the thumbnail image of the center UI item is medium. In the second UI item from the right end of the thumbnail slider control 988, six vertical lines are displayed on the thumbnail image. This indicates that the range of effects applied to the thumbnail image of the second UI item from the right end is wide. The UI item at the right end of the thumbnail slider control 988 has 11 vertical lines displayed on the thumbnail image. This indicates that the range of effects applied to the thumbnail image of the UI item at the right end is extremely wide.

  FIG. 10 conceptually illustrates an effect tool 175 of some embodiments that includes another type of effect control. As shown, the effects tool 175 includes a series of multi-slider controls 1080-1088. Each of the multi-slider controls 1080-1088 includes a series of slider controls similar to those described above with reference to FIG. In some embodiments, the multi-slider control corresponds to the purpose of applying one effect to the image being edited, and each slider control of the multi-slider control is a separate effect associated with the multi-slider control. This corresponds to the purpose of adjusting the mode. In this way, different aspects of the effect associated with the multi-slider control can be adjusted using another slider control of the multi-slider control. In some embodiments, the multi-slider control corresponds to the purpose of applying several separate effects to the image being edited, and each slider control of the multi-slider control is associated with a multi-slider control. It corresponds to the purpose of adjusting another effect.

  FIGS. 8-10 above illustrate an effect tool that includes the same type of effect controls. In some embodiments, the effects tool includes several different types of effect controls. FIG. 11 conceptually shows an example of such an effect tool. As shown, FIG. 11 conceptually illustrates an effect tool 175 of some embodiments that includes a series of effect controls 1180-1188. In particular, effect controls 1180 and 1188 are similar to the slider controls described above with reference to FIG. 8, and effect controls 1182 and 1186 are similar to the thumbnail slider controls described above with reference to FIG. The effect control 1184 is similar to the multi-slider control described above with reference to FIG.

  FIG. 12 conceptually illustrates thumbnail slider control 1280 and application of effects to an image using thumbnail slider control 1280 of some embodiments. Specifically, FIG. 12 illustrates the GUI 100 in four separate stages 1205-1220 for effect application operations.

  The first stage 1205 of the GUI 100 is similar to the fourth stage 220 shown in FIG. 2, except that the effects tool 175 in FIG. 12 includes a series of thumbnail slider controls. As shown, the user has activated the effects tool 175 (e.g., by selecting the UI item 140), which indicates that the effect item 140 is highlighted. In addition, the user selects the thumbnail slider control 1280 of the effect tool 175 (eg, touches the thumbnail slider control 1280 when the series of thumbnail slider controls of the effect tool 175 are fanned outward). Yes.

  The thumbnail slider control 1280 is similar to the thumbnail slider control described above with reference to FIG. That is, the thumbnail slider control 1280 includes a series of selectable UI items 1281-1285 located at different positions along the thumbnail slider control 1280. The series of selectable UI items 1281-1285 corresponds to the purpose of applying different ranges of effects associated with the thumbnail slider control 1280 to the image being edited (in this example, image 142). As shown, each selectable UI item displays a thumbnail image of the image 142 and a range of effects associated with the thumbnail slider control 1280 applied to the thumbnail image. Each UI item corresponds to the purpose of applying the effect to the image 142 to the extent that the effect is applied to the thumbnail image of the UI item. In this example, the effects associated with the thumbnail slider control 1280 are represented by diagonal lines drawn from the lower left to the upper right. The larger the number of diagonal lines displayed on the image, the wider the range of effects applied to the image. The smaller the number of diagonal lines displayed on the image, the range of effects applied to the image. Is narrow.

  Second stage 1210 illustrates GUI 100 after a selectable UI item of thumbnail slider control 1280 has been selected. Here, the user has selected the UI item 1282 to apply the effect associated with the thumbnail slider control 1280 to the image 142. The selection of the UI item 1282 is indicated by the UI item 1282 being highlighted. When the image editing application receives the selection of the UI item 1282, the application highlights the UI item 1282 and applies the effect to the image 142 to the extent that the effect has been applied to the thumbnail image of the UI item 1282. As shown in the second stage 1210, three diagonal lines are displayed on the image 142, which is the same as the diagonal lines displayed on the thumbnail image of the UI item 1282. , The effect associated with the thumbnail slider control 1280 is applied to the image 142.

  Some effects may not be noticeable, or the effects may be applied to the image in a very narrow range. To indicate that an effect has been applied to the image, some embodiments of the image editing application may display an indicator (eg, highlight) on the effects tool UI item 140 when the application applies the effect to the image. Is displayed. As illustrated in the second stage 1210, such an indicator is displayed above the effects tool UI item 140 and is represented by a white thick line bordered by a black border. When the application receives a selection of UI item 1282, the application displays an indicator. In some embodiments, the application continues on top of the effects tool UI item 140 as long as one or more effects are applied to the image being edited (even if another tool is activated). Display an indicator.

  The third stage 1215 illustrates the GUI 100 after the user has selected another selectable UI item for the thumbnail slider control 1280. At this stage, the effect is applied to image 142 by the user selecting UI item 1284 (eg, touching UI item 1284) and applying the effect associated with thumbnail slider control 1280 to image 142. The range is increased. The selection of the UI item 1284 is indicated by the UI item 1284 being highlighted. When the image editing application receives the selection of the UI item 1284, the application highlights the UI item 1284, unhighlights the UI item 1282, and the same range in which the effect is applied to the thumbnail image of the UI item 1284. Until then, the effect is applied to the image 142. As shown in the third stage 1215, the number of diagonal lines displayed on the image 142 is increased compared to the number of diagonal lines displayed on the image 142 in the second stage 1210. A larger range of effects has been applied to the image 142.

  In the fourth stage 1220, the GUI 100 illustrates that the user has selected another selectable UI item in the thumbnail slider control 1280 to change the extent to which the effect is applied to the image 142. In the fourth stage 1220, the user selects the UI item 1281 (eg, by touching the UI item 1281) and applies the effect associated with the thumbnail slider control 1280 to the image 142 so that the effect is displayed in the image 142. Reduce the range applied to. The selection of the UI item 1281 is indicated by the UI item 1281 being highlighted. When the image editing application receives the selection of the UI item 1281, the application highlights the UI item 1281, unhighlights the UI item 1284, and the same range in which the effect is applied to the thumbnail image of the UI item 1281. Until then, the effect is applied to the image 142. As shown, no diagonal lines are displayed on the image 142, indicating that the reduced range of effects has been applied to the image 142.

  FIG. 12 illustrates a thumbnail slider control that includes a series of selectable UI items that, when selected, apply a series of predefined ranges of effects to the image being edited. Such a thumbnail slider control may also be referred to as a discrete thumbnail slider control. In some embodiments, the application provides a thumbnail slider control for applying effects with finer granularity to the image being edited. This thumbnail slider control is sometimes called a continuous thumbnail slider control.

  FIG. 13 conceptually illustrates the application of effects to an image using the continuous thumbnail slider control 1380 and the thumbnail slider control 1380 of some embodiments. In particular, FIG. 13 illustrates the GUI 100 in four separate stages 1305-1320 of effect application operations.

  The first stage 1305 of the GUI 100 is similar to the fourth stage 220 shown in FIG. 2, except that the effects tool 175 in FIG. 13 includes a series of thumbnail slider controls. As shown, the user has activated the effect tool 175 (eg, by selecting the UI item 140), which is indicated by the effect item 140 being highlighted. In addition, the user selects the thumbnail slider control 1380 of the effect tool 175 (eg, touches the thumbnail slider control 1380 when the series of thumbnail slider controls of the effect tool 175 are fanned outward). Yes.

  As shown, the thumbnail slider control 1380 includes a selectable sliding area 1386 and a series of thumbnail images 1381-1385 arranged at different positions along the selectable sliding area 1386. Sliding area 1386 corresponds to the purpose of applying different ranges of effects associated with thumbnail slider control 1380 to the image being edited (in this example, image 142). The different locations along the horizontal axis of the sliding area 1386 correspond to the purpose of applying different ranges of effects to the image being edited. For example, in some embodiments, the first horizontal edge of the sliding area 1386 corresponds to little or no effect applied to the image being edited, and the sliding area 1386 second horizontal edge. Part corresponds to applying the full range of effects to the image being edited, and the incremental horizontal location from the first end to the second end of the sliding area is This corresponds to applying an incremental range effect to the image. In this example, the left side of the selectable sliding area 1386 corresponds to no effect being applied to the image being edited, and the right side of the selectable sliding area 1386 is the entire range of the image being edited. This corresponds to the application of the effect.

  As shown, each of the thumbnail images 1381-1385 displays the thumbnail image of the image 142 and the range of effects associated with the thumbnail slider control 1380 applied to the thumbnail image. In this example, the central location of each thumbnail image in the selectable sliding area 1386 corresponds to the range of effects applied to the thumbnail image. In this manner, the thumbnail images 1381 to 1385 visually indicate to the user the range in which the effect is applied to the image being edited when the user selects the center of the thumbnail. Various embodiments use separate locations within the selectable sliding area 1386 relative to the thumbnail images 1381-1385 to accommodate the range of effects applied to the thumbnail images. For example, some embodiments may use a location near the left of each thumbnail image in the selectable sliding area 1386 to accommodate the extent of the effect applied to the thumbnail image.

  Second stage 1310 illustrates GUI 100 after a location on sliding area 1386 of thumbnail slider control 1380 has been selected. Here, the user has selected a location near thumbnail image 1382 to apply the effect associated with thumbnail slider control 1380 to image 142. When a location on the sliding area 1386 is selected, the image editing application displays an indicator 1387 indicating the selected location and highlights the thumbnail closest to the location. As shown in the figure, the location selected by the user is a location near the thumbnail image 1382. When the application receives this location selection, the application highlights the thumbnail image 1382 and applies the effect to the image 142 to the extent that it matches the selected location. As shown in second stage 1310, the range of effects applied to image 142 is similar to the range of effects applied to thumbnail image 1382. In this example, no effect was applied to image 142 prior to second stage 1310, so when the application receives a selection of thumbnail image 1382, the application indicates that the effect has been applied to image 142. An indicator is displayed on the effect tool UI item 140.

  The third stage 1315 illustrates the GUI 100 after the user has selected another location along the selectable sliding area 1386 of the thumbnail slider control 1380. At this stage, the user selects a location on the sliding area 1386 and the extent to which the effect is applied to the image 142 is increased. The user continues touching the sliding area 1386 on the second stage 1310 and sliding to the location along the sliding area 1386, or by touching the location on the sliding area 1386. , You can choose.

  The fact that the location shown in the third stage 1310 is selected is indicated by the fact that the thumbnail image 1384 that is the thumbnail image closest to the location is highlighted. In the example where the user slides his finger along the sliding area 1386 to select a location, the application of some embodiments continues to display the indicator 1387 at the selected location. That is, as the finger slides along the sliding area 1386, the application moves the location of the indicator 1387 with the finger.

  In some embodiments, the application continues to highlight the nearest thumbnail image in the sliding area 1386 while the user slides his / her finger along the sliding area 1386. Thus, the application of such an embodiment highlights the thumbnail image 1383 and de-highlights the thumbnail image 1382 when the location of the sliding finger is closer to the thumbnail image 1383 than the thumbnail image 1382. Similarly, the application highlights the thumbnail image 1384 and cancels the highlight of the thumbnail image 1383 when the location of the sliding finger is closer to the thumbnail image 1384 than the thumbnail image 1383.

  The application of some embodiments applies the effect to the image 142 to the extent that matches the selected location while the user slides his finger along the sliding area 1386. As shown in the third stage 1315, the number of diagonal lines displayed on the image 142 is larger than the number of diagonal lines displayed on the image 142 in the second stage 1310, which means that A larger range of effects has been applied to the image 142.

  The GUI 100 in the fourth stage 1320 illustrates that the range in which the effect is applied to the image 142 has been changed by selecting another location along the sliding area 1386 that the user can select. In the fourth stage 1320, the user has selected a location on the sliding area 1386, reducing the extent to which the effect is applied to the image 142. The user continues to touch this location on the third stage 1315 by touching the sliding area 1386 and sliding to that location along the sliding area 1386, or by touching that location on the sliding area 1386. , You can choose.

  In some embodiments, the image editing application highlights the thumbnail images 1381-1385, displays the indicator 1387, and displays the images in a manner similar to that described above with reference to the third stage 13815. The effect is applied to 142. As shown in this stage, no diagonal lines are displayed on the image 142, indicating that the reduced range of effects has been applied to the image 142.

  12 and 13 illustrate an example of a thumbnail slider control that controls a single effect applied to the image being edited. Details of a single effect that can be implemented with the Thumbnail Slider Control are described in US Patent Application Publication No. 13 / 629,549, entitled “Method and Interface for Converting Images to Grayscale,” filed Sep. 27, 2012, and September 9, 2012. No. 13 / 629,523 entitled “Multi Operation Slider” filed on Jan. 27. U.S. Patent Application Publication Nos. 13 / 629,549 and 13 / 629,523 are hereby incorporated by reference.

  In some embodiments, the application provides a thumbnail slider control for applying several separate effects to the image being edited. FIG. 14 conceptually illustrates thumbnail slider control 1480 of some embodiments and application of effects to images using thumbnail slider control 1480. Specifically, FIG. 14 illustrates the GUI 100 in four separate stages 1405-1420 of several effect application operations.

  The first stage 1405 of the GUI 100 is similar to the fourth stage 220 shown in FIG. 2, except that the effects tool 175 in FIG. 14 includes a series of thumbnail slider controls. As shown, the user has activated the effect tool 175 (eg, by selecting the UI item 140), which is indicated by the effect item 140 being highlighted. In addition, the user selects the thumbnail slider control 1480 of the effect tool 175 (eg, touches the thumbnail slider control 1480 when the series of thumbnail slider controls of the effect tool 175 are fanned outward). Yes.

  As shown in FIG. 14, the thumbnail slider control 1480 includes a series of selectable UI items 1481-1485 located at different positions along the thumbnail slider control 1480. A series of selectable UI items 1481-1485 corresponds to the purpose of applying different effects associated with the thumbnail slider control 1480 to the image being edited (in this example, image 142). In this example, some of the different effects are represented by different types of lines (in this example, vertical lines, horizontal lines, left to right diagonal lines, and right to left diagonal lines). As shown, each selectable UI item displays a thumbnail image of the image 142 and a range of separate effects applied to the thumbnail image.

  In some embodiments, the thumbnail slider control 1480 provides separate effects of the same type. For example, some embodiment thumbnail slider controls 1480 provide various paint effects, various black and white effects, various color effects, and the like. In some embodiments, the thumbnail slider control 1480 provides various types of separate effects.

  The second stage 1410 illustrates the GUI 100 after a selectable UI item for the thumbnail slider control 1480 has been selected. Here, the user has selected the UI item 1481 in order to apply the effect associated with the UI item 1481 to the image 142. The selection of the UI item 1481 is indicated by the UI item 1481 being highlighted. When the image editing application receives the selection of the UI item 1481, the application highlights the UI item 1481 and applies the effect corresponding to the UI item 1481 to the image 142. In this example, no effect has been applied to the image 142 prior to the second stage 1410, so when receiving the selection of the UI item 1481, the application displays an indicator that the effect has been applied to the image 142. It is displayed on the effect tool UI item 140.

  The third stage 1415 illustrates the GUI 100 after the user has selected another selectable UI item for the thumbnail slider control 1280. At this stage, the user has selected UI item 1483 (eg, by touching UI item 1483) and has applied different effects associated with thumbnail slider control 1280 to image 142. The selection of the UI item 1483 is indicated by the UI item 1483 being highlighted. When the image editing application receives the selection of the UI item 1483, the application highlights the UI item 1483, cancels the highlighting of the UI item 1481, and then applies the effect corresponding to the UI item 1483 to the image 142.

  The GUI 100 in the fourth stage 1420 illustrates that the user has selected another selectable UI item in the thumbnail slider control 1480 to change the effect applied to the image 142. In the fourth stage 1420, the user selects the UI item 1485 (eg, by touching the UI item 1485) and applies the effect corresponding to the UI item 1485 to the image 142. The selection of the UI item 1485 is indicated by the UI item 1485 being highlighted. When the image editing application receives the selection of the UI item 1485, the application highlights the UI item 1485, cancels the highlighting of the UI item 1483, and then applies the effect corresponding to the UI item 1485 to the image 142.

  Details of the effects that can be implemented with the Thumbnail Slider control to apply different types of effects to images are described in US Patent Application Publication No. 13/19, entitled “Overriding User Interface Tools for Applying Effects to Image,” filed September 27, 2012. No. 629,383, U.S. Patent Application Publication No. 13 / 602,124 filed September 1, 2012, and U.S. Patent Application Publication No. 13 / 602,135 filed September 1, 2012. . U.S. Patent Application Publication Nos. 13 / 629,383, 13 / 602,124, and 13 / 602,135 are hereby incorporated by reference.

  FIG. 15 conceptually illustrates the continuous thumbnail slider control 1580 and the use of the thumbnail slider control 1580 for multiple effects on an image in some embodiments. In particular, FIG. 15 illustrates the GUI 100 in three separate stages 1505-1515 of adaptation of multiple effects to an image being edited.

  The first stage 1505 of the GUI 100 is similar to the fourth stage 220 shown in FIG. 2, except that the effects tool 175 in FIG. 15 includes a series of thumbnail slider controls. As shown, the user has activated the effect tool 175 (eg, by selecting the UI item 140), which is indicated by the effect item 140 being highlighted. In addition, the user selects the thumbnail slider control 1580 of the effect tool 175 (eg, touches the thumbnail slider control 1580 when the series of thumbnail slider controls of the effect tool 175 are fanned outward). Yes.

  As shown, the thumbnail slider control 1580 includes a selectable sliding area 1586, a series of thumbnail images 1581 to 1585 arranged at different positions along the selectable sliding area 1586, and a series of selectable. UI items 1587 to 1589. The sliding area 1586 corresponds to the purpose of applying different ranges of effects associated with the thumbnail slider control 1580 to the image being edited (in this example, image 142). The different locations along the horizontal axis of the sliding area 1586 correspond to the purpose of applying different ranges of effects to the image being edited. For example, in some embodiments, the first horizontal edge of the sliding area 1586 corresponds to little or no effect applied to the image being edited, and the sliding area 1586 second horizontal edge. Part corresponds to applying the full range of effects to the image being edited, and the incremental horizontal location from the first end to the second end of the sliding area is This corresponds to applying an incremental range effect to the image. In this example, the left side of the selectable sliding area 1586 corresponds to no effect being applied to the image being edited, and the right side of the selectable sliding area 1586 is the full range of the image being edited. This corresponds to the application of the effect.

  As shown, each of the thumbnail images 1581-1585 displays the thumbnail image of the image 142 and the range of effects associated with the thumbnail slider control 1580 applied to the thumbnail image. In this example, the central location of each thumbnail image in the selectable sliding area 1586 corresponds to the range of effects applied to the thumbnail image. In this way, the thumbnail images 1581 to 1585 visually indicate to the user the range in which the effect is applied to the image being edited when the user selects the center of the thumbnail. Various embodiments use different locations within the selectable sliding area 1586 relative to the thumbnail images 1581-1585 to accommodate the range of effects applied to the thumbnail images. For example, some embodiments may use a location near the left of each thumbnail image in the selectable sliding area 1586 to accommodate the extent of the effect applied to the thumbnail image.

  A series of selectable UI items 1587-1589 corresponds to the purpose of applying different effects to the image being edited using the sliding area 1586 after the effect has been applied to the image. In some embodiments, a series of selectable UI items 1587-1589 can be used to apply different effects to an image without using the sliding area 1586 to apply the effect to the image. Examples of effects include vignette effects, sepia effects, grain effects, or any other effect for modifying the appearance of an image. Although the first stage 1505 shows the GUI 100 displaying a series of UI items 1587-1589, the application of some embodiments uses the sliding area 1586 to apply UI items 1587 after effects have been applied. -1589 is provided.

  Second stage 1510 illustrates GUI 100 after a location on sliding area 1586 of thumbnail slider control 1580 has been selected. Here, the user has selected a location near thumbnail image 1582 to apply the effect associated with thumbnail slider control 1580 to image 142. Once the location of the sliding area 1586 is selected, the image editing application displays an indicator 1590 indicating the selected location and highlights the thumbnail closest to the location. As shown in the figure, the location selected by the user is a location near the thumbnail image 1582. When the application receives this location selection, the application highlights the thumbnail image 1582 and applies the effect to the image 142 to the extent that it matches the selected location. As shown in second stage 1510, the range of effects applied to image 142 is similar to the range of effects applied to thumbnail image 1582. In this example, no effect was applied to image 142 prior to second stage 1510, so when the application receives a selection of thumbnail image 1582, the application indicates that the effect has been applied to image 142. An indicator is displayed on the effect tool UI item 140.

  The third stage 1515 of the GUI 100 illustrates that the user has selected one of the selectable UI items when applying an additional effect to the image being edited. As shown, the user selects UI item 1587 (eg, by touching UI item 1587) and applies a vignette effect to image 142. The third stage 1515 also shows that a vignette effect has been applied to the image, as shown in the area around the border of the image 142 being darkened.

  FIGS. 12-15 illustrate some examples of thumbnail slider controls in which thumbnails of the image being edited are arranged linearly along the thumbnail slider control. In various embodiments, the thumbnail slider is shown in various embodiments. The thumbnails are arranged in different ways along the controls. For example, in some embodiments of the thumbnail slider control, thumbnails of the image being edited are arranged in a curve along the thumbnail slider control. As another example, the thumbnails of the image being edited may be arranged in a staggered manner along the thumbnail slider controls of some embodiments (eg, some thumbnails may be shifted up, Slide thumbnail down). There may be many other ways to place thumbnails along the thumbnail slider control in other embodiments.

  FIGS. 13 and 15 above illustrate an example of a continuous thumbnail slider control. The examples show that the indicator indicating the selected location and the thumbnail closest to the location indicated by the indicator are highlighted. The technique used to highlight the selected location varies from embodiment to embodiment. For example, the image editing application of some embodiments highlights the indicator instead of or highlighting the nearest thumbnail. Other techniques for indicating the selected location are possible.

  FIG. 16 conceptually illustrates a process 1600 of some embodiments for generating a thumbnail for an effect tool thumbnail slider control. In some embodiments, the process 1600 is performed when an effects tool is activated (eg, as shown in the first stage illustrated in FIGS. 1 and 5). The process 1600 of some embodiments is performed when the effects tool is active and another image for editing (eg, an image selected from the thumbnail display area 125) is selected.

  The process 1600 begins by identifying (at 1610) the image from which the thumbnail is generated. In some embodiments, process 1600 identifies the image being edited. Referring to FIG. 9 as an example, process 1600 identifies image 142 since image 142 is the image being edited (ie, the image displayed in image display area 145 is image 142).

  Process 1600 then identifies (at 1620) the thumbnail slider control of the effects tool. Continuing with the example shown in FIG. 9, the process 1600 identifies one of the thumbnail slider controls 980-988 of the effects tool 175.

  Process 1600 then identifies (at 1630) the effect associated with the identified thumbnail slider control. Another effect can also be associated with the thumbnail slider control. Examples of other effects include black and white effects, sepia effects, duotone effects, gradient effects, vignette effects, tilt shift effects, or any other effect that can be applied to an image.

  Process 1600 then generates (at 1640) a series of thumbnail images based on the identified images and the identified effects. As described above, some embodiment thumbnail slider controls serve the purpose of controlling different ranges of a single effect applied to the image being edited. In such an embodiment, process 1600 applies different ranges of identified effects to different thumbnail images to generate a series of thumbnail images of the identified images.

  As mentioned above, in some embodiments, the thumbnail slider control corresponds to the purpose of applying several separate effects to the image being edited. In these embodiments, the process 1600 applies one of the separate effects to the thumbnail image to generate a thumbnail image of the identified image.

  After the series of thumbnails has been generated, process 1600 determines (at 1650) whether there are any effects to process. If process 1600 determines that there are more effects to process, process 1600 returns to 1630 and continues to generate thumbnails for any remaining effects of the identified thumbnail slider control. For example, if the thumbnail slider control corresponds to the purpose of applying several separate effects to the image being edited, the process 1600 sets 1630 and 1640 for each of the separate effects associated with the thumbnail slider control. Run. If process 1600 determines that there are no effects left to process, process 1600 proceeds to 1660.

  At 1660, process 1600 determines whether there are any remaining thumbnail slider controls to process. If process 1600 determines that there are more thumbnail slider controls to process, process 1600 returns to 1620 and continues to generate thumbnails for any remaining thumbnail slider controls in the effects tool. Referring to FIG. 9 as an example, the process 1600 performs 1620-1650 for each of the thumbnail slider controls 980-988. If process 1600 determines that there are no remaining thumbnail slider controls to process, process 1600 ends.

  FIG. 17 conceptually illustrates a state diagram 1700 of an application of some embodiments that provides an effects tool 175. Specifically, FIG. 17 illustrates several states of some applications and transitions between these states in some embodiments.

  In state 1705, the application is in the state of image editing, browsing or organizing. In some embodiments, the application is in state 1705 first when the application is first started. When the application is in state 1705, the application provides a tool for editing, viewing, or organizing images. For example, the application provides a sharing tool for image sharing, provides various editing tools (for example, a cropping and rotation tool, an exposure tool, a color tool, etc.), and a tool corresponding to the purpose such as image tagging. And so on.

  If the application activates the effects tool 175 when the application is in landscape viewing mode, the application transitions from state 1705 to state 1710. If the application activates the effects tool 175 when the application is in the portrait viewing mode, the application transitions from the state 1705 to the state 1715. In some cases, when the application activates the effects tool 175, the application returns to the last used state. In some such cases, the application transitions from state 1705 to state 1720 if the application is in landscape viewing mode and transitions from state 1705 to state 1725 if the application is in portrait viewing mode (FIG. 17). (Not shown). As shown in FIG. 17, if the application is in any of states 1710-1725 and the application disables the effects tool 175 (eg, activates another tool), the application returns to state 1705.

  In state 1710, the application is in landscape view mode and provides a GUI for displaying the effect controls of effect tool 175 in a fan-out layout. For example, when an application of some embodiments is in state 1710, it provides the GUI illustrated in the fourth stage 120 of FIG.

  When the application changes to state 1710 (eg, from state 1715 or state 1720), the application displays an effect control fan-out animation of effect tool 175. In some embodiments, the application displays a fan-out opening animation similar to the animation described above with reference to FIG.

  If the effect control of effect tool 175 was selected when the application transitioned to state 1710 (eg, the application transitioned from state 1720), the application continues to highlight the selected effect control while in state 1710. . When the application is in state 1710 and the application receives the effect tool 175 effect control selection, the application transitions to state 1720. If the application is in state 1710 and the application changes from landscape viewing mode to portrait viewing mode, the application transitions to state 1715. For example, when the orientation of the display screen of the mobile computing device that is running the application changes, the application of some embodiments changes from landscape view mode to portrait view mode and then transitions to state 1715. As another example, when the display area for displaying the GUI of the application is adjusted (for example, when the size of the display area is adjusted, the width of the display area is decreased, the height of the display area is increased, etc.) ), The application of some embodiments changes from landscape view mode to portrait view mode, and then transitions to state 1715.

  In state 1720, the application is in landscape viewing mode and provides a GUI for displaying the effect controls of effect tool 175 in a fan-out layout. For example, when the application of some embodiments is in state 1710, it provides the GUI illustrated in the fourth stage 220 of FIG.

  As the application changes from state 1710 to state 1720, the application displays a fan-out closing animation of the effect control of effect tool 175. In some embodiments, the application displays a fan-out closing animation similar to the animation described above with reference to FIG. When the application transitions to state 1720, the application highlights the selected effect control of effect tool 175.

  When the application is in state 1720 and the application receives a selection of a UI item (eg, UI item 190), the application transitions to state 1710 to fan out the effect controls of effect tool 175. If the application is in state 1720 and the application changes from landscape view mode to portrait view mode, the application transitions to state 1725. For example, if the orientation of the display screen of the mobile computing device that is running the application changes, the application of some embodiments changes from landscape view mode to portrait view mode and then transitions to state 1725. As another example, when the display area for displaying the GUI of the application is adjusted (for example, when the size of the display area is adjusted, the width of the display area is decreased, the height of the display area is increased, etc.) ), The application of some embodiments changes from landscape view mode to portrait view mode, and then transitions to state 1725.

  If the application is in state 1720 and the application receives input (eg, touch input) via the selected effect control of effect control 175, the application transitions to state 1730. Referring to FIG. 12 as an example, when the application is in state 1720, the application receives a selection of selectable UI items for the thumbnail slider control 1280 and is editing the range of effects associated with the thumbnail slider control 1280. Applicable to images. As another example, referring to FIG. 13, when an application is in state 1720, the application is associated with the thumbnail slider control 1380 by receiving a sliding gesture via the selectable sliding area 1386 of the thumbnail slider control 1380. The range of the current effect can be applied to the image being edited.

  In state 1715, the application is in portrait viewing mode and provides a GUI for displaying the effect controls of effect tool 175 in a fan-out layout. For example, when an application in some embodiments is in state 1715, it provides the GUI illustrated in the fourth stage 520 of FIG.

  When the application changes to state 1715 (eg, from state 1710 or state 1725), the application displays an effect control fan-out opening animation of effect tool 175. In some embodiments, the application displays a fanning open animation similar to the animation described above with reference to FIG.

  If the effect control of effect tool 175 was selected when the application transitioned to state 1715 (eg, the application transitioned from state 1725), the application continues to highlight the selected effect control while in state 1715. To do. When the application is in state 1715 and the application receives an effect control selection of effect tool 175, the application transitions to state 1725. If the application is in state 1715 and the application changes the viewing mode from portrait viewing mode to landscape viewing mode, the application transitions to state 1710. For example, if the orientation of the display screen of the mobile computing device that is running the application changes, the application of some embodiments changes from portrait view mode to landscape view mode and then transitions to state 1710. As another example, when the display area for displaying the GUI of the application is adjusted (for example, when the size of the display area is adjusted, the width of the display area is increased, the height of the display area is decreased, etc.) ), The application of some embodiments changes from portrait viewing mode to landscape viewing mode, and then transitions to state 1710.

  In state 1725, the application is in portrait viewing mode and provides a GUI for displaying the effect controls of effect tool 175 in a fan-out layout. For example, when an application of some embodiments is in state 1725, it provides the GUI illustrated in the fourth stage 620 of FIG.

  When the application changes from state 1715 to state 1725, the application displays a fan-out closing animation of the effect control of effect tool 175. In some embodiments, the application displays a fan-out closed animation similar to the animation described above with reference to FIG. When the application transitions to state 1725, the application highlights the selected effect control of effect tool 175.

  When the application is in state 1725 and the application receives a selection of a UI item (e.g., UI item 190), the application transitions to state 1715 to fan out the effect controls of effect tool 175. If the application is in state 1725 and the application changes from portrait viewing mode to landscape viewing mode, the application transitions to state 1720. For example, if the orientation of the display screen of the mobile computing device that is running the application changes, the application of some embodiments changes from portrait viewing mode to landscape viewing mode and then transitions to state 1720. As another example, when the display area for displaying the GUI of the application is adjusted (for example, when the size of the display area is adjusted, the width of the display area is increased, the height of the display area is decreased, etc.) ), The application of some embodiments changes from portrait viewing mode to landscape viewing mode, and then transitions to state 1720.

  If the application is in state 1725 and the application receives input (eg, touch input) via the selected effects control of effect tool 175, the application transitions to state 1730. Referring to FIG. 12 as an example, when the application is in state 1725, the application receives a selection of selectable UI items for the thumbnail slider control 1280 and is editing the range of effects associated with the thumbnail slider control 1280. Applicable to images. As another example, referring to FIG. 13, when an application is in state 1720, the application is associated with the thumbnail slider control 1380 by receiving a sliding gesture via the selectable sliding area 1386 of the thumbnail slider control 1380. The range of the current effect can be applied to the image being edited.

  In state 1730, the application applies the effect to the image being edited based on the input received via the selected effect control of effect tool 175. For example, referring to FIG. 12, when the application receives a selection of a UI item via the thumbnail slider control 1280 in state 1720 or state 1725, the application displays the effects associated with the thumbnail slider control 1280 in state 1730. The effect range corresponding to the selected UI item is applied to the image being edited. Referring to FIG. 13 as another example, if the application is in state 1720 or state 1725 and the application receives a selection of locations along the selectable sliding area 1386 of the thumbnail slider control 1380, the application is in state 1730. The effect associated with the thumbnail slider control 1380 is applied to the image being edited up to the range corresponding to the location selected along the sliding area 1386. After the effect is applied based on the input received via the selected effect control of the effects tool 175, the application transitions back to the state just prior to the application transitioning to state 1730. In other words, when the application transitions from state 1720 to state 1730, the application transitions back to state 1720, and when the application transitions from state 1725 to state 1730, the application transitions back to state 1725.

  The state diagram illustrated in FIG. 17 illustrates several separate states of the image editing application of some embodiments. It will be appreciated by those skilled in the art that in some embodiments, the various actions represented by the states and transitions in FIG. 17 are only a subset of the actions that may be performed within the application. In addition, other functions not shown may be performed when in a particular state. For example, in some embodiments, if the image editing application is in a fanned closed state (eg, state 1720 or state 1725), and the application has not yet applied any effect to the image, the effect on the image being edited When the input for applying the is received, the application displays an indicator on the effect tool UI item 140 indicating that the effect has been applied to the image being edited.

B. Brush Tool Examples and embodiments of UI tools for applying effects to images are illustrated in subsection A above. Examples and embodiments of UI tools for applying brush effects to images are illustrated in subsection B below.

  FIG. 18 conceptually illustrates GUI 100 including the brush tool 1875 of some embodiments, and activation of the brush tool 1875. Specifically, FIG. 18 illustrates the GUI 100 in four separate stages 1805-1820 of the brush tool activation operation.

  The first stage 1805 of the GUI 100 illustrates the activation of the brush tool 1875. As shown, the user has selected the brush tool UI item 138 (eg, by touching UI item 138) and activated the brush tool 1875.

  The second stage 1810 illustrates the GUI 100 after the brush tool 1875 has been activated. As shown in the figure, the GUI 100 displays the start of the fan-shaped creation opening animation of the brush control of the brush tool 1875, and the UI item 138 is highlighted. As shown, the brush tool 1875 includes a series of brush controls 1880-1888. Each of the brush controls 1880-1888 corresponds to the purpose of applying a series of brush effects to the image being edited (image 142 in this example).

  When the image editing application receives a selection of the brush tool UI item 138, the application highlights the UI item 138 and begins displaying a fanning open animation of a series of brush controls 1880-1888. In this example, the brush controls 1880 to 1888 start the fan-shaped creation opening animation from the same vertical position and location at the bottom of the image display area 145, and the image display area from the bottom of the image display area 145 while fan-shaped in the open state. Slide towards the center of 145. As shown, the brush controls 1880-1888 are fanned out slightly from the vertical position and location.

  The image editing application displays a fanning open animation of the brush controls 1880-1888 by displaying that the different brush controls rotate around the fixed location by different amounts. As shown, the brush controls 1880 and 1882 rotate counterclockwise around the fixed location toward the left, and the brush control 1880 fan-outs further outward than the brush control 1882. Brush controls 1886 and 1888 rotate to the right around the fixed location in a clockwise fashion, and brush control 1888 fan out more outwardly than brush control 1886. The brush control 1884 does not rotate at all.

  In some embodiments, the image editing application displays brush controls 1880-by displaying that separate brush controls rotate from the starting position and location around the fixed location at different speeds for a defined time interval. 1888 fan-shaped opening / closing animation is displayed. Brush controls 1880 and 1888 rotate about the fixed location at the same speed, and brush controls 1882 and 1886 rotate about the fixed location at the same speed. Brush controls 1880 and 1888 rotate faster than brush controls 1882 and 1886.

  The image editing application of some embodiments displays the fanning opening animation of the brush controls 1880-1888 by displaying that the brush controls rotate from the starting position and location around the fixed location at the same speed. To do. In order to display the fanning open animation while moving the brush controls 1880-1888 at the same speed, the image editing application will start moving different brush controls at different times (eg, after a defined amount of time has passed). Start moving specific brush controls). Based on this approach, the application begins moving the brush controls 1880 and 1888, and at a later time, begins moving the brush controls 1882 and 1886.

  The third stage 1815 illustrates the GUI 100 in which the fanning opening animation of the brush controls 1880-1888 of the brush tool 1875 is nearing the end. As shown, the brush controls 1880-1888 are fan-shaped in a state of being opened from the center further than the position of the brush controls 1880-1888 shown in the second stage 1810. In addition, the brush controls 1880 to 1888 slid further upward from the bottom of the image display area 145 as compared to the positions of the brush controls 1880 to 1888 shown in the second stage 1810. That is, between the second stage 1810 and the third stage 1815, the image editing application slides the brush controls 1880 to 1888 further upward from the bottom of the image display area 145 toward the center of the image display area 145. Then, the brush controls 1880 to 1888 are fanned out in a further open state.

  The fourth stage 1820 shows the GUI 100 after the fanning and opening animation of the brush controls 1880-1888 has been completed. As shown in the figure, the brush controls 1880 to 1888 are fan-shaped so as to be further opened from the center than the positions of the brush controls 1880 to 1888 shown in the third stage 1815. Further, the brush controls 1880 to 1888 slid further upward from the bottom of the image display area 145 as compared with the positions of the brush controls 1880 to 1888 shown in the third stage 1815. In other words, between the third stage 1815 and the fourth stage 1820, the image editing application slides the brush controls 1880 to 1888 further upward from the bottom of the image display area 145 toward the center of the image display area 145. Then, the brush controls 1880 to 1888 are fanned out in a further open state.

  FIG. 18 illustrates an example of a fanning opening animation of the brush control of the brush tool when the brush tool is activated. In some embodiments, the image editing application does not display a fanning open animation of the brush control of the brush tool when the brush tool is activated. Instead, the application of some such embodiments displays the final state (eg, most recent state) of the brush tool. For example, when the brush tool is activated and the brush control of the brush tool is selected in the final state of the brush tool, the image editing application refers to the selected brush control with reference to FIG. 19 below. Can be displayed in a manner similar to the fourth stage 1920 described.

  FIG. 19 conceptually illustrates selection of the brush control of the brush tool 1875 illustrated in FIG. In particular, FIG. 19 illustrates the GUI 100 in four separate stages 1905-1920 of a brush control selection operation.

  The first stage 1905 of the GUI 100 shows the selection of the brush control of the brush tool 175. As shown, the user has selected the brush control 1886 (eg, by touching the brush control 1886). When the image editing application receives the selection of the brush control 1886, the application highlights the selected brush control (in this example, the brush control 1886) and displays a fanning closed animation of a series of brush controls 1880-1888. To start.

  The second stage 1910 illustrates the GUI 100 after the brush control 1886 has been selected and a series of brush control 1880-1888 fanning closed animations have begun. The image editing application highlights the brush control 1886 by bolding the border of the brush control 1886. In this example, the position and location of the series of brush controls 1880-1888 shown in the fourth stage 1820 of FIG. 18 is the starting position and location of the series of brush controls 1880-1888 for the fan-out closed animation.

  The image editing application displays a fanning closed animation of the brush controls 1880-1888 by displaying that the different brush controls rotate around the fixed location by different amounts. As shown, the brush controls 1880 and 1882 rotate clockwise around the fixed location to the right, and the brush control 1880 fan-shaped further inwardly than the brush control 1882. Brush controls 1886 and 1888 rotate counterclockwise around the fixed location toward the left, and brush control 1888 fan out more inwardly than brush control 1886. The brush control 1884 does not rotate at all.

  In some embodiments, the image editing application displays brush controls 1880-by displaying that separate brush controls rotate from the starting position and location around the fixed location at different speeds for a defined time interval. 1888 fan-shaped opening / closing animation is displayed. Brush controls 1880 and 1888 rotate about the fixed location at the same speed, and brush controls 1882 and 1886 rotate about the fixed location at the same speed. Brush controls 1880 and 1888 rotate faster than brush controls 1882 and 1886.

  The image editing application of some embodiments displays a fan-out closed animation of the brush controls 1880-1888 by displaying that the brush controls rotate from the starting position and location around the fixed location at the same speed. To do. In order to display the fanning open animation while moving the brush controls 1880-1888 at the same speed, the image editing application will start moving different brush controls at different times (eg, after a defined amount of time has passed). Start moving specific brush controls). Based on this approach, the application begins moving the brush controls 1880 and 1888, and at a later time, begins moving the brush controls 1882 and 1886.

  As shown in the second stage 1910, the brush controls 1880-1888 are fan-shaped in a state of being closed toward the center more than the position of the brush controls 1880-1888 illustrated in the first stage 1905. In addition, the brush controls 1880 to 1888 slid downward from the center of the image display area 145 as compared with the positions of the brush controls 1880 to 1888 shown in the first stage 1905. That is, between the first stage 1905 and the second stage 1910, the image editing application slides the brush controls 1880 to 1888 further downward from the center of the image display area 145 toward the bottom of the image display area 145. Then, the fan control 1880-1888 is fanned out to a further closed state.

  The third stage 1915 illustrates the GUI 100 where the fanning closing animation of the brush controls 1880-1888 of the brush tool 1875 is nearing the end. As illustrated, the brush controls 1880-1888 are fan-shaped in a state of being closed toward the center further than the position of the brush controls 1880-1888 illustrated in the second stage 1910. In addition, the brush controls 1880-1888 slide further downward from the center of the image display area 145 toward the bottom of the image display area 145, compared to the position of the brush controls 1880-1888 shown in the second stage 1910. did. That is, between the second stage 1910 and the third stage 1915, the image editing application slides the brush controls 1880 to 1888 further downward from the center of the image display area 145 toward the bottom of the image display area 145. Then, the fan control 1880-1888 is fanned out to a further closed state.

  The fourth stage 1920 shows the GUI 100 after the fan-shaped closing animation of the brush controls 1880-1888 is completed. As shown, the application displays the top of the brush controls 1880-1888 in the toolbar 195. The image editing application displays the selected brush control 1886 higher than the unselected brush controls 1880-1884 and 1888 by a defined offset amount.

  FIG. 19 illustrates the selection of a specific brush control for the brush tool, but as will be appreciated by those skilled in the art, any brush control of the brush tool may be selected after the brush tool is activated. . For example, the brush control 1880, 1882, 1884, or 1888 may also have been selected by the user.

  The user may wish to change the brush control selection after selecting the brush control of the brush tool. FIG. 20 conceptually illustrates a change in selected brush control of the brush tool 1875 illustrated in FIG. Specifically, FIG. 20 illustrates the GUI 100 in four separate stages 2005-2020 of the brush control change operation.

  The first stage 2005 of the GUI 100 is similar to the fourth stage 1920 of the GUI 100 illustrated in FIG. In other words, the first stage 2005 has the GUI 100 after the brush control 1886 is selected, the brush control 1886 is highlighted by a bold display of the border, and the series of brush control 1880-1888 animations is completed. Is shown.

  The second stage 2010 of the GUI 100 illustrates the selection of another brush control. As shown, the user has selected the brush control 1882 (eg, by touching the brush control 1882). When the application receives the selection of the brush control 1882, the application de-highlights the previously selected brush control (in this example, brush control 1886) and then the newly selected brush control (in this example, Highlight brush control 1882). The highlight of the brush control 1882 is indicated by the bold display of the border of the brush control 1882.

  The GUI 100 in the third stage 2015 shows the selection of another brush control in the brush tool 1875. As shown, the user has selected the brush control 1888 (eg, by touching the brush control 1888). When the application receives the selection of the brush control 1888, the application de-highlights the previously selected brush control (in this example, brush control 1882) and then the newly selected brush control (in this example, Highlight brush control 1888). The highlight of the brush control 1888 is indicated by the bold border of the brush control 1888.

  The fourth stage 2020 of the GUI 100 illustrates the selection of another brush control. At this stage, the user has selected the brush control 1886 (eg, by touching the brush control 1886). When the application receives the selection of the brush control 1886, the application de-highlights the previously selected brush control (in this example, the brush control 1888) and then the selected brush control (in this example, the brush control). Highlight 1886). The highlight of the brush control 1886 is indicated by the bold border of the brush control 1886.

  FIG. 21 conceptually illustrates another technique for changing selected brush controls of the brush tool 1875 illustrated in FIG. Specifically, FIG. 21 illustrates the GUI 100 in four separate stages 2105-2120 of brush control change operations by fanning out the brush control to an open state to change the brush control selection. Show.

  The first stage 2105 of the GUI 100 is similar to the fourth stage 1920 of the GUI 100 illustrated in FIG. In other words, the first stage 2105 is the GUI 100 after the brush control 1886 is selected, the brush control 1886 is highlighted by the bold display of the border, and the fanning closing animation of the series of brush controls 1880-1888 is completed. Is shown. In addition, the first stage 2105 also illustrates invoking an operation that changes the selection of the brush control of the brush tool 1875. As shown, the user has selected the selected brush control 1886 to fan out a series of brush controls 1880-1888 open.

  The second stage 2110 illustrates the GUI 100 after the image editing application has finished a series of brush control 1880-1888 fanning open animations. When the application receives a selection of the selected brush control (brush control 1886 in this example), the application displays a fanning open animation of a series of brush controls 1880-1888. This animation is similar to the fanning open animation described above with reference to FIG. As shown, the brush control 1886 remains highlighted because the brush control 1886 is the brush control currently selected in the brush tool 1875.

  The GUI 100 in the third stage 2115 shows the selection of separate brush controls for the brush tool 1875. As shown, the user has selected the brush control 1880 (eg, by touching the brush control 1880). When the image editing application receives the selection of the brush control 1880, the application highlights the brush control 1880 and goes into the fanning closed animation of the series of brush controls 1880-1888 described above with reference to FIG. A similar series of brushed closing animations for a series of brush controls 1880-1888 are displayed.

  The fourth stage 2120 illustrates the GUI 100 with the selected brush control 1880 highlighted after the end of the fanning closed animation of the series of brush controls 1880-1888. As shown, the application displays the top of the brush controls 1880-1888 in the toolbar 195 and displays the selected brush control 1880 higher than the unselected brush controls 1882-1888 by a predefined offset amount. To do.

  20 and 21 illustrate some examples of changing the selected brush control of the brush tool. As will be appreciated by those skilled in the art, when changing the selected brush control of the brush tool, any brush control of the brush tool can also be selected. Moreover, the selected brush control of the brush tool can be changed any number of times.

  In the figures described above in this subsection B, the appearance of the brush controls is the same or similar. In some embodiments, the brush controls of the brush tool represent different types of brush controls, each having a different appearance. FIG. 22 conceptually shows an example of such a brush tool. In particular, FIG. 22 illustrates a GUI 100 that fan-forms in a state where the brush control of the effect tool 1875 is opened in the stage 2205 and fan-shapes in a state where the brush control of the effect tool 1875 is closed in the stage 2210. Moreover, any of the operations described above with reference to FIGS. 18-21 can be performed on the brush tool 1875 shown in FIG.

  The GUI 100 in the stage 2205 shows an effect tool 1875 that has been fan-shaped with a series of brush controls 2280-2287 open. Specifically, in this example, stage 2205 is the GUI 100 after the image editing application has displayed a fanning out opening animation of brush controls 2280-2287 similar to the animation described above with reference to FIG. Indicates.

  As shown, a series of brush controls 2280-2287 includes a repair brush control 2280 for removing smudges from the image being edited, a red eye brush control 2281 for removing red eyes from the image, and a portion of the image. A high saturation brush control 2282 for incrementing the saturation, a low saturation brush control 2283 for decrementing the saturation of a portion of the image, a lightening brush control 2284 for incrementing the brightness of a portion of the image, Dark color brush control 2285 for decrementing the brightness of part of the image, Sharpening brush control 2286 for sharpening part of the image, and softening for softening and / or blurring part of the image Includes brush control 2287. Details of the brush control are described in U.S. Patent Application Publication No. 13 / 629,374 entitled “User Interface Tools for Selective Effects to Image” filed on September 27, 2012. US Patent Application Publication No. 13 / 629,374 is hereby incorporated by reference.

  The GUI 100 at the stage 2210 shows the effect tool 1875 that has been fan-shaped with a series of brush controls 2280-2287 closed. Stage 2210 in this example shows GUI 100 after the image editing application has displayed a fanning closed animation of brush controls 2280-2287 similar to the animation described above with reference to FIG. As shown in stage 2210, the top of brush controls 2280-2287 are displayed in toolbar 195, and the selected brush control (in this example, red eye brush control 2281) is highlighted and selected. The brush control is displayed higher than the unselected brush control by a predefined offset amount.

  FIG. 22 shows examples of different appearances of the brush control, but as will be appreciated by those skilled in the art, the brush control may have any number of different appearances representing the brush control. For example, the brush control can be represented as a fluorescent marker pen, pencil, fountain pen, paint roller, paint scraper, and the like.

  In some embodiments, the image editing application provides the GUI described in FIGS. 18-22 above when the application is in landscape viewing mode. The GUI provided when the application is in the portrait viewing mode in the applications of some such embodiments is shown in the figure below.

  FIG. 23 conceptually illustrates GUI 2300 including brush tool 1875 of some embodiments, and activation of brush tool 1875. Specifically, FIG. 23 illustrates a GUI 2300 in four separate stages 2305-2320 of the brush tool activation operation. The GUI 2300 is similar to the GUI 100 described above with reference to FIG. 1, except that the thumbnail display area 125 is arranged below the image display area 145 and above the toolbar 195 in the GUI 2300. Also, the GUI 2300 does not include the toolbar 135, and therefore, UI items 132 to 140 are displayed in the toolbar 195 instead.

  The stages 2305-2320 of the GUI 2300 are similar to the stages 1805-1820 described above with reference to FIG. That is, the first stage 2305 indicates activation of the brush tool 1875, the second stage 2310 indicates the start of a fan-shaped opening and closing animation of the brush controls 1880-1888, and the third stage 2315 is a fan-shaped closing and closing animation. Shows the brush controls 1880-1888 approaching the end, and the fourth stage 2320 shows the brush controls 1880-1888 at the end of the fan-shaped set-up animation.

  FIG. 24 conceptually illustrates selection of brush controls for the brush tool 1875 illustrated in FIG. In particular, FIG. 24 illustrates the GUI 100 in four separate stages 2405-2420 of a brush control selection operation.

  The stages 2405-2415 of the GUI 2300 are similar to the stages 1905-1915 described above with reference to FIG. That is, the first stage 2405 indicates the selection of the brush control 1886, the second stage 2410 indicates the start of the fan-shaped closing animation of the brush controls 1880-1888, and the third stage 2415 is the fan-shaped closing animation. Shows the brush controls 1880-1888 approaching termination.

  The fourth stage 2420 shows the GUI 100 after the fan-shaped closing animation of the brush controls 1880-1888 is completed. As shown in the figure, the image editing application displays only the upper part of the selected brush control 1886 in the toolbar 195 at the end of the fanning closing animation of the brush controls 1880-1888. In some embodiments, the application uses a technique similar to that described above with reference to FIG. 21 to change the brush control selection of the brush tool. That is, the user selects a selected brush control displayed on the toolbar, and then the brush control is opened and then fan-shaped, and then the brush control that has been fan-shaped and opened is another brush control. Select.

  In some embodiments, the image editing application may provide a GUI according to the example operations described above with reference to FIGS. 18-22 when the application is in landscape viewing mode. An image editing application according to some embodiments provides the GUI described above with reference to FIGS. 23 and 24 for example operations when the application is in portrait viewing mode. However, in some cases, the image editing application provides additional GUIs depending on the operation example. For example, the display screen of a mobile computing device (for example, a smartphone) that is running an application may not have enough free space to display the operation examples shown in FIGS.

  FIG. 25 conceptually illustrates the GUI 500 of an image editing application including the brush tool 1875 of some embodiments and the activation of the brush tool 1875. Specifically, FIG. 25 illustrates a GUI 500 in four separate stages 2505-2520 of the brush tool activation operation.

  The first stage 2505 of the GUI 500 illustrates the activation of the brush tool 1875. At this stage, the user has selected a selectable brush tool UI item 138 (eg, by touching UI item 138) and activated the brush tool 1875.

  The second stage 2510 illustrates the GUI 500 after the brush tool 1875 has been activated. As shown, the GUI 500 displays the start of a fanning open animation for a series of brush controls 1880-1888, with the brush tool UI item 138 highlighted. When the image editing application receives the selection of the brush tool UI item 138, the application highlights the UI item 138 and displays an animation of the UI items 132-140 that slide to the left (eg, slide away from the toolbar 195). UI items 132-140 are removed from toolbar 195 and UI item 138 is displayed on the left side of toolbar 195.

  In this example, brush controls 1880-1888 start a fan-shaped opening animation at the bottom of toolbar 195 from a vertical position. As shown, the brush controls 1880-1888 are fanned out slightly from the vertical position and location. The image editing application uses any of the fan shaping techniques described above with reference to FIG. 18 to fan out brush controls 1880-1888. The application refers to a fixed location (eg, pivot point) around which the brush controls 1880-1888 rotate while the brush controls 1880-1888 are fanned open, relative to the brush controls 1880-1888. As you move. The application moves the fixed location toward the right center of the image display area 145. The application also rotates the brush tool 1875 counterclockwise while fanning the brush controls 1880-1888 to move the fixed location during the fanning open animation.

  The third stage 2515 illustrates the GUI 500 where the fanning opening animation of the brush controls 1880-1888 of the brush tool 1875 is nearing the end. As shown, the brush controls 1880-1888 are fan-shaped in a state of being opened from the center further than the position of the brush controls 1880-1888 illustrated in the second stage 2510. In addition, the fixed location around which the brush controls 1880-1888 rotate has moved further toward the center on the right side of the image display area 145 as compared to the position of the fixed location on the second stage 2510. Further, the brush tool 1875 further rotated counterclockwise. That is, between the second stage 2510 and the third stage 2515, the image editing application rotates the brush tool 195 counterclockwise and moves the fixed location toward the center on the right side of the image display area 145. Further, the brush controls 1880 to 1888 are fanned out in a further open state.

  The fourth stage 2520 shows the GUI 500 after the fan control opening animation of the brush controls 1880 to 1888 is completed. As shown, the brush controls 1880-1888 are fan-shaped in a state of being opened from the center further than the positions of the brush controls 1880-1888 illustrated in the third stage 2515. Further, the fixed location where the brush controls 1880 to 1888 rotate is moved further as compared with the position of the fixed location on the third stage 2515. In addition, the brush tool 1875 was further rotated counterclockwise. That is, between the third stage 2515 and the fourth stage 2520, the image editing application rotates the brush tool 195 counterclockwise and moves the fixed location toward the center on the right side of the image display area 145. Further, the brush controls 1880 to 1888 are fanned out in a further open state.

  FIG. 25 illustrates an example of a fanning opening animation of the brush control of the brush tool when the brush tool is activated. In some embodiments, even when the brush tool is activated, the image editing application does not display the fanning opening animation of the brush control of the brush tool. Instead, the application of some such embodiments displays the final state (eg, most recent state) of the brush tool. For example, when the brush tool is activated and the brush tool's brush control is selected in the final state of the brush tool, the image editing application will refer to the selected brush control as shown in FIG. May be displayed in a manner similar to the fourth stage 2620 described.

  FIG. 26 conceptually illustrates selection of the brush control of the brush tool 1875 illustrated in FIG. In particular, FIG. 26 illustrates a GUI 500 in four separate stages 2605-2620 of brush control selection operations.

  The first stage 2605 of the GUI 500 shows the selection of the brush control of the brush tool 1875. As shown, the user has selected the brush control 1886 (eg, by touching the brush control 1886). When the image editing application receives the selection of the brush control 1886, the application highlights the selected brush control (in this example, the brush control 1886) and displays a fanning closed animation display for the series of brush controls 1880-1888. Start.

  The second stage 2610 illustrates the GUI 500 after the brush control 1886 has been selected and the fanning closed animation of a series of brush controls 1880-1888 has begun. The image editing application highlights the brush control 1886 by bolding the border of the brush control 1886. In this example, the position and location of the series of brush controls 1880-1888 shown in the fourth stage 2520 of FIG. 25 is the starting position and location of the series of brush controls 1880-1888 for the fan-out closed animation. As shown, the brush controls 1880-1888 are fan-shaped in a state of being slightly closed from the starting position and location of the brush control 1880-1888 for fan-shaped closing animation. The image editing application uses any of the fan shaping techniques described above with reference to FIG. 19 to fan out the brush controls 1880-1888.

  The third stage 2615 illustrates the GUI 500 in which the fanning closing animation of the brush controls 1880-1888 of the brush tool 1875 is nearing the end. As illustrated, the brush controls 1880-1888 are fan-shaped in a state of being closed toward the center further than the position of the brush controls 1880-1888 illustrated in the second stage 2610. In addition, the fixed location around which the brush controls 1880-1888 rotate is compared to the position of the brush controls 1880-1888 shown in the second stage 2610, from the center on the right side of the image display area 145 to the toolbar 195. Moved further toward the center. Further, the brush tool 1875 further rotated clockwise. That is, between the second stage 2610 and the third stage 2615, the image editing application rotates the brush tool 175 clockwise and moves the fixed location toward the center of the tool bar 195 while moving the brush. The controls 1880 to 1888 are fan-shaped in a further closed state.

  The fourth stage 2620 shows the GUI 500 after the fanning closed animation of brush controls 1880-1888 has been completed. As shown, the application displays only the upper portion of the selected brush control 1886 in the toolbar 195 at the end of the fanning closed animation of the brush controls 1880-1888. Between the third stage 2615 and the fourth stage 2620, the image editing application rotates the brush tool 175 clockwise and moves the fixed location toward the center of the toolbar 195, while controlling the brush control 1880. -1888 is fan-shaped in a closed state.

  FIG. 26 illustrates the selection of a specific brush control for the brush tool, but as will be appreciated by those skilled in the art, any brush control of the brush tool may be selected after the brush tool is activated. . For example, the brush control 1880, 1882, 1884, or 1888 may also have been selected by the user.

  FIG. 27 conceptually illustrates another technique for changing the selected brush control with the brush tool 1875 illustrated in FIG. Specifically, FIG. 27 illustrates a GUI 500 in four separate stages 2705-2720 of brush control change operations by fanning out the brush control to an open state to change brush control selection. Show.

  The first stage 2705 of the GUI 500 is similar to the fourth stage 2620 of the GUI 500 shown in FIG. That is, the first stage 2705 is selected when the brush control 1886 is selected, the brush control 1886 is highlighted by a bold display of the border, and the fanning closed animation of the series of brush controls 1880-1888 is completed and selected. The GUI 500 is shown after the brush control 1886 is displayed on the toolbar 195. In addition, the first stage 2705 also illustrates a call to an operation that changes the selection of the brush control of the brush tool 1875. As shown, the user has selected the selected brush control 1886 to fan out a series of brush controls 1880-1880 open.

  The second stage 2710 illustrates the GUI 500 after the image editing application has finished the series of brush controls 1880-1888 fanning open animation. When the application receives a selection of the selected brush control (brush control 1886 in this example), the application displays a fanning open animation of a series of brush controls 1880-1888. This animation is similar to the fan-shaped opening and opening animation described above with reference to FIG. As shown, the brush control 1886 remains highlighted because the brush control 1886 is the brush control selected in the brush tool 1875.

  The GUI 500 in the third stage 2715 shows the selection of another brush control for the brush tool 1875. As shown, the user has selected the brush control 1880 (eg, by touching the brush control 1880). When the image editing application receives the selection of the brush control 1880, the application de-highlights the previously selected brush control 1886 and highlights the newly selected brush control 1880, as shown in FIG. A series of brush control closing animations 1880-1888 similar to the series of brush control closing operations 1880-1888 described by reference is displayed.

  The GUI 500 shown in the fourth stage 2720 is after a series of brush control 1880-1888 fan-shaped closing animations. As shown, the application displays only the highlighted top of the selected brush controls 1886 in the toolbar 195 at the end of the fanning closed animation of the brush controls 1880-1888.

  FIGS. 25-27 show example layouts and animations of the brush controls 1880-1888 when the brush controls are fanned out in the open and closed states. In some embodiments, the layout and animation of the brush controls 1880-1888 illustrated in FIGS. 25-27 are provided when the image editing application is in right-hand mode, in which the user moves the right hand. It is easy to use and interact with the application GUI 500 smoothly. In some such embodiments, when the image editing application is in left-hand mode, the application may be different in the brush controls 1880-1888 when fanned out to the open and closed brush controls. Provide layout and animation. For example, in the left-hand mode of the application, the image editing application of some embodiments allows the brush control to move from the left side of the image display area 145 to the center of the image display area 145 while the brush control is in the image display area 145. A fan-shaped opening and opening animation is displayed in a manner similar to that shown in FIG. 25 except that the fan-shaped setting is started near the lower left and opened to the upper right of the image display area 145. In the left-hand mode of the application of such an embodiment, the brush control moves inwardly toward the lower left of the image display area 145 while the brush control moves from near the center of the image display area 145 to the left side of the image display area 145. Except for fanning out, the fanning closing animation is displayed in a manner similar to that shown in FIG. In some embodiments, when the image editing application is in left-hand mode, an array of brush controls 1880-1888 illustrated in FIGS. 25-27 is provided, and when the application is in right-hand mode, instead, An array of brush controls 1880-1888 as described above for the left hand mode is provided.

  FIGS. 25-27 above illustrate the GUI provided when the application of some embodiments is in portrait viewing mode. As will be appreciated by those skilled in the art, the applications of the various embodiments provide different GUIs and animations in different viewing modes. For example, in some embodiments, when the application is in landscape viewing mode, the application fans out the UI item layout in the toolbar as shown in FIGS. 25-27 (eg, with the brush controls closed). Provides a GUI similar to the GUI illustrated in FIGS. 18-21 except that only the selected brush control is displayed. In some embodiments, the application displays the animation in a manner similar to that shown in FIGS. As will be appreciated by those skilled in the art, any of the GUIs in FIGS. 18-27 above can use any animation shown in FIGS. 18-27 above.

  FIGS. 18-27 above show several techniques for fanning the UI control into the open and closed states. For example, FIGS. 21 and 27 select another UI control and select one UI control by selecting the currently selected UI control and fanning out that UI control. The fan shape is shown in the closed state of the UI control. However, in some embodiments, other techniques may be utilized when fanning out the UI controls to the open and closed states. For example, in the UI tool of some embodiments, the user fans out a UI control by performing a gesture (eg, a swipe up gesture) on the selected UI control. Similarly, in some embodiments, if a UI control is fanned out and the user does not want to select another UI control (ie, the user does not select the currently selected UI control). If the user wants to keep it selected, the user can fan out the UI control to a closed state by performing a gesture (eg, swipe down gesture) on the image display area using the UI tool. it can. Other techniques are also conceivable.

  As described above, in some embodiments, the brush controls of the brush tool represent different types of brush controls and therefore have different appearances. FIG. 28 conceptually shows brush controls with different appearances. Specifically, FIG. 28 illustrates a GUI 500 that fan-shapes the brush control of the effect tool 1875 in the open state at the stage 2805 and fan-shapes the brush control of the effect tool 1875 in the stage 2810. Yes. Moreover, any of the operations described above with reference to FIGS. 25-27 can be performed on the brush tool 1875 shown in FIG.

  The stage 2805 of the GUI 500 shows the effects tool 1875 that has been fan-shaped with a series of brush controls 2280-2287 open. Specifically, in this example, stage 2805 is a GUI 500 after the image editing application has displayed a fan-shaped opening and opening animation of brush controls 2280-2287 similar to the animation described above with reference to FIG. Indicates.

  The GUI 100 at the stage 2810 shows the effect tool 1875 that has been fan-shaped in a state where a series of brush controls 2280-2287 are closed. In this example, stage 2810 shows GUI 500 after the image editing application has displayed a fanning closed animation of brush controls 2280-2287 similar to the animation described above with reference to FIG. As shown at stage 2810, only the top of the selected brush control (in this example, the red eye brush control 2881) is displayed in the toolbar 195, highlighting the selected brush control.

  FIG. 29 conceptually illustrates the application of brush effects to an image using the brush controls of the brush tool 1875 of some embodiments. Specifically, FIG. 29 illustrates the GUI 100 in four separate stages 2905-2920 of brush effect application operations.

  The first stage 2905 of the GUI 100 is similar to the fourth stage 1920 shown in FIG. As shown, the user has activated brush tool 1875 (eg, by selecting UI item 138). This is indicated by the brush item 138 being highlighted. In addition, the user has selected the brush control 1886 of the brush tool 1875 (eg, touching the brush control 1886 when the series of brush controls of the brush tool 1875 are fanned outward).

  The second stage 2910 of the GUI 100 illustrates a brush effect applied to the image being edited. As shown, the user has selected a region of the image 142 (eg, by touching the region of the image 142 and performing a rubbing gesture) and applying a brush effect to the region of the image 142. When the image editing application receives a selection of an area of image 142, the application applies the brush effect associated with the brush control 1886 to the area of image 142. In addition, upon receiving a selection of a region of the image 142, the application uses the brush control 1886 to display an indicator on the brush control 1886 that indicates that the brush effect has been applied to the image 142, and the brush tool 1875. Is used to display an indicator on the brush tool UI item 138 indicating that the edited content has been applied to the image 142.

  The third stage 2915 illustrates the GUI 100 after the user has finished applying the brush effect to the image 142. As shown in the figure, the region to which the brush effect is applied in the image 142 is indicated by diagonal lines.

  The third stage 2915 also shows that another brush effect has been applied to the image being edited. As shown, the user selects a second region of the image 142 (eg, by touching a region of the image 142 and performing a rubbing gesture) and applies a brush effect associated with the brush control 1886 to the image 142. This is applied to the second region. When the image editing application receives a selection of the second region of image 142, the application applies the brush effect associated with brush control 1886 to the second region of image 142.

  The fourth stage 2920 illustrates the GUI 100 after the user has finished applying the brush effect to the image 142. As shown in the figure, the second region to which the brush effect is applied in the image 142 is indicated by hatching.

  FIG. 30 conceptually illustrates applying brush effects to an image using the brush controls of the brush tool 1875 of some embodiments and disabling the brush effect applied in FIG. In particular, FIG. 30 illustrates the GUI 100 in four separate stages 3005-3020 of a brush effect application operation and a brush effect invalidation operation.

  The first stage 3005 of the GUI 100 is similar to the fourth stage 2920 illustrated in FIG. As shown, the user has applied the brush effect associated with the brush control 1886 to two regions of the image 142. These application target areas are indicated by hatching in the image 142. The first stage 3005 also shows the selection of another brush control by the user. As illustrated in this stage, the user has selected the brush control 1882 (eg, by touching the brush control 1882).

  The second stage 3010 illustrates the GUI 100 in which the brush effect is applied to the image being edited. As shown, the user selects a third region of the image 142 (eg, by touching the region of the image 142 and performing a rubbing gesture) and applies a brush effect to the third region of the image 142. ing. When the image editing application receives a selection of a region of image 142, the application applies the brush effect associated with brush control 1882 to the third region of image 142. In addition, upon receiving a selection of a region of the image 142, the application displays an indicator on the brush control 1882 that indicates that the brush effect has been applied to the image 142 using the brush control 1882.

  The third stage 3015 illustrates the GUI 100 after the user has applied the brush effect to the image 142 shown in the second stage 3010. As shown, the area of the image 142 to which the brush effect has been applied using the brush control 1882 is indicated by another diagonal line.

  Third stage 3015 also shows the invalidation of the brush effect that the user applied to image 142 using brush control 1886. At this stage, the user has selected brush control 1886 (eg, by touching brush control 1886 twice in quick succession) and has used brush control 1886 to disable the brush effect applied to image 142.

  By using the brush effect invalidation function of the brush tool 1875, the user can invalidate and validate the brush effect applied to the image being edited by using a specific brush control. In this way, the user can view brush effects applied to the image being edited using separate brush controls individually. For example, the user can use a first brush control to apply a first series of brush effects to an area of the image being edited, or the second brush control can be used to apply a second series of brushes. Effects can also be applied to the same image area. By using the brush effect invalidation function of the brush tool 1875, the user can view only the first series of brush effects applied to the image, or only the second series of brush effects applied to the image. You can browse or browse both the first and second series of brush effects applied to the image.

  The fourth stage 3020 illustrates the GUI 100 after the user disables the brush effect applied to the image 142 using the brush control 1886. As shown, the diagonal lines drawn on the car representing the area where the brush effect was applied using the brush control 1886 in the image 142 are not displayed in the image 142, so that these brush effects It is shown that it has been disabled.

  When the image editing application receives a selection of a brush control 1886 that overrides the brush effect applied to the image 142 using the brush control 1886, the application removes the brush effect from the area of the image 142 where the brush effect was applied. . In addition, upon receiving a brush control 1886 selection that overrides the brush effect of the brush control 1886, the application displays another indicator on the brush control 1886. As shown, the thin line displayed above the brush control 1886 is used to indicate that the brush effect once applied to the image 142 with the brush control 1886 has been released.

  As described above, FIGS. 29 and 30 illustrate an example of applying a brush effect to an image using a rubbing gesture (eg, to apply the brush effect incrementally to a region of the image). In some embodiments, a brush control that applies a brush effect using a rubbing gesture is referred to as a progressive brush control, an incremental brush control, and / or an additive color brush control. Details of brush controls that apply brush effects using rubbing gestures are described in US Patent Application Publication No. 13 / 629,374. In some embodiments, the brush tool includes other types of brush controls that apply the brush effect of the brush control without using a rubbing gesture. For example, in the repair brush control described above, the user removes the stain from the image by selecting the image region including the stain (for example, by touching the image region). In some embodiments, the red eye brush control described above is used in a manner similar to removing red eye from an image. In some embodiments, these types of brush controls are referred to as discrete brush controls.

  FIG. 31 conceptually illustrates a state diagram 3100 of an application of some embodiments that provides a brush tool 1875. Specifically, FIG. 31 illustrates several states of an application in some embodiments and transitions between these states.

  In state 3105, the application is in the state of image editing, viewing, or organization. In some embodiments, the application is in state 3105 first when the application is first started. When the application is in state 3105, the application provides tools for editing, viewing, or organizing images. For example, the application provides a sharing tool for image sharing, provides various editing tools (for example, a cropping and rotation tool, an exposure tool, a color tool, etc.), and a tool corresponding to the purpose such as image tagging. And so on.

  If the application activates the brush tool 1875 while the application is in landscape viewing mode, the application transitions from state 3105 to state 3110. If the application activates the brush tool 1875 while the application is in portrait viewing mode, the application transitions from state 3105 to state 3115. In some cases, when the application activates the brush tool 1875, the application returns to the last used state. In some such cases, the application transitions from state 3105 to state 3120 if the application is in landscape viewing mode and transitions from state 3105 to state 3125 if the application is in portrait viewing mode (FIG. 31). (Not shown). As shown in FIG. 31, if the application is in any of the states 3101-3125 and the application disables the brush tool 1875 (eg, activates another tool), the application returns to state 3105.

  In state 3110, the application is in landscape viewing mode, which provides a GUI for displaying the brush controls of brush tool 1875 in a fan-shaped open layout in landscape viewing mode. For example, when the application of some embodiments is in state 3110, it provides the GUI illustrated in the fourth stage 1820 of FIG.

  When the application changes to state 3110 (eg, from state 3115 or state 3120), the application displays a fan control opening animation of brush control 1875. In some embodiments, the application displays a fanning open animation similar to the animation described above with reference to FIG.

  If the brush control of brush tool 1875 was selected when the application transitioned to state 3110 (eg, the application transitioned from state 3120), the application continues to highlight the selected brush control while in state 3110. . If the application is in state 3110 and the application receives a brush control 1875 brush control selection, the application transitions to state 3120. If the application is in state 3110 and the application changes from landscape viewing mode to portrait viewing mode, the application transitions to state 3115. For example, when the orientation of the display screen of the mobile computing device that is running the application changes, the application of some embodiments changes from landscape view mode to portrait view mode and then transitions to state 3115. As another example, when the display area for displaying the GUI of the application is adjusted (for example, when the size of the display area is adjusted, the width of the display area is decreased, the height of the display area is increased, etc.) ), The application of some embodiments changes from landscape viewing mode to portrait viewing mode, and then transitions to state 3115.

  In state 3120, the application is in landscape viewing mode and provides a GUI for displaying the brush controls of brush tool 1875 in a fan-shaped closed layout in landscape viewing mode. For example, when the application of some embodiments is in state 3110, it provides the GUI illustrated in the fourth stage 1920 of FIG.

  When the application changes from state 3110 to state 3120, the application displays a fan-out closing animation of the brush control of brush tool 1875. In some embodiments, the application displays a fan-out closed animation similar to the animation described above with reference to FIG. When the application transitions to state 3120, the application highlights the selected brush control of the brush tool 1875.

  When the application is in state 3120 and the application receives the selected brush control selection, the brush control 1875 changes the brush control selection, and the application transitions to state 3110. The application is in state 3120, and when the application changes from landscape viewing mode to portrait viewing mode, the application transitions to state 3125. For example, if the orientation of the display screen of the mobile computing device that is running the application changes, the application of some embodiments changes from landscape view mode to portrait view mode and then transitions to state 3125. As another example, when the display area for displaying the GUI of the application is adjusted (for example, when the size of the display area is adjusted, the width of the display area is decreased, the height of the display area is increased, etc.) ), The application of some embodiments changes from landscape viewing mode to portrait viewing mode, and then transitions to state 3125.

  In some embodiments, the application receives another brush control selection while in state 3120. For example, some embodiment applications that provide the GUI illustrated in the fourth stage 1920 of FIG. 19 may receive another brush selection and change the brush control selection of the brush tool 1875. When the application is in state 3120 and receives another brush selection, it unhighlights the previously selected brush control and highlights the newly selected brush control as shown in FIG. Write.

  When the application is in state 3120 and the application receives a selection of an area of the image that is to be edited with the selected brush control of the brush tool 1875, the application transitions to state 3130. Referring to FIG. 29 as an example, when the application is in state 3120, when the application receives a selection of a region of image 142, it applies the brush effect associated with brush control 1886 to image 142.

  In state 3115, the application is in portrait viewing mode, which provides a GUI for displaying brush controls of brush tool 1875 in fan-shaped open layout in portrait viewing mode. For example, when the application of some embodiments is in state 3115, it provides the GUI illustrated in the fourth stage 2520 of FIG. 25 or the fourth stage 2320 of FIG.

  When the application changes to state 3115 (eg, from state 3110 or state 3125), the application displays a fan-out opening animation of the brush control of brush tool 1875. In some embodiments, the application displays a fanning open animation similar to the animation described above with reference to FIG. 25 or 23.

  If the brush control of the brush tool 1875 was selected when the application transitioned to state 3115 (eg, the application transitioned from state 3125), the application continues to highlight the selected brush control while in state 3115. . If the application is in state 3115 and the application receives a brush control 1875 brush control selection, the application transitions to state 3125. If the application is in state 3115 and the application changes the viewing mode from portrait viewing mode to landscape viewing mode, the application transitions to state 3110. For example, if the orientation of the display screen of the mobile computing device that is running the application changes, the application of some embodiments changes from portrait viewing mode to landscape viewing mode and then transitions to state 3110. As another example, when the display area for displaying the GUI of the application is adjusted (for example, when the size of the display area is adjusted, the width of the display area is increased, the height of the display area is decreased, etc.) ), The application of some embodiments changes from portrait viewing mode to landscape viewing mode, and then transitions to state 3110.

  In state 3155, the application is in the portrait viewing mode, and provides a GUI for displaying the brush control of the brush tool 1875 in a sector-shaped open layout in the portrait viewing mode. For example, when the application of some embodiments is in state 3155, it provides the GUI illustrated in the fourth stage 2620 of FIG. 26 or the fourth stage 2420 of FIG.

  When the application changes from state 3115 to state 3125, the application displays a fan control close animation of the brush control of brush tool 1875. In some embodiments, the application displays a sector closing animation that is similar to the animation described above with reference to FIG. When the application transitions to state 3125, the application highlights the selected brush control of the brush tool 1875.

  The application is in state 3125, and the application changes the brush control selection of the brush tool 1875 by receiving the selected brush control selection, and the application transitions to state 3115. If the application is in state 3125 and the application changes from portrait viewing mode to landscape viewing mode, the application transitions to state 3120. For example, if the orientation of the display screen of the mobile computing device that is running the application changes, the application of some embodiments changes from portrait view mode to landscape view mode, and then transitions to state 3120. As another example, when the display area for displaying the GUI of the application is adjusted (for example, when the size of the display area is adjusted, the width of the display area is increased, the height of the display area is decreased, etc.) ), The application of some embodiments changes from portrait viewing mode to landscape viewing mode, and then transitions to state 3120.

  When the application is in state 3125 and the application receives a selection of an area of the image that will be edited with the selected brush control of brush tool 1875, the application transitions to state 3130. Referring to FIG. 29 as an example, the application is in state 3120 and the application receives a selection of a region of image 142 and applies the brush effect associated with brush control 1886 to image 142.

  In state 3130, the application applies a brush effect to the image being edited based on the image selection received via the selected brush control of the brush tool 1875. For example, referring to FIG. 29, when the application receives a selection of the region of the image 142 shown in the second stage 2910 using the selected brush control 1886 (when in state 3120 or state 3125), the application In state 3130, the brush effect associated with the brush control 1886 is applied to the image being edited. After the brush effect is applied based on the selection of the region of the image being edited, the application transitions back to the state immediately before the application transitions to state 3130. In other words, when the application transitions from state 3120 to state 3130, the application transitions back to state 3120, and when the application transitions from state 3125 to state 3130, the application transitions back to state 3125.

  The state diagram illustrated in FIG. 31 illustrates several separate states of the image editing application of some embodiments. Those skilled in the art will recognize that in some embodiments, the various actions represented by the states and transitions in FIG. 31 are only a subset of the actions that are considered to be executable within the application. In addition, other functions not shown may be performed when in a particular state. For example, in some embodiments, if the image editing application is in the fanned closed state (eg, state 3120 or state 3125) and the application has not yet applied any brushes to the image being edited, Upon receiving input to apply, the application displays an indicator on the brush tool UI item 138 indicating that a brush has been applied to the image being edited. As another example, when the image editing application is in a closed fanned state (eg, state 3120) and receives a brush control selection, as shown in FIG. Disable or enable the brush effect associated with.

  FIG. 32 conceptually illustrates the software architecture of an image editing application 3200 of some embodiments that provides a UI tool that includes a fanning UI control. In some embodiments, the image editing application 3200 is a stand-alone application or integrated with another application (eg, a composite application), while in other embodiments, the image editing application 3200 is within an operating system. Can be implemented. Furthermore, in some embodiments, the image editing application 3200 is provided as part of a server-based solution. In some such embodiments, the image editing application 3200 is provided via a thin client. That is, while the image editing application 3200 is running on the server, the user performs an interactive operation with the image editing application 3200 via a separate machine that is remote from the server. In other such embodiments, the image editing application 3200 is provided via a thick client. That is, the image editing application 3200 is distributed from the server to the client machine and runs on the client machine.

  As shown in FIG. 32, the image editing application 3200 includes a user interface (UI) dialog generation module 3205, a viewing mode module 3265, a UI control animator 3215, a UI control manager 3220, and a rendering engine 3225. The image editing application 3200 also includes an effect control storage device 3230, a brush control storage device 3235, another control storage device 3240, and image data 3245.

  The effect control storage device 3230 stores information related to effect control (for example, various effects, types of UI control for controlling the effect, and the like). Similarly, the brush control storage device 3235 stores information related to brush control (for example, various brush effects, types of UI controls for controlling the brush effects, and the like). Other control storage device 3230 controls additional and / or other control-related information (eg, color controls for adjusting image color, exposure controls for adjusting image exposure, etc.) and other controls. Type of UI control to be performed). The image data storage device 3245 stores image data (for example, a RAW image file, a JPEG image file, an image thumbnail version, an image edited version, and an image display resolution) that the user views, edits, and organizes with the image editing application 3200. Version, generated versions of other images, etc.). In some embodiments, storage devices 3230-3245 are stored in one physical storage device, whereas in some embodiments, the storage devices are stored in separate physical storage devices. In some embodiments, some of the storage devices 3230-3245 are still stored in one physical storage device, while the other storage devices 3230-3245 are stored in separate physical storage devices. Is done.

  FIG. 32 also illustrates an operating system 3250 that includes a gyroscope device driver 3255, an input device driver 3260, and a display module 3265. In some embodiments, as shown, the gyroscope device driver 3255, device driver 3260, and display module 3265 may be configured with the operating system 3250 even when the image editing application 3200 is an application separate from the operating system 3250. Is part of.

  The gyroscope device driver 3255 includes a set of drivers for converting signals from a gyroscope whose application is part of a 3200 running computing device. In some embodiments, the gyroscope is used to identify the orientation of the device. For example, the gyroscope is used to determine whether the device is held in a landscape or portrait position. When the gyroscope sends a signal to the gyroscope device driver 3255, the signal is supplied to the viewing mode module 3210. The input device driver 3260 may include a driver for converting signals from a keyboard, mouse, touch pad, tablet, touch screen, and the like. The user interacts with one or more of these input devices, which send signals to their corresponding device drivers. The device driver then converts the signal into user input data that is provided to the UI interaction module 3205.

  This application describes several graphical user interfaces that provide the user with a number of ways to perform various sequences and operations. In some embodiments, these operations and functions are performed based on various commands received from a user via various input devices. For example, this application illustrates using touch controls to control (eg, select, move) objects in a graphical user interface. In some embodiments, touch control is implemented by an input device that can detect the presence and location of a touch on the display of the device. An example of such a device is a touch screen device. In some embodiments, touch control allows a user to directly manipulate objects by interacting with a graphical user interface displayed on the display of the touch screen device. For example, a user can select a specific object in a graphical user interface by simply touching the specific object on the display of the touch screen device. Thus, when touch control is utilized, in some embodiments, a cursor may not be provided to allow selection of objects in a graphical user interface. However, when a cursor is provided in the graphical user interface, in some embodiments, touch control can be used to control the cursor. In addition, in some embodiments, objects in the graphical user interface are also controlled via other controls such as a cursor in the graphical user interface (eg, using a trackpad, touchpad, mouse, etc.). Or it can be manipulated.

  The display module 3265 converts the output of the user interface for the display device. That is, the display module 3265 receives signals describing what is to be displayed (eg, from the UI interaction generation module 3205) and converts those signals into pixel information that is sent to the display device. The display device may be an LCD, a plasma screen, a CRT monitor, a touch screen, or the like.

  The UI interaction generation module 3205 of the image editing application 3200 interprets the user input data received from the input device driver 3260 and passes it to various modules including the viewing mode module 3210, the UI control manager 3220, and the rendering engine 3225. The UI interaction module 3205 also manages the display of the UI (eg, UI control fan-shaped animation, UI element highlight, indicator, etc.) and outputs this display information to the display module 3265. This UI display information may be based on information from the UI control manager 3220, the rendering module 3225, and the like. In addition, for example, when a user moves an item in the UI (eg, when moving a window from one side of the UI to another), the display without affecting any other modules UI interaction module 3205 may generate a portion of the UI based solely on user input.

  The viewing mode module 3210 determines the viewing mode of the application based on information received by the viewing mode module 3210 from the gyroscope device driver 3255, and transmits the determined content to the UI interaction generation module 3205, thereby obtaining an appropriate UI. Display information is supplied from the UI interaction generation module 3205 to the display module 3265.

  The viewing mode module 3210 of some embodiments uses information from the UI interaction generation module 3205 instead of or in combination with information from the gyroscope device driver 3255 to determine the viewing mode. For example, when the user modifies the display area in which the GUI is displayed (for example, display area size adjustment, display area width adjustment, display area height adjustment, display area movement, etc.), the application A new viewing mode may be determined. As described above, the applications of some embodiments provide separate GUIs for different operations in different viewing modes (eg, landscape viewing mode, portrait viewing mode).

  The UI control animator 3215 generates an animation for the UI control manager 3220 based on information from the viewing mode module 3210 and the UI control manager 3220. When UI control manager 3220 requests UI control animation (for example, effect control inward / outward fanning animation, brush control inward / outward fanning animation, peeling (on / off) animation, etc.) The UI control animator 3215 acquires browsing mode information from the browsing mode in order to generate an appropriate animation for the UI control manager 3220.

  The UI control that the UI control manager 3220 supplies to the UI interaction generation module 3205 is transmitted to the display module 3265 for display. For example, when a user activates a UI tool such as a brush tool or an effects tool, the UI control manager 3220 receives a request for appropriate UI control from the UI interaction generation module 3205. Next, the UI control manager 3220 sends a request regarding UI control animation to the UI control animator 3215.

  The rendering engine 3225 is responsible for rendering different versions of the image based on the original image. For example, the rendering module 3225 uses the image data in the image data store 3245 to render a thumbnail of the image and a display resolution version of the image. The results of these renderings are displayed in the GUI after the UI interaction generation module 3205 transmits to the display module 3265. When the image is edited, the rendering engine 3225 generates an edited thumbnail and a display resolution version of the image based on the image data in the image data storage device 3245. In some embodiments, the rendering engine receives a request from the UI control manager 3220 and generates an image for UI control (eg, a thumbnail slider control). The rendering engine 3225 also renders an image when the application of some embodiments exports the image to an external source. In some cases, the rendering engine 3225 renders a full size version of the original image.

  Although many functions have been described as being performed in one module (eg, UI interaction module 3205, UI control animator 3215, etc.), it should be understood that the functions described herein can be divided into multiple modules. It will be recognized by the merchant. Similarly, functions described as being performed by multiple separate modules may be performed by a single module (eg, UI control animator 3215 and UI control manager 3220) in some embodiments.

II. Ordered editing process for non-destructive images The image editing application of some embodiments provides various tools for image editing. As described above, the application of some such embodiments provides a crop tool, an exposure tool, a color tool, a brush tool, and an effect tool for image editing. In some embodiments, the application applies the various edits in a particular order when the various tools are used to perform various edits on the image. The following sections describe some examples of operations for smoothly applying various edits made in a particular order using various tools on an image.

  FIG. 33 conceptually illustrates an example of ordered editing operations according to some embodiments. Specifically, FIG. 33 illustrates the GUI 100 in ten separate stages 3305-3350 of ordered editing operations. As shown, the stages 3305-3350 of FIG. 33 are developed across three views labeled as FIGS. 33a-33c.

  The first stage 3305 of the GUI 100 is shown in the figure except that the lower left portion of the image 142 has been cropped using the crop tool, as indicated by the indicator displayed above the crop tool UI item 132. 12 is similar to the first stage 1205 of the GUI 100 illustrated in FIG. Details of the cropping tool are described in US Patent Application Publication No. 13 / 629,370, filed September 27, 2012, entitled “User Interface Tools for Cropping and Straightening Image”. U.S. Patent Application Publication No. 13 / 629,370 is hereby incorporated by reference.

  The first stage 3305 also illustrates selection of UI items that the effect control 1280 can select. As shown, the user has selected UI item 1282 (eg, by touching UI item 1282) and has applied the effects associated with thumbnail slider control 1280 to cropped image 142.

  The second stage 3310 shows the GUI 100 after the effect selected in the first stage 3305 has been applied to the cropped image 142. The application displays an indicator indicating that an effect has been applied to the image being edited on the effect tool UI item 140. As shown in the drawing, the effect is indicated by hatching on the cutout image 142. The second stage 3310 also illustrates the activation of the color tool. As shown, the user has selected the color tool UI item 136 (eg, by touching the UI item 136) to activate the color tool.

  The third stage 3315 illustrates the GUI 100 after the color tool has been activated. As shown, the color tool includes a series of color adjustment slider controls 3351 to 3354 for making various color adjustments to the image being edited, and various white balance tools (not shown in FIG. 33). It includes a UI item 3355 to be provided. Details of color tools, including color adjustment controls, are described in US Patent Application Publication No. 13 / 629,428, filed September 27, 2012, entitled “Context Aware User Interface for Image Editing”. US Patent Application Publication No. 13 / 629,428 is hereby incorporated by reference.

  The third stage 3315 of the GUI 100 also shows that the color tool UI item 136 is now highlighted while the effects tool UI item 140 is no longer highlighted, which indicates that the color tool Indicates that it has been activated. When the image editing application receives a selection of the color tool UI item 136, the application de-highlights the effect tool UI item 140 and highlights the color tool UI item 136.

  In this example, the application applies color adjustment editing to the image before applying effect editing to the image. In this way, in this example, when the color tool is activated, the application temporarily cancels the effect editing applied to the cropped image 142. As illustrated, the application indicates that the effect editing has been released from the cutout image 142 by displaying an animation called a peeling-off animation. The peeling-off animation shows a layer of the cropped image 142, and effects editing is applied to this layer to indicate release from the cropped image 142. While the peeling-off animation is displayed, the application displays the version of the image 142, but the effect editing is not applied to the image 142 below the layer to be canceled. In other words, the application starts from the lower right corner of the cropped image 142 and displays an animation that causes the layer containing the effect edits to appear to be stripped from the cropped image 142 toward the upper left corner of the cropped image 142.

  The fourth stage 3320 shows the GUI 100 where the peeling-off animation is nearing the end. Here, the GUI 100 displays a layer peeled off from the cutout image 142 from the lower right corner of the image further toward the upper left corner of the image.

  The fifth stage 3325 illustrates the GUI 100 after the effect editing peel-off animation is completed. As shown in the figure, the GUI 100 displays a clipped image 142 in which the effect editing has been canceled from the image, and the effect editing illustrated by hatching is no longer displayed. The fifth stage 3325 also shows another highlight of the effects tool UI item 140 as well as an indicator above the UI item 140. This other highlight indicates that effect editing has been applied to the image being edited, but the effect has now been removed. When the image editing application finishes displaying the peeling off animation, the application displays another highlight of the effects tool UI item 140 and displays an indicator on the UI item 140.

  The sixth stage 3330 of the GUI 100 shows the editing of color adjustments applied to the image. As shown, the user adjusts the color adjustment slider control 3351 (eg, by touching the slider and dragging along the color adjustment slider control 3351) to adjust the color of the cropped image 142. The color adjustment in this example is represented by another series of diagonal lines displayed on the cropped image 142. In addition, another highlight is displayed above the color tool UI item 136 indicating that color adjustment has been applied to the cropped image 142.

  The GUI 100 in the seventh stage 3335 indicates that the user has finished adjusting the color of the image being edited using the color tool. At this stage, as indicated by the increase in another diagonal line displayed on the cropped image 142, the user can further adjust the cropped image 142 in addition to the color adjustment shown in the sixth stage 3330. The color is adjusted.

  The seventh stage 3335 also illustrates the activation of the effects tool 175. As shown, the user has selected the effect tool UI item 140 (eg, by touching the UI item 140) and activated the effect tool 175.

  The eighth stage 3340 illustrates the GUI 100 after the effects tool 175 has been activated. The eighth stage 3340 of the GUI 100 also shows that the effect tool UI item 140 is now highlighted while the color tool UI item 136 is no longer highlighted, Indicates that it has been activated. When the image editing application receives the selection of the effect tool UI item 140, the application de-highlights the color tool UI item 136 and highlights the effect tool UI item 140. The application continues to display another highlight on the effect tool UI item 140, indicating that the effect edit is still being released.

  As described above, the application in this example applies color adjustment editing to the image before applying effect editing to the image. Since the user has finished color editing on the image, the application in this example crops the effect edit that was temporarily removed from the cropped image 142 when the color tool was activated in the second stage 3310. Apply to image 142. As shown, the application indicates that effect editing has been applied to the cropped image 142 by displaying an animation called a peeling-on animation. The peeling-on animation shows a layer of the cutout image 142, and indicates that this layer applied with color editing and effect editing is superimposed on the color-adjusted cutout image 142. In this way, the application causes the layer containing color and effect editing to be pasted on top of the cropped image 142 starting from the top left corner of the cropped image 142 toward the bottom right corner of the cropped image 142. Show animation to show.

  The ninth stage 3345 shows the GUI 100 where the peeling-on animation is nearing the end. The GUI 100 in the ninth stage 3345 displays a layer arranged on the cropped image 142 from the upper left corner of the image further toward the lower right corner of the image. Also, the application continues to display another highlight on the effect tool UI item 140, indicating that the effect editing is still still being canceled.

  The tenth stage 3350 illustrates the GUI 100 after the peeling-on animation is completed. As shown in the figure, the effect editing that has been temporarily canceled is applied to the cut-out image 142. This is indicated by the display of different types of diagonal lines on the cropped image 142. Here, the application displays the original highlight on the effect tool UI item 140 to indicate that effect editing has been applied to the image being edited.

  The above figure illustrates an operation example in which various edits performed using various tools are applied to an image in a specific order. In some embodiments, various edits made using the same tool are applied to the image in a particular order.

  FIG. 34 conceptually illustrates an example of ordered editing operations according to some embodiments. In particular, FIG. 34 illustrates the GUI 100 in ten separate stages 3405-3450 of ordered editing operations. As shown, stages 3405-3450 of FIG. 34 have been developed across three views labeled FIGS. 34a-34c.

  The first stage 3405 of the GUI 100 is similar to the first stage 3305 of the GUI 100 shown in FIG. 33 except that the brush tool 1875 is activated instead of the effects tool 175. As shown, the brush control 1888 is selected, and the user selects the region of the cropped image 142 (eg, by touching the region of the image 142 and performing a rubbing gesture) and associated with the brush control 1888. The applied brush effect is applied to the region of the cutout image 142. Upon receiving a selection of the area of the cropped image 142, the application displays an indicator above the brush control 1888 to indicate that a brush effect using the brush control 1888 has been applied to the cropped image 142 and brushes the indicator. Displayed on the tool UI item 138 to indicate that editing using the brush control 1875 has been applied to the cropped image 142.

  The second stage 3410 shows the GUI 100 after the user has finished applying the brush effect to the cropped image 142. A region to which the brush effect is applied in the image 142 is indicated by a vertical line. The second stage 3410 of the GUI 100 also shows the user selecting another brush control. As shown, the user has selected the brush control 1880 (eg, by touching the brush control 1880).

  The third stage 3415 illustrates the GUI 100 after the brush control 1880 is selected. When the application receives the selection of the brush control 1880, the application de-highlights the brush control 1888 and highlights the selected brush control 1880.

  In this example, the application applies the brush effect edits of the brush control 1880 to the image before applying the brush effect edits of the brush control 1888 to the image. Thus, in this example, when the brush control 1880 is selected, the application temporarily cancels the brush effect editing of the brush control 1888 that was applied to the cropped image 142. As shown, the application shows the release of the brush effect edit of the brush control 1888 from the cropped image 142 by displaying a peeling off animation. The peel-off animation shows a layer of the cropped image 142 and the brush effect edit of the brush control 1888 is applied to this layer to indicate the release from the cropped image 142. While the peeling-off animation is displayed, the application displays the version of the image 142, but the brush effect editing of the brush control 1888 is not applied to the image 142 below the layer to be canceled. In other words, the application starts at the lower right corner of the cropped image 142 and moves toward the upper left corner of the cropped image 142 to peel off the layer containing the brush effect edits of the brush control 1888 from the cropped image 142. Display animation.

  A fourth stage 3420 shows the GUI 100 where the peeling-off animation is nearing the end. The GUI 100 in this stage displays a layer to be peeled from the cropped image 142 from the lower right corner of the image further toward the upper left corner of the image.

  The fifth stage 3425 illustrates the GUI 100 after the brush effect editing peel-off animation of the brush control 1888 is completed. As shown in the figure, the GUI 100 displays a clipped image 142 in which the brush effect editing of the brush control 1888 is released from the image, and the brush effect editing illustrated by the vertical line is no longer displayed. The fifth stage 3325 also shows another highlight of the indicator above the brush tool UI item 138. This other highlight shows that the brush effect edit of the brush control 1888 was applied to the image being edited, but now the brush effect edit has been canceled. When the image editing application finishes displaying the peel-off animation, the application displays another highlight of the indicator on the brush tool UI item 138.

  The sixth stage 3430 of the GUI 100 shows the brush effect editing applied to the image using the brush control 1880. As shown, the user selects a second region of the cropped image 142 (eg, by touching the region of the image 142 and performing a rubbing gesture) to select a brush effect associated with the brush control 1880. This is applied to the second region of the cutout image 142. Upon receipt of the selection of the second region of the cropped image 142, the application displays an indicator on the brush control 1880 to indicate that the brush effect has been applied to the cropped image 142 using the brush control 1880.

  The seventh stage 3435 shows the GUI 100 after the user has finished applying the brush effect to the cropped image 142 using the brush control 1880. As illustrated, the second region to which the brush effect is applied in the image 142 is indicated by a horizontal line. The seventh stage 3435 of the GUI 100 also shows the user selecting another brush control. As shown, the user has selected the brush control 1888 (eg, by touching the brush control 1888).

  The eighth stage 3440 illustrates the GUI 100 after the brush control 1888 is selected. When the image editing application receives the selection of the brush control 1888, the application de-highlights the brush control 1880 and highlights the brush control 1888. The application continues to display another highlight on the brush tool UI item 138, indicating that the brush effect editing of the brush control 1888 is still unreleased.

  As described above, the application in this example applies the brush effect edits of the brush control 1880 to the image before applying the brush effect edits of the brush control 1888 to the image. Since the user has finished editing the brush effect on the image using the brush control 1880, the application in this example is temporarily removed from the cropped image 142 when the brush control 1880 is selected in the second stage 3410. Apply the brush effect edit of the brush control 1888 to the cropped image 142. As shown, the application displays a peeling-on animation to indicate that the brush effect edit of the brush control 1888 has been applied to the cropped image 142. The peeling-on animation shows a layer of the cropped image 142, which is the cropped image that contains only the brush effect edit of the brush control 1880 and the brush effect edit of the brush control 1888 and the brush effect edit of the brush control 1880 applied to this layer. 142. In this way, the application includes a brush effect edit for brush control 1888 and a brush effect edit for brush control 1880, starting from the upper left corner of cropped image 142 and moving toward the lower right corner of cropped image 142. , Display an animation that appears to be pasted onto the cropped image 142 containing only the brush effect edits of the brush control 1880.

  The ninth stage 3445 shows the GUI 100 where the peeling-on animation is nearing the end. The GUI 100 in the ninth stage 3445 displays a layer arranged on the cropped image 142 from the upper left corner of the image further toward the lower right corner of the image. Also, the application continues to display another highlight on the brush control 1888, indicating that effect editing is still being canceled.

  The tenth stage 3450 illustrates the GUI 100 after the peeling-on animation is completed. As shown in the drawing, the brush effect editing of the brush control 1888 which has been temporarily released is applied to the cutout image 142. This is indicated by the display of vertical and horizontal lines on the cropped image 142. Here, the application displays the original highlight on the brush control 1888, indicating that the brush effect editing of the brush control 1888 has been applied to the image being edited.

  As described above, FIGS. 33 and 34 show an example of displaying a peeling-off animation when editing is temporarily canceled from an image, and an example of displaying a peeling-on animation when re-applying editing to an image. These animations visually show the release of the edit from the image and the application of the edit to the image. In some embodiments of the image editing application, the removal from the image and editing applied to the image is audibly indicated instead of or in combination with the display of the animation. For example, in some embodiments, the image editing application plays a sound effect (eg, a sound that lifts a piece of paper) while displaying a peeling-off animation. Similarly, the image editing application of some embodiments plays a sound effect (eg, a sound that places a piece of paper) while displaying a peeling-on animation. Other embodiments may provide additional and / or different types of indications for edits removed from the image and edits applied to the image.

  FIG. 35 illustrates a table showing the application order of edit content according to some embodiments. As shown in the table, this table defines the order in which edits are applied using the crop tool, the exposure tool, the color tool, the brush tool, and the effects tool. This table also includes repair brushes (eg, the repair brush control shown in FIGS. 22 and 28) and red eye brushes (eg, the red eye brush control shown in FIGS. 22 and 28) within the brush tool. And paint brushes (for example, the high saturation brush control, low saturation brush control, lightening brush control, darkening brush control, sharpening brush control, and softening brush control shown in FIGS. 22 and 28) Define the order in which edits are applied.

  For each tool listed in the leftmost column, an edit type that can be applied to the image in the corresponding row in the table while the tool in the left column is being used (ie activated) Is clearly marked with a check mark. For example, while the cropping tool is used, crop editing, exposure editing, and color editing can continue to be applied to the image, as indicated by a check mark in the corresponding row. Therefore, when the crop tool is activated, the application of some embodiments releases any edits applied to the image using the repair tool, red eye tool, paint tool, or effects tool.

  As described above, FIG. 34 illustrates an operation example in which various edits performed in a specific order are applied to an image using the same tool. The rows corresponding to the repair tool and the red eye tool are examples of applying various edits to the image in a specific order using the same tool. For example, when the red eye tool is in use, only crop editing can continue to be applied to the image. Therefore, in some embodiments of the application, when the red eye tool is activated (eg, by selecting the red eye brush control 2281), other brush tools (in this example, the repair tool and the paint tool) are used. Any edits applied to the image, as well as any edits applied to the image using other tools (in this example, the exposure tool, the color tool, and the effects tool) are released.

  The table illustrated in FIG. 35 is an example of the order in which editing is applied to an image. Any number of separate orders can be defined for any number of different tools, as will be appreciated by those skilled in the art.

  FIG. 36 conceptually illustrates the software architecture of some embodiments of an image editing application that provides ordered editing functionality. In some embodiments, the image editing application 3600 is a stand-alone application or integrated with another application (eg, a composite application), while in other embodiments, the image editing application 3600 is within an operating system. Can be implemented. Furthermore, in some embodiments, the image editing application 3600 is provided as part of a server-based solution. In some such embodiments, the image editing application 3600 is provided via a thin client. That is, while the image editing application 3600 is running on the server, the user interacts with the image editing application 3600 via a separate machine remote from the server. In other such embodiments, the image editing application 3600 is provided via a thick client. That is, the image editing application 3600 is distributed from the server to the client machine and runs on the client machine.

  As shown in FIG. 36, the image editing application 3600 includes a user interface (UI) dialog generation module 3605, an editing manager 3610, a peel animator 3615, an editing module 3620, and a rendering engine 3625. Image editing application 3600 also includes an image data storage device 3630. Effect control storage device 3630

  The image data storage device 3630 is image data (for example, a RAW image file, a JPEG image file, an image thumbnail version, an image edited version, an image display resolution version) that the user views, edits, and organizes with the image editing application 3600. , And other generated versions of the image). In some embodiments, the image data storage device 3630 is stored on one physical storage device, while in some embodiments, the image data storage device 3630 is stored on a separate physical storage device.

  FIG. 36 also illustrates an operating system 3650 that includes an output device driver 3655, an input device driver 3660, and a display module 3665. In some embodiments, as shown, the output device driver 3655, the input device driver 3660, and the display module 3665 may be one of the operating systems 3650 even when the image editing application 3600 is a separate application from the operating system 3650. Part.

  The input device driver 3660 may include a driver for converting signals from a keyboard, mouse, touch pad, tablet, touch screen, and the like. The user interacts with one or more of these input devices, which send signals to their corresponding device drivers. The device driver then converts the signal into user input data that is provided to the UI interaction module 3605.

  The output device driver 3655 may include a driver for converting signals to speakers, headphones, printers, and the like. In some embodiments, the output device driver 3655 of some embodiments converts signals from the UI interaction module 3605. For example, the output device driver 3655 may receive an audio signal (eg, a sound effect) from the UI interaction module 3605 and output it to a speaker and / or headphones when a peel animation is displayed.

  This application will be described with respect to several graphical user interfaces that provide the user with a number of ways to perform various sequences of operations and functions. In some embodiments, these operations and functions are performed based on various commands received from a user via various input devices. For example, this application illustrates using touch controls to control (eg, select, move) objects in a graphical user interface. In some embodiments, touch control is implemented by an input device that can detect the presence and location of a touch on the display of the device. An example of such a device is a touch screen device. In some embodiments, touch control allows a user to directly manipulate objects by interacting with a graphical user interface displayed on the display of the touch screen device. For example, a user can select a specific object in a graphical user interface by simply touching the specific object on the display of the touch screen device. Thus, when touch control is utilized, in some embodiments, a cursor may not be provided to allow selection of objects in a graphical user interface. However, when a cursor is provided in the graphical user interface, in some embodiments, touch control can be used to control the cursor. In addition, in some embodiments, objects in the graphical user interface are also controlled via other controls such as a cursor in the graphical user interface (eg, using a trackpad, touchpad, mouse, etc.). Or it can be manipulated.

  The display module 3665 converts the output of the user interface for the display device. That is, the display module 3665 receives signals describing what is to be displayed (eg, from the UI interaction generation module 3605) and converts those signals into pixel information that is sent to the display device. The display device may be an LCD, a plasma screen, a CRT monitor, a touch screen, or the like.

  The UI interaction generation module 3605 of the image editing application 3600 interprets user input data received from the input device driver 3660 and passes it to various modules including an editing manager 3610, a peel animator 3615, and a rendering engine 3625. The UI interaction module 3605 also manages the display of UI (for example, UI control fanning animation, UI element highlight, indicator, etc.) and outputs this display information to the display module 3665. This UI display information may be based on information from the edit manager 3610, peel animator 3615, lending module 3625, and the like. In addition, for example, when a user moves an item in the UI (eg, when moving a window from one side of the UI to another), the display without affecting any other modules UI interaction module 3605 may generate a portion of the UI based solely on user input. In some embodiments, the UI interaction module 3605 manages audio output (eg, sound effects, etc.) based on user input and / or interaction with the UI.

  The editing manager 3610 manages the order of editing processing. For example, the edit manager 3610 identifies the content of editing performed on the image being edited by the user, and determines the processing order of the identified editing on the image. In some embodiments, the edit manager 3610 determines the order in which edits are processed based on a set of rules. When the edit manager 3610 determines the order, the edit manager 3610 decides to display a series of edits in the UI, and a peel animator 3615 requests to generate an animation (eg, peel-off animation, peel-on animation, etc.). To the editing module 3620 to cause the rendering engine 3625 to render.

  Peel animator 3615 generates an animation of rendering engine 3625 based on information from edit manager 3610 and edit module 3620. When the edit manager 3610 requests a peeling animation (eg, peeling off animation, peeling on animation, etc.), the peel animator 3615 (1) obtains the version of the image being edited currently displayed in the UI from the UI interaction generation module 3605. (2) The version of the image being edited displayed in the UI is acquired from the editing module 3620 after the peeling animation. The peel animator 3615 generates the requested animation using the information acquired from the UI interaction module 3605 and the editing module 3620, and transmits the animation to the rendering engine 3625.

  The editing module 3620 corresponds to the purpose of applying editing contents to an image (for example, an image being edited). When edit module 3620 receives a series of edits applied to an image from edit manager 3610, edit module 3620 identifies the image data corresponding to the image in image data store 3630 and applies the series of edits to the image. To do. The editing module 3620 sends the edited image version to the rendering engine 3625 to render the edited image version for display purposes. In some embodiments, the editing module 3620 sends a version of the edited image to the peel animator 3615 so that the peel animator 3615 can generate a peel animation.

  The rendering engine 3625 is responsible for rendering different versions of the image based on the original image. For example, the rendering module 3625 uses the image data in the image data store 3630 to render a thumbnail of the image and a display resolution version of the image. The results of these renderings are displayed in the GUI after the UI interaction generation module 3605 transmits to the display module 3665. When the image is edited, the rendering engine 3625 generates an edited thumbnail and a display resolution version of the image based on the image data in the image data storage device 3630. The rendering engine 3625 also renders the image when the application of some embodiments exports the image to an external source. In some cases, the rendering engine 3625 renders a full size version of the original image.

  Although many functions have been described as being performed in one module (eg, UI interaction module 3605, peel animator 3615, etc.), those skilled in the art will appreciate that the functions described herein can be divided into multiple modules. Will be recognized. Similarly, functions described as being performed by multiple separate modules may be performed by a single module (eg, peel animator 3615 and edit manager 3610) in some embodiments.

III. Non-destructive image data structure The description in the above section relates to various operations for editing images in the GUI of some embodiments. In some embodiments of the application, a data structure representing the image is generated and stored. FIG. 37 conceptually illustrates an image data structure 3700 stored by an application of some embodiments. As shown, the data structure 3700 includes an image ID 3705, a reference 3710 to the image data, an edit instruction 3715, an exchangeable image file format (Exif) data 3725, a caption 3730, shared image data 3735, an image Includes cached version 3740, any tag 3750 on the image, and any additional data about the image. The image ID 3705 is a unique identifier for the image.

  Reference 3710 to the image data is a pointer to the actual full size pixel data for displaying the image (eg, a series of color space channel values for each pixel in the image, or an encoded version thereof). Image data for different embodiments is stored in different locations. For example, the image data may be stored at a local location (eg, stored as a file in the file system of the computing device on which the application runs). In such a case, reference 3710 refers to a local location. In some embodiments, the image data is stored in another application (eg, stored in a database of image organization applications). In some embodiments, the other application runs on the same computing device on which the application runs. In contrast, in other embodiments, other applications run on different computing devices. In some such embodiments, reference 3710 stores a pointer to image data stored in another application. In some embodiments, instead of storing pointers to image data stored in other applications, reference 3710 retrieves image data from other applications (eg, via an application programming interface (API) call). Stores a unique identifier for acquisition. In some embodiments, when an image is edited via an application, the application obtains the image stored in the other application and then stores the image in the data structure 3700.

  The editing instruction 3715 includes information related to arbitrary editing applied to the image by the user. In this way, the application stores the image in a non-destructive format so that the application can easily revert the original image from the edited version of the image at any time. For example, when the user applies a saturation effect to an image, exits the application, returns to the original state, and decides to cancel the effect, the operation can be easily executed.

  As illustrated, the editing instruction 3715 stores a series of instructions for each editing content applied to the image by the user, and a tool identifier for identifying a tool used when the user applies editing. Examples of editing include crop editing, rotation editing, exposure editing, color editing, brush effect editing, effect editing, or any other type of editing that modifies image pixels. In this way, the application can identify all edits that the user has applied to the image using a particular tool. This allows the application to identify edits that have been applied using a particular tool, allowing the application to once cancel the edit and reapply it to the image, resulting in FIGS. 33-35 above. By referring to the functions, the functions as described above are implemented. In some embodiments, these allow the user to view various versions of an image that has only been subjected to a series of edits, or to allow an application to easily perform certain types of edit removal and reapplication. Are stored in a specific order. In some embodiments, the editing instructions are stored in the order in which the user applied the editing to the image.

  Exif data 3725 includes various information (if available) stored by the camera that captured the image. Exif is one of the specific file formats commonly used in digital cameras, but as those skilled in the art will recognize, equivalent information is available in other formats or directly by the user. There are even things that can be entered. Exif data 3725 includes camera setting data, GPS data, and a time stamp. The camera setting data includes information related to camera settings for an image (when this information is available from the camera that captured the image). This information can include, for example, aperture, focal length, shutter speed, exposure correction, and ISO. The GPS data 3725 indicates the location where the image was captured, while the time stamp indicates the time (according to the camera clock) when the image was captured.

  The caption 3730 is a description input by the user regarding the image. In some embodiments, this information is displayed with the photo in the image viewing area, but may also be used when displayed on the photo in the created journal, social media or photo sharing Sometimes used when posting images on a website. When a user posts an image on such a website, the application generates shared image data 3735 for the image. This information stores a location (for example, Facebook (registered trademark), Flickr (registered trademark), etc.) and an object ID for accessing an image in the database of the website. The last access date is the date and time when the application last used the object ID to access an arbitrary user comment described in the photo from social media or a photo sharing website.

  Cached image version 3740 stores versions of images that are often accessed and displayed so that the application does not need to repeatedly generate these images from full-size image data 3710. As shown, cached image version 3740 includes a thumbnail image of the current image, a display resolution version of the current image (eg, a version customized for the image display area), and a display resolution version of the original image. Including. In some embodiments, the application generates a new thumbnail image for the current thumbnail image and a new display resolution version of the current display resolution image when editing is performed on the image. For example, if editing is canceled during an ordered editing operation, the application will generate a new thumbnail and display a version of the image that contains only the editing that was not released for display in the GUI. To do.

  The application of some embodiments eliminates the need to render a full size version of the image by storing a cached version of the image. In some embodiments, the application generates a full size version of the image when the application exports the image. For example, the user can take advantage of the functionality of the application of some embodiments, thereby allowing the user to save the image in another application (eg, an image organization application). In such instances, the application generates a full size version of the image and exports it to other applications.

  As described above, in some embodiments, the image data is stored in another application. In some embodiments, other applications also store thumbnail versions of the images. In some such embodiments, the application stores a pointer to a thumbnail version stored in the other application while the image is not being edited. In some embodiments, when images are edited through an application, the application generates image versions stored in other applications and then stores those image versions in the cached data structure 3700. Store in the image version field.

  A tag 3745 is information that the user can associate with an image using an application. For example, in some embodiments, a user marks an image as a favorite, sets a flag on the image (eg, for further review), and displays the image when the user cycles through a collection that includes the image. The image can be hidden so that it will not be displayed. Other embodiments may include additional tags. For example, some embodiments store a tag to indicate that the image data is a raw image, a tag that indicates whether editing has been applied to the image, and the like. Finally, the image data structure 3700 includes additional data 3750 (eg, face location and size, etc.) that the application can store with the image.

  One skilled in the art will recognize that the image data structure 3700 is the only possible data structure that an application can use to store the essential information of an image. For example, different embodiments may store more or less information, store information in a different order, and so on.

  In some embodiments, the application provides functionality that allows the user to switch between the edited version of the current image and the original image. In order to facilitate rapid switching between various versions of images, some non-destructive image storage methods are utilized in applications of some embodiments.

  FIG. 38 conceptually illustrates a toggle operation of some embodiments that allows the user to switch between the original image and the currently edited image. As described above, the application can easily perform this toggle operation because the application maintains the original image in a non-destructive manner. FIG. 38 illustrates the GUI 100 in four separate stages 3805-3820 of a toggle operation controlled by a toggle button.

  The first stage 3805 of the GUI 100 shows the image after it has been edited via the effects tool. As shown, the user has activated the effects tool 175 (eg, by selecting the UI item 140). This is indicated by the effect item 140 being highlighted. In addition, the user selects the thumbnail slider control 3880 of the effect tool 175 (eg, touches the thumbnail slider control 3880 when the series of thumbnail slider controls of the effect tool 175 are fanned outward). Yes. In this image, the editing content is represented by diagonal lines displayed on the image. The first stage also illustrates that the user has selected the toggle button 157.

  The second stage 3810 illustrates the GUI 100 after the user selects the toggle button 157. The edited image that was in the image display area 145 is replaced with the original image. In FIG. 38, since the hatched line displayed on the edited image in the first stage 3805 disappeared, it can be recognized that the image is no longer the edited image and has changed to the original image.

  The next third stage 3815 is the GUI 100 after the user selects the toggle button 157 again. Since the toggle button is selected, the original image returns to the edited image. The result is as shown in the diagram of the fourth stage 3820, showing the edited image along with the diagonal lines that are again displayed on the image.

  FIG. 39 conceptually shows another toggle operation of some embodiments, and the user can switch between the edited image and the original image by pressing and holding the toggle button 157. I have to. FIG. 39 illustrates the toggle operation of the GUI 100 in the three stages 3905 to 3920.

  A first stage 3905 of the GUI 100 shows an image after editing by applying an effect from the effect tool 175. As shown, the user made some edits to the image. In this image, the editing content is represented by diagonal lines displayed on the image. The first stage also illustrates the subsequent selection (eg, without touching the toggle button and removing the finger from the screen) when the user selects the toggle button 157, and the result is displayed on the second stage. It is shown in the figure.

  The second stage 3910 illustrates the GUI 100 and the original image displayed within a threshold time period after the user selects and continues to press the toggle button 157. The edited image that was in the image display area 145 is replaced with the original image. Since the hatched line displayed on the edited image in the first stage 3905 disappears, it can be recognized that the image is no longer the edited image and has changed to the original image.

  The next third stage 3915 illustrates the GUI 100 after the user releases the toggle button 157. Since the toggle button is released, the image to be displayed returns from the original image to the edited image again. ing.

  FIG. 40 conceptually shows another toggle operation of some embodiments, and the user can switch between the original image and the edited image by pressing and holding the toggle button 157. I have to. FIG. 40 illustrates the toggle operation of the GUI 100 in the three stages 4005 to 4015f.

  The first stage 4005 of the GUI 100 shows the original image that has not been edited at all. The first stage also illustrates the subsequent selection (eg, without touching the toggle button and releasing the finger from the screen) when the user selects the toggle button 157, and the result is the second stage 4010. Is shown in FIG.

  The second stage 4010 illustrates the GUI 100 and the edited image that is displayed within a threshold time period after the user selects and continues to press the toggle button 157. The original image in the preview display area is replaced with the edited image. In the first stage 4005, since an oblique line is displayed on the edited image, it can be recognized that the original image has been changed to the edited image.

  The next third stage 4015 is the GUI 100 after the user releases the toggle button 157. Since the toggle button is released, the image to be displayed returns from the edited image to the original image again.

  FIG. 41 conceptually illustrates a toggle operation of some embodiments that allows the user to switch between the cropped image and the original image when the crop tool 132 is active. FIG. 41 illustrates the toggle operation of the GUI 100 in the four stages 4105 to 4120.

  The first stage 4105 of the GUI 100 shows the image after it has been cropped using the crop tool 132. As shown, the user has activated the crop tool 132 (eg, by selecting the UI item 132). This is indicated by the fact that the cutout tool 132 is highlighted. In the cut-out image, only the cut-out portion (the front portion of the car in this image) of the original image is displayed. The first stage also illustrates that the user has selected the toggle button 157.

  The second stage 4110 illustrates the GUI 100 after the user selects the toggle button 157 when the crop tool 132 is activated. The clipped image in the image display area 145 is replaced with the original image that has not been clipped yet. The original image displays the entire image (the entire car that does not include any clipping edits in this image).

  The next third stage 4115 illustrates the GUI 100 after the user selects the toggle button 157 again. Since the toggle button is selected, the original image returns to the cropped image. This result is as shown in the diagram of the fourth stage 4120, and shows that only the front portion of the car is displayed again in the cutout image.

  38 to 41 described above show examples of functions for switching between two images. In some embodiments, this feature provides a visual indication when switching from one image to another. For example, some embodiments display an animation that transitions from the display of one image to the display of another image (eg, the peeling animation described above with reference to FIGS. 33 and 34).

IV. Image Beaming The application of some embodiments provides the ability for an application user to send an image to users of other devices running the application. Some examples and embodiments of this feature are described in the sections below.

  FIG. 42 conceptually illustrates an example of two devices using the image editing application beaming service of some embodiments. Specifically, FIG. 42 shows that a locality 4201 served by a wireless network transceiver 4202 provides a network communication service (eg, Wi-Fi service) to four participants 4203 having a handheld device 4204. The situation is illustrated. The figure also illustrates a fifth participant 4206 that is unable to receive communications because it is out of range of the wireless network transceiver 4202. It should be noted here that even if a participant is within this locality, if a particular device is not included as part of the network, the participant will establish a network transceiver 4202 for establishing communications with other devices. Is that you may not be able to use it. Thus, in this situation, it may be possible to receive communications with other devices because the device is out of the network or because the device is out of range of the wireless network transceiver.

  As shown in FIG. 42, each device 4204 in the network broadcasts a beaming service availability message 4207 so that the device 4204 passes data from the image editing application of the other device 4204 via the beaming service of these applications. Indicates that it can be used for reception. The structure of this message 4207 includes the host name of the device, the service name of the device, and the service type. The host name is used for the purpose of identifying each device with an identifier in the network. In this figure, four devices 4204 are shown, each showing a separate host name including devices “1”, “2”, “3” and “4”. The service name of the device indicates that the application using the beaming service is an image editing application. The service type indicates that each message is broadcast to the beaming service.

  In the example illustrated in FIG. 42, the two devices attempting to establish communication with each other are “device 1” 4211 and “device 2” 4212, which will be further described below with reference to FIG. FIG. 42 shows that the image editing application is running simultaneously on both the device 1 (4211) and the device 2 (4212), and as a result, these two devices can exchange image data. It shows that. In other words, for any first device that will be able to receive image data from the second device, the first device, in some embodiments, needs to activate its image editing application, This activation causes the first device to broadcast a beaming service available message notifying other neighboring devices including the second device that it is ready to receive the message. However, as will be appreciated by those skilled in the art, in other embodiments, the device broadcasts this beaming service message even if the image editing application is not being executed by the device. In these embodiments, when the second device 4212 beams an image to a first device 4211 that does not have an image editing application open, the user is prompted to open the image editing application and receive image data.

  In the example illustrated in FIG. 42 and described below, devices communicate via a wireless network 4202 (eg, a Wi-Fi network established by a wireless transceiver that is not part of any device). On the other hand, other embodiments establish communication between devices 4204 without requiring such a wireless transceiver 4202. For example, some embodiments use a device's Bluetooth transceiver to establish a wireless link between devices and then use this link to beam images between devices. Both the Bluetooth approach and the local wireless network approach are superior to previous IR-based approaches in that the devices do not have to be in line of sight with each other to establish infrared communication between the devices. However, some functions described above and below may be implemented in a more conventional IR-based approach.

  FIG. 43 conceptually illustrates an example of the first device 4211 that beams the edited image to the second device 4212. This example will be described in terms of five stages 4305-4325. The first three stages 4305-4315 show the first user interacting with the first device 4311, while the fourth and fifth stages 4320-4325 are the first device 4211 and the second The display and interaction of the GUI 100 on both devices 4212 is illustrated.

  The first stage shows an edited image 4301. It also shows how the first user selects the share button 155 by touching the display location of this icon on the display. Users can share images in various ways using share button 155. In some embodiments, the user can send the selected image to another compatible device on the same network (eg, Wi-Fi or Bluetooth). The second stage 4310 indicates that a window 4302 has been opened that allows the user to make multiple selections for transferring the edited image 4301 in response to this selection. This stage 4310 also shows that the user has selected beam 4303 as a transfer option for transferring image 4301.

  Third stage 4315 indicates that another window has opened in response to beam option 4303 being selected within window 4302 in second stage 4310. This third stage 4315 also indicates that the user has selected device 2 (4304).

  The fourth stage 4320 may be such that after device 2 (4304) is selected on the first device 4211, the image editing application on the second device 4212 causes device one to beam the photo to the user. A notification to the second user of whether or not is illustrated. The fourth stage 4320 also shows that the second user of the second device 4212 touches the Accept option 4306 to accept, and that acceptance is sent back to the first device 4211 by another message transfer. ing.

  Finally, the fifth stage 4325 shows the provision of a display prompt 4307 in which the first device 4211 notifies the first user that the user of the second device 4212 has accepted the image. It is also shown that in response to this acceptance, the first device 4211 has transferred the image data to the second device 4212 along with instructions for editing this image.

  FIG. 44 conceptually illustrates an example of a user browsing a library of images beamed on the device 4212. This figure also illustrates the switching between the edited version of the image beamed by the user and the original image. This example is described in terms of six stages 4405-4430.

  The first stage 4405 of the GUI 100 illustrates an image 4406 displayed on the device 4212 that is stored in a library of images that were not beamed to the device 4212. The first stage 4405 also selects the back icon 151 by the user, which allows the user to access the other image library stored on the device (illustrated in the second stage 4410) for the collection organization GUI. You can navigate to and return. In some embodiments, when the device receives a beamed image, the device stores the image in a specific library consisting only of other images beamed to the device.

  The second stage 4410 illustrates a GUI 100 that displays an image album currently stored on the device. In this example, the user has selected the album icon 4407 to view the image album currently stored on the device 4112. The device has only a single image album labeled 4407 beamed. In some embodiments, this beamed image album 4407 stores only the beamed images for the device. The second stage also illustrates that the user has selected the beamed image album 4407.

  The third stage 4415 illustrates the GUI 100 and the thumbnail images 4408 of the photos stored in the beamed image library 4407. The library currently contains only one image 4409 selected for display by the user.

  The fourth stage 4420 of the GUI 100 shows the display of the beamed image 4411 after the user selects the image thumbnail 4409. As shown, image 4411 includes specific edits made to that image. The editing content in this image is represented by the diagonal lines displayed on the image 4411. The fourth stage 4420 also illustrates the selection when the user selects the toggle button 157 and continues to select (eg, without touching the toggle button and releasing his finger from the screen), and the result is the fifth stage. 4425.

  The fifth stage 4425 illustrates the GUI 100 and the original image 4413 that is displayed within a threshold time period after the user selects and continues to press the toggle button 157. The edited beamed image 4411 in the image display area 145 has been replaced with the original beamed image 4413. As described above, the application can easily perform this toggle operation because the application maintains the original image 4413 in a non-destructive manner. Since the hatched line displayed on the image 4411 edited and beamed in the first stage 4405 disappeared, it can be recognized that the image is not the edited image 4411 but the original image 4413.

  The next sixth stage 4430 illustrates the GUI 100 after the user releases the toggle button 157. In this case, since the toggle button is released, the image to be displayed is restored from the original beamed image 4413 to the beamed image 4411 again.

  FIG. 45 conceptually illustrates a process 4500 of some embodiments for broadcasting a beaming service for receiving beamed images. In some embodiments, process 4500 is performed by an image editing application (eg, the image editing application described by reference to FIGS. 1-44) while it is running. In some such embodiments, the image editing application performs process 4500 at the start of the image editing application. In some embodiments, the process 4500 is performed (eg, as a service) by the operating system when the image editing application is not running. In this way, while the image editing application is not running, the process 4500 may detect when another device sends an image transfer request to the device on which the process 4500 is running.

  For the sake of explanation, the following description is described in terms of the first device and the second device. Process 4500 is running on a first device, and the second device is another device running an image editing application in some embodiments. As will be appreciated by those skilled in the art, it is possible to broadcast a service to any number of separate devices, from any device where a request to send the service and image data to the first device is detected. The image data is received.

  The process 4500 begins with a broadcast of a service specifying (at 4510) a host name parameter, a service name parameter, and a service type parameter. The host name parameter is the host name of the device (eg, the device running the image editing application) to which the process 4500 is broadcast. The service name parameter is a name used to identify the service to be broadcast. In some embodiments, the service name parameter is the name of the image editing application. The service type parameter specifies the type of service to be broadcast. In some instances, an application on the device may provide several separate services for that application. Therefore, using only the host name and service name is not sufficient to distinguish between several services broadcast to the application. As such, the service type parameter is used to distinguish between different services that can be provided by a single application running on the device.

  Process 4500 then determines (at 4520) whether to receive a connection request from the second device. In some embodiments, the process 4500 receives a request to establish a series of connections with a second device, through which the first and second devices communicate. If process 4500 determines that a connection request from the second device has been received, process 4500 proceeds to 4530. Otherwise, process 4500 returns to 4510 and continues to broadcast the service.

  At 4530, process 4500 establishes a series of connections with a second device (eg, by establishing a series of network sockets) through which the first and second devices communicate. After the series of connections is established, process 4500 receives an image from the second device (at 4540). In some embodiments, the process 4500 receives an image in the form of an image data structure similar to the data structure described above with reference to FIG.

  FIG. 46 conceptually illustrates some embodiments of a process 4600 for detecting a beaming service and identifying candidate devices for receiving beamed images. The process 4600 of some embodiments is performed by an image editing application (eg, the image editing application described above with reference to FIGS. 1-44) while the application is running. In some embodiments, in some such embodiments, the image editing application performs process 4500 at the start of the image editing application.

  Process 4600 begins by searching the network for a service type service (at 4610). As described above, the image editing application of some embodiments broadcasts a service that specifies a service type along with the service name and host name of the device running the application. In some embodiments, process 4600 searches for services that are broadcast by the image editing application of such embodiments. In some embodiments, the process 4600 searches the network using a service discovery protocol to search for service type services. Examples of service discovery protocols include Apple Bonjour (registered trademark), zero configuration networking (zeroconf), service location protocol (SLP), simple service discovery protocol (SSDP), Bluetooth (registered trademark) service discovery protocol (SDP), and the like. Can be mentioned. In some embodiments, the network searched by process 4600 is a single broadcast domain network.

  Process 4600 then determines (at 4620) whether the device providing the service type is identified. In some embodiments, the process 4600 makes a determination using the service discovery protocol described above. If process 4600 determines that the device providing the service type has not been identified, process 4600 returns to 4610 to continue the network search.

  If process 4600 determines that the device providing the service type has been identified, process 4600 displays (at 4630) the host name of the host. As described above, some embodiments broadcast a service that specifies the host name of the host. In some embodiments, the process 4600 displays the host name and / or service name specified in the service in a GUI (eg, the GUI 100 described above with reference to FIG. 43).

  Process 4600 then determines (at 4640) whether a service selection has been received. If process 4600 determines that a service selection has been received, process 4600 proceeds to 4650. Otherwise, process 4600 returns to 4610 to continue searching for service type services and display the host name of the device providing the service type service.

  At 4650, process 4600 resolves the host name of the device that provides the selected service to an Internet Protocol (IP) address. In some embodiments, the process 4600 resolves the device hostname using the service discovery protocol described above.

  Process 4600 then establishes (at 4660) a series of connections to the device using the IP address. The process 4600 of some embodiments establishes a series of network sockets with the device using the IP address.

  Finally, process 4600 transfers (at 4670) the image to the device. In some embodiments, the process 4500 transfers the image in the form of an image data structure similar to the data structure described above with reference to FIG.

  To transfer an image (or image data structure), process 4600 divides the image data into predefined size portions (eg, 65536 bytes) and transfers the image data in packets. In some embodiments, each packet includes a header and a portion of image data (eg, a payload). The packet header of some embodiments includes various fields, such as a signature field for versioning purposes, a type field for specifying the packet type (eg, payload packet, cancellation packet, acknowledgment packet). Etc.), a UUID for uniquely identifying a packet by matching it with another packet, a packet index field, a packet count field, an item index field, an item count field, a file name length field, and the like.

  45 and 46 above illustrate an example technique for receiving an image from a single device and transferring the image to a single device. As will be appreciated by those skilled in the art, similar techniques may be utilized to receive multiple images from multiple separate devices. Similarly, similar techniques may be utilized to transfer multiple images to multiple separate devices.

V. Image Browsing, Editing, and Organizing Application The above-described figures illustrate various examples of GUIs for image browsing, editing, and organizing applications according to some embodiments. FIG. 47 illustrates a detailed view of a GUI 4700 of some embodiments for viewing, editing and organizing images. The GUI 4700 is described in part by referring to FIG. 48, which conceptually illustrates an image data structure 4800 stored in an application of some embodiments.

  Data structure 4800 includes image ID 4805, image data 4810, edit instructions 4815, exchangeable image file format (Exif) data 4825, caption 4830, shared image data 4835, cached version 4840 of the image, It includes an optional tag 4845 and optional additional data 4850 regarding the image. The image ID 4805 is a unique identifier for the image, and in some embodiments, the image ID 4805 is used by the collection data structure for the purpose of referring to images stored in the collection.

  Image data 4810 is actual full-size pixel data (e.g., a series of color space channel values for each pixel in the image, or an encoded version thereof) for displaying the image. In some embodiments, this data can be stored in a database of image viewing, editing and organization applications, or can be stored with other application data on the same device. In some embodiments, this further application is another image organization application running on the device where image viewing, editing and organization operations are performed.

  As such, the data structure may store a pointer to a local file associated with the application or an ID that can be used to execute queries against the database of other applications. In some embodiments, once an application uses or edits an image in the journal, the application automatically creates a local copy of the image file that contains the image data.

  The editing instruction 4815 includes information regarding arbitrary editing applied to the image by the user. In this way, the application stores the image in a non-destructive format so that the original image can be easily restored from the edited version of the image at any time. For example, the user can apply a saturation effect to the image, quit the application and reopen it to release the effect at another time. The edits stored in these instructions can be cropping and rotation, full image exposure and color adjustment, specific location adjustments and special effects, and other edits that affect image pixels. In some embodiments, these editing instructions are stored in a particular order so that the user can view various versions of the image with only a series of edits applied.

  Exif data 4825 includes various information (if available) stored by the camera that captured the image. Exif is one of the specific file formats commonly used in digital cameras, but as those skilled in the art will recognize, equivalent information is available in other formats or directly by the user. There are even things that can be entered. Exif data 4825 includes camera setting data, GPS data, and a time stamp. The camera setting data includes information related to camera settings for an image (when this information is available from the camera that captured the image). This information can include, for example, aperture, focal length, shutter speed, exposure correction, and ISO. GPS data 4825 indicates the location where the image was captured, while the time stamp indicates the time (according to the camera clock) when the image was captured.

  The caption 4830 is a description input by the user regarding the image. In some embodiments, this information is displayed with the photo in the image viewing area, but may also be used when displayed on the photo in the created journal, social media or photo sharing Sometimes used when posting images on a website. When a user posts an image on such a website, the application generates shared image data 4835 for the image. This information stores a location (for example, Facebook (registered trademark), Flickr (registered trademark), etc.) and an object ID for accessing an image in the database of the website. The last access date is the date and time when the application last used the object ID to access an arbitrary user comment described in the photo from social media or a photo sharing website.

  Cached image version 4840 stores versions of images that are often accessed and displayed so that the application does not need to repeatedly generate these images from full-size image data 4810. For example, applications frequently store thumbnails of images as well as display resolution versions (eg, versions customized for the image display area). The application of some embodiments generates a new thumbnail of the image each time a previous thumbnail is replaced and editing is applied. In some embodiments, multiple display resolution versions are stored, including the original image and an edited version of one or more images.

  A tag 4845 is information that a user can associate with an image using an application. For example, in some embodiments, an image is marked for collection when the user marks the image as a favorite, sets a flag on the image (eg, for further review), and the user cycles through the collection that contains the image. The images can be hidden so that they are not displayed in the standard thumbnail grid or displayed in the image display area. Other embodiments may include additional tags. Finally, the image data structure 4800 includes additional data 4850 that the application can store with the image (eg, face location and size, etc.).

  Those skilled in the art will recognize that the image data structure 4800 is just one possible data structure that an application can use to store the essential information of an image. For example, different embodiments may store more or less information, store information in a different order, and so on.

  Returning to FIG. 47, the GUI 4700 includes a thumbnail display area 4705, an image display area 4710, a first toolbar 4715, a second toolbar 4720, and a third toolbar 4725. A thumbnail display area 4705 displays thumbnails of images in the selected collection. A thumbnail is a reduced size representation of a full size image, and in some embodiments represents only a portion of the image. For example, the thumbnails in the thumbnail display area 4705 are all square regardless of the aspect ratio of the full-size image. To determine the portion of the rectangular image that will be used for the thumbnail, the application identifies a smaller dimension and uses the center of the image in the longitudinal direction. For example, if the image is 1600 × 1200 pixels, the application uses a 1200 × 1200 square. To further refine the selected portion of the thumbnail, some embodiments identify the center of all faces in the image (using a face detection algorithm) and then use this location to Center in the clipped direction. So, in a theoretical 1600 × 1200 image, if the faces are all located on the left side of the image, the application uses the leftmost 1200 columns of pixels rather than cutting out 200 columns on both sides.

  After the image portion used for the thumbnail is determined, the image viewing application generates a low resolution version of the image (eg, using pixel blending and other techniques). The application of some embodiments stores the thumbnail of the image as a cached version 4840 of the image. Therefore, when the user selects a collection, the application identifies all the images in the collection (via the collection data structure) and displays the cached thumbnails of the images in each image data structure for display in the thumbnail display area. to access.

  The user may select one or more images within the thumbnail display area (eg, via the various touch interactive operations described above or via other user input). The selected thumbnail is displayed with a highlight or other selection indicator. A thumbnail 4730 is selected in the thumbnail display area 4705. In addition, as shown, the thumbnail display area 4705 of some embodiments has a flag set of several images in the collection (ie, to set the flag to “yes”). Image) is shown. In some embodiments, this text is selectable to display only flagged image thumbnails.

  The application displays the selected image in the image display area 4710 with a higher resolution than the corresponding thumbnail. Since images are usually not displayed at the full size of the image, in many cases the resolution of the image is higher than the display device. As such, the application of some embodiments stores a cached version 4840 of the image designed to fit in the image display area. The image in the image display area 4710 is displayed with the aspect ratio of the full-size image. When an image is selected, the application displays the image as large as possible in the image display area without cutting off any part of the image. When multiple images are selected, the application uses approximately the same number of pixels for each image, even if the images have different aspect ratios, in such a way that the visual weights are maintained. indicate.

  The first toolbar 4715 displays title information (for example, the name of the collection displayed in the GUI, the caption added by the user to the currently selected image, etc.). In addition, the toolbar 4715 includes a first series of GUI items 4735-4738 and a second series of GUI items 4740-4743.

  The first series of GUI items includes a back button 4735, a grid button 4736, a help button 4737, and an undo button 4738. The user can navigate back to the collection organization GUI with a back button 4735, which allows the user to select from various collections of images (eg, albums, events, journals, etc.). Selection of grid button 4736 causes the application to move the thumbnail display area on the GUI or away from the GUI (eg, via slide animation). In some embodiments, the user can also slide the thumbnail display area on or away from the GUI via a swipe gesture. Help button 4737 activates a context-sensitive help function for the user that identifies a set of currently active tools and provides the user with a help indicator that briefly describes these tools. In some embodiments, the help indicator is selectable to allow access to additional information about the tool. Selecting an undo button 4738 causes the application to release the latest edits made to the image (cut out, color adjusted, or other). To perform this “undo”, some embodiments release the most recent instruction from a series of edit instructions 4815 stored with the image.

  The second series of GUI items includes a share button 4740, an information button 4741, an original display button 4742, and an edit button 4743. Users can share images in a variety of different ways using share button 4740. In some embodiments, the user can send the selected image to another compatible device on the same network (eg, Wi-Fi or Bluetooth network), upload the image to an image hosting or social media website, A journal (ie, a presentation of images arranged so that additional content can be added) can be created based on a series of images selected from among other images.

  A display area displaying additional information regarding one or more selected images is activated with an information button 4741. Information displayed in the activated display area may include some or all of the Exif data 4825 (eg, camera settings, timestamps, etc.) stored for the image. When multiple images are selected, some embodiments display only Exif data that is common to all selected images. Some embodiments include (i) displaying a map showing the image (s) captured according to GPS data (if this information is available), and (ii) any photo-sharing web Displaying the comment stream of the image on the site and further tabs corresponding to the display are included in the information display area. To download this information from the website, the application sends this information to the website using the object ID stored for the image along with the shared image data 4835. The comment stream and, in some cases, additional information is received from the website and displayed to the user.

  An original display button 4742 allows the user to switch between the original version of the image and the edited version of the current image. When the user selects the button, the application displays the original version of the image without any editing instructions 4815 applied. In some embodiments, quick access is achieved by storing an appropriately sized image as one of the cached versions 4840 of the image. When the user selects the button again (4742), the application again displays the edited version of the image with the edit instruction 4815 applied.

  The user can start or end the edit mode with an edit button 4743. As shown in FIG. 47, when the user selects one of a series of editing tools in toolbar 4720, the user returns to viewing and organization mode with edit button 4743. When the user selects the edit button 4743 while in browse mode, the application returns to the last used series of editing tools in the order displayed on the toolbar 4720. That is, the items in the toolbar 4720 are arranged in a specific order, and the edit button 4743 activates the rightmost item among the items that have been edited on the selected image.

  The toolbar 4720 includes five items 4745 to 4749 arranged in a particular order from left to right, as mentioned. The crop item 4745 activates a crop and rotation tool that allows the user to align misaligned images and remove unwanted portions of the image. The exposure item 4746 activates a series of exposure tools that allow the user to modify the black point, shadow, contrast, brightness, highlight, and white point of the image. In some embodiments, the series of exposure tools is a series of sliders that can work together in various combinations to modify the tone attributes of the image. Color item 4747 activates a series of color tools that allow the user to modify this saturation and sharpness, as well as color-specific saturation (eg, blue or green pixels) and white balance. In some embodiments, some of these tools are represented as a series of sliders. The brush item 4748 activates a series of correction tools that allow the user to identify corrections to the image. Users can use brushes to perform rubbing actions on the image to remove red eyes and smudges, and to apply and remove saturation and other features to specific parts of the image. You can also Finally, effect item 4749 activates a series of special effects that the user can apply to the image. Examples of these effects include gradation, tilt shift, non-realistic low saturation effect, gray scale effect, and various filters. In some embodiments, the application presents these effects as a series of items that fan out outward from the toolbar 4725.

  As described, UI items 4745-4749 are arranged in a specific order. This order follows the order in which the user most frequently applies five different types of edits. Thus, in some embodiments, edit instructions 4815 are stored in this same order. When the user selects one of items 4745-4749, some embodiments apply only edits from the tool to the left of the selected tool to the displayed image (but not other edits). Remains stored in the instruction set 4815).

  Toolbar 4725 includes a series of GUI items 4750-4754 as well as configuration items 4755. The automatic correction item 4750 automatically performs correction editing (for example, clear red eye removal, color balancing, etc.) on the image. The rotation button 4751 rotates an arbitrary selected image. In some embodiments, each time the rotation button is pressed, the image rotates 90 degrees in a particular direction. In some embodiments, the automatic correction includes a predetermined series of editing instructions contained within the instruction set 4815. Some embodiments, after performing an analysis of the image, define a set of instructions based on the analysis. For example, the automatic correction tool attempts to detect red eyes in the image, but if no red eyes are detected, no red eye correction indication is generated. Similarly, automatic color balancing is based on image analysis. The rotation produced by the rotation button is also stored as an editing instruction.

  The flag setting button 4752 tags any selected image as flag set. In some embodiments, collection flagged images can be displayed without any unflagged images. The user can mark an arbitrary selected image as a favorite by using the favorite button 4753. In some embodiments, this favorite button is used to tag an image as a favorite and add the image to a collection of favorite images. The user can use the hide button 4754 to tag the image as hidden. In some embodiments, hidden images are not displayed in the thumbnail display area and / or are not displayed when the user cycles through the images in the collection within the image display area. As shown in FIG. 48, many of these functions are stored as tags in the image data structure.

  Finally, settings button 4755 activates a context sensitive menu that provides different menu options depending on the currently active toolset. For example, in viewing mode, the menus of some embodiments include new album creation options, key photo setting options for albums, options to copy settings from one photo to another, and other Provide options. When another set of editing tools is active, the menu provides options related to a particular active tool set.

  As will be appreciated by those skilled in the art, the image viewing and editing GUI 4700 is just one of many examples of a graphical user interface that can be considered for image viewing, editing, and organization applications. For example, different items may be placed in different areas or in different orders, and some embodiments may include items with additional or different functionality. In some embodiments, the thumbnail display area may display thumbnails that match the aspect ratio of the corresponding full-size image, and so forth.

VI. Electronic System Many of the functions and applications described above are implemented as a software process specified as a series of instructions that are recorded on a computer-readable storage medium (also called a computer-readable medium). When these instructions are executed by one or more computing or processing units (eg, one or more processors, processor cores, or other processing units), they are indicated to the processing unit by the instructions. Cause the action to be executed. Examples of computer readable media include CD-ROM, flash drive, random access memory (RAM) chip, hard drive, erasable programmable read only memory (EPROM), electrically erasable programmable read only memory (EEPROM). ) And the like, but is not limited thereto. Computer-readable media does not include carrier waves and electronic signals that travel wirelessly or by wired connection.

  In this specification, the term “software” is intended to include applications stored in firmware or magnetic storage residing in read-only memory that can be loaded into memory for processing by a processor. Also, in some embodiments, multiple software inventions may be implemented as subdivisions of larger programs while leaving separate software inventions intact. In some embodiments, multiple software inventions can also be implemented as separate programs. Finally, any combination of separate programs that together execute the software invention described herein is within the scope of the invention. In some embodiments, a software program defines one or more specific machine executions that, when installed to run on one or more electronic systems, perform the operations of the software program.

A. Mobile Device The image editing and viewing application of some embodiments runs on a mobile device. FIG. 49 is an example of such a mobile computing device architecture 4900. Examples of mobile computing devices include smartphones, tablets, laptops and the like. As shown, the mobile computing device 4900 includes one or more processing units 4905, a memory interface 4910, and a peripheral interface 4915.

  Peripheral interface 4915 is coupled to various sensors and subsystems (including camera subsystem 4920, wireless communication subsystem 4925, audio subsystem 4930, I / O subsystem 4935, etc.). Peripheral interface 4915 allows communication between processing unit 4905 and various peripheral devices. For example, a direction sensor 4945 (eg, gyroscope) and an acceleration sensor 4950 (eg, accelerometer) are coupled to the peripheral interface 4915 to facilitate the orientation and acceleration functions.

  Camera subsystem 4920 is coupled to one or more optical sensors 4940 (eg, charge coupled device (CCD) optical sensors, complementary metal oxide semiconductor (CMOS) optical sensors, etc.). A camera subsystem 4920 coupled to the optical sensor 4940 facilitates camera functions (eg, image and / or video data capturing). The wireless communication subsystem 4925 is useful for facilitating communication functions. In some embodiments, the wireless communication subsystem 4925 includes a radio frequency receiver and transmitter and an optical receiver and transmitter (not shown in FIG. 49). These receivers and transmitters according to some embodiments are implemented to operate via one or more communication networks, such as a GSM network, a Wi-Fi network, a Bluetooth network. Audio subsystem 4930 is coupled to a speaker for outputting audio (eg, outputs different sound effects associated with different image operations). In addition, the audio subsystem 4930 is coupled to a microphone for facilitating voice-enabled functions (eg, voice recognition, digital recording, etc.).

  The I / O subsystem 4935 is responsible for transfer between input / output peripheral devices (eg, display, touch screen, etc.) and the data bus of the processing unit 4905 via the peripheral interface 4915. The I / O subsystem 4935 includes a touch screen controller 4955 for facilitating transfers between input / output peripheral devices and the data bus of the processing unit 4905, and another input controller 4960. As shown, touch screen controller 4955 is coupled to touch screen 4965. The touch screen controller 4955 detects contact and movement on the touch screen 4965 using any of a plurality of touch sensitivity techniques. The other input controller 4960 is coupled to other input / control devices (eg, one or more buttons). Some embodiments include a near touch sensitive screen and a corresponding controller so that near touch interaction can be detected instead of or in conjunction with touch interaction.

  Memory interface 4910 is coupled to memory 4970. In some embodiments, memory 4970 may be volatile memory (eg, fast random access memory), non-volatile memory (eg, flash memory), a combination of volatile and non-volatile memory, and / or any other type. Including memory. As illustrated in FIG. 49, the memory 4970 stores an operating system (OS) 4972. The OS 4972 includes instructions for processing basic system services and instructions for executing hardware dependent tasks.

  Memory 4970 also includes communication instructions 4974 that facilitate communication with one or more additional devices, graphical user interface instructions 4976 that facilitate graphic user interface processing, and image processing instructions that facilitate image-related processing and functions. 4978, input processing instructions 4980 for smoothing input-related (eg, touch input) processes and functions, audio processing instructions 4982 for smoothing audio-related processes and functions, and camera-related processes and functions Camera instructions 4984. The above instructions are exemplary only, and in some embodiments memory 4970 includes additional and / or other instructions. For example, memory for a smartphone may include phone instructions that facilitate phone related processes and functions. The specific instructions described above need not be implemented as separate software programs or modules. Various functions of the mobile computing device may be implemented in hardware and / or software including one or more signal processing and / or application specific integrated circuits.

  The components illustrated in FIG. 49 are shown as separate components, but it will be appreciated by those skilled in the art that two or more components may be integrated into one or more integrated circuits. In addition, it is possible to connect two or more components together by one or more communication buses or signal lines. Also, while many of the functions have been described as being performed by a single component, as will be appreciated by those skilled in the art, the functions described with respect to FIG. 49 may be divided into two or more integrated circuits.

B. Computer System FIG. 50 conceptually illustrates another example of an electronic system 5000 in which some embodiments of the invention are implemented. The electronic system 5000 may be a computer (eg, desktop computer, personal computer, tablet computer, etc.), telephone, PDA, or any other type of electronic or computing device. Such electronic systems include various types of computer readable media and interfaces for various other types of computer readable media. The electronic system 5000 includes a bus 5005, a processing unit 5010, a graphics processing unit (GPU) 5015, a system memory 5020, a network 5025, a read-only memory 5030, a storage device 5035, an input device 5040, and an output device 5045.

  A bus 5005 collectively represents all system buses, peripheral device buses, and chipset buses that connect a large number of internal devices of the electronic system 5000 by communication. For example, the bus 5005 connects the processing unit 5010 to the read only memory 5030, the GPU 5015, the system memory 5020, and the storage device 5035 by communication.

  From these various memory units, the processing unit 5010 acquires instructions to be executed and data to be processed in order to execute the process of the present invention. The processing unit may be a single processor or a multi-core processor in different embodiments. Some instructions are passed to GPU 5015 and executed by GPU 5015. The GPU 5015 can offload various computations provided by the processing unit 5010 or complement image processing. In some embodiments, such functionality may be provided using the CoreImage kernel shading language.

  Read only memory (ROM) 5030 stores static data and instructions required by processing unit 5010 and other modules of the electronic system. On the other hand, the storage device 5035 is a read / write memory device. This device is a non-volatile memory unit that stores instructions and data even when the electronic system 5000 is off. Some embodiments of the present invention use a mass storage device (such as a magnetic or optical disk and its corresponding disk drive) as the storage device 5035.

  Other embodiments use removable storage devices (floppy disks, flash memory devices, etc., and their corresponding drives) as storage devices. Similar to the storage device 5035, the system memory 5020 is a read / write memory device. However, unlike the storage device 5035, the system memory 5020 is a volatile read / write memory such as a random access memory. System memory 5020 stores some of the instructions and data that the processor needs at runtime. In some embodiments, the processes of the present invention are stored in system memory 5020, storage device 5035, and / or read-only memory 5030. For example, various memory units include instructions for processing multimedia clips, according to some embodiments. The processing unit 5010 obtains execution target instructions and processing target data from these various memory units in order to execute the processes of some embodiments.

  Bus 5005 also connects to input device 5040 and output device 5045. The user can send information and selection commands to the electronic system via input device 5040. Input devices 5040 include alphanumeric keyboards and pointing devices (also referred to as “cursor control devices”), cameras (eg, webcams), microphones or similar devices that receive voice commands, and the like. The output device 5045 displays an image generated by the electronic system or outputs data in other ways. Output device 5045 includes a printer, a display device such as a cathode ray tube (CRT) or a liquid crystal display (LCD), and a speaker or similar audio output device. Some embodiments include devices such as touch screens that function as both input and output devices.

  Finally, as shown in FIG. 50, bus 5005 also couples electronic system 5000 to network 5025 via a network adapter (not shown). Thus, the computer may be part of a network of computers (such as a local area network (“LAN”), a wide area network (“WAN”), or an intranet), or a network of a network such as the Internet. Any or all components of the electronic system 5000 may be used with the present invention.

  Some embodiments include electronic configurations such as a microprocessor, a machine readable or computer readable medium (or alternatively referred to as a computer readable storage medium, a machine readable medium, or a machine readable storage medium) and a storage device and memory for storing computer program instructions. Contains elements. Some examples of such computer readable media include RAM, ROM, read only compact disc (CD-ROM), write once compact disc (CD-R), rewritable compact disc (CD-RW), read only. Multi-purpose disc (eg, DVD-ROM, dual layer DVD-ROM), various recordable / rewritable DVDs (eg, DVD-RAM, DVD-RW, DVD + RW, etc.), flash memory (eg, SD card, mini SD card) , Micro SD card, etc.), magnetic and / or solid state hard drives, read-only recordable Blu-Ray® disks, ultra high density optical disks, any other optical or magnetic media, and floppy disks. The computer readable medium may store a computer program that is executable by at least one processing unit and that includes a series of instructions for performing various operations. Examples of computer programs or computer code include machine code, such as created by a compiler, and files containing high-level code that are executed by a computer, electronic component, or microprocessor using an interpreter.

  Although the above discussion primarily refers to a microprocessor or multi-core processor executing software, some embodiments may include one such as an application specific integrated circuit (ASIC) or a field programmable gate array (FPGA). Performed by one or more integrated circuits. In some embodiments, such an integrated circuit executes instructions stored in the circuit itself. Further, some embodiments execute software stored in a programmable logic device (PLD), ROM, or RAM device.

  As used in this specification and any claims of this application, the terms “computer”, “server”, “processor” and “memory” all refer to electronic or other technical devices. These terms do not include people or groups of people. For the purposes of this specification, the term “display or display” means a display on an electronic system. As used in this specification and any claims of this application, the terms “computer-readable medium (s)”, “computer-readable medium (s)”, and “machine-readable medium” are in a computer-readable form. Is completely restricted to tangible physical objects that store information. These terms exclude wireless signals, wired download signals, and any other interim signals.

  Although the invention has been described in terms of numerous specific details, those skilled in the art will recognize that the invention can be practiced in other specific forms without departing from the spirit of the invention. For example, many of the figures illustrate various touch gestures (eg, tap, double tap, swipe gesture, press and hold gesture, etc.). However, many of the illustrated operations are via separate touch gestures (eg, swipe instead of taps) or via non-touch input (eg, cursor controller, keyboard, touchpad / trackpad, (E.g., using a near touch sensitive screen). In addition, several figures (including FIGS. 16, 45 and 46) conceptually illustrate the process. The specific operation of these processes may not be performed in the exact order shown and described. Specific operations may not be performed in one consecutive series operation, and various specific operations may be performed in different embodiments. Furthermore, the process may be implemented using several sub-processes or as part of a larger macro process. Accordingly, those skilled in the art will appreciate that the invention is not limited by the above-described exemplary details, but is defined by the appended claims.

  Although the invention has been described in terms of numerous specific details, those skilled in the art will recognize that the invention can be practiced in other specific forms that do not depart from the spirit of the invention. For example, the various UI controls illustrated in FIGS. 1-15, 18-30, 33, 34, 38-41, and 44 are finger gestures on a touch-sensitive screen (eg, placing one or more fingers). , Point, tap operation) or drawn at a certain position without showing any movement to a predetermined position. As will be appreciated by those skilled in the art, the controls of FIGS. 1-15, 18-30, 33, 34, 38-41, and 44 also include cursor control devices (eg, a mouse or trackball), stylus, keyboard, near It can be activated and / or set by a finger gesture near the touch-sensitive screen (eg, placing one or more fingers, pointing, tapping), or in some embodiments, any other control system. Accordingly, those skilled in the art will appreciate that the invention is not limited by the above-described exemplary details, but is defined by the appended claims.

Claims (14)

A method for presenting a plurality of user interface (UI) controls for image editing comprising:
Receiving a selection of an image to be edited, displaying the image in a display area for displaying the editing content for the image;
Receiving an input to activate a UI tool including the plurality of UI controls at a first location;
In response to the input, displaying a fan-shaped animation for fanning the plurality of UI controls from the fan-shaped closed layout to the fan-shaped open layout at a second location;
Including the method. The method according to claim 1, wherein displaying the sector-shaped animation includes displaying the sector-shaped animation overlapping the display area.   The method of claim 1, wherein the first location and the second location are separate locations.   The input is a first input, the fan-shaped animation is a first fan-shaped animation, and the method is configured to change the plurality of UI controls to the fan-shaped open layout in response to a second input. The method of claim 1, further comprising displaying a second fan-shaped animation that fan-shaped from the fan-shaped closed layout to the second location.   The method of claim 4, wherein the second input includes selection of one of the plurality of UI controls. Upon receiving a UI control selection in the plurality of UI controls, presenting the selected UI control as the only UI control used to edit the image;
Receiving the input to adjust the selected UI control, modifying the image based on the adjustment of the selected UI control;
The method of claim 1, further comprising:   The method of claim 6, wherein the selected UI control is a slider control including a sliding area and a slider.   The method of claim 7, wherein receiving input to adjust the selected UI control comprises receiving input to move the slider along the sliding area of the slider control.   Upon receipt of the selection of UI controls, from the display of the plurality of UI controls in the fan-out layout, to display as the only UI control used for editing the image of the presentation of the selected UI control. The method of claim 6, further comprising displaying a transition animation.   A computer readable storage medium storing an application, wherein the application executes the method of any one of claims 1 to 9 when executed by at least one processing unit.   The computer program for making a computer perform the method as described in any one of Claims 1-9. A computer readable storage medium storing an application, wherein the application performs image editing when executed by at least one processing unit, the application including a graphical user interface (GUI), wherein the GUI includes:
A display area for displaying images,
A user interface (UI) tool including a plurality of selectable user interface (UI) controls for modifying the image;
A selectable UI item for activating the UI tool;
When the UI item is selected, the plurality of UI controls in the plurality of UI controls that rotate around a fixed location with respect to the plurality of UI controls are displayed on the GUI. A computer readable storage medium that displays a fanning animation with the selectable UI controls open.   The GUI further displays the plurality of UI controls that rotate about the fixed location, and at the same time, further includes the plurality of UI controls that move from a first location to a second location with respect to the display area. The computer-readable storage medium according to claim 12, wherein the animation is displayed by displaying.   While the GUI is displaying the plurality of UI controls that rotate around the fixed location, the movement of the plurality of UI controls is displayed on the display area and the rotation of the plurality of UI controls is simultaneously performed. The computer-readable storage medium of claim 13, wherein the animation is displayed by further displaying a motion.

Images