Test strip image system

The subject matter disclosed herein generally relates to image processing. Specifically, the present disclosure addresses systems and methods that generate and display image test strips showing a range of values of effects applied to images.

Comparison is a powerful tool in creating/editing images (e.g., art, photographs). Because visual art inherently does not have a right or wrong answer, users partake in a subjective act in deciding what edit is best for their images. Conventionally, users may adjust effects on images when editing images. This typically involves a user viewing a before version of an image. The user then makes an adjustment to an effect such as, for example, exposure, and views an after version of the same image.

The description that follows describes systems, methods, techniques, instruction sequences, and computing machine program products that illustrate examples of the present subject matter. In the following description, for purposes of explanation, numerous specific details are set forth in order to provide an understanding of various examples of the present subject matter. It will be evident, however, to those skilled in the art, that examples of the present subject matter may be practiced without some or other of these specific details. Examples merely typify possible variations. Unless explicitly stated otherwise, structures (e.g., structural components) are optional and may be combined or subdivided, and operations (e.g., in a procedure, algorithm, or other function) may vary in sequence or be combined or subdivided.

Systems and methods that generate and display image test strips showing a range of values of effects applied to images are discussed herein. Comparing different edits can be a very effective technique for deciding which edit best suits a user's intent. Comparing can be achieved in several ways. A first manner it to compare an image before and after an edit is applied. The user can view both versions of the image but not at the same time. A second manner of comparison is to compare images side by side, thus enabling a user to view the versions at the same time. Example implementations use a third version of comparison by showing different versions of edits at the same time on the same image. This is similar to darkroom photo developing processes for determining correct exposure for a print.

More specifically, example implementations provide an image system that generates an image test strip that visualizes different values for an effect on the same image at the same time. The effects can be one or more of, for example, exposure, contrast, saturation, temperature, tint, skin tone, fade, and/or grain. When a test strip option is selected for an effect, the image system determines the range of values, how to increment the range, and a number of strips that should be generated for the image, whereby each strip will have a different value (e.g., increment of the range) of the effect applied thereto. The image system then generates the image test strip by applying the different values to each strip of the image. The image test strip is displayed on a user device such that a user can easily view the range of the value for the effect on the image. The various strips of the image test strip can be selected, moved, expanded, and/or applied to the entire image.

As a result, example implementations provide a technical solution to the technical problem of displaying edits to an image in a digital format that allows for easy comparison. In particular, the technical solution employs an image system that generates image test strips that display a range of values for different effects on the same image at the same time. As a result, multiple images having different values applied thereon do not need to be generated in order to compare the difference in application of different values of the effect. Additionally, a user does not need to incrementally change values multiple times before arriving at an optimal value to apply to the image as a whole. As such, one or more of the methodologies described herein may obviate a need for certain efforts or computing resources that otherwise would be involved in generating multiple versions of an image having different values of an effect applied thereon. Examples of such computing resources include processor cycles, memory usage, data storage capacity, power consumption, and network bandwidth.

is a diagram illustrating an example network environmentsuitable for generating, displaying, and utilizing image test strips, according to example implementations. A network systemprovides server-side functionality via a communication network(e.g., the Internet, wireless network, cellular network, or a Wide Area Network (WAN)) to mobile devicesand client devices. The network systemis configured to provide editing functionalities to various users of the mobile devicesand client devices, as will be discussed in more detail below.

In various cases, the mobile deviceis a device associated with a user account of a user of the network systemthat wants to edit their images using functionalities of the network system. The mobile devicemay comprise, but is not limited to, a smartphone that comprises one or more mobile applicationsthat communicate with the network systemfor added functionality. In one implementation, the mobile applicationcomprises a communication component that exchanges data with the network system. For example, the mobile applicationmay be a local version of an application or component of the network system. Alternatively, the mobile applicationexchanges data with one or more corresponding components/applications at the network system. The mobile applicationmay be provided by the network systemand/or downloaded to the mobile device.

