PaintWeb documentation and TinyMCE plugin

8 July 2009, 14:03

Hello again!

In the past week there was important progress on PaintWeb. I have published several wiki pages about PaintWeb on Google Code - this documentation comes as an overview or a guide to the entire codebase and the API reference. You can read about how to integrate PaintWeb into your Web application, how to extend PaintWeb, how to package PaintWeb yourself with the Makefile, and how to use the new TinyMCE plugin.

I have completed a new TinyMCE plugin which allows you to easily and quickly integrate PaintWeb. This plugin allows users to click an "Edit" button which is overlayed on top of the editable images. The plugin also includes a context menu item (right-click and choose "Edit image"), and a toolbar button.

I have published a new demo page which shows the latest TinyMCE and PaintWeb working together. Enjoy!

Moodle integration is currently being planned. I wrote my thoughts and questions in a Moodle Docs wiki page about the paint tool integration.

Last, but not least, for the purpose of tracking progress, I have attached a packaged PaintWeb snapshot to the Moodle tracker issue associated with my project.

Olli Savolainen has created some very good mockups as proposals to improve the PaintWeb user interface. His feedback is very much appreciated, and I really hope to get to implement his suggestions as soon as possible. Thanks Olli!

On a related note, for those interested on how PaintWeb implements keyboard shortcuts, Opera Software has just published the first part of a series of articles I wrote on this topic. More articles will be published soon at the Opera Developer community site.

Have fun testing PaintWeb and reading articles about it. Don't forget that I am always looking forward for feedback!

Published in: api, documentation, gsoc2009, moodle, opera, paintweb, tinymce, tutorials.

API reference and packaging for PaintWeb

2 July 2009, 19:52

Hello everyone!

Since my last blog post I have completed the user interface polishing for PaintWeb: the Color Mixer and the Color Picker are both working fine now.

Today I have completed work on packaging. I also generated the complete API reference documentation from the source code.

You can go and play with the PaintWeb demo at the usual location.

For packaging I use a Makefile, YUICompressor, jsdoc-toolkit, PHP and some bash scripts. First of all, I merge all the JavaScript files into a single file. I also merge the XHTML interface layout inside the JavaScript - for this I use a small PHP script which encodes the string using json_encode(). Once I have the hefty script, I use the YUICompressor tool to make it a lot smaller.

For the PaintWeb interface stylesheet I use the YUICompressor in combination with a simple PHP script I wrote. The PHP script inlines the PNG images using data URIs. This helps a lot in reducing the number of elements being downloaded.

Here are the numbers, for those curious of the packaging results. Before packaging:

• 18 JavaScript files, 426.6 KB;
• Three JSON files, 33.9 KB;
• One XHTML file, 14.9 KB;
• One CSS file, 21.8 KB;
• 47 images (PNGs), 206.5 KB;
• A total of 70 files, 703.7 KB.

That's quite much. Here's what the current level of packaging gives us:

• Two JavaScript files, 130.7 KB - one of them, json2.js, is only 3 KB and is not always loaded;
• Three JSON files, 33.9 KB. The JSON files are left untouched, the configuration example stays the same - with all the comments in it. It's up to the integrator to choose what he/she does with the file (at the moment).
• One CSS file, 297.1 KB - with all the images inlined;
• A total of only 6 files, worth of 461.7 KB.

That's better, but there's room for more. You should always enable gzip compression on your Apache server. Here's what a properly configured server can give you:

• Two JavaScript files, 35 KB;
• Three JSON files, 8 KB;
• One CSS file, 99 KB;
• A total of six files, and only 142 KB.

That's much better now. To properly configure your server, make sure you enable gzip compression in your .htaccess file:

<IfModule mod_deflate.c>
  <FilesMatch "\.(js|css|json|html)$">
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

If you are curious how fast PaintWeb loads, I added a timer in the demo script - you can take a look in a JavaScript console in your Web browser. On my local system it takes less than a second, depending on the browser I use. Go ahead and try PaintWeb yourself. Also make sure you check out the API reference.

In the coming days I will be publishing guides on PaintWeb development, extensibility and general code overview. This means Moodle integration is ready to begin!

Published in: apache, api, documentation, gsoc2009, makefile, moodle, paintweb, performance, yui.