Data Screens

Create and edit a data screen

1. Open "Data Screens" and click "New screen", then give it a name.
2. In canvas settings, set the canvas size and background; the size should match the target screen resolution (1920×1080 is common).
3. Drag components from the material panel on the left onto the canvas, move them and resize them with the handles.
4. On the "Data" tab on the right, bind a data source to the component.
5. Use the "Properties" and "Style" tabs to adjust text, color, unit and precision.
6. Save with the button in the top bar; when everything looks right, click publish.

NoteThe canvas size determines the aspect ratio of the result. If a screen must be shown on different resolutions, use a standard ratio (16:9) and rely on the proportional scaling of the display page.

Material categories

• Charts: bar, horizontal bar, line, area, pie, ring, scatter, gauge and radar.
• Numerals: numbers, number flips and progress bars, for highlighting a single key metric.
• Devices: live device cards that show a device’s current properties directly.
• Text: text and gradient text, for titles and captions.
• Media: images, carousels, web pages and video.
• Tables: present multiple rows of data in tabular form, suited to detail lists.
• Decoration: borders (several variants), clocks and a fullscreen button, to complete the picture.

Binding data: three data sources

• Static data: fill in JSON directly; suits titles, fixed captions and demo data.
• Live device data: choose a product, device and property within the credential scope; charts read a time series while numeric components take the latest value.
• Custom interface: enter your own HTTP address; suits data from third-party systems.

NoteLive device data is polled roughly per second by default (10 seconds by default, 5 seconds minimum). When you need the "latest N rows" rather than "the last N minutes", take data by row count — reading by time window makes charts look frozen when a device reports sparsely.

Canvas-level credentials: why screens do not store secrets

• A data screen selects the "device data credential" once in canvas settings; components never ask for the secret again.
• The credential decides which products this screen may read, and the data is fetched through the backend, so the browser never touches the secret.
• As a result, everyone with permission to view a published screen sees the same data, independent of their own data permissions.

NoteWhen no credential is selected in canvas settings, the product dropdown of components is empty and prompts you to choose one there — this is the most common reason a screen shows no data.

Editor operations and shortcuts

• Delete removes the selected component; Ctrl / Cmd + Z undoes; Ctrl / Cmd + Shift + Z or Ctrl + Y redoes.
• Ctrl / Cmd + C and V copy and paste; Ctrl / Cmd + D creates a duplicate.
• Arrow keys nudge by 1 pixel; holding Shift with an arrow key moves by 10 pixels.
• Alignment guides appear while dragging; when there are many components, use the layer panel to manage order, lock and visibility.

Publish and share

• An unpublished screen can only be previewed by its creator and administrators; a published screen can be viewed by any signed-in user.
• The display page scales proportionally with the canvas size, so it suits being cast straight onto a large TV or meeting room screen.
• The screen list supports renaming, refreshing the thumbnail and deleting; thumbnails make screens easy to identify in the list.