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.


Adafruit publishes a wide range of writing and video content, including interviews and reporting on the maker market and the wider technology world. Our standards page is intended as a guide to best practices that Adafruit uses, as well as an outline of the ethical standards Adafruit aspires to. While Adafruit is not an independent journalistic institution, Adafruit strives to be a fair, informative, and positive voice within the community – check it out here: adafruit.com/editorialstandards

Join Adafruit on Mastodon

Adafruit is on Mastodon, join in! adafruit.com/mastodon

Stop breadboarding and soldering – start making immediately! Adafruit’s Circuit Playground is jam-packed with LEDs, sensors, buttons, alligator clip pads and more. Build projects with Circuit Playground in a few minutes with the drag-and-drop MakeCode programming site, learn computer science using the CS Discoveries class on code.org, jump into CircuitPython to learn Python and hardware together, TinyGO, or even use the Arduino IDE. Circuit Playground Express is the newest and best Circuit Playground board, with support for CircuitPython, MakeCode, and Arduino. It has a powerful processor, 10 NeoPixels, mini speaker, InfraRed receive and transmit, two buttons, a switch, 14 alligator clip pads, and lots of sensors: capacitive touch, IR proximity, temperature, light, motion and sound. A whole wide world of electronics and coding is waiting for you, and it fits in the palm of your hand.

Have an amazing project to share? The Electronics Show and Tell is every Wednesday at 7pm ET! To join, head over to YouTube and check out the show’s live chat – we’ll post the link there.

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

Join over 36,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


Maker Business — “Packaging” chips in the US

Wearables — Enclosures help fight body humidity in costumes

Electronics — Transformers: More than meets the eye!

Python for Microcontrollers — Python on Microcontrollers Newsletter: Silicon Labs introduces CircuitPython support, and more! #CircuitPython #Python #micropython @ThePSF @Raspberry_Pi

Adafruit IoT Monthly — Guardian Robot, Weather-wise Umbrella Stand, and more!

Microsoft MakeCode — MakeCode Thank You!

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

New Products – Adafruit Industries – Makers, hackers, artists, designers and engineers! — #NewProds 7/19/23 Feat. Adafruit Matrix Portal S3 CircuitPython Powered Internet Display!

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.