Visual Designer

The Designer is Inspire’s canvas-based editor for creating visual content. It provides a familiar drag-and-drop experience similar to design tools like Figma or PowerPoint, but purpose-built for digital signage and data-driven displays.

Interface Overview

The Designer interface is divided into four areas:

Canvas Navigation

• Pan — Hold Space and drag, or use middle mouse button
• Zoom — Ctrl+Scroll or use the zoom controls in the toolbar
• Fit to screen — Press Ctrl+0 to fit the entire canvas in view
• Grid — Toggle snap-to-grid with Ctrl+G

Element Types

The Designer supports 17 element types, each suited to different content needs.

Label

Rich text with full formatting control. Supports:

• Multiple font families (system, custom uploads, and Google Fonts)
• Font size, weight, style, line height, letter spacing
• Alignment (horizontal and vertical)
• Text colour and background
• Data binding — connect to DataPool fields for live text
• Auto-fit — automatically scale text to fit the element bounds

Picture

Static or dynamic images. Supports:

• Upload from your computer or Media Library
• URL-based images (fetched and cached by the renderer)
• Object fit modes: cover, contain, fill, none
• Corner radius for rounded images
• Data binding for dynamic image URLs

Icon

Font Awesome icon display:

• Browse and select from the Font Awesome icon library
• Configurable size, colour, and rotation
• Data binding for dynamic icon selection

Box

Vector shape with fill and stroke:

• Rectangle, rounded rectangle, circle, ellipse, line
• Solid, gradient, or no fill
• Stroke width, colour, and dash pattern
• Corner radius (per-corner control)

QR Code

Dynamically generated QR codes:

• Static or data-bound content
• Size and error correction level
• Foreground and background colours

Date/Time

Live date and time display:

• Configurable format (12h/24h, with/without seconds)
• Date display options
• Timezone selection
• Custom formatting strings

Scroller

Scrolling text content:

• Horizontal scroll direction and speed
• Data-bound content from DataPool
• Multiple items with separator
• Customisable appearance

Data

Data-bound value display:

• Connect directly to a DataPool field
• Formatting options for numbers, currency, percentages
• Conditional formatting based on value

Grid

Tabular data display:

• Column headers and data rows from DataPool
• Column width, alignment, and formatting
• Alternating row colours
• Sort indicators

Gauge

Gauge visualisations with seven types:

• Radial — Full circle gauge
• Semicircle — Half-circle gauge
• Donut — Ring-style gauge
• Linear — Horizontal or vertical bar gauge
• Speedometer — Speedometer-style dial
• Segmented — Segmented bar gauge
• Liquid Fill — Liquid-fill animated gauge
• Min/max values, thresholds, colour bands
• Data-bound current value

Chart

Data visualisations powered by D3:

• Line — Line charts with interpolation options
• Area — Filled area charts
• Bar — Vertical and horizontal bar charts
• Sparkline — Compact inline charts
• Axis labels, legends, grid lines
• Real-time data updates
• Colour palettes from the active theme

Video

Video playback within a scene:

• Local video files (MP4, WebM)
• YouTube (embedded player)
• HLS streaming (.m3u8)
• DASH streaming (.mpd)
• MJPEG (IP camera streams)
• Webcam (local camera via getUserMedia)
• Autoplay, loop, and mute controls
• Object fit modes

RSS

RSS feed display:

• Configure RSS feed URL
• Customisable item display and styling
• Refresh interval configuration

Web

Embedded web content:

• URL-based iframe embedding
• Configurable refresh interval
• Scroll and interaction controls

Multi

Container for multiple content items:

• Hold multiple child elements
• Configurable arrangement and switching
• Useful for composite content areas

Repeater

Data-driven repeated layouts:

• Bind to a DataPool stream with multiple items
• Define a template that repeats for each item
• Grid or list layout
• Configurable item spacing and maximum count

Component

Reusable themed content blocks placed into scenes:

• Browse and select from your component library
• Components inherit the scene’s theme
• Input values can be static or data-bound
• See Components for details

Layers

The layers panel (toggle with F7) shows all elements stacked in z-order. You can:

• Reorder elements by dragging
• Lock elements to prevent accidental edits
• Hide/show elements for easier editing
• Rename elements for clarity
• Group elements together

Keyboard Shortcuts

Alignment and Distribution

Select multiple elements (hold Shift and click) to access alignment tools:

• Align left, centre, right, top, middle, bottom
• Distribute horizontally or vertically with equal spacing
• Match width or height to selection

Save, Preview, and Publish

• Save (Ctrl+S) — Saves your work as a draft. Not yet visible on displays.
• Preview — Opens a real-time preview of how the scene will render on a display.
• Publish — Makes the scene live. All endpoints using this scene update within seconds.