‪Projectile Motion‬ PhET-iO 1.1.0-dev.22

Link Description
Simulation The simulation without any data streams or iframes.
Studio Shows all of the instrumented PhET-iO elements in a simulation, with their corresponding IDs, types and a basic functionality for interacting with them. This also provides a "Generate HTML" feature which can be used to customize the simulation and to generate the Standard PhET-iO Wrapper.
PhET-iO Guide Documentation for instructional designers about best practices for simulation customization with PhET-iO Studio.
Data: colorized Shows the PhET-iO Data Stream in the console, colorized and optimized for human readability. The console must be open to see this data. Chrome/Firefox/Safari only.
Data: JSON Shows the PhET-iO Data Stream in the console, formatted in JSON, suitable for machine parsing and analysis. The console must be open to see this data.
Data: textarea Shows the PhET-iO Data Stream in the wrapper frame instead of the console.
Data: recording The simulation is embedded in a full-size iframe and emits events to the console. Query parameters can be added to redirect the data stream to another location. Unlike the preceding wrappers, this includes high-frequency events.
State Shows a JSON object representing the simulation's state, and immediately sets the state to a copy of the simulation for testing the ability to set state to a simulation. Provides a "Launch" button to launch another copy of the simulation with the given state using query parameters.
Screenshot Shows a "Screenshot" button that can be used to capture and display screenshots from a live simulation.
Active Shows a button that enables the user to toggle whether a simulation is active (running and taking user input) or inactive (paused and not accepting user input).
Multi Shows an example of how to use multiple versions PhET-iO Client/iframe pairs to have more than one sim in the same wrapper.
PhET-iO API Documentation Documentation for globals imported in the phet-io.js library, phet-io and simulation query parameters, a list of options that can be passed to Client.launchSim(), and more.
PhET-iO API JSON This JSON file consists of the entire PhET-iO API for this version of ‪Projectile Motion‬, in a machine readable format. See the PhET-iO API Documentation for how this file can be loaded and used in a wrapper.

Wrapper Development

A PhET-iO wrapper embeds a PhET-iO simulation and leverages the PhET-iO API and feature set. The preceding wrappers demonstrate the PhET-iO API and features for this simulation, and can be used as examples to begin new wrapper development. Here is a basic example/template for a wrapper:

This file can be used as a template for beginning your own wrapper development, with a Custom PhET-iO Wrapper.

A good place to start is by downloading the example above and launching it on your development machine. Try printing messages to the console from the onEvent callback. Once that is working, you can start using phetioClient.invoke to send commands to the simulation. All necessary globals like Client, are imported from the file phet-io.js.

Development and Debugging Modes

When developing wrappers, there are a few tools that can make the process easier. Typically these would be used with the browser Dev Tools open, so that you can catch and inspect errors.

These options are only recommended for development. When moving to production ready software, the onError callback may still be useful, but likely not in the same way. By default when debugging, onError throws all errors encountered. For a complete list of options that can be passed to Client.launchSim(), as well as a list of all valid query parameters both for the wrapper and simulation frames, see the Full API Documentation.