Web User Interface
The Asset Manager includes a built-in web server that provides a browser-based interface for uploading and managing assets. This lets team members contribute media from any device on the network — laptops, tablets, or phones — without needing the WATCHOUT Producer application installed. The web UI is particularly useful during collaborative setup and rehearsal when several people need to add or review content at the same time.
How It Works
The web UI is compiled into the Asset Manager binary and served by the same process. The server binds to port 3023. When the Asset Manager starts, the web UI is available — there is nothing extra to configure.
The browser sends the file to the Asset Manager over HTTP. From there it enters the same processing pipeline as files added through Producer — upload, optimize, store, and distribute. See Asset Manager.
Assets uploaded via the web UI appear in Producer's Assets window in real time.
The header reads "Asset Manager Web" and shows the running version and the host reference. This confirms which node you are connected to.
If the connection drops, an offline overlay blurs the page and shows a wifi-alert icon. The UI reconnects on its own once the Asset Manager is reachable again.
Accessing the Web UI
- Make sure the Asset Manager node is running and a show is loaded.
- Open a web browser on any device on the same network.
- Go to:
http://<asset-manager-ip>:3023
Replace <asset-manager-ip> with the IP address or hostname of the Asset Manager node.
You can also open the web UI from Producer. Right-click in the Assets window and choose Open Web UI. Producer looks up the Asset Manager node's IP and opens the URL in your default browser.
The port is always 3023 and cannot be changed. The URL uses the IP of the Asset Manager node, which may be different from the Producer machine. If you are unsure which node is the Asset Manager, check the Nodes window in Producer.
The Toolbar
A toolbar runs across the top of the page. The right-side buttons are icon-only. Hover to see the tooltip. Items from left to right:
| Control | What it does |
|---|---|
| Title and filter | A filter dropdown sits next to the "Assets" title. Choose All, an asset kind (Image, Video, Audio, etc.), or Failed to show only assets that failed to optimize. |
| Folder breadcrumb | When you open a folder, its path appears here. Click any segment to jump back up the tree. |
| Columns | Open the dropdown to toggle which columns are shown. The Name column is always on. Your choice is saved between sessions. |
| Search | Fuzzy search across name, path, and kind. Type one or more terms. Each term must match. Spaces, commas, periods, hyphens, underscores, and slashes all split terms. Results update as you type. Press Alt+Enter to focus the field and Esc to clear it. |
| Delete | Removes the selected assets. Disabled when nothing is selected. |
| Upload | Opens a file picker for one or more files. |
| Upload folder | Opens a folder picker. Disabled inside a Dynamic Asset folder. |
| Settings | Cog icon. Opens the Asset Manager Settings dialog (see below). |
| Create folder | Creates a new folder inside the current scope. Disabled inside a Dynamic Asset folder. |
Folder creation and folder upload are only allowed inside plain folders or at the root. They are disabled inside Compositions and Dynamic Asset folders, where the structure is fixed.
The Asset Tree
Assets are shown in a hierarchical tree. Folders contain assets and other folders. Each row shows the asset's name, an icon for its kind, and the columns you have enabled.
Besides Name, Thumbnail, Dimensions, Duration, and Date, the table offers Type, State, FPS, Codec, Color, Channels, Original Path, Progress, Optimized Size, and UUID. Toggle the extra columns from the Columns dropdown in the toolbar.
Click a Type cell to filter the list to that asset kind.
The Color column shows the input and output color space. When they differ, both appear as input → output.
The State column shows each asset's status with an icon: a check for Ok, gears for Optimizing, a spinner for Uploading, a red alert for Failed (hover it to read the error), and a grey alert for Cancelled.
Original Path shows the source folder and file name of the imported file. It is empty for files uploaded through the browser, which do not expose a full path. UUID is the asset's unique identifier, used in asset and thumbnail URLs.
A dynamic asset folder shows a recycle badge, and its Type reads Dynamic Visual, Dynamic Audible, or Dynamic Display Data.
Expand and collapse folders by clicking the chevron in the Name column, or by double-clicking the folder row. Each folder's open state is saved in your browser. The tree looks the same when you reload the page.
Drag the divider between two column headers to resize a column. The width is saved in your browser.
Inside a folder, rows are sorted in this order:
- Plain subfolders first, alphabetical.
- Compositions, Dynamic Asset folders, and leaf assets mixed together, alphabetical.
- Inside a Dynamic Asset folder, versions are sorted by creation time with the newest at the top.
This mirrors the order used in Producer's Assets window.
Selecting Assets
Click a row to select it. Shift-click to select a range, and Ctrl-click (Cmd-click on macOS) to add or remove single rows. Click an empty area to clear the selection. Delete and drag-move act on the whole selection.
Uploading
You can upload files in three ways:
- Drag onto a folder row. The files are uploaded into that folder.
- Drag anywhere else — onto a leaf row or empty area. The files are uploaded into the current folder scope (the root by default).
- Click the Upload or Upload folder button in the toolbar.
Folder uploads preserve the folder structure under the destination.
While you drag, the destination folder row highlights to show where the files will land before you release.
Dropping files onto a Dynamic Asset folder adds each file as a new version of that asset, matching the behavior of Producer.
File Size Limit
The Web UI has no fixed upload size limit. The practical limits are available disk space on the Asset Manager node and the 24-hour HTTP timeout per upload. For multi-gigabyte files, use a wired connection.
Upload Progress
Each upload shows a progress spinner and percentage on its row. While an upload runs, you can keep adding more files. Uploads do not block each other or prevent the operator from using Producer.
The table also has dedicated Progress and Optimized Size columns. Progress shows the percent complete. Optimized Size shows the size after optimization. Enable them from the Columns dropdown.
After the upload finishes:
- The asset appears in Producer's Assets window in the Uploading state.
- Optimization begins as soon as the upload completes.
- The asset transitions through Optimizing to Ok.
- Once optimized, the asset is ready to be distributed to Runner nodes.
See Asset Properties for the full asset state pipeline.
Moving Assets
Drag an asset row onto a folder row to move it there. If several rows are selected, all of them move together. The drop target is the row under the cursor. Dropping onto an empty area moves the selection to the current folder scope.
Hover Preview
Hold the pointer over a thumbnail to see a larger 256-pixel preview anchored under the row. The preview uses the same image as the row thumbnail.
A thumbnail that is still being generated shows a "No Preview" placeholder and fills in on its own once it is ready. An empty or fully-filtered tree shows "No assets".
Cancelling Uploads and Optimization
While an asset is in the Uploading or Optimizing state, a small cancel icon appears next to the spinner. Click it to stop the job.
The cancelled asset stays in the list in the Cancelled state until you delete it.
Asset Manager Settings
The cog button in the toolbar opens the Asset Manager Settings dialog. These are the same optimization settings as in Producer, editable from the browser. Changes apply to future optimizations only.
The dialog has four sections:
- Bandwidth Limit — caps the transfer rate to Runner nodes, in Mbit/s. Set 0 for unlimited.
- Track Management (Audio/Video) — the Composition Logic dropdown: Skip Audio, Skip Video, Composition, or Individual Assets.
- Output Properties — a Quality Level (Good, Very Good, Excellent, Optimal, Best) for codecs that support it.
- Codecs (in → out) — the source-to-output codec mapping. A changed row shows a colored arrow with a restore button. Reset All reverts every row.
Save is enabled only after a change. For what each setting does, see Asset Manager Settings.
Keyboard Shortcuts
The following shortcuts work whenever the table has focus (text inputs are not affected):
| Shortcut | Action |
|---|---|
| Up / Down | Move selection one row at a time. |
| Left / Right | Collapse or expand the selected folder, or move into / out of it. |
| Home / End | Jump to the first or last row. |
| Page Up / Page Down | Scroll a page at a time. |
| Ctrl/Cmd + A | Select all visible rows. |
| Delete / Backspace | Delete the selected rows, after confirmation. |
| Alt + Enter | Focus the search field. |
| Esc | Clear the search field when it has focus. |
Browser Compatibility
The web UI works in any browser released from 2020 onward. Internet Explorer is not supported.
Security Considerations
The web UI has no authentication. Anyone who can reach the Asset Manager's IP and port on the network can upload, browse, move, or delete assets. This is by design for ease of use in controlled AV environments.
In production, protect the web UI with network-level controls. Anyone with access to port 3023 can modify your show's assets, including deleting them.
For production, restrict access to port 3023 with firewall rules, and block the port on the Asset Manager node when the web UI is not needed. The general network isolation advice — dedicated network, VLANs, physical or logical separation — applies to all WATCHOUT traffic and is covered in Asset Transfer.
Relationship to Other Ingestion Methods
The web UI is one of several ways to add assets to a show. Choose the method that fits your workflow:
| Method | Best For | Requires Producer? |
|---|---|---|
| Web UI | Remote team members, mobile devices, quick uploads during setup | No |
| Drag and drop (Producer) | Primary operator adding files from the local machine | Yes |
| Asset Watcher | Automated pipelines, render farms, scheduled updates | No |
| Import | Migrating a complete show package from another system | Yes |
All methods feed into the same optimization pipeline and produce identical results. See Asset Manager for an overview.
Best Practices
- Share the URL with your team. At the start of setup, share
http://<ip>:3023with everyone who needs to contribute content. This saves time compared to collecting files on USB drives or email. - Create folders before the team starts uploading. This prevents all files from landing in the root of the tree.
- Monitor from Producer. While others upload via the web UI, the operator should watch the Assets window in Producer to confirm uploads complete and optimization proceeds as expected.
- Test connectivity first. Before relying on the web UI during a show, open the URL in a browser and confirm the interface loads. Firewall rules, network segmentation, or IP address changes can silently break access.
Related
- Asset Manager — the asset pipeline that processes web-uploaded files.
- Asset Manager Settings — the optimization settings editable from the web UI.
- Asset Watcher — automated folder-based import as an alternative to the web UI.
- Asset Manager Issues — troubleshooting optimization, transfer, and asset problems.