Contents

  1. Short description
  2. News
  3. Samples
  4. Discussion

Short description

Add support for the JHotDraw / AnyWikiDraw graphical editor as replacement for the outdated TWikiDraw and name it MoinMoinWikiDraw.

Requirements / Problems

Bugs

News

Samples

The alpha version is working now. Please have a look at: http://hg.moinmo.in/moin/1.8-svgdraw-jmeier/

Look at this demo: Demo of a JHotDraw application for SVG <- Java Applet (accept the dialog which pops up)

Can be extended a lot. Look at the screenshots on the sourceforge project site.

Here are a few screenshots of the MoinMoin implementation:

rects.png

Click on an object once to see, if it has a yellow handle for special features like here: you can change the edges of the rect:

special_function1.png

Click on an object twice (no double click!), and if it get's pink, you can resize and rotate it by grabbing the pink dots:

rotate_scale.png

Workflow for using MoinMoinDraw in MoinMoin

  1. users should be able to include MoinMoinWikiDraw to their pages with the help of a macro.

  2. This macro could also be handled by the GUI editor.
  3. the macro is connected to a SVG image (XML content) which is located in the attachments of that or a different page.
  4. a PNG preview picture is shown on the location of the macro in the page. If there is no previsously editet image, the PNG shows a white background.
  5. the PNG picture is surounded with a html link. If the picture gets clicked by the user, the html link will reload the page and instead of showing the PNG it will start the JHotDraw image editor applet.
  6. JHotDraw applet will be shown in place of the macro and loads the SVG image if there is already one.
  7. User draws images and also image maps.
  8. after pressing the "sichern" / "save" buttton, three files are stored in the attachment location: the SVG file, a PNG file which was rendered out of the SVG (needed if a browser can't handle SVG images) and a MAP file which contains information for the image map.
  9. after pressing the "save" button also the html page will be reloaded by the applet. but instead of the applet the (new) PNG image will be shown again.

Steps for implementing the feature "MoinMoinWikiDraw editor"

How to use it?

In text mode (GUI editor not supported yet) add this code: 

{{drawingsvg:<name of your picture without the extension>}}

Example:
{{drawingsvg:MyPic}}

Save your page. Then click on the attachment image. On the Attachment page should the new Java applet be loaded. Edit graphics, save it. Then you will be redirected to your page. There is a PNG version of the graphics. At the top left site over the graphics there is a edit button. Klick it to edit the graphics.

Cool. Isn't it :-) ?

Yeah, definitely! :) I like it, it is much more powerful than the old twikidraw and .svg output is definitely better than that proprietary .draw. -- ThomasWaldmann 2009-08-17 11:48:22

Background

JHotDraw is a rich framework for graphical editors. There is also a project which adapts JHotDraw for usage in Wikis called AnyWikiDraw.The MoinMoin version of AnyWikiDraw is called MoinMoinWikiDraw.

JHotDraw's current version is 7.2. It's open source and hosted on Sourceforge. One of the programmers was Erich Gamma, the design pattern pope.

BTW: TWikiDraw (current graphical editor for MoinMoin) is based on an old version of HotDraw which is an antecessor of JHotDraw.

Confused? -> HotDraw (old) -> TWikiDraw (old MoinMoin image editor) -> JHotDraw (completely recoded version of HotDraw) -> AnyWikiDraw (modified version of JHotDraw for use in Wikis) -> MoinMoinWikiDraw (modified version of AnyWikiDraw) :-)

License

You can license JHotDraw 7 under the {Lesser GNU Public License (LGPL)} or under the {Creative Commons Attribution (by) 3.0} license.

Discussion

In future Moin versions, attachments and wikipages will be roughly the same (if I have understand this correctly): they are just items. It is very nice, that AnyWikiDraw allows for the editing of svg, png, and also jpg files. Maybe it would be a nice idea to think of some more generic approach of dealing with the editing of items. To edit a wiki page, you just click "edit" in the menu bar. Maybe if you view an item's page (e.g. an image such as http://moinmo.in/FeatureRequests/BetterControlOverIncludedImages/HelpOnInsertingImages?action=AttachFile&do=view&target=link-info.png) and you click "edit" in the menu bar, AnyWikiDraw is launched. So what I want to say is besides having different items and viewing/showing them depending on the mime-type in the browser, there might be also maybe a more basic approach for "editing" of items in Moin. But I am not "up to date" with the latest development going on at http://hg.moinmo.in.de . -- OliverSiemoneit 2009-08-14 18:47:12

At the moment I automatically add an edit button on the top left of each picture. A click on this edit button starts the image editor applet also in the case when a big image map lays over the picture. But as Thomas Waldmann wrote, some users couldn't be happy with this solution. Would it better to send a text instead of the icon? In my opinion the "edit button / edit text" should be separated from the picture just for this image map case. -- JosefMeier 2009-08-26 20:27:23

I think AnyWikiDraw should be implemented as action. So that we can call it by current action macro e.g. <<Action(AnyWikiDraw,target=test.svg)>> and later on by link syntax. Afterwards it should be made configurable what action is called for creating an svg file by the drawing markup. -- ReimarBauer 2009-08-27 05:27:26

I investigate next a converter for draw to svg.

This anywikidraw feature needs a help page on http://master19.moinmo.in. -- ReimarBauer 2009-09-06 09:23:49

CategoryFeatureRequest

MoinMoin: FeatureRequests/JHotDrawSupport (last edited 2009-09-06 09:25:23 by ReimarBauer)