Advanced zyLabs provide a versatile cloud IDE where you can start servers to view web projects, open GUI applications on the desktop, select from multiple language options, and more.
There are more options available than what you see in a classic zyLab detailed below.
IDE Menu
At the top left of the IDE is the IDE menu.
Files
Click the file tree icon to open the file tree to create files and folders, re-arrange files, as well as upload, download, rename, duplicate, and delete files.
The three-dot menu at the end of each file contains some of these options.
Settings
The settings menu provides options to change the default file, write a custom run config, or change the IDE language.
Event History
Below the settings button is Event History, which indicates changes made to the IDE or Files.
Run
Run will compile and run based on the default file, but a drop-down menu allows for selecting other files to run.
Desktop View
After running code in most languages, a new button will appear in the IDE that allows a desktop view. Some languages open this view by default.
Any code with visual output, from the HTML/CSS/JS output of a webpage to the movement of the turtle in the example below, can be seen by opening the desktop.
Depending on the language, there may be an option in the console to open that view in a new tab, or you can enlarge the desktop view like in the image above. The fullscreen or new tab icon, visible next to the audio toggle above, will also allow you to view this window fullscreen.
Playback
Between the File and Run button, is the Playback button.
Work can be checked keystroke-by-keystroke by clicking the forward and back arrows, or scrolling through the timeline just above the timestamp.
Playback can be used to copy previously working code, or copy code that was lost if you've reset the workspace to the template.
Press the return arrow at any time to return to the code editor.
Other Icons
A number of other icons are visible across the IDE and noted in the image below.
1. Connection indicator and Presence Indicator
a. Indicates if you are online, and who else is currently connected to the IDE
2. Reset to Template, Tutorial, and Sync button
a. Reset to template will reset your workspace to match the current template provided by the instructor, erasing any of your work and files
b. Click the tutorial button for a visual guide to using the IDE
c. The sync button indicates files are synced, and can be clicked to re-sync
3. Expand/Collapse bar
a. Click and drag to expand or collapse the bottom section of the IDE. These bars can be seen in other sections of the IDE as well
4. Console and Shell
a. Use the console to see output, enter input, and enter other commands
b. Use the shell to send commands for things like file management, process management, and environment variable management, especially when the console is busy
5. Reset Instance
a. Use this button to reset the instance if it becomes unresponsive, but keep in mind this can remove work if the IDE is in a disconnected state
Hotkeys
There are a number of Hotkeys and shortcuts that can be used inside the IDE.
F1
- Open Command Palette
Right-Click Menu includes useful hotkeys like these:Alt + Windows + N
- Run
Ctrl + F2
- Change All Occurrences
Shift+ Alt+ F
- Format Document (Auto-indent)
Ctrl + K
- Add Comment
Ctrl + F
- Find
Ctrl + G
- Go to line
Ctrl + ,
- Make Font Smaller
Ctrl + .
- Make Font Larger
Ctrl + Shift + Enter
- Insert Line Above
Ctrl + Enter
- Insert Line Below
Ctrl + Shift + K
- Delete Line
Ctrl + Shift + [
- Fold
Alt + F8
- Go to Next Problem (Error, Warning, Info)
Using GitHub with Advanced zyLabs
The git
command is useable in the Advanced zyLab IDE. It's also useable in VSC and includes a GUI there. Learn more about VSC and GitHub here.
While VSC is recommended, using git
commands from the CR2 console does allow push, pull, clone, and other actions once it's connected to your repositories.
Typing git help
in the console reveals the full list of commands.