PmWikiDraw

Summary: Java drawing recipe based on TWikiDraw
Version: 2.362 - 2 May 2007
Prerequisites:
Status:
Maintainer: Ciaran Jessup
Category: Editing, Images

Related Pages: PmWikiDrawChangeLog, PmWikiDrawBugsAndFeatures, PmWikiDrawBugsAndFeaturesDone

Goal

Provide a mechanism for quick diagrams to be shared amongst a team within the wiki environment. Allowing rapid editing of the diagram in-situ. Drawn objects can be linked to wiki-pages.

Solution

TWiki already has a good solution to this problem in the form of their TWikiDrawPlugin rather than re-invent the wheel, this plugin could be ported to the PmWiki environment.

Discussion

It should be noted that this code was originally written for the TWiki project and as such is subject to any Copyright that is held by them please see below for the relevant copyright notices.

You should be aware you could cause harm to your current PmWiki installation if you follow these procedures.

Any questions should be directed to ciaranj<pleasedontspam>@gmail.com

Requirements

Server

  • Working PmWiki installation
  • $EnableUpload must equal 1 in order to edit/save images.

Browser

  • Java 1.3 or above must be installed as a plugin for your browser in order to edit the drawings. There are no extra requirements to view a drawing.

Setup & Installation

  1. Download the following file, it contains all you need. (The external link below to "The Good stuff" is dead. However, I found a backup of the file in the Wayback Machine here (this links to the 19-May-2007 snapshot of Pmwiki.org): http://web.archive.org/web/20070519021321/http://www.wombatinvasion.com/files/PmWikiDraw.zip ~AllanGN 19-Feb-2014. Um, should the ZIP file just be uploaded to pmwiki.org directly, instead?)
  2. You can now extract this zip file directly into the pmwiki folder, however if you're using a non-standard configuration, then please follow the following steps:
    1. Extract these files to somewhere safe.
    2. Place the .jar file into a subdirectory 'drawing' underneath your current public directory. For my configuration my public directory is 'pub' underneath the pmwiki folder on the webserver.
    3. For PHP 5.5-7.2 or newer, get pmwikidraw.phpΔ and use it instead of the one in the archive.
    4. Place the pmwikidraw.php file into the 'cookbook' configuration folder.
  3. Open up config.php
    • Add include_once("cookbook/pmwikidraw.php");

And now? How can I use it?

Just embed some text in your wiki page along the lines of : (:drawing drawingName:) Where drawingName is unique to the current WikiGroup.

Extra configuration required for WikiFarms

PmWikiDraw now supports installation into a WikiFarm. However it is important to set the variable $PmWikiDrawPubUrl in your farmconfig.php file. The variable should contain the URL to the pub-directory used for that wiki-farm. On a standard pmwiki setup this URL is set into the variable PubDirUrl in config.php (see sample-config.php).

For example a working farmconfig.php file may look as follows:

 
<?php
$PageTemplateFmt = "$FarmD/pub/skins/pmwiki/pmwiki-farm.tmpl";
$FarmPubDirUrl = 'http://MyHost/pmwiki/pub';
$EnableUpload = 1;
$PmWikiDrawPubUrl = $FarmPubDirUrl;
include_once("$FarmD/cookbook/pmwikidraw.php");
?>

This is apparently the 'correct' way to reference the pub directory from within cookbook scripts inside Farms.

You should now be able to embed (:drawing fish:) where fish is the name of your choice in your pages and you will see a 'Create Image' link, click this to be taken to the image editor. After you've saved your first image the 'Create Image' link will be replaced by this image and click the image to edit it again :)

When it asks you for a password, this password is the password you have set in your usual PmWiki upload attribute passwords for that particular page.

Good luck :) And please let me know how you get on.

  • tested on pmwiki V2, W2k, Apache 1.3.27, php 4.3.5; java VM 1.4.1 on browser's PC --KAL

Internationalisation

Currently PmWikiDraw supports:

It is very easy to add support for other languages, if you fancy lending a hand for your own language then please contact me :) To help you here are the master property files (american english is the default):

To-Do

  • setup a doc-page for the applet

Known bugs

Possible problems

  • for several people working with Linux (Ubuntu 8.04/8.10 - from #ubuntu.de) the pmwikidraw applet doesn't open a window
    one person can't save.
    If I find out, what is the problem I will post it here. PatrickOgay

Examples

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

http://www.pmwiki.orghttps://www.pmwiki.org/wiki?pagename=fdfdbClick to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

http://www.pmwiki.orghttps://www.pmwiki.org/wiki?pagename=www.yahoo.comhttp://www.pmwiki.orghttps://www.pmwiki.org/wiki?pagename=fffffhttp://www.pmwiki.org/wiki?pagename=Cookbook.PmWikiDraw&action=editimage&image=Example2http://www.google.fihttp://www.pmwiki.orghttps://www.pmwiki.org/wiki?pagename=www.pmwiki.orghttp://www.pmwiki.orghttps://www.pmwiki.org/wiki?pagename=DFHQSDHQDFHQDClick to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Create Image(abit)

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

(:drawing test7:)

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image Click to edit the image ) http://www.pmwiki.orghttps://www.pmwiki.org/wiki?pagename=5655Click to edit the image Click to edit the image Click to edit the image Click to edit the image wildthing start Click to edit the image Click to edit the image Click to edit the image Click to edit the image wildthing start

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

