Make my TW look less scary

79 views
Skip to first unread message

dickon

unread,
Sep 13, 2010, 7:24:05 PM9/13/10
to TiddlyWiki
I have posted about the AMBIT project a few times before. AMBIT a
developing therapeutic method of working with young people who have
multiple complex problems (crime, mental health, drugs, family
breakdown, etc). We have trained a number of teams in this method and
the 'manual' (how-to-do-it) is an opensource TW, versions of which can
be found at http://www.tiddlymanuals.com

Using TiddlyWeb (and soon TiddlySpace) we can have a number of teams
making local adaptations to 'their' local version of the manual, so it
isn't just a bunch of geezers in an ivory tower telling them how to do
it from afar.

the workers seem to like working in this way, but we are really trying
to beef up the support from the manual (adding streaming video
examples of "how to do it, etc") and to improve the navigation and the
feel of it.

This is where I, as a non-expert, am struggling a bit. At a recent
TiddlyChat meeting Paul Downey made some excellent and insightful
comments about the U.I., and how perhaps if we wanted to avoid
'scaring' non-technical therapists/workers we ought to consider
designing a layout that looked a bit more like what they are used to -
which is notebooks, or reference texts; paper rather than digital
screens.

It occurred to me that there may be experts out there, who with a few
tweaks could show me stuff to improve the user experience that would
take me hours/years to work out.

