Simple diagrams

[Edd]

Hi all,

I'm wondering if there's a plugin available for adding simple diagrams
to tiddlers. Googling didn't yield much. There was some stuff for SVG,
but that's a bit over the top for my needs and doesn't work reliably
in some of the browsers I need to support.

I'm really talking boxes, text and arrows. Nothing more.

I have to say that I was quite surprised that I didn't find anything.
Is there some aspect of TiddlyWiki's design that makes this hard to
do? If not, I might look in to it when I have some time...

Thanks,

Edd

[Eric Shulman]

> I'm wondering if there's a plugin available for adding simple diagrams

> I'm really talking boxes, text and arrows. Nothing more.

> Is there some aspect of TiddlyWiki's design that makes this hard to

Although TW works like an application, you have to keep in mind that
underlying all of its functionality, TW is really just a very fancy
web page that uses HTML and CSS to render it's content. Thus, if you
can't do it easily in a web page, then you can't do it easily in TW.

Of course, it may be possible to write some clever javascript plugin
code that simulates a box-and-arrow rendering engine using just HTML
+CSS, but it would almost certainly be a significant effort. There
*are* some existing javascript-based drawing utilities that might be
applicable, but they would likely have to be heavily tweaked to make
them compatible with the tiddler-based context in which content is
rendered and integrate them into the TW plugin architecture.

Still, it's worth considering...

-e

[adc...@gmail.com]

Graphics are definitely tricky to do, using only JavaScript, CSS, and
HTML, but here are a few links to get you started...

Walter Zorn's library seems to be the most fully featured toolkit for
drawing various shapes and lines:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

It was extended by someone else here, to add some new features:
http://www.zeroaltitude.org/programming/Canvas/

Here are some examples of interesting applications using the library:
http://jameslab.moveable.com/ajaxio/ (a very primitive Visio-like
application)
http://www.digital-simulator.de/ (the web version of this digital
circuit simulator uses Zorn's library)
http://www.walterzorn.com/grapher/grapher_e.htm (Zorn's own function
grapher)

I also found this drawing application, but as far as I know it doesn't
use Zorn's stuff. It's still cool to see what can be done in pure
JavaScipt:
http://www.xdraw.org/xdhTest.html

It seems no one so far has actually built Zorn's library (or any
other) into a TiddlyWiki plugin, or set of plugins. I imagine it
might be possible to do, if the canvas could be attached to a
tiddler. Although not a graphics package, the Similie Timeline was
built into a TiddlyWiki plugin (http://project.dahukanna.net/
tiddlywiki/timeline/sampletimeline220b5.html), and it works quite
well. Zorn's stuff doesn't allow for high performance drawing due to
the limitations Eric mentioned, but it sounds like it might be perfect
if you just need to draw a few boxes and lines. The trick would be to
get it to play nicely inside a TiddlyWiki. Perhaps someone might take
this on as a challenge? I'd love to be able to do simple graphics in
a TiddlyWiki too! :-)

Michael

[Xavier Vergés]

Edd, I'll try to upload later a pair of plugins that draw horizontal
arrows and boxes. It s very unpolished, and only works in firefox. As
soon as you have something with a bit of complexity, you need to
create a table and place the different elements in different cells;
quite inconvenient...

I used it to write some pseudo uml sequence diagrams for my customer.

Arrows are based on the techniques described in
http://www.thewatchmakerproject.com/journal/237/scalable-css-arrows

-Xv

[Edd]

Well I'm pleased I'm not the only one that's thought about this!

I had a look through some of the JS libraries mentioned in this
thread, and some more besides. They seem rather heavyweight to me. I
think JS can play a much less prominent role; I'd appreciate comments
on whether the following scheme would work. I haven't spent any time
hacking on the TiddlyWiki code so I don't have a handle on this kind
of thing.

So, I'm imagining that to create a diagram, you would define a tiddler
whose content contains specially formatted text. Perhaps something
like:

textbox stage_one
{
content: "This is some text that will go in to the stage_one
box"; // maybe this is tiddlywiki markup
width: 150px;
height: 100px;
top: 10px;
left: 10px;
}

textbox stage_two
{
text: "This text goes in stage_two";
color: #000000;
backgroundcolor: #FFFFDD;
width: 100px;
height: 80px;
top: 10px;
left: 200px;
}

join join_one_to_two
{
start: stage_one
finish: stage_two
type: arrow;
}

This represents a diagram containing two boxes and a joining line.
Perhaps something like JSON would yield a better representation, but
I'm sure you get the idea.

Once you have a diagram defined, you can refer to it from other
tiddlers. I don't know what syntax would be used.

To render the diagram, all you need is block HTML elements and CSS.
The only JS involvement would be to parse the diagram description and
insert DOM elements. A GUI for drawing could perhaps come later, but
it's by no means necessary for some basic stuff.

If this kind of thing can be achieved, I'll look in to putting it
together. Any thoughts?

Thanks,

Edd

[Xavier Vergés]

In all its uglyness, what came out of my procrastination efforts to
delay writing the real customer document:
http://xvboxes.tiddlyspot.com/

It's even more inconvenient than I remembered...

-Xv

[YGG-]

I just link to a PowerPoint picture...So the diagram per se I do in
PwP.
(am I completely off the track?)

YGG

On May 16, 1:13 am, Edd <e...@nunswithguns.net> wrote:

[Edd]

It's a reasonable suggestion, but I personally neither have nor like
powerpoint :)

I'd also like the data embedded inside the tiddlywiki file itself. I
know there's a plugin to embed files and images, but a powerpoint file
is very bloaty for this kind of thing. I'm after a nice light-weight
solution.

Thanks,

Edd