Automatic Widget Code Generation from Design Objects

Abstract

A network computer system provides a graphic application for a user device operated by a user. The network system can receive an input that identifies a design object, and further generate design programming logic that creates the design object when executed via the graphic application. This network computer system can also receive an input that identifies operation programming logic that describes one or more interactions with the design object. This network computer system can generate widget programming logic for a widget object based on the design programming logic and operation programming logic that, when executed, creates an instance of the widget object within the context of the graphic application. In an example, an instance of the widget object includes one or more interactions with an instance of the design object.

Description

Related Applications

[0001] This application claims the benefit of priority to each of (i) U.S. Patent Application No. 18 / 142,453, filed May 2, 2023, and (ii) U.S. Provisional Patent Application No. 63 / 338,405, filed May 4, 2022, and the above-referenced priority applications are hereby incorporated by reference in their entirety.

Technical Field

[0002] The examples described herein relate to a collaboration environment, and more particularly, to automatic widget code generation from design objects.

Background Art

[0003] Software design tools come in many forms and uses. For example, in the field of application user interfaces, software design tools require designers 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. Widgets on the application's user interface enable user interaction with the user interface. For example, widgets can include buttons, scroll functions, hover-over elements, and other selectable objects on the user interface that co-create the user experience.

Summary of the Invention

[0004] Examples include a network computer system that automatically generates widget code from design objects by way of one or more examples. This network computer system enables an interactive graphic application platform for design and / or collaboration. This interactive graphic application platform can include, for example, a design application that enables a user to create, display, and / or modify design objects, and / or a whiteboard application that enables a user to create interactive and / or visual content on a whiteboard environment or similar collaboration medium. Widgets can be implemented in such graphic applications to enable the use of objects that include both functionality and design elements. Although numerous examples are described in the context of a whiteboard application (or whiteboard application service), in variations, the examples as described can be implemented for alternative graphic applications such as a design application (or design application service).

[0005] Widgets may have a design surface that can be rendered on a canvas (e.g., a whiteboard used in a whiteboard application). Also, widgets may have an interactive aspect that responds to user input from a series of users. The interactive widget object can be described by executable widget programming logic. When the widget programming logic is executed, an instance of the widget object is rendered on a whiteboard or other collaboration medium of a whiteboard application. The examples described further provide that the widget object is persistent and dynamically responds to different types of user input.

[0006] In an example, a network computer system automatically generates at least a portion of widget programming logic for a widget object based on a design object. For example, in response to input from a graphic application (e.g., a whiteboard application) that identifies a design object created using a design application, the network computer system can generate design programming logic that creates the design object, such as by rendering the design object on a whiteboard or canvas. The network computer system can receive action programming logic that describes one or more interactions with the design object in the graphic application. The network computer system generates widget programming logic based on the design programming logic (e.g., design programming logic automatically generated based on a selected design object) and the action programming logic (e.g., action programming logic input by a user in a whiteboard application). In some examples, the widget programming logic includes JavaScript code and / or React code.

[0007] According to an example, a network computer system operates to provide a design application for creating a design interface on one or more first user devices operated by one or more first users. The network computer system holds design workspace data that describes a design interface including design objects created by one or more first users using the design application. The network computer system provides a whiteboard application to a second user device operated by a second user. The network computer system receives, from the second user device via the whiteboard application, an input that identifies design objects created by one or more first users. In response to the input that identifies a design object, the network computer system generates design programming logic that, when executed, creates the design object. The network computer system receives, from the second user device, operation programming logic that describes one or more interactions with the design object. The network computer system generates widget programming logic for a widget object based on the design programming logic and the operation programming logic. When the operation programming logic is executed on a user computer device, the user computer device creates an instance of the widget object on a whiteboard of a collaboration environment. The instance of the widget object includes an instance of the design object and implements one or more interactions with a series of users accessing the whiteboard.

[0008] In an example, the network computer system provides design programming logic corresponding to a design object selected from a second user device to the second user device in an editing interface. In the example, the editing interface enables a user of the second user device to input additional programming into the editing interface. For example, the user of the second user device can modify the design programming logic and / or add operation programming logic. In some examples, the editing interface is provided as an instance of an editing interface object rendered on a first whiteboard in a first collaboration environment.

[0009] In an example, an input for identifying a design object created using a design application includes reference programming logic that identifies the design object by reference. For example, the reference programming logic can be input by a second user in an editing interface provided to an instance of an editing interface object rendered on a first whiteboard in a first collaboration environment.

