create new tag
, view all tags
At work we had the need for embedding drawings in TWiki pages that are editable. Editing pixel images (e.g GIF, BMP) is not so convenient, because of the download - convert - edit - convert - attach cycle.

The result is TWikiDraw, an applet based drawing editor that saves drawings on the server using the TWiki upload script. Drawings are saved in two formats:

  1. In the internal TWikiDraw format ( *.draw )
  2. In GIF format for easy viewing in the topic ( *.gif )

To insert a TWiki drawing into a topic, write the command %DRAWING{name}% anywhere in a TWiki topic. You can name the drawing anything you like, allowed characters are A-Z a-z 0-9 _ - . . If you have only one drawing in the topic you can simply write %DRAWING% .

To install the TWikiDraw add on:

  • Download the TWikiDraw.zip add on distribution.
  • Create a TWikiDraw topic in TWiki.TWiki web (or any other web) and enter text of file TWikiDraw.txt .
  • Attach the following files in jar/CH/ifa/draw/images/ to the TWikiDraw topic: SEL1.gif, TEXT1.gif, ATEXT1.gif, RECT1.gif, RRECT1.gif, ELLIPSE1.gif, LINE1.gif, CONN1.gif, OCONN1.gif, SCRIBBL1.gif, BORDDEC1.gif .
  • Attach the file jar/twikidraw.jar to the TWikiDraw topic.
  • Copy oopstwikidraw.tmpl to the templates directory.
  • If you create the TWikiDraw topic in a different web then TWiki.TWiki you need to reflect that in oopstwikidraw.tmpl .
  • Patch wikicfg.pm with the content of DRAWINGtag.txt .
  • Patch the changes script and the mailnotify script to filter out the %DRAWING% commands. Enter this (second line) :
        $head =~ s/%INCLUDE[^%]*%/ /go; # remove server side includes
        $head =~ s/%DRAWING[^%]*%/ /go; # remove TWiki drawings

Question to all: Should this add on go into the main TWiki distribution? The con is that it raises the RequiredEnvironmentForTWiki to include a Java capable browser. This is eased somewhat because you do not need a Java enabled browser to view the images (they are simple GIF images.)

Answers: (Vote is Yes/No/Pending)

Who: Vote: Notes:
PeterThoeny Pending Question about raising RequiredEnvironmentForTWiki
RalfHandl Yes Helpful feature
JamalWills Pending "I gotta get me one of these!" but it may not be for everyone. Perhaps it should be a StandardExtension?
JohnAltstadt qualified yes We use Netscape for cross-platform reasons. Any chance of getting an applet that works properly with Netscape on Sun workstations? ( Could be done. Who would like to tackle this issue? - PeterThoeny)
MattQuail Yes its great!
ThomasDartsch Yes cool feature
JoshuaRodman No Some platforms have no working java browsers, and more pointedly, the only browsers with decent text editing are text only (Lynx, w3m). This means a Wiki with this feature enabled cannot be low-friction for all content, and the point of Wiki, to my mind, is the low friction collaboration. I think perhaps a referenced extension would be good.
KevinKinnell No For all the reasons pointed out by JoshuaRodman, plus it makes a standard distribution with tools for an OfflineWiki more difficult (eg., much harder to monkey up a TWiki server using HTTP::). I favor the StandardExtension for this. I do have to say this is ultra cool :-)
JohnTalintyre Yes I think this is a useful feature and fits in well. If someone can't run Java, then they can still view the Image. If they really want to they can always edit the drawing file!
MartinCleaver Yes I agree with JohnTalintyre
AndreaSterbini Yes Let all play with it!
RichardDonkin Yes This makes TWiki a lot more attractive to normal end users - most people on intranets use Java-enabled browsers in any case, so it's fine for the target market
ScottJohnson Yes I think that embedded drawings should be a default feature in TWiki.

See also:

  • TWikiDraw in TWiki.TWiki web has end user help.
  • TestTopic8 in TWiki.Test has two test images.

Some legal notes:

-- PeterThoeny - 25 Jul 2000

Known issues when using Netscape 4.7:

  • The tool bar on the left side of the applet is not visible, but can be operated (hunt the tools with the mouse and the statusbar message)
  • Save sometimes fails with an IO error message. The *.draw file is saved correctly, but the *.gif file is not saved. That means, work is not lost, but the gif file is not visible (or outdated) when you view the page. Reloading the applet then saving again sometimes helps.

Anybody up to this debug task?

-- PeterThoeny - 28 Jul 2000

Known issues:

-- PeterThoeny - 07 Sep 2000

A quick casual inspection of the patch leads me to believe that it does no 'locking' of the topic/drawing while it is being edited. How hard would it be to acquire a topic lock before being able to edit a drawing for a page?

Ideas would be:

  • create a 'editdrawing' script along the lines of the existing 'edit' script
  • create a table of drawings at the bottom of the 'edit' page, in the same style as the attachment table. You can then have an 'edit' button there instead of an edit-anchored .gif in the inline text.

