User interface controls for visual software modification
Techniques for visual software development are disclosed, including: (a) generating, by a visual code editor, (1) a data model of a plurality of code elements in a set of source code and (2) a kernel for execution of the set of source code; (b) based on a subset of the set of source code, the data model, and the kernel, generating an adjustable graphical user interface (GUI) form control; (c) presenting the adjustable GUI form control in alignment with the set of source code in a GUI of the visual code editor; and (d) responsive to user input in the GUI to adjust the adjustable GUI form control: (1) modifying the subset of source code and the data model according to the user input; (2) updating the presentation of the set of source code in the GUI to reflect the modified subset of source code; and (3) executing the modified set of source code, thereby updating variable values within the kernel.
1 . One or more non-transitory computer-readable media storing instructions that, when executed by one or more processors, cause the one or more processors to perform operations comprising:
generating, by a visual code editor, ( 1 ) a data model of a plurality of code elements in a set of source code and ( 2 ) a kernel for execution of the set of source code;
based on a subset of the set of source code, the data model, and the kernel, generating an adjustable graphical user interface (GUI) form control;
presenting the adjustable GUI form control in alignment with the set of source code in a GUI of the visual code editor, including displaying the adjustable GUI form control vertically adjacent to the subset of the source code, the adjustable GUI form control being left-aligned with the subset of the source code; and
responsive to user input in the GUI to adjust the adjustable GUI form control:
modifying the subset of source code and the data model according to the user input;
updating the presentation of the set of source code in the GUI to reflect the modified subset of source code; and
executing the modified set of source code, thereby updating variable values within the kernel.
2 . The one or more non-transitory computer-readable media of claim 1 , wherein generating the data model of the plurality of code elements comprises:
parsing the set of source code into an abstract syntax tree (AST), a plurality of nodes of the AST corresponding to respective code elements in the plurality of code elements.
3 . The one or more non-transitory computer-readable media of claim 2 , wherein:
the GUI comprises a web page,
the adjustable GUI form control is a hypertext markup language (HTML) form control, and
generating the adjustable GUI form control is performed by an application running within a browser configured to render the webpage.
4 . The one or more non-transitory computer-readable media of claim 1 , the operations further comprising:
while presenting the adjustable GUI form control in the GUI of the visual code editor, detecting a change in the subset of source code; and
adjusting the adjustable GUI form control according to the change in the subset of source code.
5 . The one or more non-transitory computer-readable media of claim 1 , the operations further comprising:
based on another subset of the set of source code, the data model, and the kernel, generating another adjustable GUI form control, including:
requesting variable introspection from the kernel with reference to the data model; and
in response to obtaining updated variable values from the kernel, updating the data model and using the updated variable values in the other adjustable GUI form control;
presenting the other adjustable GUI form control in alignment with the set of source code in the GUI of the visual code editor; and
responsive to additional user input in the GUI to adjust the other adjustable GUI form control:
modifying the other subset of source code and the data model according to the additional user input;
updating the presentation of the set of source code in the GUI to reflect the modified other subset of source code; and
executing the modified set of source code, thereby updating variable values within the kernel.
6 . The one or more non-transitory computer-readable media of claim 5 , wherein:
the operations further comprise, responsive to the user input in the GUI to adjust the adjustable GUI form control, setting a flag indicating that the data model has been updated; and
requesting variable introspection from the kernel as part of generating the other adjustable GUI form control is performed in response to detecting that the flag indicates that the data model has been updated.
7 . The one or more non-transitory computer-readable media of claim 5 , wherein presenting the adjustable GUI form control and the other adjustable GUI form control in alignment with the set of source code in the GUI of the visual code editor includes displaying the adjustable GUI form control and the other adjustable GUI form control interleaved with the set of source code in the GUI, the adjustable GUI form control being displayed with the subset of the source code and the other adjustable GUI form control being displayed with the other subset of the source code.
8 . The one or more non-transitory computer-readable media of claim 1 , wherein generating the adjustable GUI form control includes:
requesting variable introspection from the kernel with reference to the data model; and
in response to obtaining updated variable values from the kernel, updating the data model and using the updated variable values in the adjustable GUI form control.
9 . The one or more non-transitory computer-readable media of claim 1 , wherein presenting the adjustable GUI form control in alignment with the set of source code in the GUI of the visual code editor includes displaying the adjustable GUI form control and another adjustable GUI form control interleaved with the set of source code in the GUI, the adjustable GUI form control being displayed with the subset of the source code and the other adjustable GUI form control being displayed with another subset of the source code.
10 . The one or more non-transitory computer-readable media of claim 1 , wherein presenting the adjustable GUI form control in alignment with the set of source code in the GUI of the visual code editor includes displaying the adjustable GUI form control and another adjustable GUI form control horizontally adjacent to each other in the GUI, the adjustable GUI form control and the other adjustable GUI form control both being displayed vertically adjacent to the subset of the source code.
11 . The one or more non-transitory computer-readable media of claim 1 , wherein updating the presentation of the set of source code in the GUI to reflect the modified subset of source code includes displaying the subset of source code in the GUI with the modifications highlighted.
12 . The one or more non-transitory computer-readable media of claim 11 , wherein updating the presentation of the set of source code in the GUI to reflect the modified subset of source code further includes fading out the highlighting a predetermined amount of time after displaying the subset of source code in the GUI with the modifications highlighted.
13 . The one or more non-transitory computer-readable media of claim 1 wherein executing the modified set of source code is performed in response to selection of a code execution element in the GUI.
14 . The one or more non-transitory computer-readable media of claim 1 , wherein the adjustable GUI form control is a slider control configured to allow the user to select a value of a numerical variable within the subset of the source code between a minimum and a maximum by sliding a control element along the slider control.
15 . The one or more non-transitory computer-readable media of claim 1 , wherein the adjustable GUI form control is a dropdown list control is configured to allow the user to select a value of a text variable within the subset of the source code by selecting a text string from a list of text strings displayed within the dropdown list control.
16 . A system comprising:
at least one device including a hardware processor;
the system being configured to perform operations comprising:
generating, by a visual code editor, (1) a data model of a plurality of code elements in a set of source code and (2) a kernel for execution of the set of source code;
based on a subset of the set of source code, the data model, and the kernel, generating an adjustable graphical user interface (GUI) form control;
presenting the adjustable GUI form control in alignment with the set of source code in a GUI of the visual code editor, including displaying the adjustable GUI form control vertically adjacent to the subset of the source code, the adjustable GUI form control being left-aligned with the subset of the source code; and
responsive to user input in the GUI to adjust the adjustable GUI form control:
modifying the subset of source code and the data model according to the user input;
updating the presentation of the set of source code in the GUI to reflect the modified subset of source code; and
executing the modified set of source code, thereby updating variable values within the kernel.
17 . A method comprising:
generating, by a visual code editor, (1) a data model of a plurality of code elements in a set of source code and (2) a kernel for execution of the set of source code;
based on a subset of the set of source code, the data model, and the kernel, generating an adjustable graphical user interface (GUI) form control;
presenting the adjustable GUI form control in alignment with the set of source code in a GUI of the visual code editor, including displaying the adjustable GUI form control vertically adjacent to the subset of the source code, the adjustable GUI form control being left-aligned with the subset of the source code; and
responsive to user input in the GUI to adjust the adjustable GUI form control:
modifying the subset of source code and the data model according to the user input;
updating the presentation of the set of source code in the GUI to reflect the modified subset of source code; and
executing the modified set of source code, thereby updating variable values within the kernel.
18 . The method of claim 17 , wherein generating the adjustable GUI form control includes:
requesting variable introspection from the kernel with reference to the data model; and
in response to obtaining updated variable values from the kernel, updating the data model and using the updated variable values in the adjustable GUI form control.
19 . The method of claim 17 , wherein presenting the adjustable GUI form control in alignment with the set of source code in the GUI of the visual code editor includes displaying the adjustable GUI form control and another adjustable GUI form control interleaved with the set of source code in the GUI, the adjustable GUI form control being displayed with the subset of the source code and the other adjustable GUI form control being displayed with another subset of the source code.
20 . The method of claim 17 , wherein presenting the adjustable GUI form control in alignment with the set of source code in the GUI of the visual code editor includes displaying the adjustable GUI form control and another adjustable GUI form control horizontally adjacent to each other in the GUI, the adjustable GUI form control and the other adjustable GUI form control both being displayed vertically adjacent to the subset of the source code.
21 . The method of claim 17 , wherein updating the presentation of the set of source code in the GUI to reflect the modified subset of source code includes displaying the subset of source code in the GUI with the modifications highlighted.