Thanks! Looking good already …
I have not learned how to use this yet, but it introduces real possibilities of crafting great landing pages for public wikis, good start pages and more.
nice work @EricShulman
In another thread, @nemo wrote:
That’s a nice idea. In the “Settings” (gear) popup I have added a “chevron-down” button that gives you a drop-down $select list of preset grid sizes to choose from. This list is populated from the contents of $:/config/TiddlyTools/PasteUp/Sizes, which currently has the following lines, where the format of each line is “gridwidth,gridheight|description”
34,44|US letter (8.5in x 11in)
34,56|US legal (8.5in x 14in)
42,60|A4 (210mm x 297mm)
20,20|square (1:1)
30,20|photo (3:2)
32,18|wide (16:9)
By using a separate configuration tiddler, it enables you to edit the list to add your own preferred preset grid sizes.
Get the new/updated tiddlers here:
TiddlyTools/PasteUp
$:/config/TiddlyTools/PasteUp/Sizes
enjoy,
-e
2 Likes
While testing the Settings popup grid size inputs, I accidentally entered a width of “5000” instead of “50” (due to a “keybounce”). The result was that the code attempted to render a layout grid containing 5000 x 30 $button widgets (that’s 150,000 buttons!), which immediately “bricked” my TiddlyWiki 
To prevent this, I’ve added code in layout_grid() that limits the width/height values to a minimum of 10 and a maximum of 100 in each dimension, regardless of the values entered in the Settings popup.
This permits up to 10,000 $button widgets (100x100) in the layout grid. While this can still cause a processsing slowdown, it seems like a reasonable solution to prevent a full “brick” from occurring.
These limits are currently hard-coded; should they be configurable?
Can you think of a situation where you would want less than 10 or more than 100 grid buttons in either dimension?
-e
1 Like
Yes. I could imagine designing a banner or menu strip that had very few rows (5 or less).
I can’t imagine ever needing more than 100 rows or columns.
Best, TT
OK… I’ve adjusted the limits to be between 1 and 100.
-e
1 Like
new improvements to “Settings” popup:
- background list now includes all non-system images (not just
[tag[texture]]) - “stretch” checkbox replaced by
$selectlist: tile, center, width, height, or stretch, where:- tile (default) = repeats background image without scaling
- center = single background image in center of layout without scaling
- width = repeats background image vertically with stretch to fit width
- height = repeats background image horizontally with stretch to fit height
- stretch = single background image with stretch to fit both height and width
enjoy,
-e
1 Like
Brilliant!
This helps, also, illustrate that once you have a grid (the set of 3 = D L S) fully designed you can clone it.
I’ve found that when you have a layout you want to use again it is easy and quick to clone it and get to results without having to do much new.
A comment
TT
I thought about it.
Maybe those 3 (only) should also have Landscape format on the default options list too?
I just say that because they are in common usage.
Best, TT
List of page size presets has been updated:
34,44|US letter (portrait)
44,34|US letter (landscape)
34,56|US legal (portrait)
56,34|US legal (landscape)
42,60|A4 (portrait)
60,42|A4 (landscape)
20,20|square (1:1)
30,20|photo (3:2)
32,18|wide (16:9)
-e
2 Likes
Page size presets $select widget has been enhanced:
In addition to listing preset page sizes, it now also includes an “edit list…” item (at the bottom of the list). When you select this item, instead of setting the layout width and height values, it navigates to $:/config/TiddlyTools/PasteUp/Sizes and opens it for editing.
enjoy,
-e
1 Like
Update to TiddlyTools/PasteUp and $:/config/TiddlyTools/PasteUp/Sizes:
The “Settings” page size preset $select list shows the full text of each line from the $:/config/TiddlyTools/PasteUp/Sizes tiddler, and the format used to specify the width and height have changed so that it is now clear what width and height values are used for each preset.
34 x 44 = US letter (portrait)
44 x 34 = US letter (landscape)
34 x 56 = US legal (portrait)
56 x 34 = US legal (landscape)
42 x 60 = A4 (portrait)
60 x 42 = A4 (landscape)
20 x 20 = square (1:1)
30 x 20 = photo (3:2)
32 x 18 = wide (16:9)
enjoy,
-e
2 Likes
I was doing some experiments on using the grid for full screen Tiddlers.
Looking good!
Here is a screenshot of 6 iframes of stuff on my computer.
The underlying grid is only 6 columns by 4 rows.
Later I’ll figure out how to change, at will, the sizing of each item.
Perhaps you can write some custom wikitext scripting that modifies the corresponding field in the /layout tiddler.
For example, let’s assume that all the iframes are on the default layer (i.e., no “z” values). Their /layout fields would be something like:
iframe1: 1,1,2,2
iframe2: 1,3,2,4
iframe3: 1,5,2,6
iframe4: 3,1,4,2
iframe5: 3,3,4,6
To “maximize” or “restore” a particular iframe, you could write something like this:
<$let max="1,1,4,6,2">
<$tiddler tiddler="$:/temp/frame">
<$select field=thisframe>
<option>iframe1</option>
<option>iframe2</option>
<option>iframe3</option>
<option>iframe4</option>
<option>iframe5</option>
</$select>
<$let save={{{ [[saved_]addsuffix{!!thisframe}] }}}>
<$button>maximize {{!!thisframe}}
<$action-setfield $field=<<save>> $value={{{ [[MyLayout/Layout]get{!!thisframe}] }}}/>
<$action-setfield $tiddler="MyLayout/Layout" $field={{!!thisframe}} $value=<<max>>/>
</$button>
<$button>restore {{!!thisframe}}
<$action-setfield $tiddler="MyLayout/Layout" $field={{!!thisframe}} $value={{{ [<currentTiddler>get<save>] }}}/>
</$button>
</$let>
</$tiddler>
</$let>
Notes:
-
maxincludes a “Z” value of 2. This ensures that the maximized iframe will be drawn on top of all the other iframes. - The previous layout for iframeN is stored in
saved_iframeNof the$:/temp/frametiddler so it can be restored later on.
-e
1 Like
TiddlyTools/PasteUp bug fix (gasp!!!) for drag-and-drop handling:
- drag-and-drop to add field from field table to grid was ignored when field value was blank.
- drag-and-drop to move field in grid was ignored when field value was blank.
Note that adding/moving of fields with “blank” values was already correctly handled by directly editing the field’s layout values in the field table.
-e
2 Likes
Brilliant! Thankyou!
I got that working and am trying extend it.
I’ll report back when I’m finished.
TT
Your code was great. I was able to build a controller that can set 5 different “Field Coordinates”. Looks like this …
Bacause of the complexity of tracking up to five changes I decided to …
- only have REVERT LAST change (based on your code)
- and offer RESTORE ALL. Which simply overwrites /Layout with a previously saved backup to restore the starting point.
What do you think? Okay?
Of course now I have to figure out how to individually set Z-INDEX for fields because my layout above can end up with, for example, two overlapping fields with identical Z-Index of 2—with unpredictable results.
Anyway. It’s going well. I could not have got here without your help!
Thanks, TT
A footnote … in order to help my brain on Layout …
I made this …
I think some of us need time to grasp the grid 
TT
/layout fields are stored as T,L,B,R,Z,P (top, left, bottom, right, layer, page)
If layer or page is blank (or less than 1), it is omitted. Thus,
T,L,B,R = bottom layer, first page
T,L,B,R,Z = layer Z, first page
T,L,B,R,,P = bottom layer, page P
T,L,B,R,Z,P = layer Z, page P
-e