Welcome to TiddlyWiki created by Jeremy Ruston; Copyright © 2004-2007 Jeremy Ruston, Copyright © 2007-2011 UnaMesa Association
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
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></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 excludeLists'></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>>
<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
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]]
<!--{{{-->
<div class='header' role='banner' 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' role='navigation' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' role='navigation' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' role='complementary' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea' role='main'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
/*{{{*/
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]];}
.wizard .notChanged {background:transparent;}
.wizard .changedLocally {background:#80ff80;}
.wizard .changedServer {background:#8080ff;}
.wizard .changedBoth {background:#ff8080;}
.wizard .notFound {background:#ffff80;}
.wizard .putToServer {background:#ff80ff;}
.wizard .gotFromServer {background:#80ffff;}
#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]];}
.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]];}
.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable 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]];}
.readOnly {background:[[ColorPalette::TertiaryPale]];}
#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 0 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0 1em 1em; left:0; top:0;}
.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:0 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 0.3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}
.wizard {padding:0.1em 1em 0 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0 0; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0;}
.wizardFooter .status {padding:0 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em;}
#messageArea {position:fixed; top:2em; right:0; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em;}
#messageArea a {text-decoration:underline;}
.tiddlerPopupButton {padding:0.2em;}
.popupTiddler {position: absolute; z-index:300; padding: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 0;}
.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 0 0 0.5em;}
.tab {margin:0 0 0 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 0 14em;}
.toolbar {text-align:right; font-size:.9em;}
.tiddler {padding:1em 1em 0;}
.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:0 0.25em; padding:0 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;}
.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0 3px 0 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 0; font-size:.9em;}
.editorFooter .button {padding-top:0; padding-bottom:0;}
.fieldsetFix {border:0; padding:0; margin:1px 0px;}
.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;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0; right:0;}
#backstageButton a {padding:0.1em 0.4em; margin:0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin-left:3em; padding:1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; 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 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;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none !important;}
#displayArea {margin: 1em 1em 0em;}
noscript {display:none;} /* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
}
/*}}}*/
<!--{{{-->
<div class='toolbar' role='navigation' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></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>
<!--}}}-->
You might find bugs everywhere. This could be non standard javascript, problems with the minimized version, or non supported control sequences. If you find any bug, please report the bug. Send me the recording you wanted to play, tell me which browser you where using, which is the setting of your TERM environment variable and on which server the code is hosted. Email on the left.
Some browsers do not yet support text rendering in canvas-elements. In this case you need to load one of the provided fonts instead.
If you use the web browsers rendering for the text, you might experience some artefacts. This is due to antialiasing, a //feature// of the browser. A rendering accurate pixel-by-pixel is only possible with manipulating the bitmap directly.
Note that although the size of the javascript to be loaded is only in the order of 100kB and the size of the fonts data which is loaded is usually also not exceeding 50kB, the stream you load might be large enough so that you experience a significant loading time. This is not a bug.
To report a bug, please send me an email (email address on the left)
* 2014/08/08: Fixed a problem with the strict mode (replaced octal by hex character representation) [Thanks Bill Agee for the report]
Since style sheets allow to reload fonts, you can add something like this to your style sheet:
{{{
@font-face {
font-family: 'myfont;
font-weight: normal;
font-style: normal;
src: url( fonts/myfont.woff );
}
}}}
(For details see references to {{{@font-face}}} everywhere in the internet. Note that not all font formats are supported by all browsers (most support at least woff) and make sure it is a monospaced font!)
Then specify the font name as font option in the url or when calling the proper functions from the javascript library, e.g. {{{fontfamily=myfont}}}. The advantage is that they are fully scaleable to (almost) any size. Note that if the given font-family is not found, the display will not load at all.
All options which are supported by the Player (see [[Player - Options]]) are also supported by the display (except onclose and debug which have a different meaning). In addition
;title
:A title to be displayed in the title bar instead of the filename
;onclose
:it is called when the close button in the upper right is clicked
;controls:
:displays the controls below the window when true
;debug
:a number, 0 (no debug window), 1 (only important messages), 2 (all massages)
Please note that the settings {{{onready}}}, {{{callbacl}}}, {{{onupdate}}}, {{{oncompletion}}}, {{{onbookmark}}}, {{{onpause}}} and {{{onplay}}} are overwritten by the function and may not be used.
Download the zip archive with the code, the fonts and the images [[here|download/termtv.zip]] (2014/08/08). The archive is about 2MB in size.
Unzip the archive into a directory of your choice on your webserver. (the archive will extract to {{{tvterm}}} by default).
Now you have already the stand alone version of the code ready. {{{index.html}}} can now be used as a stand alone player (of course you have to copy the streams you recorded on the web server first) or as an example to create your own web-page embedding the player.
This documentation is included as {{{index.html}}}, the player is available as {{{termtv.html}}}.
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></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 excludeLists'></span></div>
<!--}}}-->
The most difficult part with terminal emulation is the font or the font encoding. TermTV assumes that you are using Unicode encoding (UTF8). If a character is not properly detected, it is treated like ASCII 8bit data. However, the drawback is that if you have a real ASCII 8bit encoded file, some characters will be recognized as Unicode and wrongly displayed. I hope not many terminals are still using ASCII 8bit for encoding. If you have an ASCII 8bit file, it is your responsibility to have a proper font installed and in use. It might still be that a lot of uncommon Unicode symbols are not in the standard font as well. So if you have troubles with that, consider to install your own font.
If you have recorded a stream {{{ttyrecord}}}, you can encrypt the stream to make it only visible to all people who know the key. You need {{{opensssl}}} installed to do that. To encrypt the stream call
{{{ openssl enc -aes-256-cbc -in ttyrecord -out outfile.rec -pass pass:"YourKey" -e -base64 }}}
The key can be any ascii stream you can type on your keyboard.
You just call the player:
{{{
http://www.your-site-com/path/termtv.html?myrecording.bin&font=fixed-8x13&boldfont=fixed-8x13B
}}}
If you do not give a filename, the file {{{index.rec}}} from the ~TermTV main directory will be played.
You can test that [[here|termtv.html?]].
See [[URL - Options]] for a list of options.
In this example, an overlay of the current web-page is created.
{{{
function show()
{
var options =
{
'name': "data/myrecording.bin",
'font': "fixed-8x13",
'boldfont': 'fixed-8x13B'
}
new TTVOverlay(options);
}
}}}
You can see an example [[here|javascript:overlayTerminal();/*.*/]]. A ready-to-use function is also available in {{{termtv.js}}} as an example. It decodes the provided string argument as if it were an url:
{{{
overlayTerminal("?myrecording.bin&controls");
}}}
See [[URL - Options]] for a list of options available for both cases.
Your webpage contains an element with the id {{{frame}}}. The following code will create a player and embed it into your element:
{{{
var options =
{
'name': "myrecording.bin",
'font': "fixed-8x13",
'boldfont': "fixed-8x13B",
};
var frame = document.getElementById("frame");
var display = new TTVDisplay(options);
frame.appendChild(display);
}}}
You can see an example at the [[Home]] Tiddle.
See [[Display - Options]] for a list of options.
To create player, //playing// into an existing canvas element use:
{{{
var canvas = document.createElement("canvas");
var options =
{
'name': "data/myrecording.bin",
'font': "fixed-8x13",
'boldfont': 'fixed-8x13B'
}
new TTVPlayer(canvas, options);
}}}
See [[Player - Options]] for a list of options.
This section is expected to contain some links to examples using TermTV. Since I just released TermTV, there is none yet. Please let me know if you want a link to your project be put here (email on the left).
* plays recordings from [[ttyrec|http://0xcc.net/ttyrec/index.html.en]]
* plays recordings from [[termrec|http://angband.pl/termrec.html]]
* font files can be created from bdf-type fonts, but built-in fonts are supported as well, so that no font files need to be loaded
* can play AES [[encrypted streams|Encryption]], so that nobody can view the video who does not have the key (uses [[CryptoJS|https://code.google.com/p/crypto-js/]])
* the code is slightly performance optimized so that even [[libaa|http://aa-project.sourceforge.net/aalib/]] stuff can be played if it is not too demanding.
* if the stream contains \033[8;H;W° escape sequences, the canvas is re-sized according to the first one found in the stream.
!!!!Teminal Emulation
I have tried to support as many escape sequences of as many possible terminal emulations as possible. However, some things are not really worth (e.g. italic font), some terminal emulations are not in use at all anymore (e.g. vt52), so although some rare codes might work, the main focus is on the support of vt100 and standard linux terminals (TERM=xterm, screen, linux, ...). If there are ambiguities, I implemented the one closest to a linux console.
A very good source is the page developing {{{xterm}}} with a list of all supported sequences at http://invisible-island.net/xterm/ctlseqs/ctlseqs.html.
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>>
This is a javascript based player to play your recorded terminal actions. The player is using the HTML canvas element to render the terminal contents.
''Here is an example'' ([[more info|Home - Example]])<html>
<img src="img/transparent.gif" width="0"= height="0" onload='if (startDemo) startDemo();'></img>
<div id="frame" style="height:300px;"></div>
</html>
Or instead of an element embedded into the web-page, you can open an [[overlay|javascript:overlayTerminal();/*.*/]] as well if you click on that link.
The example you see was created with a simple shell script outputting text and control sequences on the console and some sleep in between. The font is intentionally chosen as a well known CBM font.
After you downloaded the data (see [[Download]]), you have two options. You can use the complete code basis (for example for debugging purpose) or the compiled version. (Note that the aes.js for encryption, which comes from the ~CryptoJS project, is a compiled version in any case).
!!!!To use the full version (~150kB)
{{{
<script src="js/aes.js"></script>
<script src="js/parse.js"></script>
<script src="js/emulate.js"></script>
<script src="js/ttyrec.js"></script>
<script src="js/font.js"></script>
<script src="js/canvasview.js"></script>
<script src="js/player.js"></script>
<script src="js/display.js"></script>
<link rel="stylesheet" type="text/css" href="termtv.css" />
}}}
!!!!To use the minimalistic version (~45kB, minimalistic in size not functionality)
{{{
<script src="termtv-min.js"></script>
<link rel="stylesheet" type="text/css" href="termtv.css" />
}}}
The full version allows you to access all objects. In the minimalistic version only {{{Player}}}, {{{Display}}}, {{{Overlay}}} and {{{OverlayTerminal}}} are //exported// that means not obfuscated by the compiler and hence easily accessible.
To see how to use the functions, see [[Usage]].
[[Home]]
[[Recording]]
[[Features]]
[[Custom fonts]]
[[Encryption]]
[[Reference]]
[[Bugs]]
[[Download]]
[[Changelog]]
[[Installation]]
[[Usage]]
[[Examples]]
<html><A style="font-size:0.8em;color:darkgray;font-weight:bold;" HREF="mailto:corrado91@gmx.de">© T.Bretz 2014</A></html>
<html><span style="font-size:0.8em;color:darkgray;font-weight:bold;">Created with</span></html>
[[TiddlyWiki|http://tiddlywiki.com/]]
<!--{{{-->
<link rel="stylesheet" type="text/css" href="termtv.css" />
<script src="termtv-min.js"></script>
<!--}}}-->
<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
This customization of [[TiddlyWiki|http://tiddlywiki.com/]] is stored in a cookie
/%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]]
The following options are supported (as an object property of the object given in the constructor)
;name
:The name (or url) to the file which should be loaded and played. If none is given, {{{index.rec}}} is used instead.
;debug
:a callback function which is called with a string as argument providing debug information. If none is given, the debug output is discarded. (0: no debug, 1: very simply debug, 2: messages from parsing, 3: all messages from parsing (warning: many!)
;warp
:A factor which increases (>1) or decreases (<1) the speed of the playback by the given factor
;onclose
:a function which is called if the player terminates, e.g. when an error occurred when loading the file
;oncompletion
:a function which is called when the stream finished playing (not called when it is in loop-mode)
;font
:the name of the default font to use (it will be searched in the font subdirectory)
;boldfont
:the name of a font to be used for bold cases. If none is specified the standard font is used
;onready
:a function called when the stream is ready to be played
;autostart
:a number of milliseconds after which the streams starts playing after it became ready. set to 0 when it should not play automatically
;onplay
:a callback which is called whenever the stream start playing
;onupdate
:a callback which is called for each decoded frame. The first argument is the time (as Date object) in the stream, the second argument the fraction of the stream already displayed
;scan
:if this is true, the stream is played with the maximum possible speed at constant speed.
;loop
:the number of millisecond after which the stream is rewinded and restarted once the play is finished. 0 if it should not be restarted.
;onpause
:function which is called whenever the stream is paused
;onbookmark
:function which is called when a bookmark is set
;noskip
:usually, if the player is too slow, it will try to keep the timing correct, i.e. not display everything but focus on decoding. With this option you can force every chunk to bve displayed but you might run out of sync instead.
To record a stream you have to have either {{{ttyrec}}} or {{{termrec}}} installed. The main advantage of the second one (as far as I know) is that it encodes the size of your terminal at the beginning of the stream. A stream (it is just a series of characters and escape sequences), in principle can even be played back on a malformed window, but it might look ugly.
To record what is on your terminal just start either of the two programs (without arguments, they do not have many anyways). Then do whatever you want to record and when you are done exit the recorder as you would exit your shell (e.g. by typing {{{exit}}} or pressing {{{CTRL-d}}}.
If you did not give an argument for the filename (see {{{man}}}-pages for details), {{{ttyrec}}} has written a file called {{{ttyrecord}}} and {{{termrec}}} a file called something like {{{1974-09-09.21-59-59.ttyrec}}}.
I suggest to rename the files to either have the extension {{{.rec}}} or {{{.bin}}}. Both are stripped by the player hen shown in the title bar of the window.
You can also record the output of a script or program, for example
{{{ttyrec -e script.sh}}}
In all cases, I suggest that you first clean the terminal window, e.g. with {{{clear}}}. You can do that automatically by calling something like
{{{ttyrec -e 'clear; $SHELL'}}}
to clear the screen and then enter your preferred shell, or by
{{{ttyrec -e 'clear; script.sh}}}
if you wanna record the output of your script.
Since {{{ttyrec}}} does not record the terminal size, the terminal size the player calculated from the stream might be wrong or is just set to the default. To overcome that, you can record the size manually, for example by
{{{ttyrec -e "clear; echo -ne '\e[8;'$LINES';'$COLUMNS't'; $SHELL"}}}
The java code reference is available [[here|doc/index.html]]
/%<<tabs txtMainTab "Timeline" "Timeline" TabTimeline "All" "All tiddlers" TabAll "Tags" "All tags" TabTags "More" "More lists" TabMore>>%/
<<tabs txMainTab "All" "All tiddlers" TabAll "More" "More lists" TabMore>>
is a javascript based player for ttyrec or similar terminal recording streams.
.tagged {
display: none;
}
txtBackupFolder: backup
txtUserName: Thomas Bretz
chkToggleLinks: true
chkInsertTabs: true
chkRegExpSearch: true
chkHttpReadOnly: true
These options are available in an url:
;title
:A title to be displayed in the title bar instead of the filename <default: dilename>
;controls:
:displays the controls below the window when true <default: no controls>
;debug
:a number, 0 (no debug window), 1 (only important messages), 2 (all massages) <default: 0>
;name
:The name (or url) to the file which should be loaded and played. <default: index.rec>
;warp
:A factor which increases (>1) or decreases (<1) the speed of the playback by the given factor a function which is called when the stream finished playing (not called when it is in loop-mode)
;font
:the name of the default font to use (it will be searched in the font subdirectory) <default: c64 when no name is given; fixed-8x13 otherwise>
;boldfont
:the name of a font to be used for bold cases. If none is specified the standard font is used <default: none when no name is given, fixed-8x13B otherwise>
;autostart
:a number of milliseconds after which the streams starts playing after it became ready. set to 0 when it should not play automatically <default: 1000>
;scan
:if this is 1, the stream is played with the maximum possible speed. Only one frame per second is shown.Can be used to check whether everything is ok
;loop
:the number of millisecond after which the stream is rewinded and restarted once the play is finished. 0 if it should not be restarted <default: 0>
;fontsize
:if this open is set, the canvas rendering engine is used to render the font. The number you give is supposed to be the the font height in pixels. In this case the font argument is interpreted as font family (the default is 'monospace'). It does not make much sense to choose a variable width font!
;noskip
: does not skip any update, so that every chunk is displayed. This might get everything out of sync!
There are several options how the player could be used. If you want to run the player not as a stand alone web-page but as part of your webpage, make sure that you included all needed scripts and style sheets into your header. For more details see [[Installation]].
;Use the existing installation ([[Example 1]])
:You can just install the website //as is// and copy the data you want to play to a directory on your server as well. Then call the player with {{{http://your-server.com/path/termtv.html?url}}} in your browser. In this example {{{url}}} can be just the filename (if in the same directory), a relative path or even an absolute path including the {{{http://}}}.
;Use the player as an overlay in your existing web-page ([[Example 2]])
:Include all javascripts from the {{{js}}}-directory and the {{{termrec.css}}} style sheet into your web-page (see below for a more detailed example). Now you can execute the overlay code from an even, e.g. {{{<A HREF="javascript:show('url'); return false;"/>}}} (For a code example see [[Example 2]].
;Place the player in an element on your webpage ([[Example 3]])
:Again, include all javascripts and the style sheet. Now you can create a player and append it to one of your html elements, see [[Example 3]].
;Create your own player ([[Example 4]])
:So far, all examples use an existing layout. You can tweak the layout using the style sheet, but maybe that is not what you want. Instead of that you can create a canvas element in your web-page and just run the player in it. For a code example, see [[Example 4]].
Unfortunately, there is no easy option to play external data, since reloading of contents from a different server in not allowed by javascript for security reasons.
Example code is also available in {{{termtv.js}}} and {{{termtv.html}}}.
<!--{{{-->
<div class='toolbar' role='navigation' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></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>
<!--<hr size="1px" noshade align="center" width="68%">-->
<!--}}}-->