System and method for implementing interactive outline mode in a graphic design interface - Patents.com

Abstract

Examples include a computer system and process for rendering a design interface in at least a default mode and an outline mode, in which the design interface is rendered to include multiple objects that partially intersect each other at appropriate locations to form interlocking shapes, and in which the design interface is rendered in outline mode, where each of the multiple objects and interlocking shapes is drawn in outline form.

Description

Related Applications

[0001] This application claims the benefit of priority to (i) U.S. Patent Application No. 18 / 144,154, filed May 5, 2023, and (ii) U.S. Provisional Patent Application No. 63 / 339,864, filed May 9, 2022, the entire contents of which are incorporated herein by reference. [Technical field]

[0002] The examples described herein relate to systems and methods for implementing an interactive outline mode in a graphic design interface. [Background technology]

[0003] Software design tools come in many forms and uses. For example, in the field of application user interfaces, software design tools require a designer to blend the functional aspects of a program with aesthetic and even legal requirements, resulting in a collection of pages that form the application's user interface. For a given application, the designer has many objectives and requirements that are often difficult to keep track of. Summary of the Invention

[0004] In contrast, embodiments as described allow a designer to view a design in outline mode, where all objects present on the canvas can be viewed as outline shapes (e.g., wireframes). In this mode, the designer can view spatial attributes of occluded or hidden objects, such as placement and alignment. Furthermore, in outline mode, the designer can directly view occluded objects without taking additional steps such as selecting layers and removing overlaying objects.

[0005] Further examples include computer systems and processes for rendering a design interface in at least a default mode and an outline mode, in which the design interface is rendered to include a plurality of objects that partially intersect each other at appropriate locations to form interlocking shapes, and in which the design interface is rendered in outline mode, in which each of the plurality of objects and interlocking shapes is drawn in outline form.

[0006] In an example, rendering the design interface includes applying a plurality of possible logic types including Boolean combinatorial logic. Further, the Boolean combinatorial logic may include union combination, intersection combination, difference combination, or exclusion combination types of logic. In an example, a user may select a logic type from a plurality of possible logic types to form a combined shape, the combined shape being based at least in part on the selected logic type.

[0007] Additional examples include computer systems and processes having a rendering engine implemented therein, the rendering engine may operate in at least a default mode and an outline mode. In the default mode, the rendering engine is operable to render a design interface including a plurality of objects and apply occlusion logic to (i) occlude at least a portion of an object that intersects with another object and (ii) prevent types of user interaction with the portions of the object that are occluded. In the outline mode, the rendering engine is operable to render an outline of each of the plurality of objects without occlusion and enable types of user interaction with the portions of the object that are occluded in the default mode.

[0008] One or more embodiments described herein provide that the methods, techniques, and actions performed by a computing device are performed programmatically or as a computer-implemented method. Programmatically, as used herein, means by the use of code or computer-executable instructions. These instructions may be stored in one or more memory resources of the computing device. The steps performed programmatically may or may not be automatic.

[0009] One or more embodiments described herein can be implemented using a program module, engine, or component. A program module, engine, or component can include a program, a subroutine, a portion of a program, or a software or hardware component that can perform one or more specified tasks or functions. As used herein, a module or component can exist on a hardware component independent of other modules or components. Alternatively, a module or component can be a shared element or process of other modules, programs, or machines.

[0010] Some embodiments described herein may generally require the use of computing devices that include processing and memory resources. For example, one or more embodiments described herein may be implemented in whole or in part on computing devices such as servers, desktop computers, mobile phones or smartphones, tablets, wearable electronic devices, laptop computers, printers, digital photo frames, network equipment (e.g., routers), and tablet devices. Memory, processing, and network resources may all be used in connection with establishing, using, or executing any embodiment described herein (including executing any method or implementing any system).

[0011] Furthermore, one or more embodiments described herein may be implemented through the use of instructions executable by one or more processors. These instructions may be held on a computer-readable medium. The machines shown or described with the following figures provide examples of processing resources and computer-readable media that can carry and / or execute instructions for implementing embodiments of the present invention. In particular, many machines shown with embodiments of the present invention include processors and various forms of memory for holding data and instructions. Examples of computer-readable media include permanent memory storage devices such as hard drives on personal computers or servers. Other examples of computer storage media include portable storage units such as CD or DVD units, flash memory (such as those found on smartphones, multifunction devices or tablets), and magnetic memory. Computers, terminals, and network-enabled devices (e.g., mobile devices such as mobile phones) are all examples of machines and devices that utilize processors, memories, and instructions stored on computer-readable media. Furthermore, the embodiments may be implemented in the form of a computer program, or a computer-usable carrier medium that can carry such a program. [Brief description of the drawings]

