This page walks you through opening Smart Panel, recognizing the main views, the core terminology, and building and running your first panel.

For an overview of Smart Panel and where it fits, see the Smart Panel introduction.

Open Smart Panel

Smart Panel runs in a web browser. Open it at http(s)://<server>:55142/smartpanel (port 55143 for HTTPS), where <server> is the hostname or IP of the Mosart Web Apps host. Your administrator may have changed those ports.

You can also open Smart Panel from Home in the Configuration Tool. On a multi-studio site that page shows a section per studio, and Smart Panel is studio scoped, so the card launches against the studio you have selected.

Smart Panel is one of the Mosart Web Apps, so the same host serves the other apps in the suite, and switching between them does not require signing in again.

Signing in and what you are allowed to do

Whether you sign in depends on how your administrator configured Mosart Web Apps:

  • Authentication off (the default install): you reach Smart Panel without signing in, and everyone has full control. Command buttons may still fail to reach the Viz Mosart server if it requires an API key.

  • Authentication on: the first time you open the page you are redirected to your organization's identity provider and signed in there. What you can do then depends on your role.

Role

What you can do

smartpanel-admin

Full control: create, edit, duplicate and delete panels, as well as run them.

smartpanel-viewer

Open and use panels, but not edit them. Opening a panel takes you straight to display mode.

Roles are granted in your identity provider, not in Smart Panel. If you sign in and are told you do not have access, you are authenticated but have not been given either role: ask your administrator. For the administrator's side of this, see Setup and Administration of Smart Panel.

Once signed in, a Smart Panel holds its sign-in for as long as its page is open. It is not signed out for inactivity, so a panel left running on a control room or studio screen stays usable through a show without anyone touching it. An administrator can choose to let Smart Panel time out when idle instead; see Setup and Administration of Smart Panel.

If a panel does show You will be logged out soon, or Session timeout! once it has expired, either that setting has been turned on for Smart Panel, or the browser could not reach the Mosart Web Apps host for longer than the configured session length.

Note: If Smart Panel opens but an Offline chip stays in the app bar, the connection to Viz Mosart could not be established. You can still design panels, but live values are replaced by placeholders. See the troubleshooting notes in Setup and Administration of Smart Panel.

Tour of the Interface

Smart Panel has three main views.

Landing page

At /smartpanel, this lists the saved panels under the heading Your panels. From here you create a new panel or open an existing one.

  • Click a panel to open it. If you can edit, it opens in the editor; if you can only view, it opens in display mode.

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

  • Each card has a Copy link button, for handing the panel to whoever needs to run it.

  • The card's options menu offers Display mode, Duplicate Panel and Delete Panel.

  • New opens the Create new panel dialog, where you start from a Blank panel or from one of the ready-made panels under Use a preset. The button is shown only to a user who can edit panels.

Panel editor

At /smartpanel/<panel>/edit, this is where you design a panel. It has four areas:

  1. App bar (top): a back arrow, the panel name (click to rename), an Edit and Preview switch so you can try the panel without leaving the editor, a Copy link button and a play button that opens the panel in display mode in a new tab, Save, an NDI Stream control for publishing the panel as an NDI source, a more-options menu holding Duplicate Panel, Copy Link and Delete Panel, and the ? help icon. An Offline chip appears here when Viz Mosart is unreachable.

  2. Components palette (left): the nine item types you can place on the canvas, namely Timer, Label, Text, Image, Widget, Fader, Button, Toggle and Live. Below it, in the same column, the Layers pane lists everything already on the panel. Drag the divider between them to give Layers more room.

  3. Canvas (center): the panel grid. Click a palette item, then click an empty cell to drop it. Click an existing item to select it.

  4. Properties pane (right): headed Properties, with two tabs. Component holds the settings of the selected item, and Panel holds the settings of the whole panel. Selecting an item switches the pane to Component, and clearing the selection switches it back to Panel.

Tip: Both side panes can be resized by dragging their inner edge, and pressing K shows the keyboard shortcuts.

Display mode

