Really good! Intuitive.
I need use all a few days before I comment more, I think, on them.
I have more techie questions I’ll ask first.
TECHNICAL QUERY #1
Given I’m a bear of small brain I’m kinda at my limits on this Q.
A pasteup looks like this …
When I open the editor for it I see the preview Output as …
When I preview it as RAW Html I see
My Question: Is it possible (or desirable) to see / capture the raw code for the visual render I see too?
I hope this makes sense!
TT
As you can see, a PasteUp tiddler’s text field contains JSON index values for the current layout and fieldtable settings (cols, rows, background, showadvanced, etc), but the actual grid output for the PasteUp tiddler is rendered by the TiddlyTools/PasteUp/View template, which is tagged with $:/tags/ViewTemplate.
When the wikitext contained in the TiddlyTools/PasteUp/View template is processed, it automatically applies CSS to hide the tiddler’s .tc-tiddler-body and then invokes the layout_grid() macro (defined in TiddlyTools/PasteUp) to display the grid output.
However, when you are using the standard TWCore editor preview, it does not apply this custom ViewTemplate, and thus it can only show you the default rendering of the PasteUp tiddler’s text field (i.e., the JSON settings).
I’ve done some experimenting with creating a custom cascade definition to provide an alternative to the $:/tags/ViewTemplate strategy described above (see $:/config/ViewTemplateBodyFilters/PasteUp which is tagged with $:/tags/ViewTemplateBodyFilter).
This cascade DOES succeed in previewing (and printing) the PasteUp grid output when using TiddlyTools/PrintTiddler to open a PasteUp tiddler in a separate window.
Unfortunately, this cascade definition simply won’t work when viewing the tiddler editor’s preview pane because it is actually rendering the contents of “Draft of 'YourPasteUpTiddler'”, but it can’t access the field layout and styles definitions, since there are no corresponding “Draft of 'YourPasteUpTiddler'/layout” and “Draft of 'YourPasteUpTiddler'/styles” tiddlers available to complete the PasteUp rendering process.
-e
Ah! Is there anyway I could redirect the output of PrintTiddler to a tiddler?
Why? I’m just interested if the render alone is useable (for some use cases).
Not wanting to cause a headache!
Just wondering.
TT
I previously made a snapshot tool that captures the html output that is rendered, and saves this. It means the output is stored in a static form (in a sub Tiddler) and displays a non interactive result. Arguably one could do this on any tiddler. Perhaps is supports a few features;
- Capture the state of a tiddlers output, as at a specific moment.
- Avoid the recalculation of high demand processed output
- Capture content, a static tiddler generated in one wiki and transfer to another wiki (without dependancies)
- Use for tutorials without reproducing the tools used to generate the content
The reason I steped in to share this is perhaps it can help avoid complexity in PasteUP but using a seperate solution that can be used in other cases.
- Reducing dependancies and generalising solutions beyond what inspires them is a good design pattern.
- This relates to the subject of the book I am writing.
This snapshot tool will need to be expanded if it is to capture other content generated in the tiddler but outside the rendering of the text field.
1 Like
Some significant updates to TiddlyTools/PasteUp and TiddlyTools/PasteUp/View:
-
There’s four nice new buttons that appear at the bottom of the “toolbox” panel:
- “add field” (+ icon) opens the modal field editor to enter a new field name, value, layout and styles
- “edit field” (pencil icon) opens the modal field editor for the currently selected field
- “remove field from layout” (the “circled X” icon) clears the layout values for the currently selected field (i.e, the field is removed from the grid layout, but still has it’s value and style definitions)
- "delete field (trash can icon) completely deletes the currently selected field from the PasteUp tiddler’s data, layout and styles.
-
Please note that the toolbox macro definitions have been moved from the
TiddlyTools/PasteUp/Viewtemplate into the mainTiddlyTools/PasteUpcode tiddler so it is a now “first-class citizen”. This makes it much easier for me to maintain and also reduced the size of the code since it can now share some of the existing macros that are used in other parts of the TiddlyTools/PasteUp code. -
I’ve also fixed a whole bunch of nasty bugs (!!) in the “field table” input handling. Some of the problems that I’ve fixed include:
- Updating the layout values caused a “loss of focus” as you typed (the all too familiar TiddlyWiki “refresh” problem). This made it nearly impossible to use the field table’s
$edit-textinputs to change the top, left, bottom,right, layer, or page layout values. - Using the tab key or mouse to move to another layout input field discarded or reverted the value that was entered in the previous input control.
- Entering values in the “wrong” order (e.g., instead of “top, left, bottom, right” you entered “bottom, left, top, right”) would result in a completely unexpected and incorrect field position on the grid layout.
- Similarly, if a layout value was left empty, the field could get a negative computed width or height, or be drawn outside the layout grid boundaries (it wouldn’t actually show up, it was just completely clipped out of view).
- Updating the layout values caused a “loss of focus” as you typed (the all too familiar TiddlyWiki “refresh” problem). This made it nearly impossible to use the field table’s
-
The solutions involved implementing a “constrain()” filter and a “normalize()” macro.
-
The
constrain()filter ensures that if you enter negative numbers, zeros or blanks they are automatically adjusted to be within the minimum and maximum allowable values:- top, left, bottom and right=1 to 99
- layer=1 to 800 (this upper limit is to avoid “bleeding through” the TWCore’s built-in
tm-modal“mask”) - page=(1 to 10)
-
If values are entered in the wrong order, they are now stored “as-is” in that order, but when they are actually drawn on the layout grid the
normalize()macro automatically adjusts the displayed field rectangle so it’s dimensions are handled as if “top,left” and “bottom,right” corners were entered.- You can see an example of this in the “test1” field on the TiddlyTools/SamplePasteUp: it’s layout has been entered as “6,4,4,10” (which represents the “bottom,left” and “top,right” corners); however, when the field is displayed on the layout grid, it is automatically shown using “4,4,6,10” (the normalized “top,left” and “bottom,right” corners).
-
When you resize a field by dragging a corner icon, its coordinates are automatically re-saved in their “normalized” order. In particular, this is done if you drag a field’s corner so far that it “turns the field inside-out”. For example, suppose you drag the top-left corner of a field below and to the right of it’s bottom-left corner, the field’s corners will be automatically “swapped” so that the result has properly normalized “top-left” and “bottom-right” coordinates.
-
I recommend getting the updates as soon as possible so that you don’t run into any of these (now extinct) bugs.
enjoy,
-e
All good here.
Thank you!
TT
Yet another update:
- Added “Toolbox” title and close button
- Added toolbox “zoom” slider to adjust display size of toolbox (50% to 150%) for better usability on different sized screens
- Refactored PasteUp “editor” macros (drag-and-drop, field table, grid editor, toolbox, and layout settings) into a separate
TiddlyTools/PasteUp/Edittiddler. The “core”TiddlyTools/PasteUptiddler is now just 13K (as compared to the previous 54K). - This separation of editor macros makes it easier to share “read-only” PasteUp tiddlers with other TiddlyWikis by using a minimal installation that excludes the editor functions. For example, to share embedded PasteUp content, you could just install
TiddlyTools/PasteUp(13K) andTiddlyTools/PasteUp/Embed(860 bytes), and skip all the other stuff.
Get updates for all PasteUp parts here: TiddlyTools/PasteUp/Info.
Just drag-and-drop the “There are 8 program tiddlers” text to your TiddlyWiki to import all the changes.
enjoy,
-e
FYI I started on EMBED simply. It looks easy & was
Everything above the “info” (bottom right) is the embed.
Useful.Tx.
Excellent! Noted!
TT
Exciting new feature:
- you can now add “on click” $action widgets to any PasteUp field!
For example, lets suppose you want to click on a specific part of the PasteUp and have it open an associated tiddler…
Just enter: <$action-navigate $to="SomeTiddler"/> into the “Actions” input in the field ToolBox or the modal field grid editor.
Then, when you are viewing (not editing!) your PasteUp content, a simple click on the designated area will open “SomeTiddler”. Although I haven’t tried it yet, I think you can also put a whole slab of wikitext with $action widgets into a tiddler (e.g., “MyActions”) and then use {{MyActions}} transclusion as the field’s “Action” value.
Update TiddlyTools/PasteUp and TiddlyTools/PasteUp/Edit to get the latest goodies.
enjoy,
-e
Not really relevant, but vaguely related:
http://scott.sauyet.com/Tiddlywiki/Demo/BullshitBingo.html
New definitions always welcome!
1 Like
Update to B TWINGO …
The number grid is a PasteUp. The PasteUp is Embedded in a div that adds header and footer and overall styling. Specific styling, like that for “FREE”, is done via the field editor for /Styles.
Indeed it is … I tried a simple $action to change a field in /Styles such that a number on the TWingo card changes color, size & decoration on a click (ball call no. 54).
PasteUp is amazing!
TT
1 Like
I just did an experiment cloneing my 6 Frames Test to a fresh wiki.
Works brilliantly!
This gives a way for me to develop a tool and just install the minimum needed for using it in another wiki.
FWIW it might be worth emphasising that to use the “lightweight” read-only version you do it wholely through embeds e.g.
<<pasteUpEmbed tiddler:“pasteup/tpl/usa-bingo-5r5c”>>
TT
You can also use TiddlyTools/PasteUp/View to share a somewhat larger – but still “lightweight” – read-only version where display is done by viewing the shared PasteUp tiddler in the StoryRiver, rather than embedding it in another tiddler.
-e
1 Like
Small update to TiddlyTools/PasteUp
- the “onclick” handler for Actions now sets two variables:
-
currentPasteUp= the title of the PasteUpTiddler -
currentField= the name of the field that was clicked on
-
Thus, in your $action widgets, you can use
{{{ [<currentPasteUp>addsuffix[/Styles]get<currentField>] }}}
to refer to the styles used by the field that were clicked upon and, to set new styles for that field, you could write something like this:
<$action-setfield $tiddler={{{ [<currentPasteUp>addsuffix[/Styles]] }}}
$field=<<currentField>> $value="..."/>
-e
Brilliant! You saved me hours of time having to craft each action field by field!
I just pasted …
<$action-setfield $tiddler={{{ [<currentPasteUp>addsuffix[/Styles]] }}} $field=<<currentField>> $value="font-size:1.5em;color:green;font-weight:800;text-decoration-line: underline;text-decoration-style: double;"/>
… into 24 /Actions fields. Took a few minutes. Works well.
Result after clicking is in green …
Now I need a mathematician to make the 75-ball spinner :-).
TT
Instead of entering that syntax into each /Actions field, I’d put the code into a separate tiddler (e.g., “SetBingoSquare”)
and then put {{SetBingoSquare}} into each /Actions field.
- It makes your /Actions tiddler much smaller
- If you change the code in
SetBingoSquare, it affects all the fields at the same time without having to update each field.
-e