General developer forum

Hello everyone!

We are nearing completion of the code refactoring being done for PaintWeb, the paint tool for Moodle.

There are still some tidbits remaining marked as TODO/FIXME, and of course, I also need to implement the new GUI.

Most of the source code has jsdoc comments. I will soon start generating an API reference documentation which will help everyone better understand the code.

Recently, we've been doing some performance testing on the XO. This is going well, but we are not yet done - more will follow.

We would like testing of the current functionality. Please let us know if something is broken, or if you want some changes.

Also, please review the code and provide feedback on the refactoring - please check the SVN commits to see what I've done for refactoring.

Links:

- The code is hosted at:
http://code.google.com/p/paintweb/

- Test the paint tool at:
http://www.robodesign.ro/paintweb/trunk/src

- Performance test:
http://www.robodesign.ro/paintweb/trunk/tests/gsoc2009/0001-perf/


Known issues:

- the border and the fill colors cannot be changed. The color editor extension is not done yet - I will do it once I start working on the new GUI.

- the color picker does not work, since it requires the color editor.

- the text tool only works in some new Webkit and Firefox 3.5. I'll have to code a work around soon, for browsers which lack support for the Canvas 2D Context Text API.

- shadows are not working.

It should also be noted that, due to code refactoring, loading of PaintWeb is now slower. I will implement a packager which will compress all the files into one.

So, please go ahead and test the paint application. Thanks to everyone! ;)


_______

Some info on how PaintWeb works:

There's the PaintWeb object constructor. An instance of the PaintWeb is constructed in index.js (see at the bottom of the file).

The PaintWeb initialization method loads config.json and the configured language json file. The script also adds a second canvas element, which acts as a buffer, on top of the existing canvas element.

PaintWeb will also load all the tools configured, and the extensions. At the moment only the MouseKeys extension is available.

The loaded tools are stored in PaintWeb.tools. To add a new tool use PaintWeb.toolAdd().

The extensions are in PaintWeb.extensions. To install a new extension use PaintWeb.extensionAdd().

The PaintWeb.ev_canvas() method handles all of the mouse events for the canvas element. It determines the mouse coordinates relative to the canvas element, taking into consideration the image zoom level.

The PaintWeb.ev_keyboard() method handles all of the global keyboard events. This method uses the config.keys list to determine which tool/extension to activate when the user presses a key.

The PaintWeb.tool property is an instance of the currently active tool object. The tool object can hold event handlers specific to the tool itself. So, you can have the tool.mousemove() method which draws anything you want when the mouse moves.

Both ev_canvas() and ev_keyboard() invoke methods from the active tool object, for the event types they handle. For example, ev_canvas() invokes tool.mousemove() if it's available, and ev_keyboard() invokes tool.keydown() if it's available. This allows tools to implement anything desired. You can implement custom keyboard shortcuts for each tool.

Examples of tools with custom keyboard shortcuts: select, polygon and more.

Tools are activated with the PaintWeb.toolActivate() method. When a tool is constructed, it receives a reference to the PaintWeb main object. As such, from the drawing tool you can access most of the PaintWeb functionality.

Most of the drawing operations performed by tools are done on the buffer canvas context. Once the drawing operation is complete, PaintWeb.layerUpdate() must be invoked. This method merges the pixels from the buffer onto the real image. It also stores the image in history, so the user can nicely undo the change.

That's about all for now. Thanks for your time!