Feedback wanted: Paint tool integration into Moodle 2

Feedback wanted: Paint tool integration into Moodle 2

by Mihai Sucan -
Number of replies: 17

Hello everyone!

I have completed an important step in the Moodle 2 integration of the paint tool I have worked on this summer.

PaintWeb is now integrated into TinyMCE 3, inside Moodle 2. Image saving and loading works completely dynamic, without any page reloads (AJAX style).

I have published my Git repository at repo.or.cz. Please checkout the mdl20-paintweb branch:

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

The PaintWeb codebase is found in the lib/paintweb folder. The PaintWeb-side of Moodle integration is inside lib/paintweb/ext/ - where you find code for Moodle and the TinyMCE plugin I wrote.

I prepared a wiki page with details about the work I did on Moodle 2 integration. This should get you started.

I would like feedback and reviewing of the image save script I wrote - please see lib/paintweb/ext/moodle/imagesave20.php. This uses the new File API - which is really great. I really liked working with it.

Additionally, I would very much appreciate if Petr Škoda and the other people who are involved with the HTML editor embedding code, could take a look at my patch for the lib/editor/tinymce/lib.php file. That's where I worked on integrating PaintWeb into TinyMCE for Moodle - it's the place where my TinyMCE plugin is loaded.

Thank you very much!

Average of ratings: Useful (1)
In reply to Mihai Sucan

Re: Feedback wanted: Paint tool integration into Moodle 2

by Dan Poltawski -

Hi Mihai!

This is looking really really nice! Great work.

Some comments:

  • I tested on Firefox where it worked perfectly, but it doesn't seem to be bringing up the paintweb interface using Safari 4?

  • I guess its not really that easy to do, but one of my frustrations was 'submitting a message before saving', it would be good if paintweb could intercept that.

Regarding lib/paintweb/ext/moodle/imagesave20.php, I had a quick review.

I'm not entirely sure of how the data urls can vary, but processing it with a regular expression would be much simpler (I think). I produced a patch which seems to work for my case, but probably not all (and wasn't how I expected the url to be formed).

See the patch attached.

Average of ratings: -
In reply to Dan Poltawski

Re: Feedback wanted: Paint tool integration into Moodle 2

by Mihai Sucan -
Hello Dan!

Thanks for your review. It's really appreciated.

Safari 4 on what system? I just tested Safari 4 on Windows XP and it works for me.

I can intercept the form submit within TinyMCE plugin, and thus I can make PaintWeb automatically save the image *before* the form is submitted. Is this desired? However, please note, that the user will be, probably, confused, seeing PaintWeb save then suddenly the whole page is submitted, because the whole form submission is delayed.

I could surely write a regex for parsing the data URL, but I am not sure about the actual performance. Is it OK to apply regex to such big strings (might be megabytes)? I might be wrong. Any thoughts?

I like your patch - thanks! Using a regex does indeed make things in the code look nicer.

If you believe using a regex is OK performance-wise, then I'll apply the change and adjust the regex based on the actual data URL format:

http://en.wikipedia.org/wiki/Data_URI_scheme#Format

(some of the parts of the data URL are optional)


Thanks again for your time!
Average of ratings: -
In reply to Mihai Sucan

Re: Feedback wanted: Paint tool integration into Moodle 2

by Dan Poltawski -

Safari 4 on what system? I just tested Safari 4 on Windows XP and it works for me

On Mac OS X - 4.0.3 (5531.9), I can try and do a bit more testing at some point..

I can intercept the form submit within TinyMCE plugin, and thus I can make PaintWeb automatically save the image before the form is submitted. Is this desired? However, please note, that the user will be, probably, confused, seeing PaintWeb save then suddenly the whole page is submitted, because the whole form submission is delayed.

Hmm, well I was thinking when i've 'painted a picture' and press submit - i'd like to be able to have a chance to save that picture before the form is submitted and not lose it because I forgot to save. Is there any way for paintweb to prompt the user in a similar way to gmail does when you send a mail without a subject line?

Interesting point about the regex performance, I am inclined to think the regular expression will be ok. I googled around a bit and found this interesting thread on stack overflow, but its not exactly conclusive, I think its time to break out the code measure conclusive evidence!

Average of ratings: -
In reply to Dan Poltawski

Re: Feedback wanted: Paint tool integration into Moodle 2

by Dan Poltawski -
> I think its time to break out the code measure conclusive evidence!

I couldn't resist..

Attached is a simple script which loads a base64encoded text from a file called base64encoded.txt to a string, and runs regexp on it 50,000 times, measuring execution time. It does the same with the string operations you've done.

Results with a 1.5MB jpeg:
Regex total: 1.10550403595
String Ops Total: 2.14674305916

So regex outperforms the string operations by some margin.

PS. I prepared a base64 encoded image for you earlier.. wink
Average of ratings: -
In reply to Dan Poltawski

Re: Feedback wanted: Paint tool integration into Moodle 2

by Mihai Sucan -
Hello again Dan!

Now that's quite interesting. I'll definitely switch to using a regex.

With regards to form submission - sure, I can add a prompt when the user submits the form and the image he is editing has unsaved changes. Something like "You have requested a form submission, but you have unsaved changes in the image you are currently editing. Are you sure you want to submit the form without saving the image changes?" If he picks "OK" form submission continues and the image changes are lost. If he picks "Cancel" form submission is cancelled - giving the user the chance to save the image. Would this be sufficient? (I think yes)
Average of ratings: -
In reply to Dan Poltawski

Re: Feedback wanted: Paint tool integration into Moodle 2