[0010] In an example, the network computer system maintains a widget data store and stores widget programming logic associated with a widget object. An instance of the widget object can be added to one or more whiteboards using the widget programming logic stored in association with the widget object. In some examples, in response to an input from a second user (e.g., a user who creates a widget object by identifying a design object and providing operation programming logic) selecting a widget object in relation to a first whiteboard of a first collaboration workspace for a first plurality of users, the network computer system creates a first instance of the widget object on the first whiteboard.

[0011] In some examples, a network computer system provides a whiteboard application to a third user device (e.g., a user different from the user who created the widget object) for the third user to operate. In response to an input from the third user selecting a widget object in relation to the second whiteboard, the network computer system creates a second instance of the widget object on the second whiteboard.

[0012] In some examples, a network computer system maintains collaboration workspace data for a whiteboard in a collaboration environment. The collaboration workspace data includes state information of instances of widget objects across multiple users.

[0013] In some examples, a network computer system is provided that includes memory resources storing an instruction set. The network computer system includes one or more processors operable to communicate the instruction set to a plurality of user devices. In an example, the instruction set includes design application instructions corresponding to a design application and whiteboard application instructions corresponding to a whiteboard application. The design application instructions may be communicated to a first set of user computer devices. The first set of user computer devices implement a design application that executes the design application instructions to create and / or modify a design interface. The whiteboard application instructions may be communicated to a second set of user computer devices. The second set of user computer devices execute a whiteboard application that executes the whiteboard application instructions to enable collaboration using a whiteboard or other collaboration medium.

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

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

[0016] Some embodiments described herein may generally require the use of a computer device that includes processing resources and memory resources. For example, one or more embodiments described herein can be implemented, in whole or in part, on a computer device such as a server, desktop computer, mobile phone or smartphone, tablet, wearable electronic device, laptop computer, printer, digital picture frame, network device (e.g., router), and tablet device. All memory, processing, and network resources can be used in connection with the establishment, use, or execution of any embodiment described herein (including the execution of any method or the implementation of any system).

[0017] Furthermore, one or more embodiments described herein may be implemented by instructions executable by one or more processors. These instructions may be carried on a computer-readable medium. The machines shown or described in the following figures provide examples of processing resources and computer-readable media on which instructions for implementing embodiments of the present invention may be carried and / or executed. In particular, many of the machines shown in 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 the hard drive of a personal computer or server. Other examples of computer storage media include portable storage devices such as CD and DVD units, flash memory (such as that incorporated in smartphones, multifunction devices, and / or tablets), and magnetic memory. Computers, terminals, network-enabled devices (e.g., mobile devices such as mobile phones) are all examples of machines and devices that utilize processors, memory, and instructions stored on computer-readable media. In addition, embodiments may be implemented in the form of a computer program, or a computer-usable carrier medium capable of carrying such a program.

Brief Description of the Drawings

[0018]

Figure 1

Figure 2

Figure 3

Figure 4

Modes for Carrying Out the Invention

[0019] System Overview Figure 1 shows a network computer system that automatically generates widget code from design objects according to one or more examples. A network computer system as described in the example of Figure 1 can be implemented using one or more servers that communicate with user computer devices via one or more networks. In the example, the network computer system 150 performs operations to enable an Interactive Collaboration Application Platform (“ICAP”) to be implemented on user computer devices 30, 50. In the example, ICAP enables one or more user computer devices 30, 50 to utilize one or more network services 152 for design and / or collaboration.

[0020] The network service 152 can include (i) a design application service 20 and (ii) a whiteboard application service 40. The design application service 20 and the whiteboard application service 40 may be provided by the same server or by different servers. The design application service 20 and the whiteboard application service 40 may utilize the same, different, or overlapping computers and / or computing resources. In the example, the design application service 20 and the whiteboard application service 40 are separate services, and the design application 32 and the whiteboard application 52 are separate applications. The design application service 20 and the whiteboard application service 40 can provide their respective functions to different sets of user computer devices 30, 50, which may or may not overlap.

[0021] In an example, the design application 32 and / or the whiteboard application 52 are implemented as one or more web applications. For example, the design application 32 and / or the whiteboard application 52 may be implemented as web applications that run in a browser application. The browser applications running on each user computer device 30, 50 can obtain and execute scripts, code, and / or other logic for implementing one or more processes of the design application 32 and / or the whiteboard application 52. The browser application can include any program that accesses web content over a network, such as using the Hypertext Transfer Protocol (HTTP) to access information resources on the Internet. In some examples, the browser application is a commercially available browser application such as, but not limited to, Google Chrome (trademark, developed by Google Inc.), Safari (trademark, developed by Apple Inc.), and Edge (trademark) / Internet Explorer (trademark, developed by Microsoft Corporation). Additionally or alternatively, the design application 32 and / or the whiteboard application 52 may be implemented as native applications developed for use on a particular platform such as, but not limited to, Linux (registered trademark), Android (trademark), Windows (registered trademark), and / or another platform.