At /smartpanel/<panel>, without /edit, the panel runs touch-friendly and full-width, ready for the operator's screen. This is what you use on air, and it cannot be edited. Reach it from the Display mode action on the panel card, or from a copied link. For a completely bare screen, use the browser's own full-screen mode.

Help menu

The ? icon at the top right of every page opens the help menu:

Option

Opens

Keyboard shortcuts

The shortcut reference. Also available by pressing K.

Documentation

This Smart Panel user documentation.

What's new

The release notes for the current version.

Give feedback

An email to the Smart Panel team ([email protected]).

About

Smart Panel version and build information.

User avatar. When you are signed in, your avatar appears at the top right next to the help icon. Click it for your account and to sign out. Smart Panel shares its identity provider with the other Mosart Web Apps, so signing in or out applies to them all in the same browser session.

Key Terms

Term

Meaning

Panel

A single panel design: a grid of items plus its own name, aspect ratio, background, padding and font size presets. Stored on the server, so everyone who can reach it sees the same panel.

Item

One thing on a panel: a button, timer, label, image, fader, and so on.

Edit mode

The panel open at /smartpanel/<panel>/edit, with the app bar, the palette and the properties pane.

Display mode

The panel open at /smartpanel/<panel>, with no /edit. This is what you run on air, and it cannot be edited.

Grid

The rows and columns the canvas is divided into. Items snap to cells. Set on the Panel tab.

Aspect ratio

The shape of the canvas. Choose a preset, set a custom ratio, or pick None to stretch to fit the window. Set per panel on the Panel tab, so each panel suits its target screen.

Panel tab

The Panel tab of the Properties pane, opened automatically when no item is selected. Controls background color, default items padding, grid size, aspect ratio and the font size presets that items refer to as S, M and L.

Component tab

The Component tab of the Properties pane, opened automatically when an item is selected. Controls its text, color, font, padding, command binding and any type-specific options, and its header carries Duplicate plus an item actions menu with Copy and Delete.

Layers

The searchable list of every item on the panel, in the left column under the palette. Useful when items overlap or the panel is busy, and drag a row by its handle to change the stacking order.

Offline

A chip in the app bar meaning the connection to Viz Mosart is not established. Live data is replaced with placeholder values so you can keep designing.

Preset panel

A read-only starting point offered under Use a preset in the Create new panel dialog. What you create from one is a normal, editable panel.

Your First Panel

A short walk-through that uses every core concept once. It assumes Smart Panel is connected to a working Viz Mosart system. If the Offline chip is showing you can still complete the design steps, and only the last step needs a live server.

  1. Create a panel. On the landing page, click New, choose Blank panel, name it My first panel and click Create. Smart Panel opens it in the editor.

  2. Set the canvas shape. With nothing selected, the right pane opens on its Panel tab. Pick an Aspect ratio that matches your target screen, for example a landscape ratio for a wall-mounted touch monitor. The same choice is offered in the Create new panel dialog when you start from a blank panel. Leave the grid as it is for now.

  3. Add a take button. Click Button in the palette. The cursor picks up a preview. Click an empty cell near the bottom of the canvas to drop it, and its settings open on the Component tab on the right. Set the Label to Take, leave the target as Mosart, set the command type to Template, choose Program as the output, then pick any template from the picker, for example a camera template.

  4. Add a story countdown. Click Timer in the palette, then click a cell at the top of the canvas. On the Component tab, choose Current Item Countdown from the Timer drop-down. The item shows a placeholder countdown, or a live one if Viz Mosart is connected.

  5. Add a label. Click Label, click a cell next to the timer, and choose Current Item Slug so it shows the name of the on-air item. Set Font size to M.

  6. Try it without leaving the editor. Switch the app bar from Edit to Preview. The palette and handles step out of the way so you can see the panel as an operator would.

  7. Save. Click Save in the app bar. The panel is stored on the server, and anyone who can reach it can now open it.

  8. Run it. Go back to the landing page and choose Display mode on your panel's card, or use Copy Link and open that link on the operator's screen. Tap the take button and, with Viz Mosart connected, it sends the template you bound in step 3.

You have now built and operated your first panel. To go deeper into any step, see Working with Smart Panel.