But I suppose these things require more of a major 'change' as opposed to the current nice 'patch' smile

-- MattQuail - 30 Jul 2000

Not locking the topic is done by design because it is not necessary. Saving a drawing means attaching two files to the topic. Attaching files does not need a lock because when you edit and save a topic it will re-read the file attachment table, i.e. in case someone else attached a file while you are editing a topic you will get your topic changes and the other person's file attachment changes.

However, locking the topic would make sense to prevent two users updating the same drawing at the same time. For this we could introduce a lock script, to be used by add on programs to explicitly lock and unlock a topic. Proposed usage: topiclock/Web/TopicName?lock=on (to lock), topiclock/Web/TopicName?unlock=on (to unlock). Follow up in LockScript.

-- PeterThoeny - 31 Jul 2000

About the failure attaching to the topic all 3 files (drawing, gif and map).

As pointed out by CrawfordCurrie in a email, this has to do with the fact that netscape raises an exception when the POST (attach) operation is done and ends in a redirection error (403), that's the normal way of communicating a redirection to the browser.

The redirection is part of the normal attach script, probably the error goes away if:

  • we adda a ?cmd=noredirect to the attachment script
  • we change the POST code accordingly on the Java side ...
  • (in java) just trap the exception for error 403 and ignore it

-- AndreaSterbini - 26 Mar 2001

This did not work properly for me - the resulting GIF did not update on screen. Not sure whether the page did not reload after edit or whether it did not write the GIF. I added the Text "How cool is that" on TestTopic8, when I go back and re-edit the change has taken effect.

I'll check in a mo.

-- MartinCleaver - 27 Mar 2001

It turned out that the page just needed reloading after the edit. Counterintuitive though. Not sure what can be done.

-- MartinCleaver - 27 Mar 2001

A proposal for an extension of twikidraw:

  • the gif image is saved with transparent background (I am digging in the code to see how to do it ... the Gif encoder has a transparentbackgroundcolor parameter ... let see ...)
  • we can layer the drawing over a background bitmap to obtain picture annotations!!!
    • instead than using the LAYER tag we can use a TABLE with proper dimensions and given background picture (see PoorManOverlay).
    • the DRAWING tag can be transformed to the approprate TABLE
      • if name.background.gif is present as an attachment
      • if the argument bgimage="URL" is given
  • if TwikiDraw editor shows the background image then positioning annotations and URL links would be really easy!

I'm working on it ... see you later ... (but take it easy ...)

-- AndreaSterbini - 27 Mar 2001

Found how to save transparent gifs ...

-- AndreaSterbini - 09 Apr 2001

The updated attachment contains a modified version of TWikiDraw as follows:

  • Modified version of upload script, uploaddrawing. This implements a simple protocol that lets the applet know if the save succeeded or not.
  • Spawns off a frame instead of running in an internal window. This lets us add menus, which in turn lets us ....
    • Enable other JHotDraw commands, such as align
    • Add commands to give better control over save/exit
  • Tested with Netscape 4.61 and IE5
  • Scrollbars
  • Added "group box" resizing handles - gives ultra-crude "zoom" capability

-- CrawfordCurrie - 31 may 2001

I've just implemented Crawford's updated version of this applet on the TWiki March beta and I'm very impressed! A couple of gotchas for anyone else doing this:

  • This .zip file doesn't include the icons for TWikiDraw - had to download them from the page explicitly.
  • It would be easier to install from a remote ssh session if the TWikiDraw.txt file was in native TWiki format (i.e. tabs instead of three-spaces to indent bullets), so it can just be copied into the TWiki web directory from the command line. I had to fix this with vi, as the file is too long for copy/paste from terminal window to Edit page.
  • The file DRAWINGtag.txt is based on Dec2000 code and modifies wikicfg.pm - for the March 2001 beta or later, you need to modify TWiki/Plugins/DefaultPlugin.pm as per the attached context diff (can be used with patch).
  • The file topicdraw.tmpl must be copied to oopstopicdraw.tmpl - the ReadMe.txt file is wrong here.
  • There is no need for the template to be writeable by Apache.
  • The comment about patching the changes and search script seems out of date - the point at which the patch should go doesn't exist any more in March beta, and nothing bad happens when you put a %DRAWING% right at the top of a page.

Update: can't upload from Lynx for some reason, but here's the context diff for DefaultPlugin.pm anyway....

NOTE: the VERBATIM tag seems a bit broken, as it expands any %-variables found between the tags... Not exactly what it should be doing, particularly for TWiki code fragments! Until this is fixed, hit Edit and copy the diff from there.

*** DefaultPlugin.pm.ori        Sun Jun  3 23:52:50 2001
--- NewDefaultPlugin.pm Sat Jul 21 14:19:40 2001
*** 66,75 ****
          $_[0] =~ s/%INCLUDE:"([^%\"]*?)"%/&TWiki::handleIncludeFile( $1, $_[1]
, $_[2], "" )/geo;