[0022] In some examples, the user computer devices 30, 50 obtain some or all of the program resources for implementing the design application 32 and / or the whiteboard application 52 from a network site that runs the corresponding network service 152. Additionally or alternatively, the design application 32 and / or the whiteboard application 52 may access some or all of the program resources from a local source (e.g., local memory present with the user computer devices 30, 50 and / or persistent memory of the user computer devices 30, 50).

[0023] When the design application 32 and / or the whiteboard application 52 are run in a browser application, one or more processes of the design application 32 and / or the whiteboard application 52 can be implemented as web code such as HTML, JavaScript, Cascading Style Sheets (CSS), other scripts, and / or other embedded code that the browser application downloads from a network site. For example, the browser application can execute web code embedded within a web page and cause the design application 32 and / or the whiteboard application 52 to be run within the browser application of the user computer devices 30, 50. The web code can also cause the browser application to execute and / or obtain other scripts and program resources (e.g., libraries) from the network site and / or other local or remote locations.

[0024] The design application service 20 and the whiteboard application service 40 may be provided by the same server or by different services, and may utilize the same, different, or overlapping computing resources. In the example, the design application service 20 and the whiteboard application service 40 are separate services, and the design application 32 and the whiteboard application 52 are separate applications. Therefore, the design application service 20 and the whiteboard application service 40 can provide separate functions and configurations. The design application service 20 and the whiteboard application service 40 can provide their respective functions to different sets of user computer devices 30, 50, which may or may not overlap.

[0025] Design Application Service In the example, the design application service 20 enables a user to create, display, and / or modify a design interface 37. The design interface 37 can include any layout of content and / or interactive elements, such as, but not limited to, web pages and / or user interfaces. The design interface 37 can include one or more design objects 38. The design object 38 can include a web page, a user interface, or any component thereof. The design workspace data 24 refers to data that describes a design interface 37 that can be loaded by the design application 32. The network computer system 150 holds the design workspace data 24 for each design interface 37 in the design workspace data store 22. When a particular design interface 37 includes a design object 38, the corresponding design workspace data 24 includes design object data 26 that describes the design object 38 belonging to the design interface 37. In the example, the user computer device 30 accesses the design application service 20 to initiate a session of the design application 32.

[0026] In an example, the network computer system 150 includes a design workspace data store 22 that stores design workspace data 24 for one or more design interfaces 37. When a design application 32 running on a user computer device 30 loads a design interface 37, the design application service 20 provides the corresponding design workspace data 24 to the user computer device 30. Alternatively or additionally, the design workspace data 24 may be temporarily stored or persisted on the user computer device 30. For example, a local copy of the design workspace data 24 may be held in memory during the runtime of the design application 32. Alternatively or additionally, a persistent local copy of the design workspace data 24 may be held on the user computer device 30.

[0027] In an example, the design application 32 includes a rendering engine 34. The rendering engine 34 is configured to render a design interface 37 that includes one or more design objects 38 on a canvas 36 that is displayable on a display device associated with the user computer device 30. For example, when the design application 32 is run as a browser application, the design interface 37 and the design objects 38 are rendered using program resources associated with the browser application (e.g., on an HTML 5.0 canvas).

[0028] In an example, the design application service 20 updates the design workspace data 24 based on actions performed in the design application 32 by a corresponding user. In an example, the design application service 20 updates and synchronizes the design workspace data 24 across multiple user computer devices 30, such as when multiple users access the design interface in instances of the design application 32 running on the multiple user computer devices 30. Thereby, the design application service 20 can enable collaboration on the design interface 37 by multiple users of the multiple user computer devices 30.

[0029] One or more examples of the design application 32 and / or the design application service 20 are described in U.S. Patent Application No. 16 / 682982, filed on November 13, 2019, entitled "System and method for implementing design system to provide preview of constraint conflicts", the entire content of which is incorporated herein by reference as if fully set forth herein.

[0030] Whiteboard Application Service In the example, the whiteboard application service 40 enables a user to create interactive and / or visual content on a whiteboard 56 or other collaboration media. The whiteboard 56 is a collaboration media that includes visual and / or interactive content and enables a group of multiple users on multiple user computer devices 50 to share ideas. The whiteboard application service 40 can support the execution of the whiteboard application 52 on the corresponding user computer device 50. In the example, the user computer device 50 accesses the whiteboard application service 40 to start a session of the whiteboard application 52 and create, display, modify, and / or interact with the whiteboard 56 or other collaboration media in other ways.