would like to:

  • change arrow type
  • change arrow size
  • rotate grouped objects
  • use shift and control like PowerPoint to help you resize shapes and lines in constrained fashion

(thanks)

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

http://www.msn.comClick to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image Create Image(memyself)

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

http://www.pmwiki.orghttps://www.pmwiki.org/wiki?pagename=ResearchNotes/SDHClick to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Click to edit the image Click to edit the image Click to edit the image Click to edit the image

Create Image(domdomdom)

Create Image(rene)

Source code

The sourcecode is available here http://www.wombatinvasion.com/files/PmWikiDraw_src.zip

Change-Log

Current Change Log

Comments

Any comments, anybody ? :)

  • I had a problem with pagename. When applet saves drawing it doesn't set n=PageName, but pagename=PageName. So I had to modify cookbook/pmwikidraw.php this way.

@@ --- cookbook/pmwikidraw.php 2005-03-14 20:08:56.000000000 +0100 +++ ../cookbook/pmwikidraw.php 2006-07-12 13:01:55.000000000 +0200 -352,6 +352,7

   global $UploadVerifyFunction,$UploadFileFmt,$LastModFile, $Now;
   global $RecentChangesFmt, $IsPagePosted, $EnableDrawingRecentChanges;

+ $pagename = $_REQUEST['pagename'];

   $page = RetrieveAuthPage($pagename,'upload');
   if (!$page) Abort("?cannot upload to $pagename");
   $uploadImage = $_FILES['uploadImage'];

-421,4 +422,4

   exit();
 }

-?> \ No newline at end of file +?> @@

  • it's simple great and that's what I was looking for. It even supports linking the objetcs with wiki-pages --KAL
  • Wonderful! You can attach links to objects, basically you seem to be able to do anything.
  • Hello again. Wow, it is much improved! Couple of suggestions.
    1. There is some bug with editing connected text. Create an object, deselect it, select "connected text tool," click on object, add text. Great. Now, click on "connected text tool," then click the text inside the object. The connected text falls out of center. I happened to use a diamond symbol at the time for the shape. Did not try other shapes.
      1. The connected text tool doesn't work very well :( I apologise!
    2. Is it possible to add double lines as a line style?
      1. Yup, i've re-done a lot of stuff, you can set arrow styles now in my development version, I've not added double lines but it should be possible!
    3. Is it possible to add underlining as a font style?
      1. Aye, definitely.
    4. When setting attributes, can there be some button, "remember these settings as default for all new objects like this"? (Maybe not that exact text...)
      1. It would be nice, but unfortunately due to the underlying design its non-trivial :(
  • great work! is it possible to draw courves with the mouse, e.g. for a use as a ink tool for tablet pcs?
    • Theoretically I could turn up the 'resolution' of the freehand tools to allow for a close realisation of curves, however the file size would increase enormously as each point is stored in the file. So currently curves would not be particularly accurately rendered no :( My development build of it allows for Quad/Bezier curves to be drawn, but they're not 'bitmap curves' they're vectors so you use connection points to construct the arcs :) [sorry]
  • When you try to convert from relative to absolute URLs, you check for http: as a prefix. Our site is https:, and so your code is not quite right. // expand to full URL (incl http://) if url is relative: if (!preg_match('/^[(approve links) edit diff]',$ScriptUrl))
    { $scripturl = "http://".$_SERVER['HTTP_HOST'] . $ScriptUrl; }
else
    { $scripturl = $ScriptUrl; }
  • HH: I had a small problem: PmWikiDraw was not working together with Cookbook:WebAdmin. SO I needed to insert this:
    if ($action == 'webadmin') include_once('cookbook/webadmin.php');
    Now both is working fine.
    I've had the same problem; haven't seen your solution though, so I changed webadmin a bit and it's also OK now. The new version is at Attach:webadmin-1.1.php Δ ~Mateusz
Perhaps it is an idea to work out an example installation with many extensions integrated as a zip-file.
It is great to integrate drawing in this way!!! (www.kolibriethos.de)
  • I have been using PmWikiDraw for a few years and it has been very helpful. There are a couple features that I have been hoping would be added. There are some drawings that are not easy to make like a semicircle or a rotated rectangle. If someone would know how and be up for adding features, I'd really like to see a rotate capability and maybe an arc tool. I haven't looked at the code so I don't know how difficult this would be.

Copyright

  • PmWikiDraw is very very closely based on TWikiDrawPlugin for what limited modifications I have made, I guess I hold the copyright on 2004, Ciaran Jessup (ciaranj@gmailSTOPSPAM.com)
  • TWikiDrawPlugin is based on Erich Gamma's JHotDraw 5.1. (JHotDraw is copyright 1996, 1997 by IFA Informatik and Erich Gamma, erich_gamma@acmSTOPSPAM.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@acmeSTOPSPAM.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@ThoenySTOPSPAM.com. 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

keywords: graphics pictures images drawings

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.