If anyone in this group would like to download a copy of the manual
(http://imp.peermore.com/imp/recipes/imp/tiddlers.wiki) and have a
hack at the style, I would be hugely interested and appreciative. One
possibility would be for me to then circulate different versions to
the various teams who are meant to be checking in to 'their' local
variants of the manual, to see if they have strong preferences for
these over the present version.

All the best,
Dickon Bevington
Message has been deleted
Message has been deleted

Michael.Tarnowski

unread,
Sep 14, 2010, 6:01:33 PM9/14/10
to TiddlyWiki
Hi Dickon,

your TW strikes the reader dead since the starting tiddlers are mixing
TW-related technical stuff ("How-to use a wiki", showing/hiding the
sidemenu", etc) with therapeutical stuff ("Whats the problem", "What
to do", etc.

My proposal:

Write some "meta tiddler" showing a kind of chapter/section structure
like the outline of a text book.

1 What's the problem?
--- tiddler Problem A
--- tiddler Problem B

2 What's the team
--- tiddler Team A
--- tiddler Team B

3......

then all sub tiddlers in section 1 copuld be tagged with "problem",
all subs in 2 tagged with "team", etc. By using the command
<<tiddlerList tags:"problem,-excludeList">> in Meta Tiddler 1
generates a table of content of all problem tiddlers
<<tiddlerList tags:"team,-excludeList">> in Meta Tiddler 1 generates a
table of content of all team tiddlers, etc.

Since the audience of your TW is probably not acquainted with the
concept of tagging use the NewTiddlerMacro (http://www.tiddlywiki.com/
#NewTiddlerMacro) to generate new tiddlers from pre-defined templates
pre-tagged with "problem", or "team", etc.

Rich Carrillo has published TiddlerTemplatesMacro which shows you a
set of predefined templates to select from for generating new
tiddlers. Unfortunately the url (http://www.kultofbubb.net/tiddlywiki)
disappeared.

IHO do not display the tag cloud: it' confuses more than it helps.

My summary:
- define a book like outline structure,
- generate all new tiddlers in each section from pre-defined
templates with pre-set tags
- generate for navigation tag lists in each section.
- you can set up a kind of reviewed publishing process to define
cross-links between all the tiddlers by an expirienced TW user
(youself?)

Just some thoughts...
have fun
Michael

-------------------------------- Here's the code of Rich's
TiddlerTemplatesMacro (from my TW) --------------

/***
|Name|TiddlerTemplatesMacro|
|Version|1.0|
|Source|http://www.kultofbubb.net/tiddlywiki, http://www.tiddlywiki.com/#NewTiddlerMacro|
|Author|[[RichCarrillo]]|
|Type|plugin, macros|
|Required|[[TiddlyWiki|http://www.tiddlywiki.com]] 2.0+|
|~CoreVersion|2.0+|
|License||
|Documentation|TiddlerTemplatesMacroDocumentation|
|Description|TiddlerTemplatesMacro is a collection macros that allow
you to easily create new tiddlers using existing tiddlers as
templates.|

!Code
***/
//{{{
// Drop down indicator for pop-up menu buttons
var dropdownchar = (document.all?"▼":"▾") // the fat one is the only
one that works in IE

version.extensions.TiddlerTemplatesMacro = {
major: 0, minor: 9, revision: 0,
date: new Date(2006, 2, 21),
type: 'macro',
source: "http://www.kultofbubb.net/tiddlywiki/
index.html#TiddlerTemplatesMacro"
};

// shadow tiddler to provide basic syntax and link to full
documentation
config.shadowTiddlers.TiddlerTemplatesMacroDocumentation = "[[Full
Documentation|http://www.kultofbubb.net/tiddlywiki/
index.html#TiddlerTemplatesMacroDocumentation]]\n";

config.macros.newFromTemplate = {}
config.macros.newFromTemplatePopup = {}
config.macros.newFromTemplateButton = {}

// The tiddlerTemplatesMacro object just holds default settings,
messages and common functions used by the other macros
config.macros.tiddlerTemplatesMacro = {
// messages
label: "New...",
tooltip: "Create a tiddler from a Template",
titlePrefix: "New",
errorNoTemplates: "No templates found! Add the tag '%0' to a tiddler
you would like to use as a template",
errorNoTemplateTiddler: "The template tiddler: '%0', could not be
found.",
errorMissingRequiredParam: "Missing a required parameter: %0 ",
errorTiddlerAlreadyExists: "The tiddler: %0 already exists!",

// default settings
templateTag: "Templates",

// common functions used by other macros
myReadMacroParams: function(paramString){
var regexpMacroParam = new
RegExp("(?:\\s*)(?:(?:\"((?:(?:\\\\\")|[^\"])*)\")|(?:'((?:(?:\\\\\')|
[^'])*)')|(?:\\[\\[([^\\]]*)\\]\\])|([^\"'\\s][^\"'\\s]*))","mg");
var params = [];
do {
var match = regexpMacroParam.exec(paramString);
if(match){
if(match[1]) // Double quoted
params.push(match[1]);
else if(match[2]) // Single quoted
params.push(match[2]);
else if(match[3]) // Double-square-bracket quoted
params.push(match[3]);
else if(match[4]) // Unquoted
params.push(match[4]);
}
} while(match);
return params;
}, // closes myReadMacroParams function definition

reparseParams: function( params ) {
var s = params.join(" ");
var re = /([^:\s]*):["]([^"]*)["]/g ;
var ret = new Array() ;
var m ;
while( (m = re.exec( s )) != null ) ret[ m[1] ] = m[2] ;
return ret ;
}, // closes reparseParams function definition

getTiddlerEditField: function(title,field){
var tiddler = document.getElementById(story.idPrefix + title);
if(tiddler != null){
var children = tiddler.getElementsByTagName("*")
var e = null;
for (var t=0; t<children.length; t++){
var c = children[t];
if(c.tagName.toLowerCase() == "input" || c.tagName.toLowerCase() ==
"textarea"){
if(!e) {e = c;}
if(c.getAttribute("edit") == field){e = c;}
}
}
if(e){return e;}
}
}, // closes getTiddlerEditField function definition

newFromTemplate: function(event){
var title = this.getAttribute("templateTitle");
if (this.getAttribute("tagToAdd")) {var tagToAdd =
this.getAttribute("tagToAdd");}
if (this.getAttribute("tagToStrip")) {var tagToStrip =
this.getAttribute("tagToStrip");}

// get the template and extract its info
var template = store.getTiddler(title);
var newTitle = config.macros.tiddlerTemplatesMacro.titlePrefix
+template.title;
var newText = template.text;
var newTags = template.getTags();

// if a tiddler by this name already exists, show an error message
and quit
if (store.getTiddler(newTitle)) {

displayMessage(config.macros.tiddlerTemplatesMacro.errorTiddlerAlreadyExists.format([newTitle]));
story.displayTiddler(null,newTitle,DEFAULT_VIEW_TEMPLATE);
return;
}
// create new tiddler
story.displayTiddler(null,newTitle,DEFAULT_EDIT_TEMPLATE);

// grab the new Tiddlers text edit box
var tiddlerTextArea =
config.macros.tiddlerTemplatesMacro.getTiddlerEditField(newTitle,"text");
var tiddlerTagArea =
config.macros.tiddlerTemplatesMacro.getTiddlerEditField(newTitle,"tags");

// Stuff template info into newly created tiddler
tiddlerTextArea.value=newText;
if (tagToAdd){newTags += " " + String.encodeTiddlyLink(tagToAdd);}
tiddlerTagArea.value=newTags;
if (tagToStrip) {story.setTiddlerTag(newTitle,tagToStrip,-1);}
story.focusTiddler(newTitle,"title");
return false; //why false?
} // closes newFromTemplate function definition
}; // closes tiddlerTemplateMacros object definition

config.macros.newFromTemplatePopup.handler =
function(place,macroName,params,wikifier,paramString,callingTiddler){
var makeTemplateList = function(event) {
if (!event) var event = window.event;
var templateTag = this.getAttribute("templateTag");
if (this.getAttribute("tagToAdd")){var tagToAdd =
this.getAttribute("tagToAdd");}

var templateList = store.getTaggedTiddlers(templateTag);
var popup = Popup.create(templateButton);

// pull the titles out of the tiddlers retured by getTaggedTiddlers
var templateTitles = [];
var li,r;
for(r=0;r<templateList.length;r++)
if(templateList[r].title != templateTitles)
{templateTitles.push(templateList[r].title);}

// for each one of the titles create a new TiddlyButton in the popup
for(r=0; r<templateTitles.length; r++){
var templateListItem =
createTiddlyButton(createTiddlyElement(popup,"li"),templateTitles[r],null,config.macros.tiddlerTemplatesMacro.newFromTemplate);
templateListItem.setAttribute("templateTitle",templateTitles[r]);
templateListItem.setAttribute("tagToStrip",templateTag);
if (tagToAdd){templateListItem.setAttribute("tagToAdd",tagToAdd);}
}

Popup.show(popup,true);
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
return false; // why false?
} // closes makeTemplateList function definition

// process params
var paramsToParse = params;
var input =
config.macros.tiddlerTemplatesMacro.reparseParams( paramsToParse ) ;
var templateTag = input["templateTag"]?
input["templateTag"].trim():config.macros.tiddlerTemplatesMacro.templateTag ;
var label = input["label"]?
input["label"].trim():config.macros.tiddlerTemplatesMacro.label ;
label = label.replace(/<arrow>/g, dropdownchar)
var tooltip = input["tooltip"]?
input["tooltip"].trim():config.macros.tiddlerTemplatesMacro.tooltip ;

// user can only use hereMode if callingTiddler was passed to the
macro
var hereMode;
if (input["hereMode"] && callingTiddler) {hereMode =
callingTiddler.title;}
else {hereMode = null;}

// error out if no tiddlers are tagged as templates
var templateList = store.getTaggedTiddlers(templateTag);
if(templateList == "") {

createTiddlyError(place,config.messages.macroError.format([macroName]),config.macros.tiddlerTemplatesMacro.errorNoTemplates.format([templateTag]));
return;
}

var templateButton =
createTiddlyButton(place,label,tooltip,makeTemplateList);
templateButton.setAttribute("templateTag",templateTag);
if (hereMode){templateButton.setAttribute("tagToAdd",hereMode);}
}; // closes newFromTemplatePopup handler definition


config.macros.newFromTemplateButton.handler =
function(place,macroName,params,wikifier,paramString,callingTiddler){

// process params
var paramsToParse = params;
var input =
config.macros.tiddlerTemplatesMacro.reparseParams( paramsToParse ) ;
var templateTiddler = input["templateTiddler"]?
input["templateTiddler"].trim():null ;
var templateTag = input["templateTag"]?
input["templateTag"].trim():null ;
var label = input["label"]?
input["label"].trim():config.macros.tiddlerTemplatesMacro.label ;
var tooltip = input["tooltip"]?
input["tooltip"].trim():config.macros.tiddlerTemplatesMacro.tooltip ;

// user can only use hereMode if callingTiddler was passed to the
macro
var hereMode;
if (input["hereMode"] && callingTiddler) {hereMode =
callingTiddler.title;}
else {hereMode = null;}

// error out if template tiddler was not specified or if it does not
exist
if (templateTiddler == null){

createTiddlyError(place,config.messages.macroError.format([macroName]),config.macros.tiddlerTemplatesMacro.errorMissingRequiredParam.format(["templateTiddler"]));
return;
} // ends if templateTiddler == null (not in params)

var templateTiddlerObj = store.getTiddler(templateTiddler);
if(templateTiddlerObj == null) {

createTiddlyError(place,config.messages.macroError.format([macroName]),config.macros.tiddlerTemplatesMacro.errorNoTemplateTiddler.format([templateTiddler]));
return;
} // ends if templateTiddlerObj == null (not in store)

var templateButton =
createTiddlyButton(place,label,tooltip,config.macros.tiddlerTemplatesMacro.newFromTemplate);

templateButton.setAttribute("templateTitle",templateTiddlerObj.title);
if (hereMode){templateButton.setAttribute("tagToAdd",hereMode);}
if (templateTag)
{templateButton.setAttribute("tagToStrip",templateTag);}

}; // closes newFromTemplateButton handler definition

// This macro only in here for backward compatibility. I'll problably
drop it from the next release
config.macros.newFromTemplate.handler =
function(place,macroName,params,wikifier,paramString,callingTiddler){

// juggle params around since this macro does NOT use named
parameters and newFromTemplatePopup does
if (params[0] != null) {paramString = 'templateTag:\"'+paramString
+'\"';}
var paramsToPass = paramString.readMacroParams();

config.macros.newFromTemplatePopup.handler(place,macroName,paramsToPass,
wikifier,paramString, callingTiddler);

}; // closes newFromTemplate handler definition

//}}}

-------------------------------------- end of code
-------------------------------------------
--------------------- start of TiddlerTemplatesMacroDocumentation
-----------------

/%
|URL''|http://www.kultofbubb.net/tiddlywiki/|
|Author''|[[RichCarrillo]]|
|Description|TiddlerTemplatesMacro is a collection macros that allow
you to easily create new tiddlers using existing tiddlers as
templates.|
%/

!Description
TiddlerTemplatesMacro is a collection macros that allow you to easily
create new tiddlers using existing tiddlers as templates. The package
is comprised of two macros: newFromTemplatePopup and
newFromTemplateButton. I've also retained the old newFromTemplate
macro name and re-directed it to newFromTemplatePopup for backward
compatibility. I'll problably drop that from the next release.

''newFromTemplatePopup (and the old newFromTemplate) -'' Using this
macro will create a pop-up that lists anything tagged with Templates.
Choosing an item off this list will create a new Tiddler. This new
Tiddler will have the same contents as the template. The title will be
NEW<template title> and it's tags will be the same as the template,
but with the Templates tag stripped off. Templates is the same tag
that WikiBar uses for templates. You can chose your own template tag
with the parameter "templateTag".(see the syntax section below)

''newFromTemplateButton -'' Using this macro will create a button.
Clicking this button will create a new Tiddler. This new Tiddler will
have the same contents as the tiddler you specifiy as the template in
the parameters. The title will be NEW<template title> and it's tags
will be the same as the template tiddler, with any tag you specifiy as
templateTag stripped off.

!Installation
Import (or copy the contents of) TiddlerTemplatesMacro into your Wiki.
Tag it with systemConfg, Save and Reload (Refresh).

You may also import or copy this documentation tiddler. It should not
be tagged with systemConfig.
I've included some example templates. Import or copy all Tiddlers
tagged with [[Templates]] to get you started.

!Syntax - {{{<<newFromTemplatePopup>>}}}
|>|>|{{{<<}}}''newFromTemplatePopup'' //label:"button label
<arrow>"// //tooltip:"tooltip text"// //templateTag:"MyTemplates"// //
hereMode:"true"//{{{>>}}}|
|Parameter''|Default Value''|Description''|
|//label//|New Here...|The text to appear on the button. If you add
<arrow> to your button label (within the quotes), a small drop-down
indicator arrow will be automaticly added|
|//tooltip//|Create a tiddler from a template|The text to appear on
the tooltip, when you hover over the button|
|//templateTag//|Templates|The pop-up menu will list any tiddler of a
certain tag. This is the tag that indicated which tiddlers you'd like
to use as templates. This tag will be stripped off the new tiddler, so
it doesnt become a template itself.|
|//hereMode//|False|If set to true, the new tiddler will be tagged
with the title of the tiddler where the macro is called from. To be
used in the ViewTemplate|
|>|>|~~Syntax formatting: Required parameters in ''bold'', optional
parameters in //italics//. Parameters may appear in any order, but
must be in the //keyword:"value"// format. All values should be double-
quoted without any spaces before the quotes~~|

!Syntax - {{{<<newFromTemplateButton>>}}}
|>|>|{{{<<}}}''newFromTemplateButton'' //label:"button label"// //
tooltip:"tooltip text"// ''templateTiddler:"TaskItem"'' //
templateTag:"MyTemplates"// //hereMode:"true"//{{{>>}}}|
|Parameter''|Default Value''|Description''|
|//label//|New Here...|The text to appear on the button.|
|//tooltip//|Create a tiddler from a template|The text to appear on
the tooltip, when you hover over the button|
|//templateTag//|Templates|Since there is no pop-up menu, this tag
will just be stripped off the new tiddler, so it doesnt become a
template itself.|
|templateTiddler''|null|Required'' - The tiddler to use as a template.
The title, text and tags will be copied.|
|//hereMode//|False|If set to true, the new tiddler will be tagged
with the title of the tiddler where the macro is called from. To be
used in the ViewTemplate|
|>|>|~~Syntax formatting: Required parameters in ''bold'', optional
parameters in //italics//. Parameters may appear in any order, but
must be in the //keyword:"value"// format. All values should be double-
quoted without any spaces before the quotes~~|

!Syntax - {{{<<newFromTemplate>>}}}
|>|>|{{{<<}}}''newFromTemplate'' //templateTag//{{{>>}}}|
|Parameter''|Default Value''|Description''|
|//templateTag//|Templates|The pop-up menu will list any tiddler of a
certain tag. This is the tag that indicated which tiddlers you'd like
to use as templates. This tag will be stripped off the new tiddler, so
it doesnt become a template itself.|
|>|>|~~Syntax formatting: Required parameters in ''bold'', optional
parameters in //italics//.~~|
|>|>|~~''This macro does NOT use named parameters. It has only one
optional parameter "templateTag". You can not override default label &
tooltip. HereMode is not available''~~|

/%
!Example
newFromTemplatePopup <<newFromTemplatePopup tooltip:"Choose a
template" label:"Template List ">>
newFromTemplateButton <<newFromTemplateButton
templateTiddler:"TaskItem" tooltip:"Create a new Task Item" label:"New
Task">>
newFromTemplate <<newFromTemplate>>
%/

!Revision History
* 0.1 (2006-01-13)
** First release
* 0.2 (2006-01-16)
** Added the ability to pass the templateTag as an optional first
parameter.
* 0.3 (2006-01-16)
** Bunch of little code tweaks trying to figure out why it was
breaking in IE. Fixed it.
* 0.9 (2006-02-15)
** Changed the name to TiddlerTemplatesMacro. It is now a collection
of macros
** Reorganized code
** Implemented named macro parameters (using [[Paul Petterson|http://
thepettersons.org/PaulsNotepad.html]]'s reparse function)
** Improved error catching & reporting (when a required parameter is
missing or to prevent overwritting of an existing tiddler)
** The user can now pass the button label, tooltip and templateTag as
parameters
** Created second macro that shows a button linked to a specfic
template
** Incorporated "New Here" code from Simon Baird. Now you have the
ability to create a new tiddler, from a template and have it tagged
with the title of the tiddler where the macro was called from.
** Seperated documentation from the code. I'm using a shadow tiddler
that shows the syntax and a link to the full documentation if the user
doesnt have it.
** Made it easier to translate by putting all the message text in one
place
** All new documentation

!Credits
* Most of this code is adaptions of TiddlyWiki core functions. I took
a close look at PopupMacro and WikiBar's Templater Add-on for help.
* The named macro parameters function "reparse" is from [[Paul
Petterson|http://thepettersons.org/PaulsNotepad.html]]
* The "New Here" functionality provided by [[Simon Baird|http://
simonbaird.com/mptw/]]
* Thanks to Ted Pavlic for QA and feature suggestions (including the
optional dropdown arrow)

-------------------------- end of documentation
-------------------------------------

==========================================================================

On 14 Sep., 01:24, dickon <dickon.beving...@gmail.com> wrote:
> I have posted about the AMBIT project a few times before.  AMBIT a
> developing therapeutic method of working with young people who have
> multiple complex problems (crime, mental health, drugs, family
> breakdown, etc).  We have trained a number of teams in this method and
> the 'manual' (how-to-do-it) is an opensource TW, versions of which can
> be found athttp://www.tiddlymanuals.com

Michael.Tarnowski

unread,
Sep 14, 2010, 6:10:58 PM9/14/10
to TiddlyWiki
Dickson,

a small but nifty navigation aid is Saq Imtiaz' HoverMenuPlugin
(http://tw.lewcid.org/#HoverMenuPlugin|). It prrovides a hovering menu
on the edge of the screen for commonly used commands, that scrolls
with the page.

Michael

---------------------------

On 14 Sep., 01:24, dickon <dickon.beving...@gmail.com> wrote:
> I have posted about the AMBIT project a few times before.  AMBIT a
> developing therapeutic method of working with young people who have
> multiple complex problems (crime, mental health, drugs, family
> breakdown, etc).  We have trained a number of teams in this method and
> the 'manual' (how-to-do-it) is an opensource TW, versions of which can
> be found athttp://www.tiddlymanuals.com

passingby

unread,
Sep 15, 2010, 12:01:02 AM9/15/10
to TiddlyWiki
Hello Dickon,

My suggestion is to simplifiy the interface as much as possible.

More white space, less larger headings,less dark colors in background.
Do away with tag cloud.
Try not mentioning the technical stuff, like the term 'Tag'. The top
horizontal menu should be more like traditional menu, now it is about
the 'tag'.

If it fits your need you could also try using tree view plugin.

These are my suggestions, but I am no interface expert, just a simple
TW lover who has uptil now not created any decent TW document till
date.

On Sep 14, 4:24 am, dickon <dickon.beving...@gmail.com> wrote:
> I have posted about the AMBIT project a few times before.  AMBIT a
> developing therapeutic method of working with young people who have
> multiple complex problems (crime, mental health, drugs, family
> breakdown, etc).  We have trained a number of teams in this method and
> the 'manual' (how-to-do-it) is an opensource TW, versions of which can
> be found athttp://www.tiddlymanuals.com

Tobias Beer

unread,
Sep 15, 2010, 4:21:29 AM9/15/10
to TiddlyWiki
Hi Michael,

Could you please post this or any other script of such length to
http://pastebin.com instead and set it to "never expire"?

Cheers, Tobias.

dickon

unread,
Sep 16, 2010, 5:21:35 AM9/16/10
to TiddlyWiki
Wow - thank you to all of you who have replied with these suggestions
so far - this is exactly the kind of practical help I had hoped (and
reliably expected) to get!

I will go through all of this and let you see what I come up with over
the next few weeks. Don't let me stop others adding their advice,
though.

Thanks again.

Dickon

On 15 Sep, 09:21, Tobias Beer <beertob...@googlemail.com> wrote:
> Hi Michael,
>
> Could you please post this or any other script of such length tohttp://pastebin.cominstead and set it to "never expire"?
>
> Cheers, Tobias.
Reply all
Reply to author
Forward
0 new messages