OpenExVis documentation

OpenExVis begun as a Google Summer of Code project. You can find the application I sent to Google here.

What was achieved during the SoC period

Here's a screenshot of the 0.3.0-pre1 GUI and a brief explanation of each part.

To begin from the top, first we have the menu bar. The menu items have some normal file options for the source code, item to quit the program, same visualization controls as the control area and some documentation accessible from Help.

The next area, with the buttons and a slider, is the control area. The controls should be simple and the icons will be more intuitive. The first control button on the far left (Quit) exits the program. The second (Open) opens a new source code file to visualize. The slider in the middle (Speed) sets the speed of the visualization, with higher values being faster. On the right, we have the visualization control buttons, of which the first one (Run) starts the visualization with the speed set with the slider while the second (Step) runs it one step at a time. When running step by step, the user must click the Step button for each step to move forward, or she can press the Run button to switch to automatic progression. The last visualization control button (Pause) pauses the visualization when it's being run automatically and allows the user to continue with either Run or Step.

Moving downwards, on the left we have the code editing area. The syntax is highlighted and the line that's currently being visualized marked with a yellow background color. Next to the line numbers, the green marks are set by the user and define the marked line to be skipped during the visualization. This is basically an editor where the user can make changes to the code between visualizations or even write code from scratch. While a visualization is being run, the editor is unavailable for editing and it's used to show where in the code the execution is.

The area to the right, with four subareas and colorful boxes, is the visualization area. The structure area shows the context where we are visualizing things. The constant area is where constants are born when they are called and the variable area is for showing the variables as they are created or called. The evaluation area shows all sorts of operations that are done to the values. Constants and variable values move around, also between the areas, to where they are needed.

And the last area, on the bottom right corner, is the output area. This area shows the output of the code being visualized - if there is any.

Imagining one usecase

Let's imagine that a professor, we'll call him John, is using OpenExVis to demonstrate how a simple algorithm works.

After opening OpenExVis, John first clicks the Open button and is presented with a file selector dialog. He selects a Python file he has written earlier and the source code is presented in the code editor.

John has decided to first explain the code itself and then show the visualization of it. He can highlight areas in the code with the mouse as with most editors and make any changes he wishes before running the visualization.

When John has finished the explanation, he checks that the speed is good for his purposes and clicks on Run. The code editor is disabled and the first non-comment line there highlighted - let's say that this line initializes a variable. The visualization area shows graphically how a new variable is created and a value associated with it.

The visualization goes on, marking the line to execute and then showing graphically what happens when it's executed in the visualization area. John has set the speed so that he can make some comments about the progress in some key points. In the end, the code produces some output that is shown in the output area, brought there by a visualization from the visualization area.

Now the visualization run is finished and John has planned to walk his students through the code step by step. He begins clicking Step and explaining the relevant things of each step before proceeding to the next.

After John's step by step explanation, one student has a question regarding some activity near the end of the code. John sets the speed a bit faster and clicks on Run. The visualization goes quite quickly forward, but slowly enough that John has time to click on Pause a bit before the steps in question. Now, John moves to going step by step again, by clicking on Step, so he can carefully explain what happens to the student.

As no more questions are raised and John had no other code to visualize, he can exit the program via the menu or with the standard methods of his window manager.