DisplayScript

Text Editor

Write your program here. Errors are highlighted in dark red.

You can "scrub" values interactively. Hold down the option key and click on a numeric value to begin scrubbing, then drag the mouse side-to-side to change the value.

To scrub with more precision, add decimal places. Scrubbing 5 by one pixel will yield 6, but scrubbing 5.00 by one pixel will yield 5.01.

Viewer

Interact with your program here. Clicking and dragging in the viewer will send events to clickHandlers and dragHandlers in your program.

If you have something drawn at literal coordinates, like

draw at(12, 0, 90, 90, fill(black))

you can change its coordinates interactively by dragging. Hold the option key and drag the drawable to move it around.

Drop image files onto the viewer to add them to your program. Added images appear in the resource list on the right.

Execution Tree

The execution tree shows drawables in a tree format. Each drawable appears in the order it is drawn. Drawables invoked by other drawables appear indented beneath their invoker.

Values passed to the show function will appear in the execution tree as well.

Error Description

If an error has occurred, a description of the error appears here. Errors are also highlighted in the editor.

Device List

Any devices on the local network running the DisplayScript Viewer app appear here. (Due to Apple's policies, you have to build from source yourself to install the app onto an iOS device.) Click on one to start mirroring the current document onto the device.

Resource List

Dragging an image into the viewer adds it to the resource list. Click the "x" to remove an image resource. If a document has resources, it must be saved as a DisplayScript Archive (extension dsar) instead of as a raw text file.

State Info

This section shows information about active state variables. You can click the "reset state" button to reset all state variables back to their initial values. Clicking this button will also reset state on any connected devices.

Feedback

Click "send feedback" if you have any issues, suggestions, or other feedback. This will create a draft email with the current document attached.