Authoring in NetLogo Web
Like desktop NetLogo, NetLogo Web supports model authoring, meaning that it is possible to change "Code" and "Info" content and to create, edit, move, resize, and delete widgets. Unlike in desktop NetLogo, though, NetLogo Web models operate in one of two different modes at any given time: interactive mode or authoring mode. While in interactive mode, the model is usable "like normal", which is to say that widgets cannot be added, removed, resized, repositioned, or edited, but they can be interacted with (for example, clicking buttons or adjusting slider values). While in authoring mode, the Command Center and widgets are disabled, and the model cannot run or be interacted with, while widgets can be added, removed, resized, repositioned, and edited. The model's "Info" content can only be modified in authoring mode. The model's "Code" content can be modified in either mode.
To toggle between the two modes, click the gray lock icon in the top-left corner of model area (right below the "powered by NetLogo" link). At any time while using NetLogo Web, press ? to the get the list of currently relevant keyboard shortcuts.
Note: Since this document is about how to use authoring mode, from here on out, we will assume that your model is currently in authoring mode.
Existing widgets can have their properties edited by double-clicking them or right-clicking them and selecting "Edit", which will then open a widget configuration dialog box. This is true of the model's title, as well. If you press the Escape key, click the 'X' in the corner of the dialog window, or click "Cancel", all changes to the widget configuration dialog will be discarded, and the dialog will close. Otherwise, upon clicking "OK", all changes to the widget configuration dialog will be accepted and applied to the corresponding widget.
In order to create new widgets, right-click the light green background of the widget area. This will give you a menu of creatable widgets to choose from. When you click one of the options in that menu, a dialog will appear for configuring the new widget that you are creating. If you press the Escape key, click the 'X' in the corner of the dialog window, or click "Cancel", creation of the widget will be aborted, and the dialog will close. Otherwise, clicking "OK" will finalize the creation of the widget.
Note: Plot widgets cannot currently be created or edited in NetLogo Web, but we plan to add that functionality soon.
Note: A single model cannot have more than one View widget or Output widget.
Selection, Sizing, and Movement
You can move a widget to a different location in the widget area by clicking and dragging it to the new location. You can even move it to the right or bottom edge of the widget area in order to trigger an automatic expansion of the widget area.
If you single-click on a widget, it will become selected. The selected widget can be resized by grabbing and dragging the gray boxes that appear on its edges. Widgets automatically "snap to grid" when moved or resized, but, if you're editing a model from the desktop application version of NetLogo, you might find that the widgets are not necessarily snapping to the same grid between the two platforms. To help with this, the Ctrl key (or ⌘ on Mac OS) can be held down to avoid snapping to the grid while moving or resizing a widget, and the arrow keys can be used to move the selected widget one pixel in the arrow key's direction.
Note: If you would like to hide the gray boxes around selected widgets (for example, if the boxes are making it difficult for you to line up some widgets), the boxes can be toggled with the CtrlShifth key combination (or ⌘Shifth on Mac OS).
Note: NetLogo Web does not yet support having multiple widgets selected at once.
With the exception of the View widget, all widgets can also be deleted. In order to delete a widget, right-click the widget and select "Delete". However, just like in desktop NetLogo, deleting a widget can cause the model to start generating compilation errors (for example, if you delete a Slider widget that declares a variable that is referenced in the "Code" section). Of course, this can be remedied by adding a new widget that declares that global variable anew, or by removing any references to the now-deleted variable by editing the "Code" pane and changing the code inside of any non-compiling (red text) widgets.
Saving Your Changes
To learn about how to retain any changes you made in authoring mode, please see the "How can I save models from NetLogo Web?" section of the FAQ.