Rough.js to generate graphics in tiddlers

Developers
,
#1

Somewhat similar to the TW mermaid plugin,

I’d like to utilize the rough.js,
to generate graphics directly inside a tiddler.

I’d like to allow “programmatic” drawings, without being restricted to static descriptions.
I also want the full power of the built-in javascript engine.

Pseudo code idea is below:

<script>
function vertical_points(n, base, spacing) { ... }
function rect_stack(n, base, spacing) { ... }

let in_nodes = rect_stack(n: 3, base: Point(0,0), spacing: 5);
let out_nodes = rect_stack(n: 5, base: right_of(in_nodes).by(10), spacing: 5);
let edges = connect_all(in_nodes, out_nodes);
let my_svg = [in_nodes, out_nodes, edges].flat(1);

my_svg.forEach(e => e.draw());
</script>

An example of the generated image is below:

generated image|200x200

side question: how to I display this image inline instead of a link in the discourse text?

I can rely on external web pages to generate these images,
but I really like the self-contained power of TW.
By generating these within a tiddler, everything including my libraries is already there.

Any tips for how I should approach this integration?

Thanks, Eric

#2

The easiest way to post image here is copy them into the clipboard and CTRL-V it into the editor here at discourse. … It will upload the image and include it with the right format

It seems your PNG doesn’t contain any data.

#3

It would be needed to create a TW plugin, that contains the library and a new TW widget.

The Releases page at GitHub contains the source code and a dist folder. It contains a rough.umd.js file, which I think should be used to create a TW plugin.

The problem is, that the library only contains an API for JS developers that can use the HTML SCRIPT tag, which isn’t allowed to be used in TiddlyWiki tiddlers for security reasons.

So it would be needed to create a wikitext format to describe the different elements. That wikitext would need to be parsed and converted to functions, that the library can use for rendering.

So there needs to be a TW widget that can read and parse the wikitext from a tiddler, use the library functions and create the rendered output.

So it would need some understanding of the underlaying TW plugin and widget mechanism.

So it depends on your web-dev skills. … If the following doesn’t make sense, then probably someone else will need to implement it.

There is a good tutorial about how to create widgets in TW, which you’ll need to understand: TW widget tutorials — Step-by-step widget demonstrations

The tutorial links to: https://tiddlywiki.com/dev/#WidgetModules:WidgetModules%20Widgets which is the development info about TW. … Needs to be read.

The core highlight plugin may be a good starting point to see, how a 3rd party library can be imported to TW.

TW itself uses the CommonJS require() mechanism to load functions form the library into the widget memory space.

#4

@Eric_Simpson I would just like to add to @pmario’s guidance;

The reason you have to implement this via a Widget, is in part so that TiddlyWiki can maintain its dynamic features, refreshing content only when and where a change is needed and for near instantaneous reflections of changes.

Whilst this seems like additional, somewhat bespoke work, when you integrate a library such as rought.js into TiddlyWiki the result gives the library a whole platform in which to operate.

  • I believe the approach may include;
    • simply installing the rough.js,
    • then writing the widget to access its functions, exposing as many features as practical
  • The advantage being that you may need not redesign the widget if rough.js gets a bug fix,

Is this correct @pmario ?

#5

Yes. … and it’s also needed to create a DSL (domain specific language) eg: The library supports: rc.rectangle(10, 10, 200, 200); // x, y, width, height, but TW can’t allow to directly execute JS for security reasons, so the configuration would need to be “text like”.

The full API fro a rectangle is: rectangle (x, y, width, height [, options]) as shown in the docs

Where options seems to be optional for every element. … So a configuration may look like:

<$rough element="rectangle" x="10" y="20" width="100" height="50" roughness="0.5" fill="red" />
or may be 
<$rough tiddler="rect-1"/> .. // Where the rect-1 tiddler may be a data tiddler or a tiddler with the corresponding field names
or
<$rough filter="[tag[elements]]"/> .. // to define a list of tiddlers to be used as config

Just some brainstorming. … It would need some experiments to see, what makes sense and what is easy to be used.

#6

If you’re interested in investigating a little bit of trickery.

It involves dynamically generating with TiddlyWiki goodness the “srcdoc” for an iframe displayed in a tiddler.

See BASIC Anywhere Machine as embedded graph server for TiddlyWiki ?

(BTW, not suggesting you use BASIC, but rather the same technique to work rough.js into your TiddlyWiki.)

#7

Thank you all for the responses and thoughts.

It looks like I’ll take the plugin and widget approach as suggested.
I’m familiar with coding, but not web development languages at this point.
It might be a little bit of a learning curve, but it looks doable.

I’ll do some brainstorming about what the DSL should look like as well.

#8

@pmario, you are correct.
Copy/paste of the image below seems to “just work”.
I’m not sure what happened with the upload in the original post.

image