[0012] [Figure 1A] FIG. 1 illustrates an interactive graphic design system for a user's computing device, in accordance with one or more examples. [Figure 1B] FIG. 1 illustrates a networked computing system for implementing an interactive graphic design system on a user computing device, according to one or more examples. [Figure 1C] FIG. 1 illustrates a network computing system for implementing an interactive graphic design system for multiple users in a collaborative network platform, in accordance with one or more examples. [Diagram 2] FIG. 1 illustrates a method for implementing an outline mode on a graphics application in accordance with one or more embodiments. [Figure 3A] FIG. 1 illustrates an example of a design interface being rendered by a rendering engine that switches between a default mode and an outline mode, in accordance with one or more embodiments. [Figure 3B] FIG. 1 illustrates an example of a design interface being rendered by a rendering engine that switches between a default mode and an outline mode, in accordance with one or more embodiments. [Figure 3C] FIG. 1 illustrates another implementation of the rendering engine 120 for implementing outline mode in accordance with one or more embodiments. [Figure 3D] FIG. 1 illustrates another embodiment of a design interface rendered in default mode and outline mode in accordance with one or more embodiments. [Figure 3E] FIG. 1 illustrates another embodiment of a design interface rendered in default mode and outline mode in accordance with one or more embodiments. [Figure 3F] FIG. 13 illustrates a variation of a design interface rendered in outline mode in accordance with one or more embodiments. [Figure 3G] FIG. 1 illustrates another implementation of a design interface rendered in default and outline modes in accordance with one or more embodiments. [Figure 3H] FIG. 1 illustrates another implementation of a design interface rendered in default and outline modes in accordance with one or more embodiments. [Figure 3I] FIG. 1 illustrates another implementation of a design interface rendered in default and outline modes in accordance with one or more embodiments. [Figure 3J]FIG. 1 illustrates another implementation of a design interface rendered in default and outline modes in accordance with one or more embodiments. [Figure 3K] A diagram illustrating additional functionality that may be provided by a design interface rendered in a default mode in accordance with one or more embodiments. [Figure 4] FIG. 1 illustrates a networked computer system in which one or more embodiments may be implemented. [Diagram 5] FIG. 1 illustrates a user computing device for use with one or more examples as described. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0013] System Description 1A illustrates an interactive graphic design system for a user's computing device, according to one or more examples. The interactive graphic design system ("IGDS") 100 can be implemented in any one of a number of different computing environments. For example, in some variations, the IGDS 100 can be implemented as a client-side application running on the user computing device 10 to provide functionality as described with the various examples. In other examples, as described below, the IGDS 100 can be implemented through the use of a web-based application 80. Additionally or alternatively, the IGDS 100 can be implemented as a distributed system, such that the processes described with the various examples run on network computers (e.g., servers) and on the user device 10.

[0014] According to examples, the IGDS 100 may be implemented on a user computing device 10 to allow a corresponding user to design various types of interfaces using graphical elements. The IGDS 100 may include processes executed as or through a Web-based application 80 installed on the computing device 10. As illustrated by various examples, the Web-based application 80 may execute scripts, code and / or other logic ("program components") to implement the functionality of the IGDS 100. Additionally, in some variations, the IGDS 100 may be implemented as part of a network service, and the Web-based application 80 may communicate with one or more remote computers (e.g., servers used for the network service) to execute the processes of the IGDS 100.

[0015] In some examples, the web-based application 80 obtains some or all of the program resources for implementing the IGDS 100 from a network site. Additionally or alternatively, the web-based application 80 can obtain some or all of the program resources from a local source (e.g., local memory resident on the computing device 10). The web-based application 80 can also access various types of data sets in providing the IGDS 100. The data sets can correspond to files and libraries, which can be stored remotely (e.g., on a server, associated with an account) or locally.

[0016] In an example, the web-based application 80 may correspond to a commercially available browser, such as GOOGLE CHROME (developed by GOOGLE, INC.), SAFARI (developed by APPLE, INC.), or INTERNET EXPLORER (developed by MICROSOFT CORPORATION). In such an example, the processes of the IGDS 100 may be implemented as scripts and / or other embedded code that the web-based application 80 downloads from a network site. For example, the web-based application 80 may execute code embedded within a web page to implement the processes of the IGDS 100. The web-based application 80 may also execute scripts to obtain other scripts and program resources (e.g., libraries) from the network site and / or other local or remote locations. As an example, the web-based application 80 may execute JAVASCRIPT® embedded in HTML resources (e.g., web pages structured according to HTML 5.0 or other versions provided under standards published by the W3C or WHATWG consortium). In some examples, the rendering engine 120 and / or other components may utilize graphics processing unit (GPU) acceleration logic, such as provided through Web Graphics Library (WebGL) programs that execute Graphics Library Shader Language (GLSL) programs that run on the GPU.

[0017] According to an example, a user of computing device 10 operates web-based application 80 to access network sites to obtain and execute program resources to implement IGDS 100. In this manner, a user may initiate a session to implement IGDS 100 for purposes of creating and / or editing a design interface. In an example, IGDS 100 includes a program interface 102, an input interface 118, and a rendering engine 120. Program interface 102 may include one or more processes executed to access and obtain program resources from local and / or remote sources.

[0018] In one implementation, the programmatic interface 102 can use programmatic resources associated with the web-based application 80 (e.g., an HTML 5.0 canvas) to, for example, generate the canvas 122. Additionally or as a variation, the programmatic interface 102 can trigger or otherwise generate the canvas 122 using programmatic resources and data sets (e.g., canvas parameters) obtained from a local source (e.g., memory) or a remote source (e.g., a network service).

[0019] The programmatic interface 102 may also obtain programmatic resources including an application framework for use with the canvas 122. The application framework may include, for example, a data set that defines or configures a set of interactive graphic tools that are integrated with the canvas 122 and that constitute the input interface 118, allowing a user to provide input for creating and / or editing the design interface.

[0020] According to some examples, the input interface 118 may be integrated with the canvas 122 and implemented as a functional layer that detects and interprets user input. The input interface 118 may, for example, use a reference to the canvas 122 to identify the on-screen location of a user input (e.g., a "click"). Additionally, the input interface 118 may interpret a user's input action based on the location of the detected input (e.g., whether the location of the input indicates a selection of a tool, an object rendered on the canvas, or an area of ​​the canvas), the frequency of the detected input in a given period of time (e.g., a double click), and / or the start and end locations of an input or series of inputs (e.g., start and end locations of clicks and drags), as well as various other input types that a user may specify through one or more input devices (e.g., a right click, a screen tap, etc.). In this manner, the input interface 118 may, for example, interpret a series of inputs as a selection of a design tool (e.g., a selection of a shape based on the input location) or as input to define attributes (e.g., dimensions) of the selected shape. In an example, some of the input interfaces 118 may be selectively or intermittently integrated with the canvas 122 to allow a user to perform certain actions without being distracted from the canvas 122 .

[0021] In some examples, the input interface 118 may enable a user to select settings and operating modes. As will be described with some examples, the input interface 118 may include a mode switching feature that allows a user to switch rendering modes, such as between a default mode and an outline mode.

