Interface Tour

In this section we'll do a quick run through of the interface features you'll encounter when you first open Pictorus in the browser.

Account Page

When you first log in to Pictorus, you'll arrive at your account page, which contains a list of all of the apps associated with your account. Apps can be accesssed, deleted, renamed, and copied from this page, by clicking on the three dots on the rightside of the app row. For now, you'll see a few demo apps that are automatically added to your new account. You'll have the option to start a tour when you first open the app as well.

App Editor

After clicking into an app or creating a new app, you will be directed to its Main state. For more information on app States in Pictorus, navigate to the Concepts > State Machines section of the docs.

The interface is divided into a few sections:

1. App Navigation: Navigate across levels of hierarchy in your app. If you only have one state and no nested components in your app, you'll see AppName / Main here. The current app page is greyed out while others can be navigated to by clicking on the page's name.

2. Connection Manager: Click the dropdown arrow to select a device to connect to. Devices online will show a green dot and others will be greyed out. An app can also be run in simulation mode by selecting "Simulator". You will be connected to "Simulator" by default on app startup.

3. App Controls: Build, deploy, start, and stop apps with these two buttons. The up arrow builds an app when in simulation mode or deploys to a device if one is connected. The play/pause button starts/stops an app.

4. App Actions Panel: This is where you'll find app editing actions. The panel is divided into five submenus - Block Palette, Version History, Export App, App Scripts and App Settings.

   

   • Block Palette: Contains standard and a user's library blocks which can be dragged onto the canvas.
   • Version History: Save a current app version and/or restore a previously saved version
   • App Scripts: Declare variables and perform pre-run calculations with Python scripts
   • Export App: Export the code generated for a specific app
   • App Settings: Change the app name and/or speed at which the app runs

5. Canvas: This is the editing workspace where you can drag and connect plots and inspect outputs

6. Build Info: The green checkmark indicates that a build is up-to-date and there are no issues. Alternatively, you may see a warning sign or red 'x' indicating that there may be an issue. The encircled '!' can be clicked to show issues with the current build:

   

7. View Controls: The leftmost option here allows for plot toggling on/off. The others allow for panning, zooming, and centering a diagram.