General developer forum

Editing images 'inline' in a form -- tools?

 
 
Martin Langhoff - Sailing
Editing images 'inline' in a form -- tools?
 
I have seen some clunky Flash-based image editors in the past, and was wondering about letting kids (OLPC kids) draw straight into a 'paint' window, in a forum post (or any form with an html editor).

This could be nice and useful for kids of all ages. Imagine embedding an image as you do normally, and then calling up the editor to crop it, or to annotate it (arrows to emphasize, etc).

The suspicion I have is that there are tools out there that do that. There was a thread on this forum about graphs here http://moodle.org/mod/forum/discuss.php?d=62002 - useful but not quite what I am after, and they lack the extra ajaxy/javascripty magic to make it 'just work'. I'm sure someone's done this end-to-end.

Any good ones to use as reference? Any FOSS ones that I can get the code for and tweak it to run well on Gnash? (XO laptops don't have Flash, they have the open source implementation, Gnash.)
 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Editing images 'inline' in a form -- tools?
Group Particularly helpful Moodlers

Hi Martin,

I have seen lots of them too but have no idea about FOSS or Gnash compatible scripts. For example http://www.allgraphicdesign.com/graphicsblog/2008/05/16/online-drawing-tools-free-online-painting-sketching-tools/ is a good list of some well-known online tools - time to test some...

I can try to find tomorrow some of those cute sites I have visited during the last year.

 
Average of ratings: -
Martin Langhoff - Sailing
Re: Editing images 'inline' in a form -- tools?
 
Had a bit of a browse, thanks, that's an excellent listing. Didn't look at all in depth (I'm in the middle of a mini-conference about Sugar).

Queekly is fascinating. It's the tool (lot of work in it!), and the community. If I had a hand that could draw... it's got something in common with the craft style style we have in open source, look at what the masters do, copy, mimic, inspire and steal. Hmmmmm! It's worth as whole moodle module, or as a standalone tool. Gorgeous.

Kerpoof and its ilk are cute and funny but a lot of work, and has a clear ceiling.

Litha-paint or the offsite.net tool are simpler, and closer to what I was thinking of. Not as exciting as the Queekly tool, but simple, uncluttered. Unclear on the licenses, I can't see anything that is FOSS mixed
 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Editing images 'inline' in a form -- tools?
Group Particularly helpful Moodlers

I tried to find some FOSS tools... and tested scripts with Adobe Flash CS3 but it might be possible to use also javascript and php instead of flash.

Check Bonus demo chapter: AJAX Whiteboard from http://www.cristiandarie.ro/ajax-php/ almost at the bottom of that page and http://www.cristiandarie.ro/ajax-php/whiteboard_code.zip .

If you can combine those scripts to AIE http://www.ajax-image-editor.com/features.html (it's open source) you might get a really good image editor without flash - just ajax and php.

There may be a few free flash based (fla) drawing tool scripts like

http://www.webwasp.co.uk/tutorials/018/index.php (4 pages) - particularly http://www.webwasp.co.uk/tutorials/018/04.php

or http://www.kirupa.com/developer/actionscript/drawingboard.htm

and some new flex scripts might be available - better or similar like Flex paint http://www.jamesward.com/wordpress/2006/08/16/flex-paint-flex-display-object-to-png/ but quality is not at all the same as some of those tools that you checked before.

Queeky has also that mini version Queeky Micropainter http://www.queeky.com/cms/draw/en/gadget/ ...

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Editing images 'inline' in a form -- tools?
Group Particularly helpful Moodlers

Sorry Martin, forget AIE - it's good but installation.txt tells that you need to download also Ext-JS 2.2 (open source) from http://extjs.com/products/extjs/download.php and the package would take about 30 MB of space which is too much... + it requires ImageMagick...

Maybe those other (flash) scripts or embedded online services are more suitable.

 
Average of ratings: -
Martin Langhoff - Sailing
Re: Editing images 'inline' in a form -- tools?
 
Good sleuthing!

The 'tutorial' ones are fairly simplistic. For example, the webwasp one is clearly programmed with a strategy that can't keep up with mouse movements (on my fast laptop!). And the fast one is based on Flex, which I'm even less confident on Gnash compatibility.

At the Queekly-sophistication level, well there doesn't seem to be much, and less that is open. You mention AIE, and it's nice for resizing, cropping and filters... but it doesn't let me paint, maybe I can't find the button wink
 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Editing images 'inline' in a form -- tools?
Group Particularly helpful Moodlers

Can it be Java applet? I downloaded an open source applet called ChibiPaint (also source code available from http://chibipaint.com/downloads.html ) and tested it in Dragmath plugin with TinyMCE - it's a little slower to render than flash and does not look so sweat but can draw and paint and you can send/save the images as png or multilayer "chibifile". Attached readme.txt

I am a newbie both in Java, Flex and Flash - have tried them all but it's all testing level. When I made a short period flipbook project with Angela Roberts year ago http://korpelainen.net/m183/mod/flipbook/view.php?id=7 we got a couple of commercial scripts (Angela bought the editable source license) + open source scripts and combined them to moodle (asp version to php version) and even got it somehow to work but I never found the time to finish open source version. Now I have the equation editor integration almost ready: asciimathml, latexmathml, latex, graphs and calculator plugins - with image fallback for IE - for TinyMCE & moodle 2.0 and later for HTMLArea (should be ready just before Christmas). If you find any interesting scripts and need help in testing I have plenty of time (after Christmas) for helping. A really functional kids version of moodle has been one of my dreams (including themes etc) and one of the main reasons why I originally started to read and write code (=study) and use moodle.

Applet

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Editing images 'inline' in a form -- tools?
Group Particularly helpful Moodlers

One alternative, easy solution:

http://www.twiddla.com/

I really like this!

 http://www.twiddla.com/About/About.aspx

Does it work with XO laptops? It looks like that site is using mainly javascripts.

 
Average of ratings:Useful (1)
Picture of Mauno Korpelainen
Re: Editing images 'inline' in a form -- tools?
Group Particularly helpful Moodlers

Martin,

can you contact someone from http://www.twiddla.com/About/About.aspx and ask if it is possible to use TWIDDLA inside moodle? This is the most interactive tool I have seen...

TWIDDLA

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Editing images 'inline' in a form -- tools?
Group Particularly helpful Moodlers

... and if Twiddla or Queeky and Java applets are not available there are new products coming like Dabbleboard that is almost like Twiddla and it might be possible to do some kind of a "deal" (for non commercial use) for moodle - read

http://www.dabbleboard.com/developer

http://www.dabbleboard.com/about

and test

http://www.dabbleboard.com/draw

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Editing images 'inline' in a form -- tools?
Group Particularly helpful Moodlers

One more very light version:

Litha-paint is small AJAX-based vector drawing script - demo is in http://litha-paint.com/

Demo files use also a couple of files of yui and wz_jsgraphics.js from http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm and it was easy to get them to work and it should be easy to use these in a plugin or activity in moodle. Drawing can be saved as a jpg file.


 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Editing images 'inline' in a form -- tools?
Group Particularly helpful Moodlers

... and finally (before you get tired of reading all these posts) if we forget drawing but need cropping, rotating, flipping or resizing http://www.phpletter.com/DOWNLOAD/ has a nice free Ajax File and Image manager that has image editor and the package works with TinyMCE or FCKEditor or as stand alone version. But it's more suitable for administrators than for kids.

Image editor

I vote for Twiddla and Queekly (if they can be used)

 
Average of ratings: -
Picture of Kian Leong Goh
Re: Editing images 'inline' in a form -- tools?
 
Seems like the lithapaint demo API is not longer in use thus I could not test this tool. Any alternative and roundabouts for using this application? I understand from their blog they have made this tool open source but they seemed to utilise JSP for server side processing instead of PHP making it somewhat not worth using
 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Editing images 'inline' in a form -- tools?
Group Particularly helpful Moodlers

There are tons of these... http://www.visual-blast.com/category/online-tools/

Most of them could be used in plugins but Gnash ??? mixed

 
Average of ratings: -
Picture of zaw mn
Re: Editing images 'inline' in a form -- tools?
 
Hi Mauno

I'm Zaw who asking at Super equation editor (SEE) development.
The shap drawing I want may be like tool that discussed in this topic.

I tried http://www.robodesign.ro/paintweb/trunk/demos/demo-tinymce.html. But it is very less feature.

Is there any usable vector drawing plugin for tinymce in moodle?

Thanks

Zaw

 
Average of ratings: -
Picture of Ketan Deore
Re: Editing images 'inline' in a form -- tools?
 

Hello zaw,

                       Please tell me how paint web editor integrate with Moodle 2.7. please tell me installation steps.I read documents but could not install,Please help me..

 
Average of ratings: -