[0022] Additionally, the program interface 102 can be used to retrieve program resources and data sets, including files 101 that constitute the user's active workspace, from local or remote sources. The retrieved data sets can include one or more pages that include design elements that collectively form a design interface, or a design interface in progress. Each file 101 can include one or more data structure representations 111 that collectively define the design interface. The files 101 can also include additional data sets associated with the active workspace. For example, as described in some examples, a workspace file can store an animation data set that defines animation behaviors, such as between objects or states in a rendering of a canvas 122.

[0023] In the example, the rendering engine 120 uses the data structure representation 111 to render a corresponding DIUE 125 on the canvas 122, where the DIUE 125 reflects the graphic elements and respective attributes provided with the individual pages of the file 101. The user can edit the DIUE 125 using the input interface 118. Alternatively, the rendering engine 120 can generate a blank page of the canvas 122, and the user can generate the DIUE 125 using the input interface 118. When rendered, the DIUE 125 can include graphic elements such as a background and / or a set of objects (e.g., shapes, text, images, program elements), as well as attributes of the individual graphic elements. Each attribute of the graphic elements can include an attribute type and an attribute value. For objects, the attribute types include shape, dimensions (or size), layer, type, color, line weight, text size, text color, font, and / or other visual characteristics. Depending on the implementation, the attributes reflect properties of a two-dimensional or three-dimensional design. In this manner, the attribute values ​​of individual objects can define, for example, the visual characteristics of the size, color, position, layering, and content of elements that are rendered as part of the DIUE 125.

[0024] In an example, rendering engine 120 can implement alternative rendering logic sets that affect how objects in a design interface are rendered. The alternative rendering logic sets may include programs, functions, formulas, or other constructs that a user can choose to implement through rendering engine 120. Based on the implementation, the alternative rendering logic sets can be made available to rendering engine 120 as plug-in programs or user-selectable settings.

[0025] In some examples, the rendering engine 120 may implement occlusion logic in which an object or a portion thereof is obscured by application of logic (e.g., a setting, a function, a program, etc.). In examples, the occlusion logic includes overlay logic (e.g., one object is placed over another object, obscuring the object underneath). Additionally or alternatively, the occlusion logic may include object combination logic, which may be implemented in connection with multiple objects that overlap on the canvas 122. In some examples, the object combination logic may implement any of a number of possible Boolean relationships that control how the intersection of two objects is rendered. For example, the Boolean object combination logic may include union set combination, intersection set combination, difference set combination, or exclusion set combination.

[0026] Additionally, the occlusion logic may include clip logic in which portions of an object that extend beyond the boundaries of a container object are hidden. As another example, the occlusion logic may include hiding logic that provides for all or part of an object to be hidden on the canvas 122.

[0027] A network computing system implementing IGDS 1B illustrates a network computing system for implementing an interactive graphic design system on a user computing device, according to one or more examples. A network computing system such as that illustrated in the example of FIG. 1B can be implemented using one or more servers that communicate with the user computing device over one or more networks.

[0028] In the example of FIG. 1B , the network computing system 150 performs operations to enable the IGDS 100 to be implemented on the user computing device 10. In a variation, the network computing system 150 provides network services 152 to support use of the IGDS 100 by a user computing device utilizing a browser or other web-based application. The network computing system 150 may include a site manager 158 that manages a website where a set of web resources 155 (e.g., web pages) are made available for site visitors. The web resources 155 may include instructions such as scripts or other logic executable by a browser or web component of the user computing device ("IGDS instructions 157").

[0029] In some variations, when computing device 10 accesses and downloads web resource 155, web-based application 80 executes IGDS instructions 157 to implement functionality as described in some examples of FIGURE 1A. For example, IGDS instructions 157 may be executed by web-based application 80 to launch program interface 102 on user computing device 10. The launching of program interface 102 may occur simultaneously with the establishment of a web socket connection between program interface 102 and service component 160 of network computing system 150, for example.

[0030] In some examples, the web resources 155 include logic that the web-based application 80 executes to launch one or more processes of the program interface 102, thereby causing the IGDS 100 to obtain additional program resources and data sets for implementing the functionality as described by the examples. The web resources 155 can, for example, embed logic (e.g., “JAVASCRIPT” code), including GPU acceleration logic, in an HTML page for download by the user's computing device. The program interface 102 can be triggered to obtain additional program resources and data sets, for example, from the network service 152 and / or from local resources of the computing device 10, to implement the IGDS 100. For example, some of the components of the IGDS 100 can be implemented through web pages that can be downloaded to the computing device 10 after authentication is performed and / or when the user performs additional actions (e.g., downloading one or more pages of a workspace associated with an account identifier). Thus, in the illustrated example, the network computing system 150 can communicate the IGDS instructions 157 to the computing device 10 through a combination of network communications, including through activity downloads of the Web-based application 80, where the IGDS instructions 157 are received and executed by the Web-based application 80.

[0031] Computing device 10 may use web-based application 80 to access a web site of network service 152 and download web pages or web resources. Upon accessing the web site, web-based application 80 may communicate an account identifier to service component 160 automatically (e.g., through stored credentials) or through manual entry. In some examples, web-based application 80 may also communicate one or more additional identifiers that correlate with the user identifier.

[0032] Further, in some examples, the service component 160 can retrieve the profile information 109 from a user profile store using a user or account identifier of the user identifier. Additionally or alternatively, the user's profile information 109 can be determined and stored locally on the user's computing device 10.

[0033] The service component 160 can also retrieve from the file store 164 a file of an active workspace that is linked to a user account or identifier ("active workspace file 163"). The profile store can also identify a workspace identified with the account and / or user, and the file store 164 can store the datasets that make up the workspace. The datasets stored in the file store 164 can include, for example, pages of the workspace, a dataset identifying constraints for an active set of workspace files, and one or more data structure representations 161 of designs being edited that can be rendered from each active workspace file.

[0034] Further, in the example, the services component 160 provides the web-based application 80 with a representation of a workspace associated with the user, which representation identifies, for example, individual files associated with the user and / or user account. The workspace representation can also identify a set of files, each file including one or more pages, and each page including objects that are part of a design interface.

