WikiWhiteboard Plugin for JSPWiki

WYSIWYG drawing for Wikis

News

2003-11-22 : Write-up of how it works at xml.com: Creating an SVG Wiki

2003-09-17 : Colour and link support added

2003-08-27 : Initial release. Probably only suitable for experienced fork lift truck drivers. Use with care!

Comments/Suggestions

What It Is

A plugin for JSPWiki that allows you to draw and save sketches in your Wiki pages

In Use

Include the following in a Wiki page (edit view) :

[{Sketch}]

When you return to the view, this will show two buttons and a drawing area :

You can now scribble on the drawing. Click Save to save the drawing, click Clear to completely erase the drawing.

When you return to the page you will see the saved drawing. You can draw on it again without having to go into the Edit mode.

WYSIWIKIWIG!

Update! (2003-09-17)

Thank to the efforts of Jim Ley, the whiteboard now has correct zoom handling and supports colour and linking:

To change colour press on a key 'r', 'g' or 'b' (for red, green, blue)

To insert text, press Alt and click. If the text is in this format :

[http://jibbering.com/ Jim Ley]

it will insert a link to a remote page. If the text is a WikiWord then the link will be relative, pointing to that WikiWord, i.e.

<a xlink:href="WikiWord">
    <text x="100" y="100">WikiWord</text>
</a>

Requirements

Download

Everything's in jspwiki-whiteboard_2003-08-27.zip

Update 2003-09-17, replacement sketch.svg (number 2 - see porting notes)

Update 2003-09-01, replacement sketch.svg

Should just drop-in in place of earlier version. Tidied up a lot, also added a little tweak so it'll draw a dot if you just click on the page (actually a tiny path).

Installation

Sketchy!

1. Get the download above, unzip it into a convenient temporary directory.

2. Create a directory called /data/svg beneath your JSPWiki root directory

(hmm - in the dev version I've got the Wiki pages in that /data dir, though I don't think that's significant)

3. Copy sketch.svg to /data/svg

4. Create a new directory :

JSPWiki\WEB-INF\classes\org\jemblog\jspwiki\plugins

and put the three .class files from the zip into it

5. Edit JSPWiki\WEB-INF\jspwiki.properties and modify the line:

jspwiki.plugin.searchPath =

to read:

jspwiki.plugin.searchPath = org.jemblog.jspwiki.plugins

6. Add the following to JSPWiki\WEB-INF\web.xml :

(after the other <servlet> elements)

<servlet>
    <servlet-name>SvgUploadServlet</servlet-name>
    <servlet-class>org.jemblog.jspwiki.plugins.SvgUploadServlet</servlet-class>
</servlet>

(after the other <servlet-mapping> elements)

<servlet-mapping>
    <servlet-name>SvgUploadServlet</servlet-name>
    <url-pattern>/svgupload</url-pattern>
</servlet-mapping>

8. Restart Tomcat

9. Open any Wiki page in the browser, go to 'Edit this Page', type in

[{Sketch}]

somewhere, save that page and see if it works...

Known Problems

Quite often needs a page refresh after saving to show up new version.

Limited to one sketch per page.

Probably won't behave well if more than one person tries to edit the same drawing at the same time.

The class discovery in JSPWiki seems like it might be flaky - it may be necessary to use the fully-qualified class name to embed the plugin in a page, i.e.

[{org.jemblog.jspwiki.plugins.Sketch}]

License

LGPL (same as the rest of JSPWiki) - if there's any problem with this, please let me know.

Porting Notes

Every Wiki should have this facility!

I originally hacked it for my own Wiki-in-progress Stiki.

Phil has reported that he was able to get this plugin working on SimpleWeb. Also Eugene has created the first live WikiWhiteboard using PurpleWiki (based on UseModWiki, Perl).

Page linking issue

The version of sketch.svg above should work ok with JSPWiki, but may need tweaking to work with other Wikis depending on how they express the page URIs. The version above includes:

<a xlink:href="Wiki.jsp?page='+txt+'">

where txt is the WikiWord to link to, which if txt = "WikiPage" produces the link

./Wiki.jsp?page=WikiPage

This version: sketch-non-JSPWiki.svg uses:

<a xlink:href="'+txt+'">

which produces the link:

./WikiPage

Development

Get on with it! The SVG part is relatively standalone, so it would be nice to see some extra (but still simple) facilities, e.g. shape drawing (node and arc diagrams!!), text, and of course clickable links...

The server-side part of the code could do with concurrent editing dealing with properly, it could even be done in a groovy fashion with real-time concurrent editing like Jim's SVG Whiteboard. A few minor extensions like a "freeze" button would be nice. Pretty soon I'm going to be looking at auto-generation of RDF metadata for the WikiWhiteboard.

Credits

Thanks to Phil Wilson & Leigh Dodds for their encouragement and support for small furry creatures.

Thanks to Eugene Eric Kim for the live demo. Thanks to Jim Ley for his SVG wizardry.

Comments/Suggestions

Danny Ayers 2003