Creating Your First Content
This guide walks you through creating a simple scene in the visual Designer and publishing it to a display.
Open the Designer
Navigate to Scenes
From the sidebar, click Scenes.
Create a new scene
Click New Scene. You can start from scratch or pick a template from the gallery.
Choose a layout
Select a layout that defines how your scene is divided into zones. For your first scene, choose Full Screen (single zone).
Open the Designer
The visual Designer opens with your scene’s canvas.
Adding Elements
The Designer canvas works like a presentation tool — drag elements onto it and arrange them visually.
Available element types
| Element | Description |
|---|---|
| Label | Static or data-bound text with rich formatting |
| Picture | Upload or URL-based images |
| Icon | Font Awesome icon display |
| Box | Rectangles, circles, lines with fill and stroke |
| QR Code | Dynamic QR code generation |
| Date/Time | Live date and time display in configurable formats |
| Scroller | Scrolling text content |
| Data | Data-bound value display |
| Grid | Tabular data display |
| Gauge | Radial and linear gauge visualisations |
| Chart | Line, area, bar, and sparkline visualisations |
| Video | Streaming or uploaded video playback |
| RSS | RSS feed display |
| Web | Embedded web page or iframe |
| Multi | Container for multiple content items |
| Repeater | Data-driven repeated content layouts |
| Component | Reusable themed content blocks |
Adding a label element
Select the Label tool
Click the Label tool in the left toolbar, or press T.
Draw on the canvas
Click and drag on the canvas to create a label element.
Edit the text
Double-click the element to enter edit mode. Type your content. Use the properties panel on the right to set font, size, colour, and alignment.
Position and size
Drag the element to position it. Use the corner handles to resize. The properties panel shows exact X, Y, width, and height values for precise placement.
Working with Properties
Every element has properties you can configure in the right panel:
- Transform — Position (X, Y), size (W, H), rotation, opacity
- Appearance — Fill colour, border, corner radius, shadow
- Typography (text elements) — Font family, size, weight, line height, letter spacing
- Data Binding — Connect any property to a DataPool field for live data
Binding Data
To make your content dynamic:
Select an element
Click the element you want to bind.
Open data binding
In the properties panel, click the link icon next to any property.
Choose a data source
Browse the DataPool tree to find the field you want. Select it and click Bind.
Preview
The element now shows live data. Changes in the DataPool update the element in real time.
You do not need to configure data sources before designing. You can bind to existing DataPool fields or set up connectors later — the bindings will resolve automatically.
Saving and Publishing
Save your work
Press Ctrl+S or click Save in the toolbar. Your scene is saved as a draft.
Preview
Click Preview to see how the scene will look on a real display.
Publish
Click Publish to make the scene live. Any endpoints assigned this scene will update within seconds.