by Mihai Sucan -
Please tell me what's the output of the javascript console (developer tools console), in Safari 4.
Average of ratings: -
In reply to Mihai Sucan

Re: Feedback wanted: Paint tool integration into Moodle 2

by Dan Poltawski -

Please tell me what's the output of the javascript console (developer tools console), in Safari 4.

When I try and enable javascript debugging and press the paintweb button in tinymce it seems to crash safari completely..

But I get:

HR finished loading: "http://moodle.dev/lib/paintweb/ext/moodle/imagesave20.php".
XHR finished loading: "http://moodle.dev/lib/paintweb/build/paintweb.js".
XHR finished loading: "http://moodle.dev/lib/paintweb/ext/moodle/config.json".
SyntaxError: Unable to parse JSON string

In the debug console

Average of ratings: -
In reply to Dan Poltawski

Re: Feedback wanted: Paint tool integration into Moodle 2

by Mihai Sucan -
Eh, same old, same old. I thought I fixed this. Please check if the following demos work in Safari 4:

http://www.robodesign.ro/paintweb/trunk/demos/demo-tinymce.html
http://www.robodesign.ro/paintweb/trunk/demos/demo1.html

Both have the same code. Thanks for testing!
Average of ratings: -
In reply to Mihai Sucan

Re: Feedback wanted: Paint tool integration into Moodle 2

by Dan Poltawski -
Same errors i'm afraid..
Average of ratings: -
In reply to Dan Poltawski

Re: Feedback wanted: Paint tool integration into Moodle 2

by Mihai Sucan -
Hm, bad bug.

Would you be kind enough to come online on IRC or on Jabber to talk to me and do live testing of "debug" builds of PaintWeb? I'll also try and fix the issue - I know where it fails and why, it's just that the workaround is a "tricky afair". There's no hurry, only when you have sufficient amount of time. I do not own a Mac and I cannot test this myself.

Thanks!
Average of ratings: -
In reply to Mihai Sucan

Re: Feedback wanted: Paint tool integration into Moodle 2

by Dan Poltawski -
Yep, certainly (although I am not around much this week) - see my profile for jabber details or message me.
Average of ratings: -
In reply to Dan Poltawski

Re: Feedback wanted: Paint tool integration into Moodle 2

by Mihai Sucan -
Thanks! I'm available on the Moodle jabber chat, daily. Please ping me when you have time, next week or when you feel comfortable - I don't want to bother you.

I have updated the mdl20-paintweb Git branch. I have patched the imagesave20.php script to use a regex now. I also updated the TinyMCE plugin to handle the case you pointed out: form submission while the image is modified, but unsaved.

Please let me know if the result is what you had in mind.

Any further suggestions and comments are welcome!

Thanks again for your time and feedback.

Best regards,
Mihai
Average of ratings: -
In reply to Mihai Sucan

Re: Feedback wanted: Paint tool integration into Moodle 2

by Dan Poltawski -

I have updated the mdl20-paintweb Git branch. I have patched the imagesave20.php script to use a regex now. I also updated the TinyMCE plugin to handle the case you pointed out: form submission while the image is modified, but unsaved.

Please let me know if the result is what you had in mind.

Yeah, that is exactly what I was thinking - its really great.

I will try and be around with my mac this weekend for more testing wink

Average of ratings: -
In reply to Dan Poltawski

Re: Feedback wanted: Paint tool integration into Moodle 2

by Mihai Sucan -
Just wanted to let everyone know: Dan has taken the time to test a few things for me and I was able to find the bug affecting Safari 4 on the Mac. I had an extra comma in the configuration JSON files which caused a parse error, only in Safari 4 on the Mac. This is now fixed. Thanks Dan!

I have updated the Git branch, mdl20-paintweb, to include this change and some more. The update is also propagated to the online demos of PaintWeb, and to the Google Code site.

Any further feedback is welcome!
Average of ratings: -
In reply to Mihai Sucan

Re: Feedback wanted: Paint tool integration into Moodle 2

by Mihai Sucan -
For those interested, I just published the slides of a presentation I made at the Linux and Virtual Learning Environments 2009 seminary organized in Arad, Romania.

The presentation can be downloaded from:
http://www.robodesign.ro/paintweb/lvle2009/presentation_en.pdf

Or, if you prefer, you can watch it online:
http://www.scribd.com/doc/19266942/The-development-and-integration-of-the-PaintWeb-paint-tool-in-Moodle

In these slides I describe the work I did on my Google Summer of Code project.

Any feedback is welcome.
Average of ratings: -
In reply to Mihai Sucan

Re: Feedback wanted: Paint tool integration into Moodle 2

by Mihai Sucan -
Hello everyone!

Thanks to Anthony Borrow and Jordan Tomkinson, today a Moodle 2.0 test site has been published with PaintWeb integrated. So, now you can try PaintWeb directly in Moodle:

http://test.moodle.org/paintweb/

Login with the teacher account: user. Password is: demo.

To try the paint tool, I have created a test course, and I added a glossary activity. Inside the glossary activity there's a concept I added. Go ahead and play with the glossary: add, edit or delete concepts. In the TinyMCE editor you can create new images and edit them seamlessly.

It should be noted that Moodle 2.0 and the paint tool integration are both under development. This means that Moodle devs have not yet completed upgrading all the code which deals with the HTML editors - so, other pages where TinyMCE is used might not have PaintWeb enabled because the configuration is still in "legacy mode" (no file attachments are allowed).

Please provide me with feedback on the user experience, and any other thoughts you might have.

If you are a developer, I would very much appreciate technical feedback, and code reviewing.

Thanks!
Average of ratings: -