[0035] On the user device 10, the user may view the workspace representation through a web-based application 80, and the user may select to open a file of the workspace through the web-based application 80. In an example, when the user selects to open one of the active workspace files 163, the web-based application 80 launches a canvas 122. For example, the IGDS 100 may launch an HTML 5.0 canvas as a component of the web-based application 80, and the rendering engine 120 may access one or more data structure representations 111 of the design interface being edited to render a corresponding DIUE 125 on the canvas 122.

[0036] The services component 160 may also determine a user's permission settings or role associated with the account identifier based on the user credentials. The user's permission settings or role may determine, for example, the files the user can access. In some examples, the implementation of the rendering engine 120 on the computing device 10 may be configured based at least in part on the user's role or settings.

[0037] In an example, changes implemented by the rendering engine 120 in the DIUE 125 may also be recorded with the respective data structure representation 111 for storage on the computing device 10. The program interface 102 may repeatedly or continuously stream the change data 121 to the service component 160, with updates reflecting edits made to the DIUE 125 and the data structure representation 111 and reflecting changes made by the user to the DIUE 125 and the local data structure representation 111 of the DIUE 125. The service component 160 may receive the change data 121 and may then use the change data 121 to implement changes in the network-side data structure representation 161. In this manner, the network-side data structure representation 161 in the active workspace file 163 may mirror (or be synchronized with) the local data structure representation 111 on the user computing device 10. Once the rendering engine 120 implements changes to the DIUE 125 on the user device 10, the changes may be recorded or otherwise implemented with the local data structure representation 111, and the programmatic interface 102 may stream the changes as change data 121 to the service component 160 to synchronize the local representation 111 of the DIUE 125 with the network-side representation 161. This process may be performed repeatedly or continuously such that the local representation 111 of the DIUE 125 and the network-side representation 161 remain synchronized.

[0038] Collaborative Network Platform FIG 1C illustrates a network computing system for implementing an interactive graphic design system for multiple users in a collaborative network platform, according to one or more examples. In the example of FIG 1C, the collaborative network platform is implemented by a network computing system 150 that communicates with multiple user computing devices 10, 12 over one or more networks (e.g., the World Wide Web) and implements the IGDS 100 on each computing device. While FIG 1C illustrates an example in which two users utilize the collaborative network platform, in the example as described, the network computing system 150 enables collaboration on design interfaces among a larger group of users.

[0039] 1C, the user computing devices 10, 12 can be assumed to be operated by multiple users associated with a common account, with each user computing device 10, 12 implementing a corresponding IGDS 100 to access the same workspace during respective overlapping sessions. Thus, each of the user computing devices 10, 12 can simultaneously access the same set of active workspace files 163, and the respective programmatic interfaces 102 of the IGDSs 100 on each user computing device 10, 12 operate to establish corresponding communication channels (e.g., web socket connections) with the service components 160.

[0040] In an example, the service component 160 can communicate a copy of the active workspace file 163 to each user computing device 10,12 such that the computing devices 10,12 simultaneously render the DIUEs 125 in the active workspace file 163. Additionally, each of the computing devices 10,12 can maintain a local data structure representation 111 of the respective DIUEs 125 as determined from the active workspace file 163. The service component 160 can also maintain a network side data structure representation 161 obtained from the file of the active workspace 163 and consistent with the respective local data structure representation 111 of the computing devices 10,12.

[0041] The network computing system 150 can continuously synchronize the active workspace files 163 on each user computing device. In particular, changes made by a user to the DIUE 125 on one computing device 10, 12 can be immediately reflected in the rendered DIUE 125 on the other user computing device 10, 12. As an example, a user of the computing device 10 can make changes to the respective DIUE 125 and the respective rendering engines 120 can implement updates that are reflected in the local copies of the data structure representation 111. From the computing device 10, the program interface 102 of the IGDS 100 can stream change data 121 reflecting the user-entered changes to the service component 160. The service component 160 processes the change data 121 on the user computing device. The service component 160 can use the change data 121 to make corresponding changes to the network-side data structure representation 161. The service component 160 can also stream remotely generated change data 171 (which in the example provided corresponds to or reflects change data 121 received from the user device 10) to the computing device 12 to cause the corresponding IGDS 100 to update the DIUE 125 rendered on that device. The computing device 12 can also use the remotely generated change data 171 to update its local data structure representation 111. The program interface 102 of the computing device 12 can receive updates from the network computing system 150 and the rendering engine 120 can update the DIUE 125 and the respective local copies 111 of the computing device 12.

[0042] The reverse process may also be implemented to update the data structure representation 161 of the network computing system 150 using change data 121 communicated from the second computing device 12 (e.g., corresponding to a user of the second computing device updating the DIUE 125 rendered on the second computing device 12). The network computing system 150 may then stream remotely generated change data 171 (which in the provided example corresponds to or reflects the change data 121 received from the user device 12) to update the local data structure representation 111 of the DIUE 125 on the first computing device 10. In this manner, the DIUE 125 of the first computing device 10 may be updated in response to a user of the second computing device 12 providing user input to modify the DIUE 125.

[0043] To facilitate synchronization of the data structure representations 111, 111 on the computing devices 10, 12, the network computing system 150 may implement stream connectors that merge data streams exchanged between the first computing device 10 and the network computing system 150, and between the second computing device 12 and the network computing system 150. In some implementations, the stream connectors may be implemented to allow each computing device 10, 12 to make changes to the network-side data representation 161 without additional data duplication that may be required to process the streams from each device individually.

[0044] Additionally, over time, one or both of the computing devices 10, 12 may become out of sync with the server-side data representation 161. In such an event, each computing device 10, 12 may re-download the active workspace file 163 to resume maintenance of the data structure representation of the DIUE 125 that is rendered and edited on that device.