[0031] Collaboration workspace data 44 refers to data that describes a whiteboard 56 or other collaboration medium that can be loaded by a whiteboard application 52. The network computer system 150 holds the collaboration workspace data 44 for each whiteboard 56 in a collaboration workspace data store 42. In the example, the network computer system 150 includes a collaboration workspace data store 42 that stores collaboration workspace data 44 for one or more whiteboards 56. When a whiteboard application 52 running on a user computer device 50 loads a whiteboard 56, the whiteboard application service 40 provides the corresponding collaboration workspace data 44 to the user computer device 50. Alternatively or additionally, the collaboration workspace data 44 may be temporarily stored and / or persisted on the user computer device 50. For example, a local copy of the collaboration workspace data 44 may be held in memory during the runtime of the whiteboard application 52. Alternatively or additionally, a persistent local copy of the collaboration workspace data 44 may be held on the user computer device 50.

[0032] In the example, the whiteboard application 52 includes a rendering engine 54. The rendering engine 54 is configured to render a whiteboard 56 that can be displayed on a display device associated with the user computer device 50. For example, when the whiteboard application 52 is executed as a browser application, the whiteboard 56 is rendered using program resources associated with the browser application (e.g., on an HTML 5.0 canvas).

[0033] In the example, the whiteboard application service 40 updates the collaboration workspace data 44 based on actions performed by a corresponding user in the whiteboard application 52. In the example, the whiteboard application service 40 updates and synchronizes the whiteboard 56 across multiple user computer devices 50, such as when multiple users are accessing the whiteboard in instances of the whiteboard application 52 running on the multiple user computer devices 50. Thereby, an instance of the application service 40 can enable collaboration on the whiteboard 56 by multiple users of the multiple user computer devices 50.

[0034] One or more of the whiteboard application 52 and / or the whiteboard application service 40 are described in U.S. Provisional Patent Application No. 63 / 236,645, titled "Integrated Application Platform to Implement Widgets," filed on August 24, 2021, the entire content of which is incorporated herein by reference as if fully set forth herein.

[0035] Widget Programming Logic A widget or widget object is an interactive object that can be added to a whiteboard 56 or other collaboration environment. The widget object can be created by a third party such as an operator of the network computer system 150, and / or a user of the whiteboard application 52, a third party developer, a third party organization, or other third parties. The widget object is defined by widget programming logic 64 that may include executable code that provides the functionality of the widget. The widget object may be integrated with one or more whiteboards 56, whiteboard applications 52, and / or whiteboard application services 40, as described in more detail herein.

[0036] Widgets may have a design surface that can be rendered on a whiteboard 56. Widgets may also have an interactive aspect that responds to user input from a series of users. For example, a widget may be programmed to perform one or more interactions with one or more users of the whiteboard 56. The interactive aspect of a widget may be associated with one or more design surfaces of the widget. For example, an exemplary widget may include a design surface such as a displayed number or button. An interactive aspect of an exemplary widget may include incrementing a number displayed to all users of the whiteboard 56 when any user of the whiteboard 56 clicks a button. In some examples, the widget programming logic 64 of a widget includes (i) design programming logic 60 that defines the design surface of the widget, and (ii) action programming logic 62 that defines the interactive aspect of the widget. In the above example of a widget, the design programming logic 60 defines the appearance of the button and the displayed number, and the action programming logic can define the handling of a button click by a corresponding user and the incrementing of the number displayed in response to that click. In some examples, the widget programming logic 64 includes JavaScript code and / or React code. When the widget programming logic 64 of a widget object is executed in the context of the whiteboard 56, an instance of the widget object (e.g., widget object instance 70) is rendered on the whiteboard 56 based on the design programming logic 60.

[0037] When the widget programming logic 64 of the widget object is executed in the context of the whiteboard 56, an instance of the widget object (e.g., widget object instance 70) is rendered on the whiteboard 56. When the design programming logic 60 is automatically generated based on the selected design object 38, the rendering of the widget object instance 70 is the display of the design object 38. For example, a user of the whiteboard application 52 can select a widget object to add to a specified whiteboard 56, execute the associated widget programming logic 64, and generate a widget object instance 70 on the specified whiteboard 56 that includes the display of the design object 38 on which the widget object is based.

[0038] The whiteboard application service 40 can provide an input interface that enables a user of the whiteboard application 52 to create and / or modify a widget object, such as by creating and / or modifying the widget programming logic 64 corresponding to the widget object. In some examples, the input interface enables the user to upload the widget programming logic 64. Additionally or alternatively, the input interface enables the user to load, input, and / or edit the widget programming logic 64. For example, the input interface may enable the user to load existing widget programming logic 64 from the widget data store 68 of the network computer system 150 or another source. The network computer system 150 can store the widget programming logic 64 associated with a widget object in the widget data store 68 or another location.

