The Tool I Want
I want to make the next version of the Software Carpentry material more dynamic. I’m planning to use screencasts to show people how to use a debugger and other power tools, but I don’t like screencasts for showing programming examples: the text is often hard to read (even when anti-aliased), and they’re almost never accessible to the visually impaired.
What I’d like instead is a Javascript widget I can embed in a web page that will step forward and backward through a fixed piece of code and its output. This isn’t the same thing as Try Haskell and other “sandbox in a browser” tools that let people write and run arbitrary snippets of program. Instead, I want to say, “Here’s a piece of Python (or whatever), here are the pop-up comments I want to appear at various points in its execution, and here’s the output I want displayed at other points.” In the browser, it would look like this:
(You can see why I’m not allowed to design user interfaces…) “Step Forward” and “Step Backward” don’t actually execute code; instead, they replay a previously-recorded execution sequence and its textual output. Whoever created that sequence can add explanatory notes (like the bubble shown) that appear and disappear as execution proceeds.
Three things are needed to make this happen:
- A desktop tool for recording and annotating the execution of small programs.
- A data format for storing those recordings and annotation.
- A Javascript widget for playing them back in the browser.
Ideally, this combination would also handle interactive interpreter sessions, in which the program appears as you go along, and output is interleaved with input. If you know of something that already does this, I’d welcome a pointer; if you don’t, and are looking for a really cool course project, please give me a shout.
Recording would look loosely like this:
#! /usr/bin/env python
import sys, os, optparse, time, json, pprint
class Run( object ):
def __init__( self, filename ):
self.filename = filename
def __call__( self ):
“”"Note: this is *not* reentrant!”"”
self.log = []
sys.settrace( self.on_event )
try:
execfile( self.filename )
finally:
sys.settrace( None )
return self.log
def on_event( self, frame, event, arg ):
“”"Add an event-trace to our log”"”
record = dict(
event = event,
line = frame.f_lineno,
filename = frame.f_code.co_filename,
comment = “”,
name = frame.f_code.co_name,
)
if event == ‘exception’:
record['exception'] = {
‘type’: arg[0].__name__,
‘args’: arg[1].args,
}
self.log.append( record )
return self.on_event
def main():
parser = optparse.OptionParser()
parser.add_option(
‘-f’, ‘–filename’, dest=’filename’, metavar=’FILE’,
help = “Python file to run”,
)
options,args = parser.parse_args()
runner = Run( options.filename )
print json.dumps( runner() )
if __name__ == “__main__”:
main()
Your viewer in Javascript would iterate through the records, highlighting the appropriate line and letting you edit the comments field. To play back, just use a text-field instead of an edit-field. I’d guess you’d want the top-level data-structure to look like: { ‘files’ : {‘filename’:'code’, ‘filename’:'code’}, ‘trace’: [ ... ] }
but you’d also want to have the ability to re-target your comments after you edit and re-run the trace (don’t want to lose hours of effort in making comments, after all). Heuristic there would be a bit messy. Of course, if you keep to very small snippets, no problem.
HTH,
Mike
Hi Greg,
Not all programming screencasts look bad, it’s all about the codec. Ryan Bates, of http://railscasts.com, has very legible videos. A year ago I also did a few screencasts using the same coded as Ryan with great results: Apple Animation ( more info at http://wiki.multimedia.cx/index.php?title=Apple_QuickTime_RLE ). But then I’m pretty sure the users must have the Quicktime codecs bundle installed…
The guys at http://asciicasts.com/ are doing a great job at translation Ryan’s Ruby on Rail’s screencasts into text. They simply use good old CSS for syntax highlighting.
But then again, I do remember one of my professors doing something very similar to what you mention, but in Flash. I’m sure you don’t want Flash…
Have you seen Crunchy? (Not that close to what you want, but may be relevant, or easy to modify to do something similar. YMMV. All disclaimers apply.) Andre Roberges, the author of Crunchy, might be interested in helping you out, too.