Raspberry Pi WebIDE Update to 0.2.4: Visualize Feature

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.

  1. Ensure that your code is safely saved in your repository at bitbucket.org.
  2. Login to the editor.
  3. Click Update in the upper right.
  4. 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.

  1. Ensure that your code is safely saved in your repository at bitbucket.org.
  2. Uninstall using the following script
    1. curl https://raw.github.com/adafruit/Adafruit-WebIDE/release/scripts/uninstall.sh | sh
  3. Either make sure there are no rogue node processes running, or restart your Pi.
  4. Install the new and improved WebIDE
  5. 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.


Have an amazing project to share? The Electronics Show and Tell is every Wednesday at 7:30pm ET! To join, head over to YouTube and check out the show’s live chat and our Discord!

Join us every Wednesday night at 8pm ET for Ask an Engineer!

Join over 38,000+ makers on Adafruit’s Discord channels and be part of the community! http://adafru.it/discord

CircuitPython – The easiest way to program microcontrollers – CircuitPython.org


New Products – Adafruit Industries – Makers, hackers, artists, designers and engineers! — New Products 11/15/2024 Featuring Adafruit bq25185 USB / DC / Solar Charger with 3.3V Buck Board! (Video)

Python for Microcontrollers – Adafruit Daily — Python on Microcontrollers Newsletter: A New Arduino MicroPython Package Manager, How-Tos and Much More! #CircuitPython #Python #micropython @ThePSF @Raspberry_Pi

EYE on NPI – Adafruit Daily — EYE on NPI Maxim’s Himalaya uSLIC Step-Down Power Module #EyeOnNPI @maximintegrated @digikey

Adafruit IoT Monthly — The 2024 Recap Issue!

Maker Business – Adafruit Daily — Apple to build another chip at TSMC Arizona

Electronics – Adafruit Daily — SMT Tip – Stop moving around!

Get the only spam-free daily newsletter about wearables, running a "maker business", electronic tips and more! Subscribe at AdafruitDaily.com !


No Comments

No comments yet.

Sorry, the comment form is closed at this time.