[0039] In the example, the widget object is associated with one or more resources provided by a third party external to the network computer system 150. Alternatively or additionally, one or more widget object resources can exist on the network computer system 150, such as in the widget data store 68. The resources of each widget object can include data and / or widget programming logic 64, such as scripts, code, and / or other executable instructions. For a given object widget, the widget data store 68 can include (i) transactions and distribution logic that are communicated to the user computer device 50 in response to one or more given events (e.g., user interactions), and (ii) that are executed by the widget runtime component 80 of the rendering engine 54 in response to that given event. In the example, the widget programming logic 64 includes (i) design programming logic 60 initially provided by the network computer system 150 to render a widget object instance 70 on the whiteboard 56, and (ii) action programming logic 62 embedded in the whiteboard 56 so as to be triggerable by user interactions and / or other given events that may occur with respect to the whiteboard 56.

[0040] After a widget object is created, the widget object can be used to generate a widget object instance 70 on one or more whiteboards 56. The widget object can be made available to a set of users. In some examples, the creator of the widget object can control the users to whom the widget object is made available. Alternatively or additionally, the widget object may be made available to all users of the whiteboard application 52.

[0041] The whiteboard application service 40 can communicate with the user computer device 50 one or more portions of the widget programming logic 64 at once or at different times, such as at an initial time when the widget object instance 70 is first rendered or at a subsequent time after a user interaction with the widget object instance 70 is detected. In an example, the widget programming logic 64 can be copied and / or saved to a cache or other local resource, and in a subsequent instance, the widget runtime component 80 can be made to search for the widget programming logic 64 from the local resource rather than from the network computer system 150.

[0042] In an example, the whiteboard application service 40 provides the user of the whiteboard application 52 with a selection of widgets as a widget library, thereby enabling the user to access a collection of widgets. The user is provided access to a particular set of widgets based on the permissions of the corresponding user account. In some examples, the network computer system 150 implements a widget library, marketplace, or other collection. The user is provided with browsing and / or search functionality for finding and selecting individual widgets for use on the whiteboard 56.

[0043] Automatic Widget Code Generation In the example, the network computer system 150 automatically generates at least a part of the widget programming logic 64 that defines widget objects based on the design object 38. The network computer system 150 can generate the widget programming logic 64 by providing executable code that causes the generation of the widget programming logic 64 in client devices (e.g., user computer device 30, user computer device 50). Alternatively or additionally, the network computer system 150 may locally generate the widget programming logic 64. In the example, the widget programming logic 64 is generated for the design object 38 selected through the design application 32. Alternatively or additionally, the widget programming logic 64 may be generated for the design object 38 selected through the whiteboard application 52. The examples shown below are non-limiting examples of the automatic generation of the widget programming logic 64.

Example

[0044] Design Plug-in for Automatically Generating Widget Code in Design Applications For example, to automatically generate widget code using the design application 32, the design application 32 can provide a design code plugin interface 35 that enables a user of the whiteboard application 52 to select a design object 38. The selected design object 38 can be a design object 38 belonging to the design workspace data 24 currently loaded in the design application 32, or another design object belonging to other design workspace data 24 stored in the design workspace data store 22.

[0045] In the example, the design code plugin interface 35 is a user interface of a design code plugin that processes design object data 26 corresponding to a selected design object 38 to generate design programming logic 60 for creating the design object 38. When the design programming logic 60 is executed in the context of the whiteboard 56, the display of the design object 38 is rendered on the whiteboard 56. In the example, the design programming logic 60 is provided by the design code plugin through the design code plugin interface 35. For example, the design programming logic 60 can be presented as text that can be copied for use by a developer.

[0046] Automatic Generation of Widget Code in Whiteboard Applications As an alternative or in addition, to automatically generate widget code using the whiteboard application 52, the whiteboard application 52 can provide an input interface that allows a user of the whiteboard application 52 to select a design object 38 created using the design application 32 and / or the design application service 20. The design object 38 may be stored as design object data 26 in a design workspace data store 22 within a network computer system 150 that provides both the design application service 20 and the whiteboard application service 40. As an alternative or in addition, the design object 38 may be created and / or stored in a network system different from the network computer system 150 that provides the whiteboard application service 40.

[0047] In response to an input that identifies a design object 38, the network computer system 150 generates design programming logic 60 that creates the design object 38. When the design programming logic 60 is executed in the context of the whiteboard 56, a display of the design object 38 is rendered on the whiteboard 56.

