Digital Signage Package

# Overview

The package is built around two entities:

• Instances — a signage instance represents one screen (e.g. Lobby Screen). Each instance has its own layout settings, sidebar widgets and a unique public display URL.
• Snapshots — the rotating slides shown on the main area of the screen. Each snapshot has a type (image, video, restaurant menu or stream), a display duration and an order.

A display is split into two areas:

• Main area — cycles through the active snapshots, each shown for its configured duration.
• Info sidebar — shows your logo, an optional QR code with title and description, and a live weather widget with the current conditions and a 3-day forecast.

# Instances

Navigate to Packages → Digital Signage → Instances to manage your screens. Creating or editing an instance opens a split-view editor: settings and snapshots on the left, a live preview of the screen on the right.

The footer of the editor provides two save actions:

• Save — saves and redirects back to the instance list.
• Save & stay — saves and remains on the current editor page.

# Instance Settings

Instance settings are organised in four tabs:

# General

• Name — the title of the instance (e.g. Lobby Screen).
• Orientation — Landscape for TVs and monitors, Portrait for vertically mounted screens. The layout adapts automatically.
• Template — the screen layout, chosen from a visual picker: Sidebar (the default — the info panel sits beside the content), Full screen (content only, no info panel, edge to edge) or Overlay (the info panel floats over the content with a subtle gradient for legibility).
• Background Color — the base color of the display, used behind snapshots and the sidebar.
• Side Info First — controls the side the info panel sits on: Left / Top or Right / Bottom. Hidden for the Full screen template, which has no info panel.
• Status — toggle the instance as active or inactive.

# Logo

Upload your logo (PNG, JPG, GIF or WebP). It is displayed at the top of the info sidebar.

# Weather

Set the city shown in the weather widget. Start typing and pick a location from the autocomplete suggestions (e.g. Athens, GR). The widget shows the current conditions and updates automatically.

# QR Code

Display a scannable QR code on the sidebar — ideal for linking guests to a menu, your website or a promotion. Select any QR code created with the QR Code package, and optionally add a Title and a Description shown above it.

# Snapshots

Snapshots are the slides rotating on the main area of the screen. Click + Add Snapshot to add one — the Snapshot Editor modal opens, organised in tabs: Main (type, duration, content and media options), Overlay message (image and video only), Templates (menus only) and Schedule.

# Snapshot Types

• Image — a full-screen image (PNG, JPG, GIF or WebP).
• Video — a video file (MP4, WebM or OGG) that plays during the slide.
• Restaurant Menu — embeds a live menu from the Restaurant Menu package. The board always reflects your latest items and prices, adopts the menu's own theme colours (its background colour for the cards and its primary colour for the text), and shows the menu's highlighted item as a card beside the menu name. In the Templates tab, pick a layout template from the visual gallery — Cards, List, Bold headers, Framed, Showcase tiles or Compact — and optionally override the menu card colour for this snapshot. The board automatically scales its content to fit the screen, so items are never cut off.
• Stream / URL — embeds an external web page or stream by URL.
• Customized — a blank canvas you design yourself from menu items, QR codes, images and text. See Customized Canvas below.

# Customized Canvas

A Customized snapshot is a blank canvas: nothing is placed for you, so you build the exact composition you want from menu items, QR codes, images and text. Click Edit canvas content in the Main tab to open the canvas editor.

