simple-prog-app

Summary

A simple IDE, in which one can learn to program in a useful language (Python). It will be backed up with some simple libraries for drawing shapes to a savable canvas, making sounds, etc. It will have examples, and good documentation.

The target audience are children and teenagers with an interest in computers, but no previous programming knowledge.

Rationale

Back in the days of microcomputers with BASIC interpreters it was very easy to start to learn to program. You just did:

10 PRINT "hello world"
RUN

From there, there was little barrier to learning, all the way up to using things like sound and graphics. These days there are a couple of barriers. People aren't used to typing into a command line (a good thing). GUI's are hard to program. The choice of languages is more complex.

A project to help young people learn to program is very important for the future of free software.

Use cases

  • Fred's son, Jeff expresses an interested in computers. Fred wants Jeff to learn to program. Rather having at the hard end (C++), or the blunt end (Logo interpreter), he wants something fun, and easy, which teaches useful skills.

Scope

An IDE and some supporting libraries that make it simple and interesting to learn some basic programming concepts using Python:

  • Giving a computer a list of commands to execute
  • Loops, if-else
  • Variables
  • Classes

Python will be used so that the user can easily move on to more general programming. Student programs will be runnable on the fly as well as "exported" or built into binaries.

The IDE will be supplemented with fun, easy to use classes for graphics, sound, and text interaction with the user.

To make this application useful, a significant part of the effort will be the creation of documentation, example projects, and templates. The example projects and templates will demonstrate what can be done with the language and offer a starting point for student work. The documentation will consist of a quick reference for checking syntax, as well as a full set of lessons to walk students through their first "Hello World" all the way to a more advanced application.

The IDE will "grow" along with the student, allowing them to eventually switch to "advanced" mode where they can see imported modules, and use all of python's features.

Design

IDE

Graphical User Interface Requirements

  • At startup, the application asks if the user would like to load an existing project folder or create a new one. Once they select the project they want to work on, they are placed into the main environment.
  • Menu bar: File, Edit, Run, Options, Help menus
  • Shortcut toolbar to quickly access Run, Debug, Hide/Show Help region, Save, Cut, Copy, Paste
  • While in "edit" mode, programmer is presented with a large region to edit code in that supports syntax highlighting and automatic indentation. (Gtk Source View widget)
  • A Resources window may be accessed via the File menu. It lists the currently available sounds and images and allows the programmer to add or remove them.
  • They may elect to show the Help region, which takes appears on the left of the window.
  • GUI runs in one of three possible "modes": edit, run, and debug
  • When "run" mode is activated, the edit window is locked and a simple terminal appears with the program's output. If syntax errors are encountered, the edit window is not locked but rather an information panel appears on the bottom of the window and explains the error and offers suggestions.
  • "Debug" mode is similar to "run" mode except an additional window is displayed allowing the programmer to Continue, Break, and Step. It also displays the values of the currently bound variables.
  • The options dialog must allow the enabling or disabling of syntax highlighting and setting font colors and background colors for the output terminal and editor.

Code Editing and Project Requirements

  • There are two views for the code: "Basic" and "Advanced" views. The user switches these in the options dialog.
  • Basic: The automatically generated "import" and initialization code for the simple libraries statements are hidden. Ignores all "import" statements.

  • Advanced: All code is visible, import is allowed. This allows the programmer to tinker with the rest of Python's API should they so desire, or learn the hard way what happens when you change import statements.

  • Perhaps add a view-only class diagram from Dia (or graphviz). This alternative to the file/document sidebar would help users navigate and understand their code. Clicking methods in the diagram should show the code in the edit area. Do not allow drawing diagrams (one-way trip from the code, regenerated regularly).
  • When a project is created, a file projectPath/projectName.py is generated with a header that imports the Simple Programming Application libraries and initializes them. All coding is done within this file.
  • All resource files (images, sounds) are copied into the project folder in projectPath/resources
  • If the application is in "Basic" mode, the default header is always "pasted" in at runtime. This is to allow fallback functionality in case the header is accidently changed and to ensure consistant behavior.

Functional Requirements

  • The user should be able to load, save, and close the project at any time, unless they are currently running or debugging it.
  • It should always be possible to gracefully end the execution of a user program with a keystroke or button.
  • A "Build" option should be available from the Run menu which exports the program into a "frozen" binary in projectPath/bin/projectName

Libraries