[0048] The network computer system 150 receives from the whiteboard application 52, action programming logic 62 that describes one or more interactions with the design object 38. For example, the whiteboard application service 40 can provide an input interface that enables a user of the whiteboard application 52 to input the action programming logic 62.

[0049] The network computer system generates widget programming logic 64 based on the design programming logic 60 (e.g., design programming logic 60 automatically generated based on a selected design object) and the action programming logic 62 (e.g., action programming logic 62 input by a user of the whiteboard application 52). In some examples, the widget programming logic 64 includes JavaScript code and / or React code.

[0050] In an example, the network computer system 150 implements an editing interface 58. The editing interface is an input interface that enables a user of the whiteboard application 52 to display, modify, and / or create widget programming logic. In the example, the whiteboard application service 40 provides the editing interface 58 as an interactive object within the whiteboard 56 that can be accessed by the user through the whiteboard application 52. For example, the network computer system 150 can implement an editing interface object that can be added to the whiteboard 56 as an interactive component that can be rendered by the rendering engine 54.

[0051] In an example, after the network computer system 150 automatically generates design programming logic 60 based on the design object 38, the whiteboard application service 40 provides the design programming logic 60 to the user through the editing interface 58 via the whiteboard application 52. In the editing interface 58, the user can input additional programming into the editing interface 58. For example, the user can modify the design programming logic 60 and / or add operation programming logic 62 to complete the widget programming logic 64 required to fully define the widget object.

[0052] In an example, the user inputs into the editing interface 58 an input that identifies the design object 38. For example, the user can input reference programming logic that identifies the design object 38 by reference. For example, the reference can include a uniform resource locator (URL) of the design object data 26 corresponding to the design object 38.

[0053] Methodology Figure 2 shows an exemplary method for automatically generating widget code from a design object according to one or more embodiments. Process 200 may be performed by one or more computer devices and / or processes thereof. For example, one or more blocks of process 200 may be performed by a network computer system (e.g., network computer system 150).

[0054] In block 210, the network computer system provides a design application for creating a design interface on one or more first user devices operated by one or more first users.

[0055] In block 220, the network computer system maintains design workspace data that describes a design interface including design objects created by one or more first users using the design application.

[0056] In block 230, the network computer system provides a whiteboard application on a second user device operated by a second user. In the example, the whiteboard application is different from the design application.

[0057] In block 240, the network computer system receives an input that identifies a design object created by one or more first users. In the example, the input that identifies a design object created using the design application includes reference programming logic that identifies the design object by reference. In some examples, the input that identifies the design object is received from the second user device through the whiteboard application. Alternatively or additionally, the input that identifies the design object may be received via a design code plugin interface of a design code plugin.

[0058] In block 250, in response to an input that identifies a design object, the network computer system generates design programming logic that, when executed, creates the design object. In an example, the network computer system provides the design programming logic to a second user device at an editing interface. For example, the editing interface is provided as an instance of an editing interface object rendered on a first whiteboard of a first collaboration environment.

[0059] In block 260, the network computer system receives action programming logic that describes one or more interactions with the design object. In an example, the additional programming logic includes input from a second user on a second user device at an editing interface, such as, but not limited to, an editing interface provided as an instance of an editing interface object rendered on a first whiteboard of a first collaboration environment.

[0060] In block 270, the network computer system generates widget programming logic for a widget object based on the design programming logic and the action programming logic that, when executed, creates an instance of the widget object on a whiteboard of the collaboration environment, and the instance of the widget object includes an instance of the design object and one or more interactions. In an example, the widget programming logic includes JavaScript code and / or React code.

[0061] In an example, the network computer system creates a first instance of a widget object on a first whiteboard in response to an input from a second user selecting the widget object in relation to the first whiteboard of a first collaborative workspace for a first plurality of users. The network computer system can hold first collaborative workspace data including state information of the first instance of the widget object across the first plurality of users.

[0062] In the example, the network computer system provides a whiteboard application to a third user device operated by a third user and creates a second instance of the widget object on a second whiteboard in response to an input from the third user selecting the widget object in relation to the second whiteboard.

[0063] Network Computer System FIG. 3 shows a computer system on which one or more embodiments can be implemented. The computer system 500 can be implemented, for example, on a server or a combination of servers. For example, the computer system 500 may be implemented as a network computer system (e.g., network computer system 150).

[0064] In one implementation, computer system 500 includes processing resources 510, memory resources 520 (e.g., read-only memory (ROM) or random access memory (RAM)), one or more instruction memory resources 540, and a communication interface 550. Computer system 500 includes at least one processor 510 for processing information stored by memory resources 520, such as provided by a random access memory (RAM) or other dynamic storage device that stores information and instructions executable by processor 510. Memory resources 520 may also be used to store temporary variables or other intermediate information during execution of instructions by processor 510.

