Visual Aesthetics

Hi,

I'm rewriting a grid packer for a GUI. It tries to come up with an "optimal" (let's leave that loosely defined) geometry for a set of "postage stamp" cells, each of which displays a graphic with a particular aspect ratio.

Since the overall shape of the region can vary, the dimensions of the grid can vary, also. And, as a result, the overall *shape* of each "postage stamp" -- to best fit the region.

I'm looking for ideas as to suitable aesthetic criteria for those "postage stamp" cells as a function of the aspect ratio of the graphics they will contain. I.e., where should the "extra" whitespace end up?

I suspect this is a subjective judgement call :< But, I've tried several different sample configurations and can't seem to figure out why I like those that I

*do* like and why I *dislike" those that I don't. Perhaps it demands a more "artistic" brain? :-/

--don

Reply to
D Yuniskis
Loading thread data ...

Have you reviewed the grid, pack and place geometry managers of Tcl/Tk?? Check the man pages for the algorithm used in each ...

Cheers, Rob.

Reply to
Spam

Yes. The problem is, they work with an already constrained grid. So, they don't have much choice as to "where the whitespace goes".

If, instead, you just have a set of objects (of a particular shape) and a *space* (of a -- probably different -- particular shape) and can freely pack those objects any way you want, there are more variables to play with. And, each has aesthetic consequences.

E.g., how you arrange four "tall and skinny" shapes in a "short and wide" space may differ from a "tall and skinny" space or a "perfectly square" space. Likewise, "short and fat" shapes would look different in those same constraints.

And, numerically *quantifying* "short", "skinny", etc. is where the art comes into play. Just when is something "short and fat" vs. "square" or "tall and skinny"? The slop in those definitions becomes the "whitespace"...

The number of objects also plays a role. I.e., 3 objects tend to offer fewer packing options than, for example, 4. Or, 12.

If you know the object sizes, shapes, number, etc. a priori, you can probably come up with a pleasing layout. But. leaving it all to run-time and trying to codify that "layout expertise" is a bit more challenging (it's relatively simple if the region and the cells have a common aspect ratio)

Reply to
D Yuniskis

This sounds a lot like the problem that the people who design newspaper pages and advertising circulars face every day. Perhaps there is something to be gained from a journalism book that discusses page layout.

Mark Borgerson

Reply to
Mark Borgerson

Well, whatever you do, someone will not like it, so take a simple approach, and allow a "gravity" or "anchor" tag or something similar using compass points so that whatever you decide, the end user can override the default algorithm.

grid -vertical widget0 widget1 widget2 -anchor west

I assume you have some sort of box model, which allows padding or spacing between objects ... and that too should have an override ... Your problem comes from trying to provide a generalized solution for non-rectangular spacings ... (I think) ...

As for a default ... and particularly for your postage stamp images, try using the north-west corner and horizontal alignment across the space as your first default:

___ __________ _______________________ | | |

Your images may vary, as may your whitespace containing frame, but you will at least have the advantage of top alignment on a horizontal plane, and the spacing between them is proportionally shared. If the shapes are irregular, then a bounding rectangle approach is probably the best bet.

HTH, Cheers, Rob Sciuk.

Reply to
Spam

Of course! :> So, I just settle for the one judge that matters (i.e., me).

End user isn't involved. I.e., imagine end users being able to decide how they think particular web pages should be arranged visually. :-/

I started with a "button packer" that I wrote ages ago. It took a set of images (JPEGs) of varying number and would come up with an optimal packing for "buttons" with which these were legended (ick... I assume you can sort out my meaning).

But, all of those were 4:3 aspect ratio. And, the space into which they were packed was nominally 4:3 so it was a relatively simple problem: figure out how to cram the buttons into the fewest number of "screens" (i.e., if you have too many buttons to fit on a single screen, then you have to split them out over several screens and let the user navigate among those), scale each "postage stamp" (button) appropriately and then resample the JPEG to fit the resized "button".

What I am currently doing is similar -- except the "images" (buttons) aren't constrained a priori to be 4:3 aspect ratio (this, alone, complicates the problem significantly!) *and* the space into which they will be mapped is also unconstrained (as to size AND aspect ratio).

Determining how best to present the "postage stamps" (assume they are still "buttons") is still a simple task -- but it relies on being able to figure out what various *potential* screen arangements will "look like" so you don't end up with silly choices.

E.g., painting a 10x15 image onto a 200x400 region would be silly without scaling. Scaled to 200x300 gives you the largest image in the constraint rectangle -- but, this may look *worse* than a 150x225 representation (because the 200x300 would have *no* borders on the image vertically yet sizable borders horizontally; by contrast, *some* vertical border on the 150x225 with MORE horizontal border might look less funky).

Now, allow that 200x300 space to be subdivided for some variable number of objects to occupy and you end up with a metric boatload of variations :-/ Picking among them is the issue (hence my need for a selection criteria)

Not sure I grok your ASCII art...?

All of the shapes will be consistent -- within a particular grid. But *what* shape that will be is not known (a priori). Nor is the shape of the space into which they will be packed.

Think of trying to display web pages *in* various shaped *frames* (or varying shaped monitors). But web pages have text, etc. that can be used to fill voids :-/

Reply to
D Yuniskis

Yes -- with a few significant differences:

- they have varying shapes that they are fitting into those regions

- they can shift a problem shape to another page (where there might be more room)

- they can "steal" a more compatible shape from elsewhere to fill a troublesome void

- they can invent things to fill space (e.g., "Your ad, here!") or remove items when space runs out ("We'll run that in the next edition...")

Most notably, though, they aren't usually dealing with a bunch of identical shapes in an arbitrary space (e.g., there are fixed sizes for ads, text columns, etc.)

I do a fair bit of DTP and can't recall seeing anything that might help. :< Any "artsy" stuff usually details with balancing text with graphics, typeface choices, etc. I can't recall anything ever saying "arrange whitespace above/below instead of left/right", etc.

But, I'll dig through what texts I have just in case I missed something...

Reply to
D Yuniskis

Sorry ... meant to designate the nw corner of the bounding boxen.

___ __________ ____________________________ | | |

this might travel better ... though ascii art has that drawback 8-).

Reply to
Spam

My understanding is that that was the original concept of a user agent for displaying HTML -- the HTML specifies the logical structure of the data and the user agent (browser) formats it according to the user preferences!

--
Thad
Reply to
Thad Smith

How many browsers let the user rearrange the *content* of the page? Most allow control over link colors, fonts, etc. The browser itself usually handles all layout issues -- giving the user (at most) control over frame sizes.

Imagine deciding (on an *arbitrary* page) that you want image #1 to be a certain size/shape independant of image #2's sizing... and that you'd like the text flowing to the left of that image (instead of to the right), etc.

I suspect most browser[1] users don't configure *any* of the visual aspects of their clients but leave the presentation "as the browser wishes" (?)

[1] A notable exception possibly being visually impaired users.
Reply to
D Yuniskis

ElectronDepot website is not affiliated with any of the manufacturers or service providers discussed here. All logos and trade names are the property of their respective owners.