TWikiDrawPlugin
Vector drawing editor and clickable maps for diagrams and workflows
Overview
This plugin encapsulates the TWikiDraw Java Applet first developed by
TWiki:Main.PeterThoeny from the original JHotDraw.
JHotDraw is a simple drawing editor that supports drawing in a style similar to that found in MS Powerpoint and MS Word. Various shaped figures can be placed in the drawing and text annotations joined to them.
Unique to TWikiDrawPlugin, a drawing can also have a "map" which makes figures in the drawing sensitive to the mouse cursor. A map is automatically added to an image when a URL is attached to any of the figures.
How you edit a drawing depends on whether the drawing has a map and the setting of the "EDIT_BUTTON" option. A drawing with no map can be edited simply by clicking on the drawing. A drawing with a map can be edited by clicking the edit button or, failing that, on the boundary of the image.
Browser support for Java 1.1 or later required.
Syntax Rules
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%
.
Example: %DRAWING{workflow}%
Tools
The tools on the left create or manipulate figures.
|
selects, moves or resizes a figure; the shift-key toggles the selection. Dragging the selection tool in the background selects the figures within the dragged rectangle. |
|
creates a new or edits an existing text figure |
|
creates a new text figure and attaches it to the clicked figure. Once a text figure is attached it remains connected to the figure. |
|
creates a rectangle figure |
|
creates a round rectangle figure |
|
creates an ellipse figure |
|
creates a line figure |
|
creates or adjusts connections between figures. A connection is split into segments by dragging a point on the connection. To join two segments click the end point of a segment |
|
creates an elbow connection and offers the same features as the ordinary connection tool |
|
creates a scribble figure; dragging the mouse creates a smooth line while successive clicks yields a polyline figure. A two-button click terminates the figure. |
|
creates a polygon figure; dragging the mouse creates a smooth border while successive clicks yields a polyline border. A two-button click or the ESCAPE key terminates the figure. |
|
decorates the clicked figure with a border |
|
adds a sensitive area to the figure that will redirect to a URL. If an image contains any sensitive areas it can only be selected for edit by clicking on the boundary or (if enabled) the attached Edit button. You can use wikiwords and web.topic wiki link expressions as well as full URLs. |
Handles
When selected, figures provide different handles to manipulate them.
- the white squares let you to manipulate the shape of a figure
- the green squares on connections let you to reconnect them with another figure.
- the yellow circles on polygon figures let you change the size and rotation of the figure
- yellow circles on rounded rectangles let you change the radius of the corners
- the yellow circles on connections let you manipulate the position of connection segments.
Commands
Commands are invoked from the button bar at the bottom or from the menu bar at the top.
The standard commands that are provided include cut, copy, paste, duplicate, delete, group, ungroup, bring to front, and send to back.
Attributes
Attributes, such as fill color, text color or arrow tip, can be changed through the attributes menus.
Plugin Settings
NOTE: Do not change the settings here, overload them in the
Public.TWikiPreferences. Prefix a setting with
TWIKIDRAWPLUGIN_
, e.g. to overload
EXTRA_COLORS
define a
TWIKIDRAWPLUGIN_EXTRA_COLORS
setting in the Public.TWikiPreferences.
- One line description, is shown in the TextFormattingRules
- Set SHORTDESCRIPTION = Vector drawing editor and clickable maps for diagrams and workflows
- Extra colors to be added to the menu of colors in the applet, as a comma-separated list with colors in HTML format (see StandardColors)
- Set EXTRA_COLORS = Aquamarine=#70DB93,New Tan=#EBC79E,Sea Green=#238E68,Motorola Blue=#3ff
- Set to 1 if an "Edit" button is to be generated attached to the image. You will still be able to edit it by clicking on the boundary of the image.
- Edit text defined here so you can change it for local languages. Text is shown when you hover over the image, and for the edit button. %F% will be replaced by the drawing name.
- Set EDIT_TEXT = Edit drawing '%F%' (requires a Java 1.1 enabled browser)
Example Drawing
Here's an example using an image map. Move the mouse over the image and watch the status bar.
Plugin Installation
Note: You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the plugin on the TWiki server.
- For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.
- Or, follow these manual installation steps:
- Download the ZIP file from the Plugins home (see below).
- Unzip
TWikiDrawPlugin.zip
in your twiki installation directory. Content: File: | Description: |
data/TWiki/TWikiDrawPlugin.txt | Plugin topic |
data/TWiki/VarDRAWING.txt | DRAWING variable documentation topic |
lib/TWiki/Plugins/TWikiDrawPlugin.pm | Plugin Perl module |
lib/TWiki/Plugins/TWikiDrawPlugin/source.zip | Zip with Java sources |
pub/TWiki/TWikiDrawPlugin/*.gif | Button images |
pub/TWiki/TWikiDrawPlugin/example.draw | Example drawing |
pub/TWiki/TWikiDrawPlugin/example.gif | Example drawing, generated image file |
pub/TWiki/TWikiDrawPlugin/example.map | Example drawing, generated map file |
pub/TWiki/TWikiDrawPlugin/newdrawing.gif | New drawing image |
pub/TWiki/TWikiDrawPlugin/screenshot.png | Screenshot |
pub/TWiki/TWikiDrawPlugin/twikidraw.gif | TWikiDraw icon image |
pub/TWiki/TWikiDrawPlugin/twikidraw.jar | Java applet |
templates/twikidraw.tmpl | Template for drawing editor |
templates/twikidraw.pattern.tmpl | Template for drawing editor, pattern skin |
- Set the ownership of the extracted directories and files to the webserver user.
- Plugin configuration and testing:
- Run the configure script and enable the plugin in the Plugins section.
- Test if the installation was successful: You should see a "Create New Drawing" box below. Click on it.
Plugin Info
Change History: |
|
2013-05-17: |
TWikibug:Item7255: Enable TextFigure to have URL attribute; Erase URL text correctly when a drawing is moved while the URL is overflown -- TWiki:Main.MahiroAndo |
2013-05-13: |
TWikibug:Item7255: Suppress "edit" link when not editable; Add title="..." to tags to show tooltips for URLs; Prevent browser/proxy caches as much as possible; Always put an empty .map file so it works even after adding and removing URLs -- TWiki:Main.MahiroAndo |
2012-12-10: |
TWikibug:Item7073: TWikiDrawPlugin doesn't support multiple disks. |
2012-11-25: |
TWikibug:Item7020: Adding and categorizing TWiki variable doc topic VarDRAWING |
2012-11-25: |
TWikibug:Item7056: Show default image for new drawing (if image is missing); doc improvements; change TWIKIWEB to SYSTEMWEB; replace confusing static drawing image with TWikiDraw logo image, and add clarifying note that popup will open with Java based drawing editor -- TWiki:Main.PeterThoeny |
2011-04-05: |
TWikibug:Item6638: Doc improvements; fixing broken button images -- TWiki:Main.PeterThoeny |
2009-10-29: |
TWikibug:Item6333: TWikiDrawPlugin does not work in TWiki-4.3.2 if {CryptToken}{Enable} is set -- Sopan Shewale |
8570 |
TWikibug:Item1528: Minor pattern skin template update for TWikiDrawPlugin |
8569 |
TWikibug:Item1528: Adding pattern skin template to TWikiDrawPlugin |
7926 |
TWikibug:Item1206: minor formatting fix |
7907 |
TWikibug:Item1206: merged minor documentation fixes that were causing confusion about latest version of the plugin. |
7761 |
TWikibug:Item1124: Checked in jar file, even though it is built, because most people don't have ANT and it's a source of error for people using SVN checkouts. |
6340 |
TWikibug:Item196: Added screenshot to TWikiDrawPlugin |
5245 |
Added anchor support to wikilinks |
5243 |
Added support for web.topic wiki links, and remove url encoding, which was breaking |
5223 |
Documentation fixes, adding gifs. |
5057 |
Minor changes for prettification, and added ,v files |
5053 |
Validated XHTML |
5051 |
Updated template for Cairo |
5049 |
Updates for 2004 Cairo release |
5048 |
Cairo readiness |
4878 |
Various minor fixes, and added stand-alone (first) version |
4788 |
Added "overwrite" to installation copy |
4781 |
Moved topic to TWiki web, incorporated changes from Dev topic |
4777 |
Initial revision |
11 Mar 2005 |
Fixes for: text not sticking to boxes, blank lines in text, and lost text styles |
22 Nov 2004 |
Unicode fixes courtesy of Won-kyu Park |
16 Aug 2004 |
Map support finally released |
17 Feb 2003 |
Bug fixes; incoporated TWiki:Main/BertrandDelacretaz's fix for too many colours in GIF. He had problems when saving images from macosx / JDK 1.3.1 and modified the applet to reduce the number of colors before converting to GIF, if needed. Without this he would sometimes get the "too many colors for a GIF" error when saving drawings. |
30 Sep 2002 |
Add support for URLs, EXTRA_COLORS, fixed a number of outstanding bugs |
20 Feb 2002 |
Merged TWiki:Main/RobWalker's fixes for text attached to figures |
01 Oct 2001 |
Updated this text |
23 Sep 2001 |
Initial version |
Additional copyright info:
- TWikiDrawPlugin is based on Erich Gamma's JHotDraw 5.1. (JHotDraw is copyright 1996, 1997 by IFA Informatik and Erich Gamma, erich_gamma@acm.org . It is hereby granted that this software can be used, copied, modified, and distributed without fee provided that this copyright notice appears in all copies. )
- TWikiDrawPlugin uses ACME Labs' GifEncoder to convert a drawing into a GIF file format. (GifEncoder is Copyright ©1996,1998 by Jef Poskanzer, jef@acme.com . All rights reserved. THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. )
- TWikiDrawPlugin uses some ideas of KmWiki drawing applet.
- Copyright 2000 by Peter Thoeny, Peter[at]Thoeny.org. It is hereby granted that this software can be used, copied, modified, and distributed without fee provided that this copyright notice appears in all copies.
- Modifications Copyright © 2001 Motorola. All Rights Reserved.
- Modifications © 2003-2004 Copyright Crawford Currie http://www.c-dot.co.uk
Related Topics: VarDRAWING,
TWikiPreferences,
TWikiPlugins