The Amazing PasteUp of @EricShulman

[TiddlyTitch]

@EricShulman

I also tweaked the arrangement of the “toolbox” controls.

• The “delete field” button now appears above the “select a field” list

Minor “fat-finger” issue. Could the trash bin be moved an em or two left?

TT

[TiddlyTitch]

@EricShulman

added handling for “page -1/+1”. If the selected field is on the last page (or there is only one page), then using “+1” will automatically add another layout grid (aka, “page”) and move the selected field to the same position on the new page.

Right. I really see the value of a second page. Not least as you work on different layouts of the same sources … e.g. …

[EricShulman]

@TiddlyTitch

Minor “fat-finger” issue. Could the trash bin be moved an em or two left?

I’ve moved the trash can to the left of the “select a field” prompt text. That moves it as far as possible from the “open drop list” arrow to avoid even the fattest of fat fingers

-e

[EricShulman]

@TiddlyTitch

I really see the value of a second page. Not least as you work on different layouts of the same sources

Note that when using PasteUpEmbed, you can provide a page:N parameter to embed a specific page from a layout, allowing a single PasteUp tiddler to contain several alternative layouts to be displayed in different places or contexts.

-e

[Scott_Sauyet]

@EricShulman

I’ve moved the trash can to the left of the “select a field” prompt text. That moves it as far as possible from the “open drop list” arrow to avoid even the fattest of fat fingers

You simply don’t know my fingers, man!

[TW_Tones]

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

[EricShulman]

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

[TiddlyTitch]

@TW_Tones

it has so many features crammed in, it may take time to learn.

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

[TW_Tones]

Thanks @TiddlyTitch

I also had a briefing from Eric Via Zoom tonight

[EricShulman]

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

[TiddlyTitch]

@EricShulman

Inputs controls for “contents” and “styles” have been added to the toolbox.

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.

[TiddlyTitch]

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

[EricShulman]

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

[TiddlyTitch]

@EricShulman

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.

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

[TW_Tones]

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.

[EricShulman]

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

[TiddlyTitch]

@EricShulman

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:

@EricShulman

I’ve also fixed a whole bunch of nasty bugs (!!) in the “field table” input handling

@EricShulman

Updating the layout values

@EricShulman

The solutions involved implementing a “constrain()” filter and a “normalize()” macro.

• The constrain() filter ensures that if you enter negative numbers, zeros or blanks … <read his post>

@EricShulman

I recommend getting the updates as soon as possible

All good here.

Thank you!

TT

[EricShulman]

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

[TiddlyTitch]

FYI I started on EMBED simply. It looks easy & was

Everything above the “info” (bottom right) is the embed.

[TiddlyTitch]

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

Example …