Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88
/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
a img {border:0;}
h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}
.button {color:[[ColorPalette::PrimaryDark]]; border:1px solid [[ColorPalette::Background]];}
.button:hover {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::SecondaryLight]]; border-color:[[ColorPalette::SecondaryMid]];}
.button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::SecondaryDark]];}
.header {background:[[ColorPalette::PrimaryMid]];}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}
.tabSelected{color:[[ColorPalette::PrimaryDark]];
background:[[ColorPalette::TertiaryPale]];
border-left:1px solid [[ColorPalette::TertiaryLight]];
border-top:1px solid [[ColorPalette::TertiaryLight]];
border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::TertiaryPale]]; border:1px solid [[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}
#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Background]]; background:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::Background]];}
.wizard {background:[[ColorPalette::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background::[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}
#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}
.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}
.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}
.tiddler .defaultCommand {font-weight:bold;}
.shadow .title {color:[[ColorPalette::TertiaryDark]];}
.title {color:[[ColorPalette::SecondaryDark]];}
.subtitle {color:[[ColorPalette::TertiaryDark]];}
.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}
.tagging, .tagged {border:1px solid [[ColorPalette::TertiaryPale]]; background-color:[[ColorPalette::TertiaryPale]];}
.selected .tagging, .selected .tagged {background-color:[[ColorPalette::TertiaryLight]]; border:1px solid [[ColorPalette::TertiaryMid]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::PrimaryDark]];}
.tagging .button, .tagged .button {border:none;}
.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}
.sparkline {background:[[ColorPalette::PrimaryPale]]; border:0;}
.sparktick {background:[[ColorPalette::PrimaryDark]];}
.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}
.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}
.imageLink, #displayArea .imageLink {background:transparent;}
.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}
.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}
table {border:2px solid [[ColorPalette::TertiaryDark]];}
th, thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
td, tr {border:1px solid [[ColorPalette::TertiaryDark]];}
.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}
.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}
.editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
.editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryMid]];}
#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:'alpha(opacity:60)';}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}
body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}
h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}
hr {height:1px;}
a {text-decoration:none;}
dt {font-weight:bold;}
ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}
.txtOptionInput {width:11em;}
#contentWrapper .chkOptionInput {border:0;}
.externalLink {text-decoration:underline;}
.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}
.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}
/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}
#mainMenu .tiddlyLinkExisting,
#mainMenu .tiddlyLinkNonExisting,
#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}
.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0em 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0em 1em 1em; left:0px; top:0px;}
.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}
#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}
#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0em 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 .3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}
.wizard {padding:0.1em 1em 0em 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0em 0em 0em; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0em;}
.wizardFooter .status {padding:0em 0.4em 0em 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em 0.1em 0.2em;}
#messageArea {position:absolute; top:2em; right:0em; margin:0.5em; padding:0.5em; z-index:200;}
*[id='messageArea'] {position:fixed !important; z-index:200;}
.messageToolbar {display:block; text-align:right; padding:0.2em 0.2em 0.2em 0.2em;}
#messageArea a {text-decoration:underline;}
.tiddlerPopupButton {padding:0.2em 0.2em 0.2em 0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em 1em 1em 1em; margin:0;}
.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0em;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}
.tabset {padding:1em 0em 0em 0.5em;}
.tab {margin:0em 0em 0em 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}
#contentWrapper {display:block;}
#splashScreen {display:none;}
#displayArea {margin:1em 17em 0em 14em;}
.toolbar {text-align:right; font-size:.9em;}
.tiddler {padding:1em 1em 0em 1em;}
.missing .viewer,.missing .title {font-style:italic;}
.title {font-size:1.6em; font-weight:bold;}
.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}
.tiddler .button {padding:0.2em 0.4em;}
.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}
.footer {font-size:.9em;}
.footer li {display:inline;}
.annotation {padding:0.5em; margin:0.5em;}
* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0em 0.25em; padding:0em 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}
table {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}
.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}
.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0em; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}
.fieldsetFix {border:0; padding:0; margin:1px 0px 1px 0px;}
.sparkline {line-height:1em;}
.sparktick {outline:0;}
.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}
* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; right:0em;}
#backstageButton a {padding:0.1em 0.4em 0.1em 0.4em; margin:0.1em 0.1em 0.1em 0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; margin:0em 3em 0em 3em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 0.2em 0.4em;}
#backstageCloak {display:none; z-index:50; position:absolute; width:100%; height:100px;}
.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which use a logographic writing system and need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
.htmlarea .toolbarHA table {border:1px solid ButtonFace; margin:0em 0em;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar {display: none ! important;}
#displayArea {margin: 1em 1em 0em 1em;}
/* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
noscript {display:none;}
}
/*}}}*/
<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler > fields syncing permalink references jump'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<!--}}}-->
To get started with this blank TiddlyWiki, you'll need to modify the following tiddlers:
* SiteTitle & SiteSubtitle: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* MainMenu: The menu (usually on the left)
* DefaultTiddlers: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>
These InterfaceOptions for customising TiddlyWiki are saved in your browser
Your username for signing your edits. Write it as a WikiWord (eg JoeBloggs)
<<option txtUserName>>
<<option chkSaveBackups>> SaveBackups
<<option chkAutoSave>> AutoSave
<<option chkRegExpSearch>> RegExpSearch
<<option chkCaseSensitiveSearch>> CaseSensitiveSearch
<<option chkAnimate>> EnableAnimations
----
Also see AdvancedOptions
VisualTiddlyWiki is a customization of [[TiddlyWiki|http://www.tiddlywiki.com]] created by Pascal Collin
More information and discussions on [[Tiddlywiki forum|http://groups.google.com/group/TiddlyWiki]]
These software are published under the BSD open source [[License]]
To create your own models of tiddler :
#Create a template for editing and another for viewing
#In the edit templates call [[setField macro]] to set the value of two fields named ~EditTemplate and ~ViewTemplate => Every tiddler edited once with this template will "remind" these value.
#Add something like <<newTiddler label:'new event' prompt:'new tiddler as event' template:'EditTemplateEvent'>> in SideBarOptions (edit this tiddler to see the code for this button).
Example : EditTemplateEvent
You can start with the [[zipped full package|VisualTW.zip]] or use VisualTiddlyWiki components :
|!Name|!Place|!Template|
|[[VisualTiddlyWiki|http://visualtw.ouvaton.org/VisualTW.html]]|[[html file only|http://visualtw.ouvaton.org/VisualTW.html]] or [[full package|http://visualtw.ouvaton.org/VisualTW.zip]]|all|
|[[TextEditor|VTWFiles/HTML/editor.html]]|~VTWFiles/HTML/editor.html |text|
|[[FCKeditor custom configuration|~VTWFiles/HTML/custom_config.js |text|
|[[FCKeditor|http://www.fckeditor.net/]] package|~VTWFiles/HTML/fckeditor|text|
|[[FCKeditor rtSpellCheck FireFox spellcheck plugin|http://sourceforge.net/tracker/?group_id=75348&atid=737639]]|~VTWFiles/HTML/fckeditor/editor/plugins/rtSpellCheck/fckplugin.js|text|
|FCKeditor custom skin|~VTWFiles/HTML/skin|text|
|[[DrawEditor|VTWFiles/SVG/draw.html]]|~VTWFiles/SVG/draw.html|draw|
|[[JHotDraw SVG sample applet|http://sourceforge.net/projects/jhotdraw]]|~VTWFiles/SVG/djhotdraw_svg.jar|draw|
|[[RefTable editor|VTWFiles/NET/net.html]]|~VTWFiles/NET/net.html|ref table|
|[[RefTable editor XML to HTML transformation|VTWFiles/NET/net.xsl]]|~VTWFiles/NET/net.xsl|ref table|
|[[JHotDraw NET sample applet|http://sourceforge.net/projects/jhotdraw]]|~VTWFiles/NET/jhotdraw_net.jar|ref table|
<!--{{{-->
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text 2'></div>
<div macro='editFieldInFrame html VTWFiles/SVG/draw.html'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<div macro='setField edittemplate EditTemplateDraw'/>
<div macro='setField viewtemplate ViewTemplateDraw'/>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
Date:<div class='editor' macro='edit eventdate'></div>
Place:<div class='editor' macro='edit eventplace'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text 3'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<div macro='setField edittemplate EditTemplateEvent'/>
<div macro='setField viewtemplate ViewTemplateEvent'/>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text 2'></div>
<div macro='editFieldInFrame html VTWFiles/NET/net.html'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<div macro='setField edittemplate EditTemplateRefTb'/>
<div macro='setField viewtemplate ViewTemplateRefTb'/>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text 2'></div>
<div macro='editFieldInFrame html VTWFiles/HTML/editor.html'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<div macro='setField edittemplate EditTemplateText'/>
<div macro='setField viewtemplate ViewTemplateText'/>
<!--}}}-->
This example show a draw tiddler. Only Firefox displays the SVG image (Internet explorer can't handle this W3C standard). Editing need Java Runtime (JRE) to be installed and actived in your browser.
This simple example show a tiddler using a specific template (''date'' and ''place'' new fields).
This example show a references table. Edit to see the visual editor (require Java plugin).
This text is edited in rich text mode.
FCKeditor is an opensource wysiwyg editor. Project homepage : http://www.fckeditor.net/
FCKeditor can be extended with plugin. See http://wiki.fckeditor.net/Developer%27s_Guide/Customization/Plug-ins
It may be possible to create a plugin for wikiformat. But I didn't tried.
JHotDraw is opensource Java framework for vector drawing. Information and download at http://sourceforge.net/projects/jhotdraw.
VisualTiddlyWiki use only a small set of JHotDraw's possibilities (SVG and NET sample applets).
/***
|''Name:''|LegacyStrikeThroughPlugin|
|''Description:''|Support for legacy (pre 2.1) strike through formatting|
|''Version:''|1.0.2|
|''Date:''|Jul 21, 2006|
|''Source:''|http://www.tiddlywiki.com/#LegacyStrikeThroughPlugin|
|''Author:''|MartinBudden (mjbudden (at) gmail (dot) com)|
|''License:''|[[BSD open source license]]|
|''CoreVersion:''|2.1.0|
***/
//{{{
// Ensure that the LegacyStrikeThrough Plugin is only installed once.
if(!version.extensions.LegacyStrikeThroughPlugin) {
version.extensions.LegacyStrikeThroughPlugin = {installed:true};
config.formatters.push(
{
name: "legacyStrikeByChar",
match: "==",
termRegExp: /(==)/mg,
element: "strike",
handler: config.formatterHelpers.createElementAndWikify
});
} //# end of "install only once"
//}}}
''Open Source License''
VisualTiddlyWiki and TiddlyWiki itself are published under a BSD [[open source license|http://en.wikipedia.org/wiki/Open_source_license]]. This gives you the freedom to use it pretty much however you want, including for commercial purposes, as long as you keep the copyright notice. If you do use stuff from this page a link back to http://visualtw.ouvaton.org/ and to http://www.tiddlywiki.com/ is appreciated.
[[VisualTiddlyWiki]]
[[Download]]
[[Customization]]
[[License]]
[[About]]
Examples :
[[Example of event]]
[[Example of text]]
[[Example of drawing]]
[[Example of ref table]]
Plugins :
TiddlerTemplatesPlugin
[[iFrameEditorPlugin]]
Used templates :
EditTemplateEvent
ViewTemplateEvent
EditTemplateText
ViewTemplateText
EditTemplateDraw
ViewTemplateDraw
EditTemplateRefTb
ViewTemplateRefTb
<<search>><<closeAll>><<permaview>><<newTiddler>><<newTiddler label:'new text' prompt:'new tiddler as wysiwyg text' template:'EditTemplateText'>><<newTiddler label:'new drawing' prompt:'new tiddler as drawing' template:'EditTemplateDraw'>><<newTiddler label:'new ref table' prompt:'new tiddler as table of tiddler references' template:'EditTemplateRefTb'>><<newTiddler label:'new event' prompt:'new tiddler as event' template:'EditTemplateEvent'>><<saveChanges>><<slider chkSliderOptionsPanel OptionsPanel 'options »' 'Change TiddlyWiki advanced options'>>
based on TiddlyWiki, a reusable non-linear personal web notebook
/***
|Location|http://visualtw.ouvaton.org/VisualTW.html|
|Version|1.0|
|Requires|~TW2.2.x|
|Browsers|Firefox 2.0.x, IE 6.0+, others|
!Description:
allow the creation of tiddler associated with specific templates (for editing and viewing).
!Demo:
see [[homepage|http://visualtw.ouvaton.org/VisualTW.html]] [[Example of event]]
!Installation:
*import this tiddler from [[homepage|http://visualtw.ouvaton.org/VisualTW.html]] (tagged as systemConfig)
*create your own templates
See [[Customization]] on [[homepage|http://visualtw.ouvaton.org/VisualTW.html]] for more information
!History:
*07-06-07: ver 1.0
!Code
***/
//{{{
config.macros.setField = {
handler : function(place,macroName,params,wikifier,paramString,tiddler) {
if(tiddler instanceof Tiddler) {
var fieldName = params[0];
var fieldValue = params[1];
if (fieldName && fieldValue ) place.appendChild(this.createHiddenField(fieldName,fieldValue));
}
},
createHiddenField: function(field, text) {
var e = createTiddlyElement(null,"input");
e.setAttribute("readOnly","readOnly"); e.setAttribute("edit",field); e.setAttribute("type","hidden");
e.value=text;
return e;
}
}
config.macros.viewField = {
handler : function(place,macroName,params,wikifier,paramString,tiddler) {
if((tiddler instanceof Tiddler) && params[0]) {
var value = tiddler.fields[params[0]];
if(value != undefined) {
switch(params[1]) {
case undefined:
highlightify(value,place,highlightHack,tiddler);
break;
case "link":
createTiddlyLink(place,value,true);
break;
case "wikified":
wikify(value,place,highlightHack,tiddler);
break;
case "date":
value = Date.convertFromYYYYMMDDHHMM(value);
createTiddlyText(place,value.formatString(params[2] ? params[2] : config.views.wikified.dateFormat));
break;
}
}
}
}
}
Story.prototype.previousChooseTemplateForTiddler = Story.prototype.chooseTemplateForTiddler;
Story.prototype.chooseTemplateForTiddler = function(title,template) {
template= Story.prototype.previousChooseTemplateForTiddler(title,template);
var t=store.getTiddler(title);
if (t) {
specificTemplate=t.fields[template.toLowerCase()];
if (specificTemplate && store.tiddlerExists(specificTemplate))
template=specificTemplate;
}
return template;
}
//}}}
TiddlyWiki is a wiki-modeled client-side single page application written by Jeremy Ruston that is designed to be used as a personal notebook. It is a single self-contained HTML file that includes CSS and JavaScript code. When the user downloads it to their PC, TiddlyWiki can save the entered information by overwriting itself on the user's disk, at the user's request. Following TiddlyWiki conventions, users can make a new entry, called a Tiddler, in their local copy of the TiddlyWiki file and save it for future reference. Existing Tiddlers can also be modified or deleted in the same way.
TiddlyWiki is published by Osmosoft under a BSD open source [[license]], which makes it freely available. Developer Jeremy Ruston describes it as experimental, and in that spirit many people have used the original HTML file to create TiddlyWiki Adaptations. These fall under two general categories: those that retain the client-side write only feature, and those that add server-side file writing to make TiddlyWiki more like a true wiki. Links to both these kinds of Adaptations are put in the original TiddlyWiki file as they become known. TiddlyWiki Adaptations typically add features that were not originally envisioned by Ruston, and some of these features have been included in newer versions of TiddlyWiki.
A feature that sets TiddlyWiki apart from a standard wiki implementation is its content presentation. Jeremy Ruston had this to say about it:
A TiddlyWiki is like a blog because it's divided up into neat little chunks (tiddlers), but it encourages you to read it by hyperlinking rather than sequentially: if you like, a non-linear blog analogue that binds the individual microcontent items into a cohesive whole. I think that TiddlyWiki represents a novel medium for writing, and will promote its own distinctive Writing Style.
Although a TiddlyWiki is designed for keeping notes, it can also be used as the foundation for a complete Web site. Photo album and slideshow generator Umibozu (wiki) is based on TiddlyWiki.
This summary is extracted from [[Wikipedia|http://en.wikipedia.org/wiki/TiddlyWiki]]
config.options.chkHttpReadOnly = false;
readOnly = false;
<!--{{{-->
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler > fields syncing permalink references jump'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='viewer' macro='viewHtmlField html'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler > fields syncing permalink references jump'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'>Place:<span macro='viewField eventplace link'></span>
Event date:<span macro='viewField eventdate'></span>
Tiddler hange count : <span macro='viewField changecount'></span></div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler permalink references jump'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date [[DD MMM YYYY]]'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date [[DD MMM YYYY]]'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='viewer' macro='viewPreElementInField html'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler > fields syncing permalink references jump'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='viewer' macro='viewHtmlField html'></div>
<div class='tagClear'></div>
<!--}}}-->
VisualTiddlyWiki extends TiddlyWiki <<version>> with the following plugins :
* TiddlerTemplatesPlugin : This plugin create typed tiddlers, with specifics Edit and View templates. To try it, see [[Example of event]].
* [[iFrameEditorPlugin]] : this plugin allows fields to be edited in an "iframed" editor (technically external but visually internal). So, no more complex editor javascript to integrate inside Tiddlywiki own javascript.
Currently, the most useful iframe editor is richTextEditor, for Wysiwyg text edition. VisualTiddlyWiki uses opensource FCKeditor. It works with Firefox and Internet explorer and others (but I didn't try all). Edit [[Example of text]] to see it in action.
''For "proof of concept" purpose'', you will find here some other examples of iframe editors :
* __Draw__ : VisualTiddlyWiki adds SVG image tiddlers (using a JHotDraw Java applet). Firefox render SVG images but Internet Explorer doesn't handle this W3C standard. Edit [[Example of drawing]] to see it in action.
* __~RefTable__ : VisualTiddlyWiki adds tables of tiddler reference (using JHotDraw Java applet) Edit [[Example of ref table]] to see it in action.
!!Known bugs :
* The two java editors (Draw and ~RefTable) sometimes fail to load or leave (java plugin event handling problem ?).
* VisualTiddlyWiki is in ''beta stage''. A lot of work has to be done before production stage. Try it, improve it, and share your code.
!!See also :
*''How import these plugin'' ? VisualTiddlyWiki keep complexe editors outside Tiddlywiki (to avoid integration complexity). Disadvantage : Installation is no more a single file. Editors have to be installed in subdirectories. Read [[Download]] to get more information.
*''Custom editors'' : You can add your own iframe editors. Content is exchanged beetween iframe and VisualTiddlyWiki through a single and simple function (getContent). Read [[TiddlerTemplatesPlugin]] and [[iFrameEditorPlugin]] documentation to get more information.
/***
|Location|http://visualtw.ouvaton.org/VisualTW.html|
|Version|1.0|
|Requires|~TW2.2.x|
|Browsers|Firefox 2.0.x, IE 6.0+, others|
!Description:
Integrate external editor in TiddlyWiki by iframe.
!Demo:
see [[homepage|http://visualtw.ouvaton.org/VisualTW.html]] examples for demo
!Installation:
See [[Download]] on [[homepage|http://visualtw.ouvaton.org/VisualTW.html]]
***/
//{{{
config.options.txtiFrameHeight = config.options.txtiFrameHeight ? config.options.txtiFrameHeight : "600px";
//}}}
/***
Configure iFrame height : <<option txtiFrameHeight>>
!History:
*07-06-07: ver 1.0
!Code
***/
//{{{
Story.prototype.previousGatherSaveFields = Story.prototype.gatherSaveFields;
Story.prototype.gatherSaveFields = function(e,fields) {
if(e && e.getAttribute) {
var f = e.getAttribute("iFrameEdit");
if(f) fields[f] = e.contentWindow.getContent();
else Story.prototype.previousGatherSaveFields(e,fields);
}
}
config.macros.editFieldInFrame = {
handler : function(place,macroName,params,wikifier,paramString,tiddler) {
var field = params[0];
var editor = params[1] ? params[1] :"editor.html" //default value
if((tiddler instanceof Tiddler) && field) {
story.setDirty(tiddler.title,true);
var e = createTiddlyElement(null,"iframe");
if(tiddler.isReadOnly()) e.setAttribute("readOnly","readOnly");
e.setAttribute("iFrameEdit",field);
e.setAttribute("type","iFrame");
var v = store.getValue(tiddler,field);
v = v ? v : "";
e.src=editor+"?tiddler="+escape(tiddler.title)+"&field="+escape(field);
e.height=config.options.txtiFrameHeight;
e.width="100%";
place.appendChild(e);
}
}
}
config.macros.viewHtmlField = {
handler : function(place,macroName,params,wikifier,paramString,tiddler) {
if((tiddler instanceof Tiddler) && params[0]) {
var value = tiddler.fields[params[0]];
if(value != undefined) {
e=createTiddlyElement(null,"div");
e.innerHTML=value;
place.appendChild(e);
}
}
}
}
getContent=function(tiddler, field) {
var t,f;
t=store.getTiddler(tiddler);
f = t ? t.fields[field] : "";
f = f ? f : "";
return f;
}
//}}}
store a value in a field of the edited tiddler.
usage : {{{<<setField fieldname fieldvalue>>}}}
See [[documentation|fields utilities plugin]] in the plugin for more information
//''NB'' : Field names have to be in lowercase to avoid some bugs (sometimes field name change to lowercase when saving, sometimes not)// (TW 2.20)
//{{{
config.macros.viewPreElementInField ={
handler : function(place,macroName,params,wikifier,paramString,tiddler) {
if((tiddler instanceof Tiddler) && params[0]) {
var value = tiddler.fields[params[0]];
if(value != undefined) {
d=document.createElement("div");
d.innerHTML=value;
text=d.getElementsByTagName("pre")[0].getAttribute("TextContent");
wikify(text,place,highlightHack,tiddler);
}
}
}
}
//}}}