!     # do custom extension rule, like for example:
!     # $_[0] =~ s/%WIKIWEB%/$TWiki::wikiToolName.$web/go;

  # =========================
  sub startRenderingHandler
--- 66,98 ----
          $_[0] =~ s/%INCLUDE:"([^%\"]*?)"%/&TWiki::handleIncludeFile( $1, $_[1]
, $_[2], "" )/geo;

!     # do custom extension rules
!     # - support TWikiDraw tags (ported from DRAWINGtags.txt on Dec 2000?)
!     #         TWikiDraw rule: Change %DRAWING{"name"}% to applet
!     $_[0] =~ s/%DRAWING{(.*?)}%/&handleDrawing($1)/geo;
!     $_[0] =~ s/%DRAWING%/&handleDrawing("untitled")/geo;

+ # ******************** START LOCAL FUNCTIONS ********************************
+ # =========================
+ sub handleDrawing
+ {
+     my( $attributes ) = @_;
+     my $nameVal = &TWiki::extractNameValuePair( $attributes );
+     if( ! $nameVal ) {
+         $nameVal = "untitled";
+     }
+     $nameVal =~ s/[^A-Za-z0-9_\.\-]//go; # delete special characters
+     return "<a href=\"%SCRIPTURLPATH%/oops%SCRIPTSUFFIX%/%WEB%/%TOPIC%?templat
e=oopstwikidraw\&param1=$nameVal\" onMouseOver=\"window.status='Click to edit dr
awing [$nameVal] using Java applet'; return true;\" onMouseOut=\"window.status='
'; return true;\"><img src=\"%ATTACHURLPATH%/$nameVal.gif\" alt=\"Edit drawing '
$nameVal' (requires a Java enabled browser)\"></a>";
+ }
+ # ******************** END LOCAL FUNCTIONS ********************************
  # =========================
  sub startRenderingHandler
*** 136,141 ****
--- 159,167 ----
      # This handler is called by getRenderedVersion just after the line loop


  # =========================

-- RichardDonkin - 21 Jul 2001

There have been some changes to TWikiDraw on different ends that need to be merged:

  • Convert TWikiDraw into a plugin
  • Incorporate CrawfordCurrie's changes
  • Add new noredirect=on switch to upload script that prevents a redirect after upload. This will solve the save error in Applet when using Netscape. (done)
  • Make plugin aware of new upload script switch.
  • Add width and height attributes to %DRAWING{}% variable (see below)

At work we had a requirement of a bigger drawing canvas. I came up with a simple solution where you can specify the canvas size as attributes in the %DRAWING{}% variable. Example:

  • %DRAWING{"name" width="1200" height="1500"}%

Changes to oopstwikidraw.tmpl:

Replace hardcoded width and height with variables:

  • =<applet code="CH.ifa.draw.twiki.TWikiDraw.class" archive="/p/pub/TWiki/TWikiDraw/twikidraw.jar" width=%PARAM2% height=%PARAM3%>

Changes to sub handleDrawing of the plugin:

Add param2=$width and param3=$height to the oops template:

sub handleDrawing
    my( $theAttributes ) = @_;
    my $nameVal = &TWiki::extractNameValuePair( $theAttributes ) ||
    $nameVal =~ s/[^A-Za-z0-9_\.\-]//go; # delete special characters
    my $width   = &TWiki::extractNameValuePair( $theAttributes, "width"
) || "800";
    my $height  = &TWiki::extractNameValuePair( $theAttributes,
"height" ) || "450";

    return "<a
         . "onMouseOver=\"window.status='Edit drawing [$nameVal] using
         . "TWiki Draw applet (requires a Java 1.1 enabled browser)'; "
         . "return true;\" onMouseOut=\"window.status=''; return
         . "<img src=\"%ATTACHURLPATH%/$nameVal.gif\" "
         . "alt=\"Edit drawing '$nameVal' (requires a Java enabled "
         . "browser)\"></a>";

(edit topic to see non expanded variables. And yes, this should be fixed)

-- PeterThoeny - 11 Aug 2001

I logged this as VerbatimExpandsVariables a while back - is there any chance of getting this fixed? Nobody commented to that report so perhaps it's not important for anyone else, but it does make things a bit confusing here on twiki.org.

-- RichardDonkin - 12 Aug 2001

Peter, with regard to the canvas size; one of the changes I made was to dynamically size the drawing canvas. The top left corner remains static, and the bottom right shifts to accomodate your artwork. Or are you trying to (1) set the size of the displayed applet or (2) scale the actual gif image (as in <img src=... width= height=...>) ? Both of these need doing....

-- CrawfordCurrie - 14 Aug 2001

Topic attachments
I Attachment History Action Size Date Who Comment
Compressed Zip archivezip twikidraw.zip   manage 546.9 K 2001-05-31 - 15:49 TWikiGuest Update including Netscape fix
Edit | Attach | Watch | Print version | History: r26 < r25 < r24 < r23 < r22 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r26 - 2004-01-16 - ScottJohnson
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.