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.

Editing

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.

Creation

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.

Deletion

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

As you make changes to your model, NetLogo Web will automatically save them to your web browser's local storage cache. Each model source will be stored separately according to the source of the model: URLs, file uploads, or the New Model. To return to your work in progress just open NetLogo Web to the same source you used before. It will alert you that your changes have been loaded from the cache. If you wish you can Press the Revert to Original button to restore the model to its original source. If you revert your changes by mistake, you can press the Undo Revert button.

Your web browser's local cache does have limited space, and while it should be reliable, it can be wiped when certain actions happen, like re-installing your browser or wiping the cache to free up space. As such it's always a good idea to occassionally save off your work in progress to a permanent file on your computing device. To learn more about saving local copies of your authoring work, please see the "How can I save models from NetLogo Web?" section of the FAQ.

You can disable auto-save by adding disableWorkInProgress to the URL of your NetLogo Web session. For example, if you have open netlogoweb.org/launch#modelURL, then do netlogoweb.org/launch?disableWorkInProgress#modelURL. This can be useful when hot-linking models or embedding model HTML files in another site when you do not want people using those models to have changes auto-saved.

You can use a storageTag query paramater to allow saving a different work in progress for the same model URL. This is useful when you're embedding the same model in multiple places but want each "instance" to be treated differently for retaining the work in progress. The storage tag can be any text string you like. For example, if you have open netlogoweb.org/launch#modelURL, then do netlogoweb.org/launch?storageTag=unique1#modelURL to use a separate storage space. This works with directly linked models as well as exported HTML models.

See the speed parameter docs for more information on setting query parameters for NetLogo Web models.