I’m struggling a little to get started with Javascript macros on TiddlyWiki… I’ve found this dev page https://tiddlywiki.com/dev/index.html#JavaScript%20Macros that tells that the functional examples are a good starting point… So I’ve tried to copy them for creating a new one as the following:
I’ve copied all the content from the macro $:/core/modules/macros/jsontiddlers.js to a new tiddler called $:/core/modules/macros/testmacro.js.
I’ve added the Type to application/javascript on my $:/core/modules/macros/testmacro.js Tiddler, just like the original file
I’ve added the module-type to macro on my $:/core/modules/macros/testmacro.js Tiddler, just like the original file.
I’ve substituted the content of the Tiddler changing jsontiddlers to testmacro… So the new content is:
/*\
title: $:/core/modules/macros/testmacro.js
type: application/javascript
module-type: macro
Macro to output tiddlers matching a filter to JSON
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
/*
Information about this macro
*/
exports.name = "testmacro";
exports.params = [
{name: "filter"},
{name: "spaces"}
];
/*
Run the macro
*/
exports.run = function(filter,spaces) {
return this.wiki.getTiddlersAsJson(filter,$tw.utils.parseInt(spaces));
};
})();
For testing if it was working, I tried to use this macro just like I use jsontiddlers… So, the following macro returns to me in JSON all the tiddlers that start with D:
I was actually trying to solve this other thread Can I filter all the tree of tags under a root element as JSON? - #10 by Rafael without using Javascript… I’ve started exploring Javascript Macros because I only need to exclude one key value from the JSON that the jsontiddlers creates. I think probably there’s a parameter with the wikitext syntax that can solve that as well… But I didn’t manage to figure it out so far
I think the ultimate solution there is recursion. Recursion is when you have a macro call itself over and over until it reaches a termination point. As it is calling itself it builds a string which finally gets returned from the last macro invocation.
I’m considering creating a grid structure for my Tiddlers… I need to make a specific structure of tags for that and have icons on all Tiddlers. By now I’m considering something like this D3.js view with icons (FORCE DIRECTED LAYOUT / Sandraviz | Observable):
I like TiddlyWiki, but I miss ways of representing the information with images on it… And I didn’t manage to make it the way I wanted with TiddlyMap, so I’m considering creating it myself even if it takes a while…
I saw this plugin… But honestly, I didn’t get it well and I don’t know about its limitations. In my mind now, taking the data that I need out from TiddlyWiki using an iframe and using this data with traditional web development will be more comfortable for me, since I’ll be more in control of the specific functionalities that I need…
Aside: What you are doing, had me curious to check out, for the giggles, Google Charts’ Treemaps. Not as nice as either example you gave, but still pretty interesting :left- click on something to drill down, right-click to reverse-drill up(?)
Exactly, I think these big-picture visualizations are very useful… The TiddlyWiki idea that I have in mind is more or less like this one: https://tiddlywiki.muygle.com/
I particularly think it’s nice having a root element with toc-tabbed-external-nav and all children as toc… In the end, I still have some space for creating a mind map of icons on each click that I give:
The iframe idea would be to fill this space that is left with a mind map of icons… Where each icon represents a tiddler. This map could be dynamic as I click on my Tiddler hierarchy too…
@Rafael I am excited to see what you are trying to achieve, but like others I think people capable of javascript writing quickly fall to javascript, Some of us here are superusers without javascript as a tool we use, but if you phrase your question well, we can introduce you to the tiddlywiki way.
I didn’t read the whole thread only the first post and this linked post.
If you want to use d3.js you will need to create tiddlywiki widgets. Macros will fail, because they can’t redraw themself. Macros are text substitutions only. – They can’t do what you describe here.
Also D3.js is huge in file size.
D3.js heavily manipulates the DOM, which isn’t the best fit for TW, since it redraws the DOM when needed.
If you want to have a “force directed” graph, you should probably have a look a SVG based library. Try a search with these terms: force directed javascript library
BUT First you’ll need to understand how widgets are created.
The goal as I understand it is to create a JSON structure (with the macro) and then feed it to an html page inside an iframe. Will that have the same problems with refresh?
