Non-core contributed modules

Added UI Mockup: <Color mixer 2009-07-03 13:01>

The tabs should be sticky; i.e. remember the state they were left in last time; if possible for the Moodle user even between drawing sessions.

The dialog buttons should be standard (location, size), i.e. in the same order as in everywhere in Moodle between the so-called OK and the Cancel button.

For the advanced panels you can make the current and old colour rectangles smaller to make room for the K in CMYK.

Linear integer/float values should have sliders whenever possible to not force the user to use the keyboard since this is a mouse-oriented app.

Olli, thank you very much for your mockup.

My pleasure

When the user varies value and saturation in the simple/HSV view in the 2d control on the left, do not change the darkness/saturation of the 1d-control on the right (see how gimp does it). the user can see the feedback/change in the "active" color so it is not necessary to change it, and at extreme values of "value" or "saturation" the thing becomes entirely white or black which can be confusing.

Caveat emptor, though: it has not been usability tested so you have guarantees for nothing at all. Actually, it would be pretty darn easy to usability test this, since the use cases all blend together. The tasks could probably each just tell the user to draw different kind of a picture, and you would instantly see if they use the entire app fluently with minimal learning or not.

Added UI Mockup: <toolbar grouping 2009-07-03 15:57>

Just an idea to clarify the grouping of the toolbar. Move those icons that do not have settings and are not tools but commands, to a separate, non-tabbed area, to not confuse the way these two different types of controls work.

The fact that the active tool that has settings disappears from view when you access its settings seems risky, but with the space restrictions we have it may be the best solution.

This is not a commentaru of the icons, themselves, except I do think the clear icon still needs to be something else than 'new' and Balsamiq's idea of an "image" icon seems to be closer to the default people have gotten used to in word processor etc. (a mountain view) so if that was used it would be more probable that people would not think it is some strange butterfly functionality but the image adding command they know from other programs.

Also, a bit of a regrouping of the drawing tools to have the related tools together. The upper left rectangle is supposed to be the select tool. The two rectangles next to each other are supposed to be the line tool and the bezier tool. I see the pen/brush as the first tool to try when playing around (this is very subjective though) so moved it to the first spot.

No change to the color selection buttons, just was too much trouble to make balsamiq have them look like they are supposed to.

It is kinda risky for me to suggest changes like this but then, there is no verification for your design either in terms of user testing so there seems to be no additional risk in changing the UI to communicate its the functionality of its controls more clearly.

If you really want an 'about' box even in Moodle (does any other component such as tinymce do this), do change the icon. If it is a question mark people expect to have context sensitive help.

And yes, I forgot to say: the point was to get rid of the grid behind the buttons (they look less like buttons with the grid that gives a message of something else than a toolbar) and make the toolbar look as close to tinymce as possible, as discussed before.

Thanks again Olli for your continued feedback on the PaintWeb GUI. You're doing an amazing work.

Today's PaintWeb build. This holds the source code of PaintWeb, the packaged PaintWeb code, two usage examples, a TinyMCE plugin for PaintWeb integration and API reference documentation.

You can play with the demos online at:

http://www.robodesign.ro/paintweb/trunk/demos/

This is looking really nice Mihai! Great work!

Thanks Mihai, very slick editing!

I just tried your demo for the first time and I have some UI feedback as a very new user that may be helpful:

1) I had trouble finding the edit button in TinyMCE (the PW icon).

• PW doesn't mean anything to new users, and wouldn't work for other languages.
• I was expecting an edit icon like the one we use in Moodle (hand holding a pen).
• I right clicked on the Image and hoped it might be under "Insert/Edit Image" in that menu. It wasn't.

2) Once I did find it I was a bit disoriented the way the interface switched on me. I thought for a second I was on a new page.

• Some hint that we are still in Tiny MCE would be good
• The bigger buttons are a bit confusing (in the TinyMCE context).

3) I had trouble finding out how to save the edited image.

• I found the "floppy disk" icon eventually. Is this icon relevant these days?
• Something "Save and return to the text editor" would be good.
• Perhaps Save and Cancel buttons would be a good thing to emulate here.