The client devicemay comprise, but is not limited to, a tablet, laptop, multi-processor systems, microprocessor-based or programmable consumer electronics, a desktop computer, a server, or any other communication device that can access the network systemvia a browser. The client deviceincludes a browser applicationthat exchanges data, via the network, with the network system. For example, the browser applicationcan provide data to and access data from one or more components or applications at the network system. Additionally or alternatively, the client devicecan include an image application that functions similar to the mobile application. Collectively, the mobile deviceand the client deviceare referred to herein as a “user device.”

In example implementations, the user device interfaces with the network systemvia a connection with the network. Depending on the form of the user device, any of a variety of types of connections and networksmay be used. For example, the connection may be Code Division Multiple Access (CDMA) connection, a Global System for Mobile communications (GSM) connection, or another type of cellular connection. Such a connection may implement any of a variety of types of data transfer technology, such as Single Carrier Radio Transmission Technology (1×RTT), Evolution-Data Optimized (EVDO) technology, General Packet Radio Service (GPRS) technology, Enhanced Data rates for GSM Evolution (EDGE) technology, or other data transfer technology (e.g., fourth generation wireless, 4G networks, 5G networks). When such technology is employed, the networkincludes a cellular network that has a plurality of cell sites of overlapping geographic coverage, interconnected by cellular telephone exchanges. These cellular telephone exchanges are coupled to a network backbone (e.g., the public switched telephone network (PSTN), a packet-switched data network, or other types of networks.

In another example, the connection to the networkis a Wireless Fidelity (e.g., Wi-Fi, IEEE 802.11x type) connection, a Worldwide Interoperability for Microwave Access (WiMAX) connection, or another type of wireless data connection. In such an example, the networkincludes one or more wireless access points coupled to a local area network (LAN), a wide area network (WAN), the Internet, or another packet-switched data network. In yet another example, the connection to the networkis a wired connection (e.g., an Ethernet link) and the networkis a LAN, a WAN, the Internet, or another packet-switched data network. Accordingly, a variety of different configurations are expressly contemplated.

Additionally, the user device comprises a display component (not shown) to display information (e.g., in the form of user interfaces) as will be discussed in more detail below. The user device can be operated by a human user and/or a machine user.

Turning specifically to the network system, an application programing interface (API) serverand a web serverare coupled to and provide programmatic and web interfaces respectively to one or more networking servers. The networking server(s)host various systems including an image system, which comprises a plurality of components and which can be embodied as hardware, software, firmware, or any combination thereof. The image systemis configured to manage the editing of images by the network system. In particular, the image systemgenerates and displays image test strips that presents different values of one or more effects at the same time on the same images. The image systemwill be discussed in more detail in connection withbelow.

The networking server(s)can be, in turn, coupled to one or more database serversthat facilitate access to one or more storage repositories or data storage. The data storageis a storage device storing, for example, user accounts including user profiles of users of the network systemand corresponding saved images of these users.

Any of the systems, data storage, or devices (collectively referred to as “components”) shown in, or associated with,may be, include, or otherwise be implemented in a special-purpose (e.g., specialized or otherwise non-generic) computer that can be modified (e.g., configured or programmed by software, such as one or more software components of an application, operating system, firmware, middleware, or other program) to perform one or more of the functions described herein for that system or machine. For example, a special-purpose computer system able to implement any one or more of the methodologies described herein is discussed below with respect to, and such a special-purpose computer is a means for performing any one or more of the methodologies discussed herein. Within the technical field of such special-purpose computers, a special-purpose computer that has been modified by the structures discussed herein to perform the functions discussed herein is technically improved compared to other special-purpose computers that lack the structures discussed herein or are otherwise unable to perform the functions discussed herein. Accordingly, a special-purpose machine configured according to the systems and methods discussed herein provides an improvement to the technology of similar special-purpose machines.

Moreover, any two or more of the components illustrated inmay be combined, and the functions described herein for any single component may be subdivided among multiple components. Functionalities of one system may, in alternative examples, be embodied in a different system. Additionally, any number of mobile devices, client devices, and data storagemay be embodied within the network environment. While only a single network systemis shown, alternatively, more than one network systemcan be included (e.g., localized to a particular region).

is a diagram illustrating components of the image system, according to example implementations. The image systemprocesses images, performs edits to the images including generating and displaying image test strips, and enables manipulations of the image test strips. To enable these operations, the image systemcomprises a communication component, a graphics engine, and an interface componentall configured in communication with one another (e.g., via a bus, shared memory, or a switch). The image systemmay comprise other components (not shown) that are not germane to the image test strip implementations.

The communication componentis configured to exchange data with other components of the network environment. Thus, the communication componentreceives, from the mobile applicationoperating on the mobile deviceor via the browser applicationoperating on the client device, a request to view and edit images. In some cases, the request includes the image to be edited. In other cases, the request indicates an image that has been previously provided (e.g., uploaded) to the network system(via the communications component) and stored in the data storage. In some cases, the communication componentmay also receive inputs that indicate operations that a user wants performed on their image. For example, the inputs can indicate to crop or rotate an image, change one or more effects applied to the image, save an edited image, and so forth.

The graphics engineis configured to perform edits or modifications to images based on user inputs and generate the edited images for display. For example, the graphics enginecan apply one or more effects to an image, crop an image, apply filters, blur an image, etc. In some implementations, the graphics enginegenerates image test strips. For these implementations, the graphics engineincludes a tools componentand a test strip component. The graphics enginecan include other components (not shown) that perform other types of image processing (e.g., editing and modification) not related to the image test strip implementations.

In example implementations, the tools componentprovides effect editing tools that allow a user to adjust values of effects on an image. The effect editing tools are displayed on the user device via user interfaces generated by the interface component. In example implementations, the effect editing tools allow for adjustments to various effects including, for example but not limited to, exposure, contrast, saturation, temperature, tint, skin tone, fade, and/or grain. Each effect editing tool operates on a range. For example, saturation has a range that goes from only shades of gray to an extremely vivid color. Thus, the tools componentmaintains a range of values for each effect and provides a mechanism to adjust values of a corresponding range of an effect. In implementations where a user selects to view the range at the same time on the image, the user may select a test strip option provided by the tools componentfor one or more of the effects as will be discussed in more detail below.

The test strip componentgenerates the image test strip in response to the selection of the test strip option for one or more of the effects. In some cases, the test strip componentreceives the values of the range for the selected effect(s) from the tools component. The test strip componentcan determine, based on the range of values, how to increment the values and a number of portions or strips that should be generated for the image. The test strip componentthen generates an image test strip that visualizes the corresponding range of values for the effect(s) in the determined increments by applying the incremental values of the range on different portions or strips of the same image. It is noted that portions and strips are used interchangeably herein and can mean the same thing (e.g., a part of an image).

In example implementations, the number of portions can be determined by the test strip component(e.g., based on past number of portions used), be a default number, or be customized by a user. In one implementation, the portions are vertical (rectangular) strips on the same image. Alternative implementations can apply the different values along horizontal (rectangular) strips of the same image, as patchworks of different shapes (e.g., rectangular, square) on parts of the same image, or using some other pattern whereby different values of the effect can be applied to the same image. As a result, a range of values for an effect can be displayed at the same time on the same image. This allows a user to quickly view how the different values for an effect will look on their image.

In some cases, the test strip componentapplies two or more different effects at the same time. For example, the user may have selected a test strip option for exposure, contrast, and saturation. The test strip componentcombines the effects and generates what it thinks is the best range of values for the combination. For example, similar values in the ranges for exposure, contrast, and saturation (e.g., −6 to +6) can be combined (e.g., −6 value of exposure with −6 value of contrast with −6 value of saturation) and applied to each strip of the image test strip. In other examples, different combinations of values from the ranges can be combined (e.g., −2 value of exposure with 0 value of contrast with −2 value of saturation). In these examples, the different combinations can be determined by the test strip componentbased on, for example, what is commonly applied or selected by other users. In some cases, the test strip can be displayed in a quadrant format, using horizontal strips, or using vertical strips.

In other implementations, the selection of test strip options for two effects can be displayed in a crisscross pattern. For example, the first effect can be displayed with incremental values applied along vertical strips, while the second effect can be displayed with incremental values applied along horizontal strips. This allows for the full range of both effects to be displayed and all combinations of the two effects visible at the same time.

The test strip componentgenerates the image test strip automatically upon selection or deselection of a test strip icon for an effect. Continuing with the above example having three selected effects, for example, the user can deselect the test strip icon for exposure. In response, the test strip componentimmediately updates the image displayed on the user interface to show a combination of the values for contrast and saturation. Subsequently, the user can select the test strip icon for tint and the test strip component updates the image to show a combination of the values for contrast, saturation, and tint.

Additionally, the user can select a portion or strip corresponding to a particular value and manipulate the strip. In some cases, the user can move (e.g., dragging with a cursor or dragging with a finger on a touchscreen) a bounding box of the selected strip around to see the value of the effect applied over different parts of the image. In other cases, the user can expand the selected strip to view the value of the effect over a larger portion of the image. The various operations that a user can perform on the image using example implementations will be discussed further below.

is an effect edit user interfacedisplayed on a user device for generating and displaying image test strips, according to example implementations. The effect edit user interfaceis generated and displayed (or transmitted to the user device for display depending on the implementation) by the interface component. In one implementation, the effect edit user interfaceis reached via a higher-level user interface (e.g., preceding webpage or screen) where the user may have selected the image to edit.

The effect edit user interfacecomprises an image portionwhere an imageto be edited is displayed and an effect editing tools portion. The effect editing tools portionsis provided and controlled by the tools component. Thus, if a new editing tool is embodied within the tools component, a corresponding editing tool is presented on the effect editing tools portion. A user can select or adjust one or more effects presented in the effect editing tool portionto view a change in value(s) for a respective effect on the image.

Referring now to, the effect editing tools portionis shown expanded and, in more detail, in accordance with example implementations. The effect editing tools portionincludes editing tools for different effects including exposure, contrast, saturation, temperature, tint, skin color, and fade. It is noted that more, less, or alternative effects can be included in other implementations of the effect editing tools portion.

In some implementations, each effect in the effect editing tools portionhas an associated slider bar. A user can manually move a slider (e.g., shown as a circle) to adjust a value of a respective effect. For example, the user can move a slider for saturation up to make the displayed imagemore saturated. In some cases, the slider baris bidirectional whereby the default (e.g., center of a range and slider bar) is at 0 and values, for example, go up to 6 or down to −6. In other cases, the slider baris unidirectional—starting, for example, at 0 and going to 12 or starting at 12 and going to 0. It is noted that other value ranges can be used for the various effects.

The effect editing tools portionalso provides a corresponding test strip icon or optionfor each effect. When the test strip iconfor a particular effect is selected, the graphics engine(e.g., test strip component) automatically applies incremental values for the particular effect to different portions of the image to generate the image test strip. In some example implementations, the test strip componentgenerates seven strips for the particular effect. For the above example of a bidirectional slider bar, the increments of the value for the particular effect are even (e.g., −6, −4, −2, 0, 2, 4, 6). Thus, the image test strip will be shown with portions or strips having values of −6, −4, −2, 0, 2, 4, 6 for the effect applied to the image. It is noted that other increments and number of strips can be used in generating the image test strip. Whileshows a test strip iconfor all of the effects, some implementations may provide test strip icons for only some of the effects.

In some implementations, the number of strips in the image test strip can be customized by the user. For example, the effect editing tools portioncan include a custom strip slider. The user can change the number of strips that are generated for an image test strip by moving the custom strip sliderbetween values (e.g., between 1 and 20). In other implementations, a custom strip icon is provided instead of the custom strip slider. Selection of the custom strip icon can cause display of a field in which the user can enter the number of strips to use in displaying the range of values for the corresponding effect. Alternatively, selection of the custom strip icon can cause display of a drop-down menu listing different numbers of strips that can be generated. Other manners of indicating the number of strips to generate for the image test strip can be used. Thus, the user may indicate, via the custom strip slideror icon, to show the range of values from, for example, −6 to +6 over two test strips or over twenty test strips.

In a further implementation, the image test strip may comprise a single strip with a smooth scale. For instance, tint can be shown from −6 to +6 gradually and smoothly changing over the horizontal or vertical length of the image.

-illustrate a user interface displaying an imagefor which an image test strip is generated and utilized, according to one example implementation. The example of-shows a single effect applied to the same image. However, as discussed above, more than one effect can be selected for image test strip generation and display.

Referring to, the imageselected for editing is displayed on the user interface. To a side of the imageis the effect editing tools portion. In the example of, a test strip iconfor saturation is selected (shown highlighted). In response to the selection, the graphics engine(e.g., test strip component) generates an image test stripthat comprises a plurality of stripsthat span a range of values for the saturation effect. As shown, the range is between −6 to +6 in intervals of two. The stripsof the image test stripare displayed on the same imageto allow visual comparison of the different values of saturation on the imageat the same time. While the example ofshows the stripsdisplayed as vertical strips, alternative implementations can display the stripshorizontally, in a patchwork manner, or using any other pattern that allows for different portions of the imageto show different values of an effect applied thereon.

The user can deselect the test strip iconfor saturation and select a test strip icon for a different effect on the effects editing tools portion. Alternatively, the user can keep the test strip iconfor saturation selected and select one or more additional test strip icons for other effects. This results in the test strip componentgenerating strips for combinations of the values of the effects of the selected test strip icon(s).

Additionally, while the example ofshows seven stripsdisplayed for the image test strip, any number of strips may be used. In some implementations, the test strip componentcan determine that more or less strips may better illustrate the range. For instance, if the range is from −8 to +8 for an effect, the test strip componentcan generate nine strips that change the value in increments of two (e.g., −8, −6, −4, −2, 0, 2, 4, 6, 8).

In other implementations, the user can select a custom number of strips for display. For example, the seven stripsfor saturation can be displayed as shown in. The user may decide that more strips are needed. The user may move a custom strip slider or select a custom strip icon and indicate to generate thirteen strips (e.g., for values of −6, −5, −4, −3, −2, −1, 0, 1, 2, 3, 4, 5, 6). Alternatively, the user may select a custom strip icon and indicate, for example, that the increments should be in intervals of one-resulting in 13 strips.

Referring now to, one of the stripsis selected. As shown, the striphaving a saturation value of −2 is selected. The stripcan be selected by clicking on any portion of the imagewithin a bounding boxof the strip. The bounding boxof the selected stripcan then be moved around the imageto show what the selected saturation value looks like in other parts of the image.

Additionally or alternatively, a size and/or shape of the bounding boxcan be adjusted. For example and referring to, the bounding boxhas been enlarged to show the selected saturation value over a larger area of the image. In one implementation, a user can select a side or corner of the bounding boxand drag the side or corner to obtain the desired size.

For implementations that display the image test stripas a single strip with a smooth scale, the user can click on an area of the imagehaving the desired value for the effect. Clicking on the area can cause a bounding box to be displayed over the selected area. The user can then move the bounding box to other areas of the imageor expand the bounding box to enlarge the application of the selected value for the effect.

Once the user is satisfied with a value of the effect, the value of the effect can be applied to the entire image. In one implementation, the user may select a value indication(e.g., the −2 value in the example of). In response to the selection of the value indication, the value of the effect (e.g., saturation value of −2) is applied to the entire imageas shown in. In the example of, the saturation value is reflected on a slider barfor saturation (e.g., slider on the slider baris moved to a −2 position). The user can continue to edit the imageusing other effects available in the effect editing tools portion, save the image, or perform other operations on the image(e.g., crop, rotate, print). While the example ofuses a selection of the value indicationto trigger the application of the value of the effect to the entire image, alternative embodiments may use a different trigger (e.g., right click selection, selection of an apply icon on the effect editing tools portion).

is a flowchart illustrating operations of a methodfor generating, displaying, and utilizing image test strips, according to example implementations. Operations in the methodmay be performed by the image system, using components described above with respect to. Accordingly, the methodis described by way of example with reference to the image system. However, it shall be appreciated that at least some of the operations of the methodmay be deployed on various other hardware configurations or be performed by similar components residing elsewhere in the network environment. Therefore, the methodis not intended to be limited to the image system.

In operation, the image systemaccesses an image to be edited. In some cases, the communication componentreceives a request to edit an image along with the image. In other cases, the request indicates an image that has been previously provided (e.g., uploaded) to the network system(via the communications component) and stored in the data storage. In these cases, the image system(e.g., the graphics engine) accesses the image from the data storage.

In operation, the graphics enginedisplays the image along with effect editing tools. The effect editing tools are provided by the tools componentand allow for modification of the image by applying various effects such as exposure, contrast, saturation, temperature, tint, skin tone, fade, and/or grain. In example implementations, the interface componentgenerates a user interface (e.g., effect edit user interface) and causes display (e.g., transmits the user interface over the networkto the user device) of the user interface on the user device. The user interface can be displayed via the mobile applicationon the mobile deviceor via the browser applicationon the client device, for example.

In operation, the image systemreceive a test strip trigger for at least one of the effects. In example implementations, the effect editing tools portion of the user interface provides a test strip icon for one or more effects. The user can select the test strip icon for the effect(s) for which they want to view a range of values applied onto the image.

In operation, the test strip componentgenerates the image test strip. When the test strip icon for a particular effect is selected, the test strip componentidentifies a range of values for the effect, determines increments of the values, and/or identifies a number of strips that should be generated for the image. In some implementations, the test strip componentdetermines the number of strips to create for the image test strip (e.g., based on past number of strips used). In some cases, the number of strips is customized and indicated by the user via the user interface (e.g., via a custom strip slider or icon). In other implementations, the number of strips is default (e.g., seven strips) or based on the range of values for the effect. The test strip componentthen applies different values of the effect in the increments to different portions of the image that comprise the strips. For example, if the increments of the values for a particular effect are even (e.g., −6, −4, −2, 0, 2, 4, 6), then the image test strip will be shown with portions or strips having values of −6, −4, −2, 0, 2, 4, 6 for the effect applied to the image.

In some cases, the test strip componentcan apply two or more selected effects at the same time. The test strip componentcan combine the different values of the selected effects and apply the different combinations of values to the strips.

In operation, the interface componentdisplays the image test strip on the user interface. In particular, the test strip componentworks with the interface componentto display the generated image test strip, for example, as shown in. The strips of the image test strip can be shown as vertical strips, horizontal strips, in a patchwork format, in a quadrant format, or using any other pattern.

In operation, the image systemreceives one or more test strip input(s) via the user interface. For example, the user can select a strip corresponding to a particular value of the effect and manipulate the strip. In some cases, the user can move a bounding box of the selected strip around to see the value of the effect applied over different parts of the image. In other cases, the user can expand the bounding box to view the effect over a larger portion of the image. The user can also deselect or select one or more effects to change combinations of effects that can be applied at the same time on the image.