This section is the working reference for everyday use of Smart Panel: managing your panels, shaping the canvas, placing and configuring panel items, binding buttons to commands, and using a finished panel on air. It assumes you have followed Get Started at least once and have a working connection to Viz Mosart.
Managing Panels
All panels live on the Mosart Web Apps server, so anyone who can reach the Smart Panel URL sees the same list and works on the same panels. The landing page (/smartpanel) is the entry point for panel management.
Smart Panel also ships with a small library of read-only preset panels. Presets are not listed on the landing page and cannot be edited in place: they are offered as starting points in the New panel picker. Anything you create from one is a normal, editable panel, and the preset itself stays untouched.
From the landing page you can:
Create a panel. Click New panel to open the picker. Choose a blank panel to start from an empty canvas, or one of the presets to begin with a ready-made layout. Name it and create it; Smart Panel opens it in the editor.
Open a panel. Click its card. If you have edit rights it opens in the editor at
/smartpanel/<panel>/edit; if you can only view panels it opens straight in display mode.Open a panel to run it. Choose Display mode from the card's options menu, or navigate to
/smartpanel/<panel>without/edit.Hand a panel to an operator. Use the Copy link button on the card. The link opens the panel in display mode.
Duplicate a panel. Choose Duplicate Panel from the card's options menu, or from the more-options menu inside the editor.
Rename a panel. Open it in the editor and click the panel name in the app bar.
Delete a panel. Choose Delete Panel from the card's options menu, or from the editor's more-options menu. Deletion is permanent and removes the panel for everyone, so confirm before deleting a panel that may be in use.
Info: Panel names do not have to be unique. Two panels may share a name, so if your team relies on names to tell panels apart, agree on a convention.
Note: If you try to leave the editor with unsaved work, Smart Panel asks what to do rather than discarding it silently. Save before you navigate away if you want to keep the changes.
The Editor
The editor has an app bar across the top and three working areas below it:
The Components palette on the left, holding the item types you can place.
The canvas in the middle, which is the panel itself.
The Properties pane and the Panel Items list on the right.
Both side panes can be resized by dragging their inner edge, so you can give the canvas more room while working on a dense panel, or widen the properties pane when configuring an item with many settings.
The app bar
The app bar carries the panel name, which you click to rename, and:
An Edit and Preview switch. Preview shows the panel as an operator would see it without leaving the editor, which is the quickest way to check spacing and legibility.
Save, and, while a save is pending, the option to Discard the changes instead.
NDI Stream, which publishes this panel as an NDI source and stops it again.
A more-options menu holding Audio Countdowns, Duplicate Panel, Copy Link and Delete Panel.
The ? help menu, and an Offline chip whenever Viz Mosart is unreachable.
Tip: Press K at any time for the keyboard shortcut list. See Keyboard Shortcuts at the end of this page.
Panel Properties
With no item selected, the right pane shows Panel Properties. These apply to the canvas and govern the whole panel.
Property | What it controls |
|---|---|
Aspect ratio | The shape of the canvas. Pick one of the presets, choose Custom and enter your own width and height, or choose None to stretch to fit the browser window. Match this to your target screen so the panel looks right on air. |
Grid (rows and columns) | How finely the canvas is divided. Items snap to cells. Increase the counts for fine-grained panels, decrease them for chunky touch buttons. |
Background color | The color behind all items. Pick something that contrasts with your item colors and is comfortable to look at for a long show. |
Default padding | The padding applied to new items. Any item can override it with its own padding. |
Font size presets | Three named sizes, small, medium and large, defined once here in pixels. Items then refer to them as S, M or L instead of carrying their own pixel values. Changing a preset updates every item that uses it. |
Working with Panel Items
Panel items are the building blocks of a panel. They all behave the same way on the canvas, whatever their type.
Adding an item. Click an item type in the palette. The cursor then carries a preview. Click an empty cell on the canvas to drop it, and its settings appear in the properties pane. Press Escape to cancel placement.
Selecting an item. Click it on the canvas, or its entry in the Panel Items list. The selected item shows its handles and its properties populate the pane.
Moving and resizing. Drag the item body to move it, and a corner or edge handle to resize it. Items snap to the grid. With an item selected you can also nudge it with the arrow keys and resize it with Shift and the arrow keys.
Copying an item. Use Ctrl+C and Ctrl+V, or the Duplicate action in the Panel Items list.
Deleting an item. Select it and press Delete, or use the Delete action in the Panel Items list.
The Panel Items list. Every placed item appears in this searchable list. Use it when items overlap and you need to reach one underneath another, when the panel is busy and you want to jump straight to something by name, or simply to confirm what is on the panel.
Tip: Give each item a descriptive Custom name (for example Take button, Story countdown). The name appears in Panel Items, and naming as you go pays off quickly as the panel grows.
Properties shared by every item
Regardless of type, every item offers:
Custom name and Show name: the name used in Panel Items, and whether it is also drawn on the item itself.
Background color and Text color, entered as hex values. Most types also offer a transparency option for the background.
Font weight (normal or bold) and Text alignment (left, center or right).
Font size: S, M or L from the panel presets, or Fit to auto-scale the text to the item bounds. Fit adds Min font size and Max font size to bound the scaling.
Padding, defaulting to the panel-wide value.
Position and size on the grid.
Item Reference
The palette holds nine item types.
Item | What it is for |
|---|---|
Timer | A live timer or countdown driven by Viz Mosart. The basis of a timing display for the control room or the studio floor. |
Label | A live text value from Viz Mosart, such as the current item slug or story name. |
Text | Static text that does not change at runtime. Titles, group headers, instructions, branding. |
Image | A static image uploaded to the server. Logos, role icons, decoration. |
Widget | A category hosting eleven built-in sub-widgets, from the timeline to the asset list. |
Fader | An audio fader bound to a Viz Mosart audio channel. |
Button | The main interactive item. Sends a command when tapped. |
Toggle | A two-state button that both reflects and flips a Viz Mosart state. |
Live | A live video preview, with an optional click action. |
Timer
Shows a live timer or countdown driven by Viz Mosart, synchronized with the active rundown. Use it to build timing displays: one on the studio floor counting the current item, another in the control room counting packages to keep the producer updated.
Pick the value from the Timer type drop-down. There are twenty-one:
Group | Types |
|---|---|
Current item | Current Item Countdown (the default), Current Item Time |
Current story | Current Story Countdown, Current Story Planned Duration, Current Story Time |
Next | Next Break Time, Next Item Duration, Next Live Countdown, Next Story Planned Duration |
Rundown | Current Rundown Out, Rundown Elapsed Time, Rundown Over/Under, Rundown Out Over/Under |
Time and break | Time of Day, Time to Next Break, Time to Rundown Out, Duration to Next Break, Duration to Rundown Out |
Story Recorder | Story Recorder Preroll Countdown, Story Recorder Recording Time, Story Recorder Countdown |
Besides the shared properties, a Timer offers Show overtime background. With it on, the timer changes its background color once it passes zero, which is what you want for countdowns and over/under timers.
Info: There is no per-threshold coloring. Over-time appearance comes from Show overtime background plus the background color you choose, not from separate warning and critical colors.
Label
Shows a live text value from Viz Mosart. The same role as a Timer, but for text. Pick the value from the Label drop-down; there are ten:
Group | Sources |
|---|---|
Current | Current Item Slug (the default), Current Story Name, Current Video Server Channel, Current Graphics Channel |
Next | Next Item Slug, Next Story Name, Next Video Server Channel, Next Graphics Channel |
Rundown and server | Rundown Name, Server Description |
Info: The list is fixed. There is no free-form expression, so a Label cannot be bound to an arbitrary Viz Mosart value that is not one of the ten. Long values can overflow a narrow item, so either size it generously, drop to a smaller preset, or use Fit with sensible bounds.
Text
Static text, typed by you rather than read from Viz Mosart. Use it for section titles such as Cameras or Audio, group headers, on-screen instructions, and branding such as Studio 3.
The only type-specific property is the text itself. Manual line breaks are preserved, so you can lay out a caption over several lines instead of relying on wrapping. The same applies to button labels.
Info: Text items never update on air. If the value should change with the show, use a Label instead.
Image
A static image uploaded to the Mosart Web Apps server and stored with the panel, so every device that opens the panel gets the same file. Use it for studio logos, small role icons next to related buttons, and visual markers that help an operator orient themselves.
Upload image opens a file picker. Allowed formats are .jpg, .png, .gif and .webp, and the maximum file size is 5 MB. Until something is uploaded, the item shows a placeholder on the canvas.
Fit has five values: None renders at the file's own pixel size, Contain letterboxes inside the item bounds, Cover fills and crops, Fill stretches, and Scale-down behaves like Contain but never enlarges.
Background color shows through wherever the fit mode leaves space, or where the image itself is transparent.
Info: There is no opacity property. To dim an image for a watermark effect, bake the transparency into a PNG before uploading it.
Widget
Widget is a category rather than a single item. Drop one on the canvas and pick which of the eleven built-in sub-widgets it should render from the Widget type drop-down. Each sub-widget adds its own properties below the drop-down.
Sub-widget | What it shows |
|---|---|
Connection Status | The Viz Mosart connection state, including the main and backup beacon. This is the default when a new Widget is dropped. |
Timeline | The Viz Mosart timeline for the current story. |
Story Script | The script for the current story. |
Current Item Type | A visual indicator of the on-air item's type, such as camera, package or graphic. |
Next Item Type | The same, for the next item. |
Device Statuses | Live status indicators for the connected Viz Mosart devices, showing connected, disconnected or standby. |
Audio Toggles | A group of audio mute and unmute toggles. You choose which channels appear. |
Video Transition | The next video transition, with the transitions you choose made available. |
Asset List | A filtered list of the assets in the rundown. See below. |
Prompter | Prompter output and remote control, so a panel can drive the Prompter without leaving Smart Panel. |
Iframe | An external URL embedded in the panel. |
Apart from Iframe, every sub-widget is driven by Viz Mosart and needs a live connection to show real data. Without one they show placeholder content.
Asset List
The most configurable sub-widget. It lists the assets available in the show and can be narrowed down heavily, so several Asset Lists on one panel can each cover a different job, for example manual overlays, overlays on the current story, fullscreen graphics, and everything in the rundown.
Source: the Viz Mosart rundown, or a Media Sequencer playlist or show. Choosing Media Sequencer adds the profile and the playlist or show to read from, and requires the Media Sequencer to be configured.
Story filter: all stories, the on-air story, or the next story.
Execution filter: all items, scheduled items only, or manual items only.
Asset types: show or hide each of Camera, Video, Live, Graphics, DVE, Float, Overlay graphic and Accessories independently.
Destination filter: restrict graphics to a particular graphics destination.
Thumbnails: off, small, medium or large.
Show story name and Show script: add context to each row.
Show status filter and Show execution filter: expose those two filters to the operator in display mode, so they can narrow the list themselves rather than having it fixed at design time.
Rows carry the item slug and, for overlay graphics, their on-air status, so an operator can see what is already live before taking something.
Iframe
URL: the address to embed. The frame is loaded directly.
Enable click action: when on, the whole iframe area acts as a button and the command options appear. When off, clicks pass through to the embedded site.
Note: The embedded site decides whether it may be framed. If it sends X-Frame-Options: DENY or a restrictive Content-Security-Policy: frame-ancestors, the frame stays blank and Smart Panel cannot override it.
Fader
An audio fader bound to a Viz Mosart audio channel. The operator drags the bar to change the level on air. It renders as a vertical bar with the channel name at the top and the current level in dB at the bottom, showing -∞ at the floor.
Use it for any source that needs continuous control: a presenter microphone, a music bed, a remote feed. The Fader name drop-down is populated from the audio channels Viz Mosart is currently reporting, so name each fader after its source (INPUT 1, INPUT 2 and so on) and operators can tell at a glance which channel they are riding.
Note: The channel list only exists while Viz Mosart is reachable. With the connection down the drop-down is empty, so faders can only be bound while Viz Mosart is connected.
Button
The main interactive item. A button first picks what it talks to, then what it sends.
Choosing the target
Target | What you can send |
|---|---|
Mosart | A template take, a timeline command, a control command, or Prompter play/pause. See below. |
TriCaster | A TriCaster macro, chosen by folder and then by name. |
MSE | Take a graphic. Pick the Media Sequencer profile, whether the graphic comes from a playlist or a show, and then the element itself. |
Viz Arc | A Viz Arc action, chosen by project and then by action. |
The TriCaster, MSE and Viz Arc targets need their integration configured first. See Setup and Administration of Smart Panel.
Viz Mosart commands
With Mosart as the target, the command type is one of:
Template: takes a Viz Mosart template. Choose the output, Program to take on air or Preview to cue, then pick the template from a picker that lists the whole template catalogue by category and lets you search it.
Timeline: one of ten timeline actions, namely Toggle Rehearsal Mode, Open Rundown, Reload, Start Continue, Skip Next, Unskip Next, Skip Next Sub Item, Unskip Next Sub Item, Start From Top, and Take Server Out Of Idle. Open Rundown can point at a specific rundown, or leave the choice to the operator at runtime.
Control Command: the full Viz Mosart control command set, from autotake and direct take through overlay graphics, audio, crosspoints and studio setup. Commands that need arguments take them in the parameters field, in URL query form (
param1=value1¶m2=value2). For exampleengine_switcherneeds an engine name. Leave it blank for commands that take none.Prompter Play/Pause: starts and stops prompter scrolling.
Test action at the bottom of the command section fires the configured command straight from the editor, so you can confirm a binding without leaving it.
Note: Test action sends the real command to the connected Viz Mosart server. Do not use it during a live show unless you mean to. Control command parameters are also passed through as typed: a typo fails silently from the operator's point of view, so check the Viz Mosart server log if a button appears to do nothing.
Appearance and confirmation
Buttons carry the full color and font controls, so use color and a short, unambiguous label (TAKE, CUE, CAM 1) to make the purpose obvious at a glance. For an action you do not want fired by accident, turn on the confirmation option and the operator is asked before the command is sent.
Toggle
A two-state button. Unlike a plain Button, which fires and forgets, a Toggle also reflects the current state in Viz Mosart, so the operator can see at a glance which way it is set and does not have to look elsewhere to confirm it.
The state a Toggle can flip is Rehearsal mode. Placed on a panel, it shows whether Viz Mosart is currently in rehearsal and switches it when tapped.
Info: If you want a one-way action instead, or a state that Toggle does not cover, use a Button. Toggle Rehearsal Mode is also available as a plain timeline command on a Button, which flips rehearsal without showing its state.
Live
Embeds a live video preview on the panel. Use it for camera and source previews, and any other picture the operator needs to glance at. A common arrangement is a Live preview paired with its own take button, both labelled with the same source name so the link between what you see and what you cut to is obvious.
Source type offers four choices:
Source type | What to select |
|---|---|
NDI | An NDI source, picked from the sources Mosart Web Apps has discovered on the network. The server receives the NDI stream and passes it to the browser, so nothing needs installing on the operator's machine. |
TriCaster | A TriCaster input or output, from the TriCaster configured in the Configuration Tool. |
HTML video | A video URL the browser can play directly, such as an |
Stream | A |
Each source type remembers its own URL, so switching between them while experimenting does not lose what you entered for the others.
Enable click action turns the preview into a button as well: the same command options a Button offers appear below the checkbox, so tapping the picture can take that source. With it off, clicks on the preview do nothing.
Info: If a source cannot be reached, the picker says which part failed rather than simply showing an empty list. The messages and their remedies are listed under Setup and Administration of Smart Panel. Earlier releases required a separate Viz Coder service for NDI; that is no longer used.
Running a Panel On Air
To check a panel while you are still designing it, switch the app bar from Edit to Preview.
To run it for real, open it in display mode: choose Display mode on the panel's card, use Copy Link and open that link on the operator's screen, or navigate to /smartpanel/<panel> without /edit. The panel fills the window, touch-friendly and ready for use, and cannot be edited there. For a completely bare screen, use the browser's own full-screen mode.
On air:
Timers, labels and indicators update live from Viz Mosart.
Buttons send their command as soon as they are tapped, unless confirmation is turned on.
Faders apply level changes as they are dragged.
An Offline chip appears in the app bar if the connection drops. Live values are replaced by placeholders and commands may fail until it returns.
Streaming a panel as an NDI source
A finished panel can also be sent out as an NDI source, so it can be taken as a picture on a video device or mixer rather than only viewed in a browser. Start and stop this with NDI Stream in the app bar.
What to avoid while live
Editing the panel an operator is currently using. Saves take effect on their next page load, unsaved editor changes are not reflected on their screen, and a misclick in the editor can fire a real command.
Renaming or deleting a panel that is in use.
Touch operation
Use an aspect ratio that matches the touch monitor. A mismatch leaves dead bands at the edges that operators tap by accident.
Avoid tiny items. A button smaller than a fingertip is unreliable under pressure.
Keep clear contrast between active and idle states so the operator can see which action just fired.
Keyboard Shortcuts
Press K to see this list in the app.
Action | Shortcut |
|---|---|
Move between panels | Arrow keys |
First or last panel | Home / End |
Move the selected item | Arrow keys |
Resize the selected item | Shift + arrow keys |
Delete the selected item | Delete |
Copy item | Ctrl+C |
Paste item | Ctrl+V |
Cancel placement | Escape |
Show keyboard shortcuts | K |