[0045] Outline Mode With reference to examples such as those illustrated in FIGS. 1A-1C, the rendering engine 120 implements the outline logic 128 to render the design interface in an outline mode. A user can switch the rendering engine 120 between a default mode and the outline mode. In the default mode, objects rendered on the canvas have a fill (e.g., color, pattern, etc.) and other interior attributes. In the outline mode, the rendering engine 120 renders the objects as a wireframe. As such, the objects may not have interior fill attributes (e.g., color or pattern fill within a wireframe), for example. Depending on the implementation, in the outline mode, the objects may be rendered with one or more line attributes. In variations, the objects may be rendered with line attributes different from those provided in the default mode. In some variations, the rendering engine 120 renders the objects as frames, each object having the line stroke characteristics provided for the object in the default mode. Additionally, in other variations, the rendering engine 120 renders the objects as frames, with the line frame attributes being determined based on a particular type of rendering logic associated with the object. For example, the line frame attributes of a combined shape may be determined by the Boolean object combination logic used to form the combined shape.

[0046] Additionally, in some examples, the rendering engine 120 can operate in an outline mode to allow a user to access and edit an object that is overlaid by another object. In a default mode, the rendering engine 120 may occlude the superimposed object, and the overlaid object cannot be manipulated by the user while it is overlaid. In such a case, the user may have to take additional measures, such as selecting a specific layer of the occluded object, moving the foreground object to the back in a layer of the design interface, or spatially separating the two objects so that each can be edited. In contrast, in the described embodiment, the user can switch the rendering engine 120 to an outline mode to simultaneously view the foreground and background (or overlaid) objects, and still access and edit the background object. In this way, the rendering engine 120 allows a user to manipulate an object behind another object, even if the object would otherwise be occluded and inaccessible in the default mode.

[0047] Further, in an example, the rendering engine 120 can display bounding boxes for individual objects. Bounding boxes are object-specific and can be provided as features that allow a user to view the bounding object's attributes and manipulate the object (e.g., resize the object, reposition the object, align the object with another object, etc.). Bounding boxes can provide information about the object on the canvas, such as the coordinates of the object's center, the object's dimensions, the object's centerline and other references, and the object's alignment with other objects. Bounding boxes can also include features that can receive certain types of input to change the object's properties. For example, a bounding box can include handles that can receive input (e.g., click and drag) to change one or two dimensions of the object.

[0048] According to some examples, when in outline mode, rendering engine 120 may be operated to render boundary outlines of individual objects such that objects that are occluded or otherwise overlaid by other objects in default mode appear as bounded objects in outline mode, and a user may interact with the bounding boxes to view information about the objects and / or manipulate the objects.

[0049] methodology 2 illustrates a method for implementing an outline mode on a graphics application in accordance with one or more embodiments. The method as illustrated in the example of FIG. 2 may be implemented in a user computing device implementing an interactive graphic design application. Accordingly, reference may be made to elements of FIGS. 1A-1C to indicate appropriate components for performing the steps or sub-steps described.

[0050] Referring to FIG. 2, the IGDS 100 operates in a default mode, and the design interface includes an occluded object (210). As will be described with examples, the rendering engine 120 of the IGDS 100 can implement an alternative default mode and an outline mode. In the default mode, the rendering engine 120 can display the design interface with objects that include fill and line attributes. The rendering engine 120 can further implement any of several types of occlusion logic for obscuring objects or portions thereof during the course of a user editing the design interface where objects are specified to be overlaid, combined, layered, or otherwise obscured. The type and manner in which the occlusion logic may be used can be determined based on design input and selections by the user. In an example, the occlusion logic may include (i) overlay logic, where a front object overlays a back object and the back object is hidden as a result of its position relative to the front object (see, e.g., FIG. 3D); (ii) object combination logic, including Boolean object combination logic, where portions of one or more objects that are combined are hidden (see, e.g., FIG. 3A); (iii) clip logic, where portions of an object that extend outside of a container object are hidden or clipped from the viewed portion (see, e.g., FIG. 3G); and / or (iv) hidden designation logic, where individual objects on the canvas are selected by the user to be hidden. The rendering engine 120 may apply different types of occlusion logic (e.g., user selectable) when rendering the design interface.

[0051] The IGDS can operate in an outline mode, where the rendering engine 120 renders the objects of the design interface in outline form without occlusion (220). Thus, all objects present on the design interface are rendered in outline form without any object or part of it being obscured.

[0052] Additionally, when the IGDS 100 is operating in outline mode, the rendering engine 120 may implement features (222) that allow user interaction with objects that are not available in the default mode. For example, objects that are hidden in the default mode may be accessible to the user in the outline mode. For example, the user may directly interact with the outline form of any object that appears on the canvas 122, including objects that were hidden in the default mode. Thus, for example, if one object overlays (or is in front of) another object, the outline form of the underlying object (or object behind the foreground object) may receive user input that changes one or more attributes of that object. For example, the underlying object may be resized, repositioned, or have other attributes changed without the user having to take additional steps to access the underlying object as would otherwise be required in the default mode.

[0053] As another example, when the design interface is rendered in outline mode, a user can interact with a container object's outline form to view all objects that are partially contained within the container. Additionally, a collection of objects can be represented in a hierarchical node form, whereby selecting one node (e.g., a container object) identifies all nodes that are part of the selected node's subtree (e.g., objects that are contained or partially contained in the container object). For example, a user can hover or select a container object's outline form on the design interface to highlight the outline forms of other objects that are part of the container object or the container object's node's subtree. EXAMPLES

[0054] 3A and 3B show examples of a design interface provided by a rendering engine that can be switched between a default mode and an outline mode, according to one or more embodiments. In FIG. 3A, the design interface 300 is shown in a default mode, with shapes 302, 304, 306, and 308 rendered with fill and interior attributes. As shown, each of the combined shapes 302, 304, 306, and 308 rendered in the default mode is formed by combining a pair of similar or identical circular objects using a respective Boolean object combination logic. The combined shape 302 is formed by applying a union combination logic to a pair of overlapping circular objects. As a result, the exterior boundary of the combined shape consists of a composite of the constituent objects excluding any overlapping segments. As such, the union combination logic is also an example of occlusion logic.