[0065] Communication interface 550 enables computer system 500 to communicate with one or more user computer devices via one or more networks (e.g., a cellular network) through the use of network link 580 (wireless or wired). Computer system 500 can communicate using network link 580 with one or more computer devices, dedicated devices and modules, and / or one or more servers.

[0066] In an example, processor 510 may execute service instructions 522 stored in memory resources 520 to enable the network computer system to implement network service 152 and operate as network computer system 150 as described with respect to FIGS. 1 - 3.

[0067] Computer system 500 can also include additional memory resources (e.g., instruction memory 540) for storing executable instruction sets (e.g., design application instructions 545, widget application instructions 546) embedded in web pages and other web resources so that a user computer device can implement functions as described for design application 32 and / or whiteboard application 52. In the example, computer system 500 can communicate design application application instructions 545 and / or widget application instructions 546 to user computer devices 30, 50.

[0068] Thus, the examples described herein relate to the use of computer system 500 for implementing the techniques described herein. According to one aspect, the techniques are performed by computer system 500 in response to a processor 510 executing one or more sequences of one or more instructions included in a memory 520. Such instructions may be read into memory 520 from another machine-readable medium. Execution of the instruction sequences included in memory 520 causes processor 510 to perform the process steps described herein. In alternative embodiments, hardwired circuitry may be used in place of, or in combination with, software instructions to implement the examples described herein. Accordingly, the described examples are not limited to any particular combination of hardware circuitry and software.

[0069] User Computer Device FIG. 4 shows a user computer device for use in one or more examples, as described. In an example, user computer device 600 can correspond to, for example, a workstation, desktop computer, laptop, or other computer system having graphic processing capabilities suitable for enabling rendering of design interfaces and graphic design work. In a variant, user computer device 600 can correspond to a mobile computer device such as a smartphone, tablet computer, laptop computer, VR or AR headset device.

[0070] In an example, computer device 600 includes a central or main processor 610, a graphics processing unit 612, memory resources 620, and one or more communication ports 630. Computer device 600 can use main processor 610 and memory resources 620 to store and launch browser 625 or other web-based applications. A user can operate browser 625 to access, using communication port 630, a network site of network service 152 and download one or more web pages or other web resources 605 for network service 152 (see FIGS. 1 - 3). Web resources 605 can be stored in active memory 624 (cache).

[0071] As described by various examples, the processor 610 can detect and execute scripts and other logic embedded in web resources to implement the ICAP100 (see FIGS. 1-3). In some of the examples, some of the scripts 615 embedded in the web resource 605 can include GPU accelerated logic that is directly executed by the GPU 612. Combining the main processor 610 and the GPU, a design interface (e.g., design interface 37) and / or a whiteboard (e.g., whiteboard 56) can be rendered on the display component 640. The rendered design interface can include web content from the browser 625, as well as design interface content and functional elements generated by scripts and other logic embedded in the web resource 605. By including scripts 615 that are directly executable on the GPU 612, the logic embedded in the web resource 605 can better execute the ICAP100, as described in the various examples.

[0072] Conclusion It should be understood that although examples are described in detail herein with reference to the accompanying drawings, the concepts are not limited to these detailed examples. Accordingly, it is intended that the scope of the concepts be defined by the following claims and their equivalents. Additionally, specific features described individually or as part of an example can be combined with other individually described features or parts of other examples, even if the other features and examples do not refer to that specific feature. Therefore, just because there is no description of a combination should not preclude having rights to such a combination.

Description of Reference Numerals

[0073] 20 Design Application Service 22 Design Workspace Data Store 24 Design Workspace Data 26 Design Object Data 30 User Computer Service 32 Design Application 34 Rendering Engine 35 Design Code Plug-in Interface 36 Canvas 37 Design Interface 38 Design Object 40 Whiteboard Application Service 42 Collaboration Workspace Data Store 44 Collaboration Workspace Data 50 User Computer Device 52 Whiteboard Application 54 Rendering Engine 56 Whiteboard 58 Editing Interface 60 Design Programming Logic 62 Operation Programming Logic 64 Widget Programming Logic 68 Widget Data Store 70 Widget Object Instance 72 Widget Object Instance State Data 80 Widget Runtime Component 150 Network Computer System 152 Network Service 510 Processor 520 Memory Resource 522 Service Instruction 540 Instruction Memory 545 Design Application Instruction 546 Whiteboard Application Instruction 550 Communication Interface 580 Link 600 User computer device 605 Web resource 610 Processor 612 GPU 615 Script 620 Application memory 624 Active memory 625 Browser 630 Communication port 640 Display component

Claims