• Adding elements — drag an item from the right-hand palette (Menu items, QR codes, Images or Text tabs) onto the canvas, or click it to drop it centred. The Images tab browses your media library and also lets you upload new files.
• Selecting — click an element to select it. Hold Ctrl (⌘ on Mac) or Shift and click to add more elements to the selection, or drag a box across an empty part of the canvas to sweep up everything it touches. Ctrl+A selects the whole canvas and Esc clears the selection.
• Moving & resizing — drag an element to move it; drag any of its handles to resize (hold Shift to keep its aspect ratio). The arrow keys nudge the selection a pixel at a time (Shift for ten). With more than one element selected, dragging or nudging any of them moves the whole group together and keeps their spacing — resizing and the properties panel stay available for one element at a time. Alignment guides snap to the edges and centres of nearby elements as you move or resize.
• Properties — select an element and tap its ✎ icon for its settings. Menu items choose a Tile, List or Booklet appearance, image fit (Cover/Contain), alignment, text size (Small, Medium or Large — one step down or up for the whole item: title, prices and description together) and per-part colours (title, price, description). In the Booklet appearance the alignment moves the prices as well as the title and description. Menu-item text is sized as a share of the screen width, and landscape screens automatically use a smaller scale than portrait ones so both orientations read alike. Text boxes have font, size, colour, bold/italic/underline/strikethrough, alignment, letter spacing and a per-side border. Images choose Cover or Contain.
• Live sync — menu items and QR codes keep a reference to the original, not a copy: renaming a product or changing its price updates every canvas that places it, automatically.
• Undo / redo — Ctrl+Z / Ctrl+Y (or the toolbar buttons) step back and forward through your edits; Delete removes everything currently selected.
• Click Done to apply the canvas to the snapshot, or Cancel to discard your changes — you still need to save the instance afterwards for it to reach the display.

# Duration & Ordering

• Display Duration — how long the snapshot stays on screen, set in minutes and seconds (default 10 seconds).
• Order — drag a snapshot by its handle to change the rotation order.
• Actions — the ⋮ menu on each row lets you edit, duplicate or delete the snapshot.
• Status — toggle a snapshot as active or inactive. Inactive snapshots remain in the editor but are skipped on the display.
• Background color — optionally override the screen background just for this snapshot; otherwise the instance background color is used.

# Media Size & Sound (Image & Video)

• Media size — how the image or video fills the screen: Contain + blurred background (the whole media is shown, with a blurred fill behind it — the default for images), Cover (fills the area, cropping the edges — the default for videos) or Contain (the whole media is shown with plain letterbox bars).
• Sound (video only) — videos are muted by default. Turn on Sound to play their audio.

# Overlay Message (Image & Video)

Image and video snapshots can show an optional message laid over the media — a title, a description and a scannable QR code — configured in the Overlay message tab. Leave the title and description empty and pick no QR to show the media only.

• Message position — a visual picker places the message as a full-width bar along the Top or Bottom, or as a card in any corner (Top / Bottom · Left / Right). The text and QR keep the same size in every position.
• Title (up to 50 characters) and Description (up to 200 characters) — each has its own Font, Size (Small → XX-Large, scales with the screen) and Color.
• QR Code — pick any code from the QR Code package, with a selectable size (Small, Medium or Large).
• Background color — defaults to the instance background color; turn off Use instance background color to pick a custom one.
• Background opacity — how transparent the message background is (default 0.8).

# Scheduling

By default a snapshot shows whenever the instance is running. Open the Schedule tab and turn on Schedule display to restrict it to set days and hours — useful for a breakfast board, a happy-hour promo or weekday-only content.

• Each day of the week has its own on/off toggle and a start–end time window (default: every day, all day).
• Use the copy button on a day to apply its hours to the whole week.
• The display re-checks the schedule every minute, so snapshots appear and disappear on their own as the day goes on.

# Live Preview

The preview pane on the right renders the screen exactly as it will appear on the display — it is the actual signage display, shown at its native resolution and scaled to fit. It reflects the saved instance and refreshes automatically whenever you save (and in real time within a few seconds).

# Displaying on a Screen

Digital signage runs on Android. The easiest way to put an instance on a screen is the Suite Codeehut Signage player app:

1. Install Suite Codeehut Signage from the Google Play Store on your Android TV (or any Android device with Play Store access).
2. Open the app — it shows a pairing code.
3. In the dashboard go to Packages → Digital Signage → Screens and click Pair screen.
4. Enter the code, then choose the signage instance to display (and optionally a screen name and language).

Each instance also has a unique public URL in the format /ds/display/:hostname/:slug that opens without login — handy for any screen with a modern browser as an alternative to the app.

The display stays up to date on its own:

• Real-time updates — whenever you save changes, every connected screen refreshes its content automatically within a few seconds. No reload or restart needed.
• Hourly refresh — as a fallback, the display also re-fetches its content once per hour.