[0055] Additionally, the combined shape 304 is formed by applying difference set combining logic to a pair of overlapping circular objects, which is another example of occlusion logic, where application of difference set combining logic removes areas attributable to one of the pair of objects (e.g., the foreground object).

[0056] The combined shape 306 is formed by applying intersection set combining logic to a pair of overlapping circular objects, which consists of overlapping portions of the pair of circular objects, and thus is also an example of occlusion logic.

[0057] Additionally, the combined shape 308 is formed by applying exclusionary set combining logic to a pair of overlapping circular objects, which shows only the non-overlapping portions of the pair of circular objects, with the overlapping portions being rendered as white space. Thus, the exclusionary set combining logic provides another example of occlusion logic.

[0058] FIG. 3B shows the design interface 300 rendered in outline mode. In outline mode, the outline form of a pair of circular objects 305 forming a combined shape is shown. The different object combination logic and / or occlusion logic used to form the combined shape 302, 304, 306, 308 does not affect the rendering of each pair of constituent objects forming the combined shape in outline form. Thus, a user can view the outline form of each object 305 forming one of the combined shapes 302, 304, 306, 308 without any occlusion effects that would otherwise hide parts of the object from the viewing portion in default mode. Thus, each of the constituent objects 305 forming one of the combined shapes 302, 304, 306, 308 can be directly accessed and edited by the user without the need to reposition the object to remove the occlusion effects of the other objects.

[0059] FIG. 3C illustrates an alternative implementation of the outline mode of the design interface shown in FIG. 3A, according to one or more embodiments. FIG. 3C illustrates an implementation in which the outline forms 312, 314, 316, 318 of the object 305 rendered on the canvas 122 have different attributes. For example, the outline forms 312, 314, 316, 318 can have different attributes of line thickness, line type, line color, corner or end attributes (e.g., cut corners, rounded ends, etc.), and other attributes. Additionally, the attributes of the outline forms 312, 314, 316, 318 can have multiple line attributes, such as an interior line, a line fill or pattern, and an exterior line. The example illustrated in FIG. 3C can be implemented, for example, by a user making a setting selection for the operation of the rendering engine 120. In some examples, a user can operate the IGDS 100 to view the design interface 300 in a default mode (see FIG. 3A), select to view the design interface 300 in outline mode (see FIG. 3B), or apply settings to view the design interface 300 in an alternative implementation shown in FIG. 3C.

[0060] In FIG. 3C, outline forms 312, 314, 316, 318 of each of the combined shapes 302, 304, 306, 308 are shown. Additionally, the outline forms 312, 314, 316, 318 may be combined with the outlines of the constituent objects 305. Additionally, the line characteristics of the combined shapes' outline forms 312, 314, 316, 318 may differ from the outlines of the respective constituent objects 305. For example, the line characteristics of the outline forms 312, 314, 316, 318 may differ in thickness, color, pattern, or other attributes from the outlines of the constituent objects 305. Additionally, the outline forms 312, 314, 316, 318 may include exterior and interior lines, and the exterior / internal lines may have different attributes of thickness, color, type, or corners / edges. Additionally, as shown in the example of FIG. 3C and described with other examples below, settings applied to the outline mode can provide outline forms 312, 314, 316, 318 that include attributes based on the bounds attributes of the combined shapes and constituent objects rendered in design mode.

[0061] 3D and 3E show examples of occluded objects being provided on a design interface rendered by the rendering engine 120 switched between a default mode and an outline mode, according to one or more embodiments. In FIG. 3D, the design interface 320 is shown in a default mode, with an object 322 shown to include interior attributes. Additionally, the occlusion logic applied by the rendering engine 120 in the default mode provides that the object 322 overlays and occludes another object 324. In the default mode, the overlaid object 324 may not be visible without further action on the part of the user. Additionally, the user may not be able to access and edit the occluded object without taking additional steps, such as removing the object 322.

[0062] 3E shows the design interface 320 rendered in outline mode. In outline mode, both objects 322, 324 are rendered as wireframes, allowing both objects to be viewed without occlusion. In the example, the overlaid object 324 is accessible for user input. Thus, for example, a user can manipulate the object 324 by changing its size, position or other attributes without having to take additional actions that would otherwise be required in the default mode (e.g., the user having to temporarily isolate the objects 322, 324 or select a particular layer to view the object 324 without the object 322).

[0063] FIG. 3F shows a variation of the design interface 320 rendered in outline mode. In the variation of FIG. 3E, bounding boxes 325, 327 of objects rendered on the design interface 320 are shown. Thus, in outline mode, the bounding box 325 of the overlaid object 324 can be viewed by the user along with the bounding box 327 of the object 322. The bounding box 325 provides information about the object 324, such as information indicating the size of the object, the centerline of the object, or the alignment of the object with other objects or reference points. Additionally, the bounding box 325 can include features (e.g., handles) with which the user can interact to change attributes (e.g., position, dimensions) of the object.

[0064] 3G and 3H show another example in which occluded objects are provided on a design interface 340 rendered by the rendering engine 120 switched between default and outline modes, according to one or more embodiments. In FIG. 3G, the occlusion logic applied by the rendering engine 120 includes clip logic such that a portion 346 of an object 345 that extends outside the boundary 341 of another object 342 is hidden or not visible, while a portion 344 that is within the boundary of the object 345 is visible.

[0065] 3H shows the design interface 340 rendered in outline mode, where the outline forms of objects 342 and 345 are rendered without occlusion. Thus, the partially occluded portion 346 of object 345 is rendered in outline form along with portion 344 and the outline form of object 342.

