Designer

The Tangle designer, on the web and on the desktop - projects, the project tree, signing in, token scopes, each section, and how saving and conflicts work.

The designer is where you build a Tangle project without editing JSON: rooms, devices, scenes, timelines, automations, variables, listeners, maps, dashboards, lighting and Sentinel monitoring. It is one app shipped two ways, a web app served by core and a desktop app, and both work the same once signed in.

#Web and desktop

The web designer needs nothing installed: any machine that can reach core opens it in a browser. The desktop app is the all-in-one install for a laptop: it includes core, the official device modules and Node.js, and starts its own core when it opens. See Install.

The old address /builder redirects to /designer/dashboards.

#Signing in

#On the web

1. Create a token on the core machine:

tangle-core token create --name designer --scopes read,control,configure

The secret is printed once. For a core installed as a service, run it with sudo (an administrator shell on Windows).

2. Open /designer, paste the token in API token and click Sign in.

The token is kept in the browser, so you stay signed in. It is shared with the dashboard builder: one sign-in covers both. Click Sign out at the bottom of the left menu to forget it.

#On the desktop

When the app opens, it starts its bundled core ("Starting the core on this computer…"), creates a token for itself and signs in. You see the project that was open last.

To work on a core on the network instead:

1. Click Sign out.
2. Enter the Core address: an IP address or host name such as 10.0.0.2, or a full address such as http://show-core.local:7340. Port 7340 is added when you give none.
3. Paste a token created on that core and click Sign in.

The app remembers the last five cores in the address field. To go back to the bundled core, sign out and click Use the core on this computer. The app remembers which one you chose.

Note: The remote core must accept other machines (--listen 0.0.0.0:7340 --allow-remote --insecure-http) and must not be running as the free designer, which serves only its own computer.

#Token scopes

A token carries one or more scopes. The designer checks what yours allows when you sign in.

With read alone, the designer is read only: forms are disabled and the menu shows "Read only: this token cannot change the project (it needs the configure scope)." For day-to-day design, use read,control,configure. The desktop app's own token has read,control,configure,admin.

To revoke a token: tangle-core token revoke designer. It stops working at once, without a restart.

#Projects

Core keeps a library of projects on its computer and runs one at a time. Click the project name at the top of the sidebar for the project menu:

Opening another project while a timeline plays asks first, since it stops the show.

A new, empty project opens on Start a project, a wizard that builds a project in four steps (kind, questions, devices, review). Kinds include meeting and class rooms, live shows, museums and exhibits, digital signage, building monitoring, simple installations, and rides and attractions. Start empty skips it; Start from a template on the Overview brings it back. Tutorial: a gallery installation builds a project by hand.

#Layout

The project tree on the left holds the whole project: Rooms and devices (All devices, each room with its devices, No room), Scenes, Timelines, Automations, Variables, Listeners, Maps, Dashboards and End-user views, each with a count. Search the project at the top filters it. Under the tree are Overview, Lighting, Sentinel, Nodes, Device creator, Settings and Sign out.

The project name and the connection state are on top (connected, backup node when signed in to a redundant backup, or the reconnecting state). Device status, timeline position and automation runs update live over the WebSocket.

• Right-click anything in the tree, or on a page, for its menu: New room…, Add device, New automation, Rename…, Copy id, Move to ▸, Open in new window, Delete… and so on. On a dashboard control, Automate ▸ makes an automation that starts when it is clicked or changes.
• ⌘-click or Shift-click devices in the tree to pick several.
• Middle-click (or Open in new window) opens an item in its own window, for example a dashboard on one screen and its automations on another.

Settings > Designer > Navigation switches to the older Section menu, one entry per section, for people who prefer it.

#Overview

The first page shows counts of rooms, devices (with how many are online), scenes, timelines, automations, dashboards and maps (click one to open it), and Needs attention:

• devices whose module is not installed on this core;
• devices that are offline, timeout or error, with the detail the module gave;
• devices that recommend a setup assistant;
• automations whose last run failed;
• devices that are not in a room.

Each line has a Fix or Assign link to the right page.

#Rooms

Rooms and devices in the tree, or the Rooms page: a board with one column per room and a No room column. Drag a device between columns to assign it; the move is saved at once.

• Add room: right-click Rooms and devices and choose New room…, or type a name in New room on the Rooms page. The id is made from the name (Meeting room 2 becomes meeting-room-2).
• Right-click a room to rename it, copy its id, add a device to it or delete it. Edit on the board also sets its tags.
• Open a room to see its devices, with Add device.

#Devices

All devices lists every device with its driver, room, folder, tags and live status, with folders, filters and multiple selection. A device page holds its settings, setup assistants, live status, ready-made controls and log. Add device, the Driver library, Test connection, Scan the network, setup assistants and deleting devices with what uses them are covered in Devices.

#Scenes

A scene is a set of device actions recalled together, for example "Presentation" turns on the projector and lowers the screen.

1. Click Scenes in the tree, then New scene, and give it a name.
2. Click Add action for each step: choose the Device, then the Action from that device's capabilities (power on, input select, level set...), then its parameters. Parameters show their type and range, for example level (0–1).
3. Click Create scene.

