mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-27 12:07:19 +00:00
130 lines
6.7 KiB
Plaintext
130 lines
6.7 KiB
Plaintext
title: $:/plugins/tiddlywiki/innerwiki/examples
|
|
|
|
\define big-arrow(x,y,colour:"#ff0000",border:"#000000")
|
|
<g transform="translate($x$,$y$)">
|
|
<path d="m-81.43106,34.99315l40.25737,-49.78116l40.25737,49.78116l-20.12869,0l0,50.02069l-40.25737,0l0,-50.02069l-20.12869,0l0,0z" fill="$colour$" stroke="$border$" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" transform="rotate(49.3775 -41.1737 35.1129)"/>
|
|
</g>
|
|
\end
|
|
|
|
\define example(text)
|
|
<$codeblock code=<<__text__>>/>
|
|
|
|
Renders as:
|
|
|
|
$text$
|
|
\end
|
|
|
|
!! Browser
|
|
|
|
The innerwiki widget specifies the dimensions of the virtual screen used to render the wiki (in pixels) and CSS styles to apply to it. Nested `<$data>` widgets are used to specify individual payload tiddlers to be loaded into the wiki. In this example, we initialise the innerwiki with two tiddlers "HelloThere" and "$:/DefaultTiddlers":
|
|
|
|
<$macrocall $name="example" text="""<$innerwiki width="1200" height="400" style="width:100%;" filename="screenshot-1.png">
|
|
<$data title="HelloThere" text="This tiddler is inside a wiki"/>
|
|
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
|
|
</$innerwiki>"""/>
|
|
|
|
Note that the "screenshot" is a shrunken but fully interactive TiddlyWiki.
|
|
|
|
!! Node.js
|
|
|
|
To render these examples as a PNG bitmap under Node.js, execute the following at the command prompt:
|
|
|
|
```
|
|
tiddlywiki editions/innerwikidemo --screenshot $:/plugins/tiddlywiki/innerwiki/examples
|
|
```
|
|
|
|
The screenshots will be saved as `screenshot-1.png` etc in the `./output` folder of the wiki.
|
|
|
|
To render this example tiddler as a static HTML file that embeds the screenshot images and includes the SVG overlays:
|
|
|
|
```
|
|
tiddlywiki editions/innerwikidemo --render '[[$:/plugins/tiddlywiki/innerwiki/examples]]' "examples.html" --build index
|
|
```
|
|
|
|
!! SVG overlays
|
|
|
|
Any displayable content within innerwiki widget is displayed within an automatically created SVG element. This allows overlays to be added:
|
|
|
|
<$macrocall $name="example" text="""<$innerwiki width="1200" height="400" style="width:100%;" filename="screenshot-2.png">
|
|
<$data title="HelloThere" text="This tiddler is inside a wiki"/>
|
|
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
|
|
<circle cx="600" cy="50" r="40" stroke="black" stroke-width="2" fill="green" />
|
|
<<big-arrow 600 50>>
|
|
</$innerwiki>"""/>
|
|
|
|
Notice how macros can be used to encapsulate SVG fragments ([[see the source of this tiddler|$:/plugins/tiddlywiki/innerwiki/examples]]).
|
|
|
|
!! Clipping
|
|
|
|
A clipping rectangle can be applied to limit the area of the wiki that is displayed. For example:
|
|
|
|
<$macrocall $name="example" text="""<$innerwiki width="1200" height="400" style="width:100%;" clipLeft="500" clipTop="100" clipWidth="600" clipHeight="300" filename="screenshot-3.png">
|
|
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
|
|
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
|
|
</$innerwiki>"""/>
|
|
|
|
!! Transcluding payload tiddlers
|
|
|
|
This example shows how the `<$data>` widget can be transcluded from other tiddlers (see $:/plugins/tiddlywiki/innerwiki/example-data):
|
|
|
|
<$macrocall $name="example" text="""<$innerwiki width="600" height="400" style="width:100%;" filename="screenshot-4.png">
|
|
{{$:/plugins/tiddlywiki/innerwiki/example-data}}
|
|
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
|
|
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
|
|
</$innerwiki>"""/>
|
|
|
|
!! Customising the wiki state
|
|
|
|
By injecting the right payload tiddlers, the innerwiki can be initialised to any desired state. In this example we inject a configuration tiddler to make the "more" page control button visible, and a state tiddler to cause the dropdown to appear:
|
|
|
|
<$macrocall $name="example" text="""<$innerwiki template="$:/plugins/tiddlywiki/innerwiki/template" filename="screenshot-5.png" width="1200" height="400" style="width:100%;">
|
|
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
|
|
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
|
|
<$data title="$:/config/PageControlButtons/Visibility/$:/core/ui/Buttons/more-page-actions" text="show"/>
|
|
<$data title="$:/state/popup/more--1600698846" text="(151,144,21,25)"/>
|
|
</$innerwiki>"""/>
|
|
|
|
<$macrocall $name="example" text="""<$innerwiki template="$:/plugins/tiddlywiki/innerwiki/template" filename="screenshot-6.png" width="1200" height="400" style="width:100%;">
|
|
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
|
|
<$data title="Draft of 'HelloThere'" text="This tiddler is inside a wiki that is inside a wiki" draft.of="HelloThere" draft.title="HelloThere"/>
|
|
<$data title="$:/DefaultTiddlers" text="[[Draft of 'HelloThere']]"/>
|
|
<$data title="$:/state/sidebar" text="no"/>
|
|
<$data title="$:/state/showeditpreview" text="yes"/>
|
|
</$innerwiki>"""/>
|
|
|
|
!! Draggable anchors
|
|
|
|
This example shows how the `<$anchor>` widget is used to display draggable anchors overlaid on the innerwiki. The `<$anchor>` widget is used to declare the tiddlers containing the coordinates of each anchor. These tiddlers can then be transcluded by SVG graphic primitives to position them according to the anchor locations.
|
|
|
|
<$macrocall $name="example" text="""screenshot-7-anchor-1-x: <$edit-text tag="input" tiddler="screenshot-7-anchor-1-x"/>
|
|
|
|
screenshot-7-anchor-1-y: <$edit-text tag="input" tiddler="screenshot-7-anchor-1-y"/>
|
|
|
|
screenshot-7-anchor-2-x: <$edit-text tag="input" tiddler="screenshot-7-anchor-2-x"/>
|
|
|
|
screenshot-7-anchor-2-y: <$edit-text tag="input" tiddler="screenshot-7-anchor-2-y"/>
|
|
|
|
<$innerwiki template="$:/plugins/tiddlywiki/innerwiki/template" filename="screenshot-7.png" width="1200" height="400" style="width:100%;">
|
|
<$anchor x="screenshot-7-anchor-1-x" y="screenshot-7-anchor-1-y"/>
|
|
<$anchor x="screenshot-7-anchor-2-x" y="screenshot-7-anchor-2-y"/>
|
|
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
|
|
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
|
|
<$macrocall $name="big-arrow" x={{screenshot-7-anchor-1-x}} y={{screenshot-7-anchor-1-y}}/>
|
|
<circle cx={{screenshot-7-anchor-2-x}} cy={{screenshot-7-anchor-2-y}} r="50" stroke="blue" stroke-width="2" fill="green" />
|
|
</$innerwiki>"""/>
|
|
|
|
!! Inception
|
|
|
|
An innerwiki can itself contain an inner-innerwiki:
|
|
|
|
<$macrocall $name="example" text="""<$innerwiki width="1200" height="600" style="width:100%;" filename="screenshot-8.png">
|
|
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
|
|
<$data title="$:/DefaultTiddlers" text="HelloThere $:/plugins/tiddlywiki/innerwiki/inner-example"/>
|
|
<$data $tiddler="$:/plugins/tiddlywiki/innerwiki"/>
|
|
<<big-arrow 100 50 colour:#00ff00>>
|
|
</$innerwiki>"""/>
|
|
|
|
(You can see the innerwiki here: $:/plugins/tiddlywiki/innerwiki/inner-example)
|
|
|
|
Note the way that the innerwiki plugin has to be explicitly added to the innerwiki.
|