Hello MartinD!

Thanks for your feedback. It's really appreciated.

1.

• Hmm, good point. We can change the icon, no worries.
• Can't do much about the "insert/edit image" context menu. That's added by TinyMCE and I cannot change their "insert/edit image" dialog without any API. The only ugly way would be to patch their files - but I'd like us to keep things separate, so users can upgrade their tinymce installation without fear of breakage. It would be better if the menu item would be renamed to "edit image attributes" because that's what it really does.

2.

• We could do something like "Editing image from TinyMCE" to let the user know he didn't loose the article.
• Not sure what to do about the icons. I find the TinyMCE icons far too small, even ugly (the default ones).
• Regarding the interface switch, a change might come. As I see, TinyMCE is used sometimes with small textareas, in which PaintWeb's user interface cannot fit. This means, I might change the PaintWeb initialization to show up on top of the whole page.

3. I completely agree. This kind of work is already planned.

• The floppy disk icon is typically used in many of today's applications for the "file save" operation. Sure, it's outdated, but it matters the concept. Once we have the "Save" and "Cancel" buttons, we can remove the "Save" icon from the main toolbar, if desired.

• I have already planned to add "save" (to save the changes and return to tinymce) and "cancel" (to cancel any image changes and return to tinymce).

Thanks again.

I've moved this to CONTRIB and am assigning to Mihai with the plan that the 19STABLE version will be in CONTRIB and the HEAD version will be for Moodle 2.0. Once the code is developed, tested, etc. we can create a new issue in the MDL project to add it to core. Let me know if there are any questions or if you need anything else. Peace - Anthony

Hello everyone!

I would like feedback on my integration work for Moodle 2. Please check my latest forum discussion:

http://moodle.org/mod/forum/discuss.php?d=130337

Thank you!

Hello MartinD!

I have addressed the "PW" icon issue. I changed the icon. Please let me know if that's fine.

I have also addressed the issue regarding confusion when switching from TinyMCE to PaintWeb. Now there's a yellow "info bar" telling users they switched from TinyMCE to PaintWeb to edit the selected image. The info bar also addresses the issue you reported about "finding the way out from PaintWeb": the bar holds two buttons now, one "Save" and another "Cancel".

Please let me know if these changes satisfy your requests for improvements.

Thank you very much!

Hi Mihai,

one of the "most tiny things": if you change the size of paintweb icon from 15x15px to 20x20px (leave some empty space around your original icon) icon looks much better in toolbar of tinymce. All icons that are smaller than 20x20px get scaled to 20x20px in advanced theme of tinymce.

Mihai, thanks for coparrticipating GSoC, it would've been a lot more boring without being able to work with you once in a while!

As I never reported this anywhere else but in chat (I think?): if I could make just one wish, it would be this . There are ready-made implementations so in case you get tired of me whining during an idle afternoon this might be just the thing .

Please make controls manipulable by mouse. As drawing apps are used primarily by mouse and keyboard usage of most tools is at best an alternative for those who have no choice, switching to the keyboard to select numerical values really slows the user experience down.

SpinnerButton
Spinner component that accepts integer input from the user and provides buttons to increase/decrease the value. You can set the initial value, increment, and low and high values. (http://publib.boulder.ibm.com/infocenter/ablxhelp/v8r4m0/index.jsp?topic=/com.ibm.db2.abx.ref.doc/reference65.html )

http://developer.yahoo.com/yui/3/examples/widget/widget-extend.html
http://www.switchonthecode.com/tutorials/javascript-controls-the-spin-control

Olli, thanks for your continued and always valuable feedback. I was very glad to see us both collaborating on the user interface of the paint tool. Your feedback has prompted changes and will continue to drive further changes in the user interface.

You are indeed correct. I have already planned to make the inputs of type=number usable with the mouse - this is noted in the TODO list I have in the Google Code wiki.

There's tons of stuff I could do when I am bored, hehe. I hope to get to do all these things as soon as possible.

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. Thanks!

moving to newly created Patch: Paintweb component in CONTRIB