Scenes are recalled with the scene.recall intent from dashboards, cues and automations. See Concepts.

#Timelines

New timeline opens the editor. Settings at the top:

#Editing cues

• Timecode mode: tracks are rows on a time ruler. Double-click a track to add a cue, drag cues to move them (they snap to frames), and use Zoom to change the scale.
• Cue list mode: cues are listed in order with Move up and Move down.
• Add track adds a row. Each track has a name, Mute and Delete.

Select a cue to edit it in the side panel: Name, Time (s), Pre-roll (ms), Enabled, and what it Does: a device action, or an intent (recall a scene, power, level...) on a room, device, tag or everything. A cue whose device was deleted becomes a comment cue, a note with Point at device… to turn it back into a cue.

#Live transport

Tick Live control to enable the transport buttons: Play, Pause, Stop (or GO, Pause, Stop for a cue list). With live control on, clicking the ruler seeks. The header shows the status and position, plus chasing and no timecode badges for chased timelines, following time of day for time-of-day timelines, and PTP not locked for PTP timelines.

While a timeline plays, its editor is read only. Tick Allow live editing (changes apply to the running show) to change it anyway. A playing timeline cannot be deleted.

See Timelines.

#Automations

Right-click Automations in the tree and choose New automation. The editor is a step table (one row per step, with + Add step) and three tabs: the selected Step, the Automation (name, params, Run when, Only if, Behaviour) and its Runs (Run now, Stop, live run log). See Automations.

#Variables

Project variables: values core keeps for the whole project, read as {{name}}. Add variable gives each a name, a label, a default value and Keep (kept across restarts), then Save variables. The current values show live. See Automations.

#Listeners

Ports other systems send their own messages to, with rules, a live message log and a tester. See Listeners.

#Maps

Floor plans with the devices placed on them. Import a plan… (or drop an SVG, DWG, DXF, PNG or JPEG plan on the page) starts a map; positions are in metres, so tracked people and tags show on the same map. Dashboards show maps with the Map widget, and end users open them from their views.

#Dashboards

The dashboard builder, full width. From the dashboard list you can create, generate (room, show console, facility overview) and Open a published dashboard. The builder has the control palette, the grid per screen size, the Inspector, settings (skin, control style, theme, background, units, access) and published versions. See Dashboards.

#End-user views

What the people using the site open at /view: a menu of dashboards and maps, with its own access. See End-user views.

#Lighting

The lighting engine: Program (pick lights on the stage, build looks, type commands like 1 thru 6 at 50), Run show, Cue lists, Presets, Playback (executors and the grand master) and Patch (add lights from the fixture library).

#Sentinel

Monitoring setup and live alerts, in six tabs:

Sentinel is part of Tangle Pro and Ultimate. With another license you can still set up rules and channels, but nothing is checked or sent. On a backup core, Sentinel watches but only the primary sends notifications. See Sentinel.

#Nodes

The Nodes page shows this core (CPU, memory, disk, devices, module processes, uptime) and its pairing code, the members of its redundant cluster and the cores found on the local network. When a new core appears, a banner tells you. Each found core offers Keep separate (its own show, not offered again) or Add as redundant (type its pairing code and it joins as a backup). Accepting needs the admin scope.

The page also sets the cluster's Address for operators (one name.local address that follows the primary), Sharing the work (standby or shared mode, folder rules, Rebalance) and the Health limits that mark a node "low disk", "low memory" or "overloaded". See Redundancy.

#Device creator

Write a driver for a device Tangle does not know, without code where possible. See Device creator.

#Settings

• Project Name, Id, Contract version (the project's and the designer's) and the Core address.
• Export project (JSON) downloads the project as core serves it. Secret settings are never included.
• Designer: the navigation (project tree or section menu), for this browser.
• License: what this core runs as, the license, and Activate, Sign in with email, License by email / file… and Offline. See Licensing.
• Community: sign in to the community driver repository. See Device creator.
• Units: metric or imperial for the project, this browser's choice, and overrides per quantity.
• Dashboard controls: the project's default control style and the highlight colours of each style.
• Modules: every module the core knows, installed or not, with Install and Scan again.

#Saving and conflicts

Each editor saves one thing at a time (a room, a device, a scene, a timeline, an automation, a Sentinel rule). Every save works in two steps:

1. Dry run. The designer sends the change with dryRun=true. Core checks the whole project with the change applied (schema, references, settings) and changes nothing. If something is wrong, core's errors appear in a box next to the form and nothing is saved.
2. Write. The same change is sent for real, with the version tag (ETag) the editor read when it opened.

Saved changes apply to the running project at once and are written to the project file.

If someone else changed the same item since you opened it (another designer, a script, an AI assistant over MCP), core refuses the write and the designer shows "Someone else changed this since you opened it." with two choices:

• Reload theirs: discard your edits and load the current version.
• Overwrite with mine: save your version over theirs.

Deletes are checked the same way, so a delete that would leave the project invalid, such as removing a device a scene still uses, is refused with the reason. Changes made elsewhere appear in the designer on their own, because core announces every project change.

Dashboards work differently: the builder saves drafts and publishes versions. See Dashboards.