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. It is headed Your panels.

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 under Use a preset in the Create new panel dialog. 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 to open the Create new panel dialog. Choose Blank panel to start from an empty canvas, or one of the panels under Use a preset to begin with a ready-made layout. Give it a Name and click Create; Smart Panel opens it in the editor. The New button is shown only to a user who can edit panels.

• Find a panel. The Search panels... field above the cards filters the list by name, which is what you reach for once a site has more panels than fit on a screen.

• 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.

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 Layers list on the left under the palette, and the Properties pane on the right, which has a Component tab for the selected item and a Panel tab for the whole panel.

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. A user who can only view panels never sees this switch: the editor is not open to them, and an edit link takes them to display mode instead.

• Save, which is available only while the panel has unsaved changes. There is no Discard button in the app bar. If you try to leave the editor with unsaved work, a Save changes dialog offers Save, Discard and Cancel.

• NDI Stream, which publishes this panel as an NDI source and stops it again.

• Two icon buttons next to the connection chip: Copy link, which copies the display-mode link to the clipboard, and a play button, which opens this panel in display mode in a new tab. The play button is the quickest way to see the panel exactly as the operator will.

• A more-options menu holding Duplicate Panel, Copy Link and Delete Panel, with Audio Countdowns added at the top only on a panel that uses audio. Duplicate Panel is unavailable while the panel has unsaved changes, and says so in a tooltip; Delete Panel is unavailable on a read-only preset.

• The ? help menu, and an Offline chip whenever Viz Mosart is unreachable.

Panel properties

With no item selected, the right pane opens on its Panel tab. These settings apply to the canvas and govern the whole panel. Selecting an item switches the pane to the Component tab, and you can open Panel again at any time.

Working with 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. Drag an item type from the palette onto an empty cell, or click the item type and then click an empty cell. When you click first, the cursor carries a preview until you place the item or press Escape. Either way its settings appear in the properties pane.

Selecting an item. Click it on the canvas, or its entry in the Layers 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 Layers list.

Deleting an item. Select it and press Delete, or use the Delete action in the Layers list.

The Layers list. Every placed item appears in this searchable list, in the left column under the palette. 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. Drag a row by its handle to change the stacking order. Each row has an options menu with Copy, Duplicate and Delete, and the list header has one with Copy all, Paste and Clear all.

Item properties

Custom name, Show name and Padding are offered on every type, and every item takes its position and size from the grid. The colour and font controls below are offered on a Timer, Label, Text or Button only: an Image has a Background color of its own and no text controls, and a Widget, Fader, Toggle or Live item has neither.

• Custom name and Show name: the name used in Layers, and whether it is also drawn on the item itself.

• Background color and Text color, entered as hex values. Background color also offers a Make transparent checkbox.

• Font weight (normal or bold) and Text alignment (left, center or right). Text alignment is not offered on a Button.

• 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.

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 drop-down. There are twenty-one:

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. The same checkbox is offered on a Label, so a label that reports a negative value can carry the same background change.

Clock values

Two of the timer types show a wall clock rather than a duration: Time of Day and Next Break Time. Both follow the time zone of the machine the panel is open on, so a panel on a studio screen in another region reads the local time there rather than the automation system's. They are written according to that browser's language settings, always with a two-digit hour.

An administrator can change both of those choices for the whole installation, selecting the Viz Mosart server's time zone instead, or setting the format explicitly with a 12 or 24 hour clock and a regional format. The controls are on the Smart Panel tab of App Configuration in the Configuration Tool; see App Configuration. A panel reads them when it loads, so reload a panel that is already open after they change.

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:

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 Custom text, 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.

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.

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 drop-down. Each sub-widget adds its own properties below the drop-down.

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.

• Status 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. In display mode, and in the editor's Preview, a row is also a take: tapping it takes that asset, a template for a rundown asset and the graphic for a Media Sequencer source. As with a Button there is no confirmation, so place an Asset List where an operator will not brush it under pressure.

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.

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, the current level in dB below the name, and the track and its scale beneath them, 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.

Button

The main interactive item. A button first picks what it talks to, then what it sends.

Choosing the target

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&param2=value2). For example engine_switcher needs 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.

Two-state buttons

A button can carry a second action. Turn on Two-state button and the properties pane adds Second label (optional), shown while the button is armed for its second action, and a second set of command options. The first tap sends the first action, the next tap sends the second, and the button then resets to the first state. Both halves take the full range of targets and commands, so one cell can hold a take and its matching take out.

If you leave Second label (optional) empty, the button keeps its ordinary label in both states, so give it a second label whenever the operator needs to see which action the next tap will send.

Appearance

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.

Toggle

A control with two states that reflects the current state in Viz Mosart as well as changing it, so the operator can see at a glance which way it is set and does not have to look elsewhere to confirm it. That reading back of the state is what separates a Toggle from a Button: a plain Button can also have two states, but it never shows you what Viz Mosart currently thinks.

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.

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 is a radio group with four choices:

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.

Running a Panel On Air

To check a panel while you are still designing it, switch the app bar from Edit to Preview, or use the play button in the app bar to open it in display mode in a new tab.

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. A two-state button sends its second action on the next tap, then resets.

• Faders apply level changes as they are dragged, but only while the Viz Mosart audio mixer is connected. Otherwise the fader is dimmed and its handle will not move, and tapping the handle reports why: the audio mixer is not configured on the Mosart Server, is in standby, or is not connected.

• Display mode has no app bar, so there is no Offline chip there. If the connection drops, live values are silently replaced by placeholders and commands may fail until it returns. Put a Connection Status widget on any panel that runs unattended so the operator can see the state on the panel itself.

Where authentication is enabled, a panel holds its sign-in for as long as its page is open, so running a panel on air does not put a sign-in dialog over the controls: the session does not expire under the operator. An administrator can choose to let Smart Panel time out when idle instead, in which case a warning appears before it does; see Setup and Administration of Smart Panel.

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.