The Screen Layout Editor: Positioning On-Screen Elements

Screen Layout · Booth Junkie knowledgebase

KB28893

The Screen Layout Editor: Positioning On-Screen Elements

In short

Admin Panel → Screen Layout lets you position the on-screen elements guests see at each stage of a session.

  • Animation Screens, Selection Screen, Live View, Print Screen, and Preview Screen each have their own layout, edited the same way described here.
  • Auto fit to screen can lay everything out for you, but it repositions every element.
  • There’s no Undo: what you drag or resize takes effect immediately.
Admin Panel -> Screen Layout, showing a selected element with its resize handles and Properties panel

Select and move an element

Click an element on the canvas, or select it from the list on the right – both stay in sync. Unlike the Print Layout editor, dragging works anywhere within an element’s full rectangle, regardless of transparency.

Resize an element

A selected element shows 8 handles – one on each corner, and one on the middle of each edge. Corner handles resize both width and height together; edge handles resize only that one dimension.

Tip: Keep the shape

Hold Shift while dragging a corner handle to resize while keeping the element’s aspect ratio locked.

Unlike Print Layout, an element can’t be resized or moved off the edge of the canvas – it’s always kept fully inside the screen.

Show or hide an element

Every element has an Enabled toggle in the sidebar. Switching it off hides that element from the screen completely – switch it back on any time to bring it back.

Let Booth Junkie lay everything out for you

The Auto fit to screen button, in the column of buttons on the right of the Admin Panel, lays out every element on every screen for your chosen screen resolution and orientation, with no two elements overlapping. The Setup Wizard does the same when you press Finish.

Important: Save your own layout first

Auto fit repositions every element, so use Save As first if you want to keep a layout you’ve made by hand.

It looks at what’s switched on and arranges the rest around it:

  • A lone Single Shot button is centred.
  • The three shot buttons stack on a portrait screen when that fits better than a row.
  • The Live View grows into the space a missing button leaves.
  • The output boxes re-arrange for one to four.

Everything is sized as a proportion of the screen, so any resolution works in either orientation. The camera picture follows your camera’s real shape (3:2 for a DSLR or the simulated camera, and the webcam’s own resolution for a webcam), including a camera turned on its side with Camera rotation.

What’s different from the Print Layout editor

This editor is simpler than the Print Layout template editor on purpose – it’s positioning live on-screen elements (some of which are video), not composing a print. Specifically, it doesn’t have rotation, snap-to-guide lines, zoom/pan controls, or Undo/Redo.

Good to know: Changes take effect immediately

What you drag or resize takes effect immediately, so it’s worth a quick test session after making changes here.

See Building a Print Layout Template for the print-side editor, which does have all of the above.

Was this article helpful?