The Layout Editor is where you design the screen that the TV will show.
Twinnoverse layouts are designed for a 16:9 landscape screen.
1. Open the Layout Editor #
- Open Layouts.
- Create a new layout or edit an existing one.
- The editor opens with:
- a widget library
- the center canvas
- an inspector panel
- save, undo, and redo controls
You can also:
- search the widget library
- show or hide the widget library
- show or hide the inspector
- switch between select mode and pan mode
- fit the canvas back into view
- enable or disable snap to grid
2. Understand the Canvas #
The canvas represents the TV screen.
- the base layout is 16:9 landscape
- the working size is 1920 x 1080
- top and bottom chrome areas can reduce the usable content space
Design with real viewing distance in mind. A layout that looks fine on a laptop can still be too crowded on a factory TV.
3. Choose Widgets Before You Place Them #
Do not start by dropping random widgets onto the canvas.
First decide what each area of the screen should communicate:
- one big number
- trend over time
- target versus current
- alerts or rows
- message or image
Read these before building the layout:
4. Add Widgets #
- Click a widget in the library.
- Twinnoverse adds it to the canvas with a default size and position.
- Repeat until the layout structure is complete.
Each new widget gets a default setup and a label. If the widget uses live or manual data, that label becomes part of the runtime payload contract.
If a widget is already selected, clicking a widget in the library can also replace the selected widget with the new widget type.
5. Move, Resize, and Replace Widgets #
Use these core interactions on the canvas:
- click a widget to select it
- click and drag a widget to move it
- drag the corner handles to resize it
- click a different widget in the library to replace the selected widget type
- use the delete action in the inspector to remove the selected widget
Layout tips:
- move widgets to create a clear reading order
- resize them based on importance
- keep enough spacing between elements
- avoid overlap
A common 16:9 pattern is:
- top row for headline KPIs
- middle row for charts or progress
- lower row for lists, alerts, notes, or supporting context
If one screen becomes crowded, create another layout and rotate it through a playlist instead of forcing everything into one canvas.
6. Use the Inspector #
When no widget is selected, the inspector shows layout-level settings such as:
- layout name
- data source assignment
- chrome and theme
- layout background color
When a widget is selected, the inspector shows widget-level settings such as:
- label
- size and position
- background override color
- widget-specific settings
This means there are two different editing levels:
- layout level for the whole screen
- widget level for one selected widget
If you want to assign the data source or change layout-wide visual settings, deselect all widgets first.
Use the widget reference whenever you need to know what a widget expects from the data.
7. Save the Layout #
- Save the layout.
- Add it to a playlist.
- Assign that playlist to a device.
The layout by itself is only the screen design. The playlist controls when the device actually plays it.
