Environment UI Design Studio

This is a tool for interactively creating visualizations for reinforcement learning environments. Using this format, the visualizations can be easily integrated into the RLtools reinforcement learning library (more info at https://rl.tools). You can see some visualizations of trained agents at https://zoo.rl.tools.

Parameters govern the appearance and/or dynamcis of the environment. In RLtools it is a convention that parameters do not change during the episode (intra-episode dynamics are captured by the state). Parameters can be sampled at the beginning of an episode to e.g. implement domain randomization. In this UI builder we just provide one set of example parameters for mocking:

This is the state of your environment and should have the structure returned by the rl_tools::json function of your environment (example)

For each of the defined limits a slider will be created for interactive mocking

The canvas is a HTML5 Canvas which exposes a simple and stable API for drawing 2D and 3D content in web-browsers. Here you can do a one-time setup of the ui_state which then gets passed into the render subsequently.

This function shall render the UI based on the parameters, state and action

An alternative way to use this tool is to clone the repo https://github.com/rl-tools/studio.rl.tools.git and open the index.html with python -m http.server using the ?force={environment-name} options (e.g. localhost:8000/?force=my-environment). Alternatively you can also e.g. use the Live Server VS Code plugin, which automatically reloads the page on changes to the environment. To define a new environment, create a new directory examples/{environment-name} with the same file structure as the other example environments.