PaintWeb in Internet Explorer

26 June 2010, 13:08

Hello world!

Three days ago we received great news from Microsoft: the third platform preview release of Internet Explorer 9 includes support for the Canvas 2D Context API. Canvas comes into IE 9 together with numerous other platform improvements.

These days I have been working on my open source project, PaintWeb. I am quite excited to see it running quite well in MSIE 9.

Go ahead and try the PaintWeb demo page in Internet Explorer 9!

What works? Almost everything. Known issues:

• The globalCompositeOperation property is not yet supported by MSIE 9. The Color mixer visualization looks a bit weird because of this.
• If you change the canvasElem.style.width/height properties the Canvas element is cleared. This is wrong and breaks the implementation of image load and zoom. Check a minimal test case.
• The PaintWeb integration into TinyMCE demo page fails to work. It seems that TinyMCE 3.2.5 fails to work properly in MSIE 9. I shall upgrade it to the latest version, and thus update the PaintWeb plugin as well.

You may also check the PaintWeb change log, for more details.

Any feedback is welcome!

Published in: canvas, html5, microsoft, msie, paintweb, tinymce.

Moodle 2.0 integration

14 August 2009, 03:36

Hello everyone!

Together with my mentor, Martin Langhoff, we have decided that it's better for me to focus on the Moodle 2.0 integration of PaintWeb. This is because Moodle 1.9 lacks a file API sufficiently advanced to meet the needs of PaintWeb usage. Martin opened a relevant thread in the Moodle forums about storing images as attachements to text fields - it's worth reading to understand why PaintWeb integration is far from trivial. Moodle 2.0 has the solution to our problem: the new File API.

Focusing on Moodle 2.0 integration does not mean we do not want to complete the work started for Moodle 1.9. However, we want to have PaintWeb ready for core integration, for the Moodle 2 final release. The plan is for me to resume work on Moodle 1.9, some time later.

The Moodle developers are hard at work for the new Moodle 2.0. They've done numerous improvements. If you like Moodle 1.9, you will love Moodle 2.0. Integrating PaintWeb into the new version was much nicer and quicker.

I completed the integration of PaintWeb into TinyMCE, and I also made the image save action to work quite well. Images are saved in the draft file area, as is the rule for any textarea-attached file.

If you want to get the Moodle 2.0 code with PaintWeb, get it from my Git branch. Instructions:

git clone git://repo.or.cz/moodle/mihaisucan.git ~/src/moodle
cd ~/src/moodle
git checkout -b mdl20-paintweb origin/mdl20-paintweb

You might be interested to read the technical details about the Moodle 2.0 integration work, published at Moodle Docs.

Since my last blog post, I also made important updates for the entire PaintWeb documentation.

Olli Savolainen has provided me with more suggestions which I implemented. Thus, I changed the color to yellow, for the "plugin bar" of the TinyMCE plugin. I also made the "Save" and "Cancel" buttons look better. Last, but not least, based on his suggestion I found a fix for the "Edit" overlay button, for Firefox. For some reason, the button was not easily clickable in Gecko-based browsers. The problem is now gone. Thank you very much, Olli!

For better usability, I made the whole PaintWeb GUI resizable. Now, users are no longer stuck with the fixed dimensions. The TinyMCE plugin has been updated to synchronise the size of the editor area with the size of the PaintWeb image viewport, for a better user experience.

You can go ahead and try the updated PaintWeb+TinyMCE demo.

With the latest work, I am meeting the Google Summer of Code project goals: the development and integration of a paint tool inside Moodle via TinyMCE. There's only some polishing work left to do, and code reviewing from more Moodle developers.

Published in: gsoc2009, moodle, paintweb, tinymce.

PaintWeb and Moodle Git repository

24 July 2009, 05:21

Hello everyone!

I am getting closer to having a Moodle demo ready with PaintWeb integrated. Wednesday I had a very fruitful discussion with my mentor, Martin, on how I should proceed with the implementation of file saving inside the Moodle data directory. We have come to a conclusion which I am about to implement. More details soon.

For now, I have registered a Moodle Git repository mirror over at repo.or.cz. I have also registered a Moodle "fork" where I publish my Moodle branches. You can do:

git clone git://repo.or.cz/moodle/mihaisucan.git ~/src/moodle-mihai
cd ~/src/moodle-mihai
git checkout -b mdl19-paintweb origin/mdl19-paintweb

With that, you can easily and quickly get an always up-to-date Moodle 1.9 stable branch with TinyMCE 3 and PaintWeb integrated. You can already play with PaintWeb in Moodle.

If you only want the TinyMCE 3 editor you can do:

git checkout -b mdl19-tinymce3 origin/mdl19-tinymce3

The TinyMCE 3 branch holds Moodle 1.9 stable with the latest TinyMCE 3 integrated. The work I did on this branch is best explained in a Moodle forum discussion.

When you want to update your branch simply invoke git pull. Please also check the official documentation about how to use Git.

In related news, Opera Software has published the final part of the article serie I wrote about keyboard accessibility in Web applications. This article details the cross-browser compatibility layer implementation for keyboard events used by PaintWeb.

Enjoy!

Published in: git, gsoc2009, moodle, opera, paintweb, tinymce, tutorials.

Updated TinyMCE 3 in Moodle 1.9

17 July 2009, 04:05

Hello again!

The Google Summer of Code midterm evaluations passed without any problems for me, yay!

I have began work on integrating PaintWeb into Moodle. I will integrate my project into the stable Moodle 1.9 branch and into the upcoming Moodle 2.0 release.

Moodle 1.9 has a very old TinyMCE release (version 2.0) which is not used by default - the even older HTMLArea is still used. Both do not work in Opera and Google Chrome. For this reason Martin Langhoff, my mentor, and other Moodle community members have worked on patches to switch to the modern TinyMCE 3 editor. A clean port of TinyMCE 3 to Moodle 1.9 is available on the Moodle forums.

The clean port is quite well done, but again, it was "outdated", being from october 2008.

For PaintWeb I took the work Martin did and updated it to the latest Moodle 1.9 stable branch, the latest TinyMCE 3 version, and made additional fixes. One fix was to make the editor show up in Opera, Safari and Chrome, and another fix was for the script which converts TinyMCE language files to Moodle language files.

PaintWeb integration into Moodle 1.9 will come as a patch on top of the TinyMCE 3 patch. Currently I got PaintWeb loading fine in TinyMCE, inside Moodle. More work is needed to get file save working. For PaintWeb I did some assorted fixes for the Makefile, for the overall keyboard accessibility, for multi-language support, and I did improvements to the TinyMCE plugin.

You can download the updated TinyMCE 3 patch for Moodle 1.9. The package includes usage instructions.

In other related news, Opera Software has published the second part of the article I wrote about keyboard accessiblity in Web applications. This article describes the inner workings of the MouseKeys extension for PaintWeb. Make sure you checkout the updated and improved source code of the MouseKeys extension in the PaintWeb code tree.

Have fun until the next time!

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

PaintWeb documentation and TinyMCE plugin

8 July 2009, 07: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.