[0066] 3I and 3J show examples of the design interface in respective default and outline modes, illustrating an embodiment in which the attributes of the outline form may be based on or correlated to the border attributes of the respective objects in the default mode. In FIG. 3I, the design interface 350 is rendered in the default mode, with the objects 352, 354 having border and fill attributes. In the example, the border attributes of the objects 352, 354 include respective exterior lines 351, 357 and interior lines 353, 359. Further, as shown, the respective exterior lines 351, 357 and interior lines 353, 359 of the corresponding objects 352, 354 may include different line attributes, such as thickness, color, or line type. For example, the exterior lines 351, 357 of the objects 352, 354 are significantly thicker than the corresponding interior lines 353, 359.

[0067] FIG. 3J illustrates the design interface 350 rendered in outline mode. In the illustrated example, the outline forms 362, 364 are rendered to include the online-based line and border attributes as well as the border attributes of the corresponding objects 352, 354 rendered in the default mode. For example, the outline form 362 includes an exterior line 361 and an interior line 363, where the exterior line 361 has a greater line weight attribute than the interior line 363. Similarly, for the outline form 364, the exterior line 367 has a greater line weight than the interior line 369. Furthermore, as illustrated in the example of FIG. 3J, the exterior lines 361, 367 have a solid line type, while the interior lines 363, 369 have a dashed line type. The line type of the outline forms 362, 364 can indicate the line type or thickness of the border / line attributes of the corresponding objects 352, 354. In this manner, the border / line attributes of the outline forms 362, 364 may be based on the border and line attributes of the objects 352, 354 rendered in the default mode, in that the outline forms may include interior / exterior lines. Additionally, the attributes of the exterior lines 361, 367 and interior lines 363, 369 of the outline forms 362, 364 may correlate to or at least indicate the border / line attributes of the corresponding objects 352, 354.

[0068] Additionally, in variants, other types of border / line attributes of objects rendered in default mode may also be represented in the outline form, for example attributes identifying the shape of corners (e.g., rounded, tapered, etc.) may also be represented by the outline form of the object.

[0069] Figure 3K illustrates additional functionality that may be implemented by an integrated graphic design system for use in an outline mode of the IGDS 100, according to one or more embodiments. For context and explanation, the default mode of the design mode may be rendered according to other examples described elsewhere herein, such as those described and shown in Figures 3A, 3D, 3G, and 3I. Thus, in the default mode, some of the objects shown in Figure 3K may be fully or partially hidden.

[0070] Referring to FIG. 3K, the design interface 360 ​​is shown in outline mode displaying a collection of objects including container objects 370, 372, each of which contains a set of interior objects 373, 375. Additionally, the combined shape 368 is partially contained within the container object 370. In the default mode, only the portion of the combined shape 368 that is within the boundaries of the container object is viewable. In outline mode, the outline form of the combined shape 368 and / or the constituent objects can be seen. Additionally, a node tree representation 380 of the objects rendered on the design interface is shown, where the nodes can identify relationships between the objects. For example, the container object 370 can be represented by a node 371 having a subtree of nodes that includes all objects that are contained or partially contained within the container object 370.

[0071] In an example, a container object 370 may be selected to highlight objects contained or partially contained within the boundaries of the container object. Additionally or alternatively, a container object 370 may be selected to highlight all objects represented by node 371 and its subtree, where the nodes of the subtree correspond to nodes contained or partially contained within the container object 370. In such an example, the outline forms of container node 370, inner objects 373, and combined shape 368 are visually distinct (e.g., rendered with a different line color) from the outline forms of other objects, such as container object 372.

[0072] Network Computer System 4 illustrates a computer system on which one or more embodiments may be implemented. Computer system 400 may be implemented, for example, on a server or a combination of servers. For example, computer system 400 may be implemented as network computing system 150 of FIGS. 1A-1C.

[0073] In one implementation, computer system 400 includes processing resources 410, memory resources 420 (e.g., read only memory (ROM) or random access memory (RAM)), one or more instruction memory resources 440, and a communication interface 450. Computer system 400 includes at least one processor 410 for processing information stored with memory resources 420, such as provided by random access memory (RAM) or other dynamic storage device, to store information and instructions executable by processor 410. Memory resources 420 may also be used to store temporary variables or other intermediate information during execution of instructions executed by processor 410.

[0074] The communication interface 450 allows the computer system 400 to communicate with one or more user computing devices through the use of a network link 480 (wireless or wired) over one or more networks (e.g., a cellular network). Using the network link 480, the computer system 400 can communicate with one or more computing devices, special purpose devices and modules, and / or one or more servers.

[0075] In an example, the processor 410 may execute service instructions 422 stored with the memory resources 420 to enable the network computing system to implement the network service 152 and operate as the network computing system 150 in an example such as that described with reference to Figures 1A-1C.

[0076] Computer system 400 may also include additional memory resources ("instruction memory 440") for storing executable instruction sets ("IGDS instructions 444") embedded in web pages and other web resources to enable user computing devices to implement functionality as described in IGDS100.

[0077] As such, the examples described herein relate to the use of computer system 400 to perform the techniques described herein. According to one aspect, the techniques are performed by computer system 400 in response to processor 410 executing one or more sequences of one or more instructions contained in memory 420. Such instructions may be read into memory 420 from another machine-readable medium. Execution of the sequences of instructions contained in memory 420 causes processor 410 to perform the process steps described herein. In alternative implementations, hardwired circuitry may be used in place of or in combination with software instructions to implement the examples described herein. Thus, the examples described are not limited to any specific combination of hardware circuitry and software.

[0078] User Computing Device 5 illustrates a user computing device for use in one or more examples as described. In an example, the user computing device 500 may correspond to, for example, a workstation, a desktop computer, a laptop, or other computer system having suitable graphics processing capabilities for rendering design interfaces and enabling graphic design work. In a variant, the user computing device 500 may correspond to a mobile computing device such as a smartphone, a tablet computer, a laptop computer, a VR or AR headset device, etc.

[0079] In an example, computing device 500 includes a central or main processor 510, a graphics processing unit 512, memory resources 520, and one or more communication ports 530. Computing device 500 can use main processor 510 and memory resources 520 to store and launch a browser 525 or other web-based applications. A user can operate browser 525 to access a network site of network service 152 using communication port 530, whereupon one or more web pages or other resources 505 (see FIGS. 1A-1C) for network service 152 can be downloaded. Web resources 505 can be stored in active memory 524 (cache).

