Hello everyone!
I am nearing completion of the PaintWeb drawing application. Code reorganization is done and the new GUI is almost done.
Everyone who is interested, please take the time to test it over at:
http://www.robodesign.ro/paintweb/trunk/demos/demo1.html
I am currently working on the updated color mixer, after which the application is pretty much "done". I can continue working on packaging and Moodle integration. Obviously, further new features and fixes are planned as we go along.
Enjoy! Please let us know if you find any bugs. Thanks!
Hi Mihai,
You are doing a good job on PaintWeb. I was just trying out the demo just a few minutes ago. Here are a few comments:
You are doing a good job on PaintWeb. I was just trying out the demo just a few minutes ago. Here are a few comments:
- Could you add some color to the buttons? Right now some of the buttons have more color than others. This made me think that maybe the other buttons were disabled. The help button was also hard to see in the corner.
- Also when I was using the controls in the eraser, they required me to press 'enter' after I had changed the input. Other buttons didn't require me to press enter, a click was enough.
- Is there a limit to undo? I was playing around drawing some shapes, but could only do a limited number of moves.
- Can the default setting be a white background with a dark think pencil?
Hello Jose!
Thank you very much for your feedback.
1. Adding colors, hmm ... not sure on this one. I added color only where I considered it's necessary. Should I use some colors for the shapes? For rectangle, ellipse, etc...?
2. The issue with the controls is "simple". I listen only for the input value "change" event. Browsers only fire the event when you press Enter and/or unfocus the input field. I could listen for the "input" even - for every character inserted, but then it would be slower. I'll ask my mentor how he prefers we deal with this issue.
3. Yes, there's a limit to undo: maximum 10 steps. This can be easily configured.
4. Not sure I understand the question... Please elaborate. The image background is white by default. It will be possible, in the future, to change the background color of the image.
Thanks again and good luck with your project as well!
Thank you very much for your feedback.
1. Adding colors, hmm ... not sure on this one. I added color only where I considered it's necessary. Should I use some colors for the shapes? For rectangle, ellipse, etc...?
2. The issue with the controls is "simple". I listen only for the input value "change" event. Browsers only fire the event when you press Enter and/or unfocus the input field. I could listen for the "input" even - for every character inserted, but then it would be slower. I'll ask my mentor how he prefers we deal with this issue.
3. Yes, there's a limit to undo: maximum 10 steps. This can be easily configured.
4. Not sure I understand the question... Please elaborate. The image background is white by default. It will be possible, in the future, to change the background color of the image.
Thanks again and good luck with your project as well!
Oh that is cool, good job!!!!
Its fails to work on Safari in my Mac but is fine in Firefox
Looks good - really looking 4ward to Moodle integration
Thanks so much
Clare
Looks good - really looking 4ward to Moodle integration
Thanks so much
Clare
I used it on Safari... worked okay for me 
Hello Clare!
Could you please retest in Safari?
I just updated PaintWeb and now it's all packaged. This might affect how it works in Safari on your Mac.
For more details here's my latest blog post about packaging:
http://www.robodesign.ro/mihai/blog/api-reference-and-packaging-for-paintweb
And here's the link to the PaintWeb demo:
http://www.robodesign.ro/paintweb/trunk/demos/demo1.html
Thank you very much for your time!
Could you please retest in Safari?
I just updated PaintWeb and now it's all packaged. This might affect how it works in Safari on your Mac.
For more details here's my latest blog post about packaging:
http://www.robodesign.ro/mihai/blog/api-reference-and-packaging-for-paintweb
And here's the link to the PaintWeb demo:
http://www.robodesign.ro/paintweb/trunk/demos/demo1.html
Thank you very much for your time!
Woah. That starts _way_ faster. Cool!
I'm glad you like it. I like how fast it starts on the OLPC XO as well - much better.
I just tried it in a safari in a mac, and I also get the same error that Clare has. When I click on the 'Edit Image' button it just says: "Loading, please wait...", but nothing else happens. I am running Mac OS X Leopard, Safari Version 4.0 (5530.17, r44862) .
I loaded up the developer tools in Safari and when the page loads, there are no js errors, when I click on 'Edit Image', I get the following error:
/paintweb/trunk/src/includes/lib.js:171 TypeError: Result of expression 'JSON.parse' [undefined] is not a function.
I hope this helps,
Jose
I loaded up the developer tools in Safari and when the page loads, there are no js errors, when I click on 'Edit Image', I get the following error:
/paintweb/trunk/src/includes/lib.js:171 TypeError: Result of expression 'JSON.parse' [undefined] is not a function.
I hope this helps,
Jose
Hi,
I have tried it with Firefox and Konqueror on PCBSD and no problems.
Apart from the hand tool moving the background and no way of selecting object.
A hearty well done.
John
I have tried it with Firefox and Konqueror on PCBSD and no problems.
Apart from the hand tool moving the background and no way of selecting object.
A hearty well done.
John
Hello John!
Thanks for testing my application.
Could you please explain what do you mean with the hand tool moving the background? It should allow you to drag the image in the viewport, when the image is bigger than the viewport. Nothing more.
Selecting objects is not possible - this is not vector-based drawing, it's bitmapped, like in MS Paint.
Thanks for your appreciation. ;)
Thanks for testing my application.
Could you please explain what do you mean with the hand tool moving the background? It should allow you to drag the image in the viewport, when the image is bigger than the viewport. Nothing more.
Selecting objects is not possible - this is not vector-based drawing, it's bitmapped, like in MS Paint.
Thanks for your appreciation. ;)
Hmm, can you always reproduce the error?
I think in that case Safari does not properly fire the "load" event for the json library script, which is weird. Safari 4 on Windows works fine for me. Chromium browser on Linux works fine as well.
I do not have a mac to test things on it...
(thanks for the detailed error report!)
I think in that case Safari does not properly fire the "load" event for the json library script, which is weird. Safari 4 on Windows works fine for me. Chromium browser on Linux works fine as well.
I do not have a mac to test things on it...
(thanks for the detailed error report!)
When I test things in Safari 4.0 in a mac I get the js error below:
/paintweb/trunk/build/paintweb.js:1 SyntaxError: Unable to parse JSON string . Maybe do a google search or take a look at webkit for existing bugs related to json parsing?
/paintweb/trunk/build/paintweb.js:1 SyntaxError: Unable to parse JSON string . Maybe do a google search or take a look at webkit for existing bugs related to json parsing?
So, even after packaging the problem still remains.
This means that Safari 4 probably does not properly fire the 'load' event for the script. PaintWeb, when initialized, loads the json2.js file, and then goes on to actually use code from that JS. If the browser fires the load event too soon, PaintWeb "crashes" because it makes use of undefined methods.
Safari 4 (Webkit) does not yet implement JSON natively - hence the need to load json2.js. Webkit devs are working on it. ;)
To work around this isssue I think I need to load the json2.js file earlier - before PaintWeb instances are initialized/created, such that I do not need to rely on the 'load' event for the said script.
Thanks for testing again.
This means that Safari 4 probably does not properly fire the 'load' event for the script. PaintWeb, when initialized, loads the json2.js file, and then goes on to actually use code from that JS. If the browser fires the load event too soon, PaintWeb "crashes" because it makes use of undefined methods.
Safari 4 (Webkit) does not yet implement JSON natively - hence the need to load json2.js. Webkit devs are working on it. ;)
To work around this isssue I think I need to load the json2.js file earlier - before PaintWeb instances are initialized/created, such that I do not need to rely on the 'load' event for the said script.
Thanks for testing again.
I just tried on Safari 3.2.3 on Mac. The first demo works fine, but the TinyMCE integration doesn't seem to work. I can't even get the "Edit" button to work. 
I don't know if this could help in figuring out what's wrong, but when I mouse over the image, the cursor stays as an I beam, whereas in Firefox, the cursor becomes an arrow.
Hello Hubert!
Thanks for testing. This might mean my initialization fixes were effective.
The problem you mention with TinyMCE is, indeed, valid. The problem is not related to PaintWeb - in any TinyMCE installation you cannot select images, which is really unfortunate. This issue affects any Webkit-based browser: Google Chrome and Safari mainly.
Given you cannot easily select image elements, you cannot easily get to PaintWeb either.
The only way I found is to use Shift+Arrows. You can go with the cursor right next to the image, then use Shift to select it.
I tested another WYSIWYG editor like TinyMCE. The same problem: you cannot select images. It looks like it's not a TinyMCE bug, but a Webkit bug in the support for editable content.
Thanks for testing. This might mean my initialization fixes were effective.
The problem you mention with TinyMCE is, indeed, valid. The problem is not related to PaintWeb - in any TinyMCE installation you cannot select images, which is really unfortunate. This issue affects any Webkit-based browser: Google Chrome and Safari mainly.
Given you cannot easily select image elements, you cannot easily get to PaintWeb either.
The only way I found is to use Shift+Arrows. You can go with the cursor right next to the image, then use Shift to select it.
I tested another WYSIWYG editor like TinyMCE. The same problem: you cannot select images. It looks like it's not a TinyMCE bug, but a Webkit bug in the support for editable content.
Working well on Mac OSX wth Firefox 3
Thanks for testing, Stuart! Really appreciated.
For those interested in further testing, I have a second PaintWeb demo with TinyMCE 3 integration:
http://www.robodesign.ro/paintweb/trunk/demos/demo-tinymce.html
For those interested in further testing, I have a second PaintWeb demo with TinyMCE 3 integration:
http://www.robodesign.ro/paintweb/trunk/demos/demo-tinymce.html
That's very cool.
I could not get the colour pallette or mixer to work at all though.
I am using Firefox 3 on Ubuntu 9.10
Jon
I could not get the colour pallette or mixer to work at all though.
I am using Firefox 3 on Ubuntu 9.10
Jon
Yeah, sure. That's entirely broken at the moment. Working the color mixer and palette now. When they are done, I'll let you all know. ;)
Thanks for testing.
Thanks for testing.
Yesterday evening I pushed the update for the Color Picker tool and the Color Mixer.
http://www.robodesign.ro/paintweb/trunk/demos/demo1.html
Please go ahead and test it. The web application should be fully functional. Please let me know if there's something going wrong.
Thanks for your time. ;)
http://www.robodesign.ro/paintweb/trunk/demos/demo1.html
Please go ahead and test it. The web application should be fully functional. Please let me know if there's something going wrong.
Thanks for your time. ;)
In reply to Mihai Sucan
Re: Completed: the Color Mixer and the Color Picker tool
by John Andrewartha -
Looking better with every addition.
Can we have a browse instead of insert from URL in the insert image. That keeps it consistent with other Moodle editors.
John
Can we have a browse instead of insert from URL in the insert image. That keeps it consistent with other Moodle editors.
John
In reply to John Andrewartha
Re: Completed: the Color Mixer and the Color Picker tool
by Mihai Sucan -
At the moment it's just the client-side work.
I will work on that during the Moodle integration (which is rapidly approaching). Obviously, I need to use their new File APIs and any of the relevant functionality to make things "just work".
Thanks!
I will work on that during the Moodle integration (which is rapidly approaching). Obviously, I need to use their new File APIs and any of the relevant functionality to make things "just work".
Thanks!
Mihai,
Keep up the good work. I am excited about this additional functionality. Sorry I wasn't able to get students to use it during summer school because we didn't have the right browser.
Paula
Hello Paula!
Don't worry. I really appreciate your interest in this project.
Best regards,
Mihai
Don't worry. I really appreciate your interest in this project.
Best regards,
Mihai
Mihai,
Very nice! Please do keep up the good work.
-- Art
Very nice! Please do keep up the good work.
-- Art
Thank you!
Awesome Job! I can't wait to add this to our moodle setup. This may help provide an "in" with elementary teachers who may just want their students to create a simple image as part of a project.
Thanks Chris!
I'm glad to see people are interested into this project.
I have started work on Moodle integration, which is currently more in the initial planning stages. I hope it won't take too long before a demo can be tested by users.
I'm glad to see people are interested into this project.
I have started work on Moodle integration, which is currently more in the initial planning stages. I hope it won't take too long before a demo can be tested by users.
Mihai - What I saw I liked. I believe it was commented earlier that one of the things that folks may find challenging is figuring out how to edit the image and how to finish the edit and go back to the TinyMCE editor. I also agree the buttons appear grayed out. But in terms of functionality I found it quite usable. Please keep in mind that this was nothing but the most superficial of testing and my first impression. Keep up the good work and when I have a chance to go back and read some of the other responses here I may have further comments. Peace - Anthony
Hello Anthony!
Thanks for trying PaintWeb and for your kind comments.
Indeed, the issue about how to edit the image and how to finish is quite confusing. However, fear not: the solution is already implemented on my system, I just need to push the update to the demo on the robodesign.ro server. (i'll do this asap)
Thanks for trying PaintWeb and for your kind comments.
Indeed, the issue about how to edit the image and how to finish is quite confusing. However, fear not: the solution is already implemented on my system, I just need to push the update to the demo on the robodesign.ro server. (i'll do this asap)
Excellent - I look forward to seeing the new and improved version. Thanks for your responsiveness on the forums to the feedback given. Peace - Anthony
Thanks! ;)
I'm done, hehe. You can try the updated TinyMCE plugin:
http://www.robodesign.ro/paintweb/trunk/demos/demo-tinymce.html
Not too much on the visible side, but you now have obvious "save" and "cancel" buttons, with proper feedback.
The code evolved quite a lot, now PaintWeb is dynamically unloaded, when it's closed, and there's complete support for server-side file save, there just needs to be a PHP script to handle the save.
I have also made some API changes/improvements for proper localization and file saving support. The updated API reference reflects the changes. I'll also update the documentation at Google Code, when I have time.
Please let me know if you have more suggestions.
I'm done, hehe. You can try the updated TinyMCE plugin:
http://www.robodesign.ro/paintweb/trunk/demos/demo-tinymce.html
Not too much on the visible side, but you now have obvious "save" and "cancel" buttons, with proper feedback.
The code evolved quite a lot, now PaintWeb is dynamically unloaded, when it's closed, and there's complete support for server-side file save, there just needs to be a PHP script to handle the save.
I have also made some API changes/improvements for proper localization and file saving support. The updated API reference reflects the changes. I'll also update the documentation at Google Code, when I have time.
Please let me know if you have more suggestions.
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.
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.
Mihai,
Thank you for sharing your presentation. It was very interesting getting a peek at what went into this kind of project and some of the parameters you had to work in.
Thank you also for your hard work and continued work on developing this tool.
Paula
Thank you very much Paula, for your appreciation.
Is there a version ready for Moodle 1.9yet? I have been following your project and it looks very impressive. I would really like to try this out.
Hello Chris!
The Moodle 1.9 code is ready. However, it uses a new database table for tracking images saved by the paint tool.
The code for automatic installation of the new table is not yet merged into the my Git repository that holds the paint tool integration into Moodle 1.9.
I have to ping Martin Langhoff about this.
The Moodle 1.9 code is ready. However, it uses a new database table for tracking images saved by the paint tool.
The code for automatic installation of the new table is not yet merged into the my Git repository that holds the paint tool integration into Moodle 1.9.
I have to ping Martin Langhoff about this.
Hello Mihai,
Please let me us know when it is ready for download here. Looking forward to trying this out.
Please let me us know when it is ready for download here. Looking forward to trying this out.
Dear Mihai:
I'm testing your patch in order to include TinyMCE & Paintweb in the moodle production site of ULPGC.
I have managed to wonder the creation of "paintweb-images" directory within moodledata. After error mesages I created a new paintweb-images table with fields id, rid, tbl, col, img and kicked out all error messages claiming for that table.
However, I cannot SAVE images. I always get the error message 'moodle:jsonParseFailed' :
Parsing the JSON result from the server failed!
SyntaxError: JSON.parse
I cannot see wheer this error is generated. Can you help??
I'm testing your patch in order to include TinyMCE & Paintweb in the moodle production site of ULPGC.
I have managed to wonder the creation of "paintweb-images" directory within moodledata. After error mesages I created a new paintweb-images table with fields id, rid, tbl, col, img and kicked out all error messages claiming for that table.
However, I cannot SAVE images. I always get the error message 'moodle:jsonParseFailed' :
Parsing the JSON result from the server failed!
SyntaxError: JSON.parse
I cannot see wheer this error is generated. Can you help??
Hello Enrique!
Congrats for your work. It's really lots of work to get it working without any pre-made patches.
I have attached a SQL dump of the mdl_paintweb_images table structure. You can use it to properly setup the table.
Please use the Firebug extension in Firefox to determine which XmlHttpRequest failed, point me to which file failed. With this extension you can see all the info, including the response from the server.
Basically, when you try to save an image, the JavaScript from the browser sends the image to the server via an XmlHttpRequest. The result of saving the image is sent back from the server to the client in JSON format. If the PHP script failed to properly execute it might happen that php errors/warnings/notices can get into the way of the JSON format, causing parse errors.
Hence, please check with Firebug what happens more precisely. Please reply with any info you found. Once I get the details I asked for, I am sure we can get to the bottom of the problem.
Congrats for your work. It's really lots of work to get it working without any pre-made patches.
I have attached a SQL dump of the mdl_paintweb_images table structure. You can use it to properly setup the table.
Please use the Firebug extension in Firefox to determine which XmlHttpRequest failed, point me to which file failed. With this extension you can see all the info, including the response from the server.
Basically, when you try to save an image, the JavaScript from the browser sends the image to the server via an XmlHttpRequest. The result of saving the image is sent back from the server to the client in JSON format. If the PHP script failed to properly execute it might happen that php errors/warnings/notices can get into the way of the JSON format, causing parse errors.
Hence, please check with Firebug what happens more precisely. Please reply with any info you found. Once I get the details I asked for, I am sure we can get to the bottom of the problem.
Dear Mihai Sucan
Hi, I check the link which you provide.It is perfectly working.I want to install PaintWb on Moodle 2.7. Please tell me steps how paint web install in Moodle 2.7.
Please Help.