Graphics The graphics library will allow the programmer to create a drawing window, fill it in with various colors, draw shapes and text, and possibly create some simple animations by making good use of a rendering loop. The library will support the express creation of basic shapes, as well as custom shapes following Cairo's "place the pen down and move it around" methodology. It will also be possible to load images and place them in the window. Most paramaters will have default values. For example, draw.placeImage() will need at minimum its first parameter, the rest will be initialized to the top-left corner, 1:1 scaling, and no rotation.

The interface for the currently-nameless (codenamed "draw") library is as follows:

draw.new(width, height) # Create a new drawing window, destroying any others
draw.background(color) # Set the drawing window's background color
draw.clear() # Clears the drawing surface

#Primitive shapes
draw.drawRectangle(x, y, width, height, fillColor, borderColor, borderWidth)
draw.drawCircle(x,y, radius, fillColor, borderColor, borderWidth)

#Custom shapes
draw.penDown(startX, startY, penColor)
draw.penMove(newX, newY)  # Move to the next point
draw.penUp(fillColor)     # Optionally fills in the region

#Placing Images
draw.placeImage(resourceImage, x, y, scaleX, scaleY, rotateDegrees)

#Text
draw.write(msg, x, y, font, fontSize, fontColor)

The library is intentionally simple to encourage our future programmers to learn the utility of custom functions, and to create their own such as drawDecahedron().

Sound We are interested in playing some nice open formats as well as the arbitrary single-frequency tone beep.

# I wrote part of "Mary Had a Little Lamb" once
# It took me hours.
sound.beep(pitch,length)

#Playing sound files
sound.startSound(resourceSound, loop=false)
sound.stop()
sound.pause()
sound.resume()

Utility Library We want to give our programmers some control over the flow of the program, as well as allowthem to easily get input from the user in our environment. This library brings all of these together into a single package.

#Controlling program flow
program.wait(seconds)
program.end()

#Controlling the terminal
program.clearScreen()
program.setTextColor(color)
program.setBackgroundColor(color)

# User interaction
program.inputNumber(min, max)
program.inputString(maxLen)
program.waitAnyKey()

Documentation and Help

At the center of this learning tool is the documentation and help system. The "Help Bar" can be activated at any time during normal editing, and includes the following items:

Help Bar Sections

  • A quick syntax search. Programmer types in any language keyword or graphics, sound, or utility library call and the syntax and information is displayed.
  • A short of links to common "How Do I?" tutorials: Draw Shapes, Interact with the User, Play a Sound, etc
  • A button to launch the full help system, which includes the main tutorial.

When the full help system is launched in a new window, the user can browse through the sections of the help:

A. Tutorial

  1. Introduction to SPA
  2. Your first program
  3. Conditional logic
  4. Using loops
  5. Drawing Graphics
  6. Creating sounds
  7. Custom functions
  8. Classes
  9. Moving On

B. How Do I? C. Quick Lookup

  1. for
  2. if
  3. ...

The full documentation is split into three levels. The first is the Tutorial, which will contain full explanations for the aspiring programmer. It will be full of practical examples and information. The next level down is the "How Do I" section, which contains quick guides for those who don't want to trudge through the whole Tutorial, or those who need a refresher. The third and final level is the quick lookup, for long-time users who know exactly what they're looking for.

Implementation

The IDE is being programmed in Python, using GTK for the user interface. The sound library wraps the functionality of gstreamer, and the graphics library wraps Cairo. The utility library will be composed of a variety of custom functions from scratch and from the Python API. The diagram creator could be Dia or graphviz.

The final product should realize and adhere to the requirements and interfaces layed out in the "Design" section of this page. The project should not be considered complete unless all of the requirements are satisfied and fully functional.

Data preservation and migration

Outstanding issues

  • What is the exact process for the creation of binaries? (Python Freeze?)
  • What will the application be named?

BoF agenda and discussion

Comments

  • Take a look at PythonG, a Python IDE with extended graphics capabilities used at "Jaume I de Castelló" University in Spain. Screenshot. (RicardoPérezLópez)

  • Another great similar app available for mac os x, but written in python, is NodeBox. It is easy to create graphics and you immediately see results. Maybe you could port this to Ubuntu??

  • This is more for the IDE itself than the libraries. I learned to program years ago using Q-Basic. One of the great things about it was that there was a little window at the bottom called "Immediate" that did just that. You could run commands while the program was running and see the results. I used it for everything from "Print x" to see a variable's value to "Gold = 100" to cheat during game testing. (TimCaswell)

  • I think this program sounds great. But I wonder if there is going to be a alfa soon, to see how the work is going?
  • Basic-256 is another similar app.


CategorySpec

simple-prog-app (last edited 2008-08-06 17:00:38 by localhost)