1. In a network computer system, One or more processors, and When executed on one or more of the aforementioned processors, To provide a design application for creating a design interface on one or more first user devices operated by one or more first users. To maintain design workspace data that describes a design interface including design objects created by one or more first users using the design application, To provide a whiteboard application to a second user device operated by a second user. Receiving input that identifies the design object created by one or more first users, In response to an input that identifies the aforementioned design object, generate design programming logic that defines one or more design surfaces of a widget object. To receive behavioral programming logic that defines one or more interactive aspects of the widget object, and Based on the design programming logic and the behavior programming logic, the widget programming logic for a widget object, which, when executed, creates an instance of the widget object on the whiteboard of the whiteboard application, including one or more interactive aspects that dynamically respond to input from the second user device in accordance with the behavior programming logic. At least one instruction memory that performs operations including, A network computer system equipped with [specific features / equipment].

2. The input identifying the aforementioned design object is received from the design code plugin interface of the design code plugin. The network computer system according to claim 1, wherein the design code plugin generates the design programming logic.

3. The network computer system according to claim 1, wherein input identifying the design object is received from the second user device through the whiteboard application.

4. The network computer system according to claim 3, wherein the operation programming logic is received from the second user device.

5. When the instruction is executed by one or more processors, The design programming logic is provided to the second user device in the editing interface, wherein the additional programming logic includes input from the second user in the editing interface. A network computer system according to claim 1, which performs operations including the following:

6. The network computer system according to claim 5, wherein the editing interface is provided as an instance of an editing interface object rendered on a first whiteboard of a first collaboration environment for the whiteboard application.

7. The network computer system according to claim 1, wherein the input identifying the design object created using the design application includes reference programming logic that identifies the design object by reference.

8. When the instruction is executed by one or more processors, In response to input from the second user selecting the widget object in relation to a first whiteboard of a first collaboration workspace for a first group of first users, a first instance of the widget object is created on the first whiteboard. A network computer system according to claim 1, which performs operations including the following:

9. When the instruction is executed by one or more processors, Maintaining first collaboration workspace data, including state information of the first instance of the widget object, across the first number of users. The network computer system according to claim 8, which performs operations including the following:

10. When the instruction is executed by one or more processors, To provide the whiteboard application to a third user device operated by a third user, In response to input from the third user selecting the widget object in relation to the second whiteboard, a second instance of the widget object is created on the second whiteboard, A network computer system according to claim 1, which performs operations including the following:

11. The network computer system according to claim 1, wherein the widget programming logic includes JavaScript code.

12. The network computer system according to claim 1, wherein the widget programming logic includes React code.

13. The network computer system according to claim 1, wherein the behavioral programming logic defines the processing of a click, and one or more interactive aspects of an instance of the widget object dynamically respond to input from the second user device by incrementing a number rendered as part of the instance of the widget object in accordance with the behavioral programming logic.

14. A method for providing a graphic application design platform, which runs on one or more processors, A step of providing a design application for creating a design interface on one or more first user devices operated by one or more first users, A step of maintaining design workspace data that describes a design interface including design objects created by one or more first users using the design application, A step of providing a whiteboard application to a second user device operated by a second user, The steps of receiving input from the second user device via the whiteboard application to identify the design object created by one or more first users, A step of generating design programming logic that defines one or more design faces of a widget object in response to an input that identifies the aforementioned design object, The steps include receiving behavioral programming logic from the second user device that defines one or more interactive aspects of the widget object, and Steps include generating widget programming logic for a widget object, based on the design programming logic and the behavior programming logic, which, when executed, creates an instance of the widget object on the whiteboard of the whiteboard application, including one or more interactive aspects that dynamically respond to input from the second user device in accordance with the behavior programming logic; A method that includes this.

15. In a non-temporary computer-readable medium for storing instructions, when an instruction is executed by one or more processors of a computer device, the computer device is configured to: To provide a design application for creating a design interface on one or more first user devices operated by one or more first users. To maintain design workspace data that describes a design interface including design objects created by one or more first users using the design application, To provide a graphics application to a second user device operated by a second user. Receiving input from the second user device via the graphics application that identifies the design object created by one or more first users, In response to an input that identifies the aforementioned design object, the system generates design programming logic that, when executed, creates the said design object. Receiving behavioral programming logic from the second user device that describes one or more interactions with the design object, and Based on the design programming logic and the behavior programming logic, the widget programming logic for a widget object, which, when executed, creates an instance of the widget object on the whiteboard of the whiteboard application, including one or more interactive aspects that dynamically respond to input from the second user device in accordance with the behavior programming logic. A non-temporary computer-readable medium containing instructions that cause an action to be performed.

Images