We have a new alpha release of the Rapsberry Pi WebIDE ready to go. This version includes a major new feature that allows you to “Visualize” the execution of your Python programs. I’ll explain how this works in a moment, but first, here is the entirety of the changelog 0.2.4:
- New visualization feature for Python
- Added ability to change font sizes in the editor and the terminal
- New settings manager added, currently only has font size, but more can be added
- Fix for long file names causing strange wrapping
The font size change was requested by a user of the WebIDE, and it’s a great idea. So far, the font settings change the editor, and terminal text sizes. You can access this setting by clicking your username in the upper left of the navigator, once you’re logged into the WebIDE. Along with this feature, we’ve added the framework for a settings section within the editor, which we’ll start expanding with more settings. This would be a good place for enabling some of the more advanced feature requests we’ve had.
Ok, now back to the visualizer…
When you open a python program in the editor there is a new button titled “Visualize” that is now enabled. Clicking this button will execute your program, and open a new section of the IDE that allows you to step through your program. You’ll be able to see how your program is interpreted..variables being created, functions called, etc. It’s not a real-time debugger, but it’s likely much more useful to teaching new programmers. It really helps you understand what is happening when you click “Run”, and see your program output. That being said, it can also help you debug, as it does show you variables, and you can step through each section of your code. All of this was possible by the open source library from pythontutor.com.
The way it works is that when you click visualize, a websocket message is sent to your Pi with the file name and relative path. Then a node.js child process is launched that executes the python tutor program with your script passed in as an argument. The master python program then opens your script as a file, and passes it in as a string to the class that will then use Python’s bdb debugger to pull out all of the useful details of the execution trace. It gathers this data, converts it to a JSON representation, and then sends it back to the WebIDE front-end. The front-end parses the JSON, and launches the ExecutionVisualizer method that knows how to display it each step of the way. The Frame and Object stacks are html tables, but using jsplumb, and d3 to draw the arrows and lines connecting everything together.
We’re hoping we can expand this in the future, such as getting it to work with relative imports, possibly adding breakpoints, or any other features that are requested that would be useful.
Upgrading from 0.2.0 and higher
To install this new editor, you’ll want to completely remove your old editor, and run the installation script again.
- Ensure that your code is safely saved in your repository at bitbucket.org.
- Login to the editor.
- Click Update in the upper right.
- Update should take about a minute.
Upgrading From 0.1.9 and lower
To install this new editor, you’ll want to completely remove your old editor, and run the installation script again.
- Ensure that your code is safely saved in your repository at bitbucket.org.
- Uninstall using the following script
- curl https://raw.github.com/adafruit/Adafruit-WebIDE/release/scripts/uninstall.sh | sh
- Either make sure there are no rogue node processes running, or restart your Pi.
- Install the new and improved WebIDE
- curl https://raw.github.com/adafruit/Adafruit-WebIDE/alpha/scripts/install.sh | sudo sh
Also, follow this link to the GitHub repository for the project.