The Amazing PasteUp of @EricShulman

You simply don’t know my fingers, man! :wink:

This seriously is starting to look like a page layout app or Desktop publishing such as;

Aldus PageMaker (later Adobe PageMaker) belonged to the class of desktop publishing (DTP) software.

And like those it has so many features crammed in, it may take time to learn. It would be nice to have a concise but comprehensive tutorial, so just putting the call out there.

  • I am particularly interested in using it to layout existing content in tiddlywiki including but not limited to images, text and TW5-Graph

Updates to TidldyTools/PasteUp and TiddlyTools/PasteUp/View:

  • BUG FIX: when using the toolbox “page” controls to move a field to another page, it was creating a new tiddler whose title was the new page number, rather than updating the PasteUp tiddler’s “pages” index value (oops!). This has been fixed.
  • NEW FEATURE: in addition to using the toolbox << and >> buttons to decrement/increment the width, height, layer and page values, you can now directly edit those values:
    • the number displayed between the buttons is now an $edit-text widget instead of just a static text display
    • when you edit a value, the new value is only applied when you press enter or move the focus elsewhere

enjoy,
-e

Actually it is quite easy to learn—once you grasp the Tripartite inter-relation (Data, Layout, Style [DLS]). In that sense it is fully canonical, elegant, with the emerged fundamentals on web (and before) regarding “content” v. “structure” v. “presentation.”

I personally find the simple, explicit, DLS easy & powerful.
TT

Thanks @TiddlyTitch

I also had a briefing from Eric Via Zoom tonight :nerd_face:

1 Like

Updates to TiddlyTools/PasteUp/View:

  • Inputs controls for “contents” and “styles” have been added to the toolbox. When you put the focus into one of these inputs, it automatically expands to a textarea for easy editing of its value; when the focus leaves the input, it automatically collapses back to a small control. Changes made in these input controls are immediately reflected in the rendered field on the layout grid.

  • You can now drag a field from the layout grid and drop it onto the toolbox panel to select that dropped field in the toolbox droplist.

enjoy,
-e

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 …

Output

When I preview it as RAW Html I see

Raw

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/View template into the main TiddlyTools/PasteUp code 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-text inputs 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).
  • 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/Edit tiddler. The “core” TiddlyTools/PasteUp tiddler 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) and TiddlyTools/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.

Can we ADD a grid for American Bingo / 75 ball / = 5x5 ??

Example …

I have Bingo Card numbers and now need style them …

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