[0080] As described in various examples, the processor 510 can detect and execute scripts and other logic embedded in the web resources to implement the IGDS 100 (see FIGS. 1A-1C). In some examples, some of the scripts 515 embedded in the web resources 505 can include GPU accelerated logic executed directly by the GPU 512. The main processor 510 and the GPU can combine to render an editing design interface ("DIUE 511") on the display component 540. The rendered design interface can include web content from the browser 525 and design interface content and functional elements generated by the scripts and other logic embedded in the web resources 505. By including scripts 515 that can be executed directly on the GPU 512, the logic embedded with the web resources 505 can better execute the IGDS 100, as described in various examples.

[0081] conclusion Although the embodiments are described in detail herein with reference to the accompanying drawings, it should be understood that the concept is not limited to those exact embodiments. Therefore, it is intended that the scope of the concept be defined by the following claims and their equivalents. Furthermore, it is contemplated that a particular feature described individually or as part of an embodiment can be combined with other individually described features or parts of other embodiments, even if the other features and embodiments do not refer to the particular feature. Thus, the absence of a description of a combination should not exclude the right to such a combination.

Claims

1. 1. A network computer system comprising: a memory subsystem storing an instruction set; one or more processors operative to communicate said instruction set to one or more user devices; Equipped with The set of instructions, when executed by each of the one or more user devices, causes the user device to: Implement a rendering engine that can operate in at least default and outline modes and wherein in the default mode, the rendering engine renders a design interface including a plurality of objects that partially intersect with each other at appropriate locations to form a combined shape, in which at least one object of the plurality of objects is partially occluded according to the partial intersection; In the outline mode, the rendering engine is operable to render an outline of each of the plurality of objects and the combined shape rendered in the default mode. Network computer system.

2. The operation is Enabling a user to select a predetermined logic type from a plurality of possible logic types to form a combined shape wherein the combined shape is based at least in part on the selected logic type; In the outline mode, the outline of the combined shape is based at least in part on the selected logic type.

2. The network computer system of claim 1.

3. 2. The network computer system of claim 1, wherein the line drawing of the outline of each of the plurality of objects is different from the line drawing of the outline of the combined shape.

4. 3. The networked computer system of claim 2, wherein said plurality of possible logic types includes Boolean combinational logic.

5. 5. The network computer system of claim 4, wherein said Boolean combination logic comprises union combination, intersection combination, difference combination, or exclusion combination type logic.

6. 2. The network computer system of claim 1, wherein in the outline mode, the rendering engine is operable to render the outline of each of the plurality of objects without any of the plurality of objects being occluded.

7. A non-transitory computer-readable medium storing instructions, comprising: When executed by a computer system, the computer system: Implement a rendering engine that can operate in at least default and outline modes Execute an operation including In the default mode, the rendering engine is operable to render a design interface including a plurality of objects and apply occlusion logic to (i) occlude at least a portion of an object that intersects with another object, and (ii) prevent certain types of user interaction with portions of the object that are occluded; In the outline mode, the rendering engine is operable to render an outline of each of the plurality of objects without occlusion and to allow the types of user interaction with portions of the objects that are occluded in the default mode. Non-transitory computer-readable medium.

8. The non-transitory computer-readable medium of claim 7 , wherein in the outline mode, the rendering engine is operable to render bounding boxes of objects that are occluded by occlusion logic.

9. 9. The non-transitory computer-readable medium of claim 8, wherein in the outline mode, the rendering engine is operable to allow a user to interact with the bounding box of a given object of the plurality of objects that is occluded by the occlusion logic.

10. The non-transitory computer-readable medium of claim 7 , wherein the instructions are received from a networked computer system.

11. 1. A computer-implemented method comprising: rendering a design interface in a default mode, the design interface including a plurality of objects that at least partially intersect one another, and rendering the design interface in the default mode including occluding at least a portion of one or more of the plurality of objects according to at least first occlusion logic; responsive to user input, rendering the design interface in outline mode by rendering at least a portion of each of the plurality of objects as a combined shape without occlusion; 11. A computer-implemented method comprising:

12. The computer-implemented method of claim 11, wherein the combined shape is based on wireframes of the plurality of objects.

13. The computer-implemented method of claim 12, wherein rendering at least the portion of each of the plurality of objects in the outline mode is performed without rendering any fill characteristics of any of the plurality of objects.

14. In the default mode, the method further comprises preventing types of user interaction with portions of the one or more objects that are occluded; In the outline mode, the method further comprises enabling the types of user interaction with portions of the one or more objects that are occluded in the default mode.

12. The computer-implemented method of claim 11.

15. 12. The computer-implemented method of claim 11, wherein in the default mode, the method further comprises applying one of a plurality of types of occlusion logic to occlude at least a portion of one or more objects of the plurality of objects.

16. 12. The computer-implemented method of claim 11, wherein applying the first occlusion logic comprises applying object combination logic, the object combination logic forming the combined shape from two or more objects by at least partially occluding at least one object of the two or more objects.

17. The computer-implemented method of claim 15 , wherein the multiple types of occlusion logic include logic for one object to overlay another object to form the combined shape.

18. The method comprises: allowing a user to select a predetermined logic type from the plurality of types of occlusion logic to form a combined shape; wherein the combined shape is based at least in part on the selected logic type; In the outline mode, the outline of the combined shape is based at least in part on the selected logic type.

16. The computer-implemented method of claim 15.

19. 20. The computer-implemented method of claim 18, wherein the multiple types of occlusion logic include Boolean combinatorial logic including one or more of union set combinatorial logic, intersection set combinatorial logic, difference set combinatorial logic, or exclusion set combinatorial type logic.

20. 20. The computer-implemented method of claim 18, wherein the line drawing of the outline of each of the plurality of objects is different from the line drawing of the outline of the combined shape.

Images