Edit Mode

Once a CustomPanel is created, you can add device controls and components using Edit Mode. Edit Mode is not activated when you first create or open a CustomPanel.

To enter or exit Edit Mode:

In the top toolbar, click PanelBuilder Edit Mode.

Alternatively, you can press CTRL+G.

The Edit Mode Toolbar

The Edit Mode toolbar ((Figure 1.5)) consists of buttons that enable you to create, resize, reposition, and configure components, timers, and parameters. The selection of buttons varies depending on whether a data source is associated with the CustomPanel. There are also special buttons for panels that contain controls for NK routers.

EditMdeTlbrPart.png                EditMdeTlbr.png               EditMdeTlbrNK.png

Figure 1.5  - Three Versions of the Edit Mode Toolbar (without associated data source, with associated data source, and including router control buttons)

Table 1.1 describes the buttons that are always available in the edit mode toolbar.

Table 1.1  - Buttons that are Always Available on the Edit Mode Toolbar

Button

Description

button_arrow.png 

Click on components — This pointer mode enables you to manipulate components as though PanelBuilder was not in Edit Mode.

For example, in Click Component mode you can push buttons or switch between tabs in a tab group.

button_select.png 

Select/Drag Components — This pointer mode enables you to select components while in Edit Mode. Double-click a component to open the Edit Component window.

Tip: To select a tab, click the tab panel, and then Ctrl+click the tab you want to select.

button_move.png 

Move Components — This pointer mode enables you to reposition components.

Drag components to reposition them. Repositioning does not move a component in or out of a containing element such as a tab or canvas. To move a component from one container to another, cut and paste the component.

button_resize.png 

Resize Components — This pointer mode enables you to resize components.

Drag the corners of components to resize them.

button_tabSplit.png 

Tab and Split — Reveals toolbar buttons used to create tab components and split panels.

button_tab.png 

Tab — Inserts a tab component.

Tabs enable you to include make efficient use of limited screen space.

For more information, see Tab Groups.

button_splitPane.png 

Split Pane — Inserts a split panel.

A split panel consists of two canvas-like areas (panels) with a split bar between them. Each panel is a dropspot that can contain components. Users can move the split bar to adjust how much of each panel is shown.

For more information, see Split Panels.

button_basicCanvas.png 

Basic Canvas — Inserts a basic canvas region.

Canvases are used to group components. Items placed on a canvas move with the canvas.

For more information, see Basic Canvases.

button_image.png 

Image — Inserts a canvas that has a background image.

For more information, see Image Canvases.

button_gridsTables.png 

Grids / Tables — Reveals toolbar buttons used to create tables, simple grids, and flow panels.

button_table.png 

Table — Inserts a table with a specified number of rows and columns.

Use tables to align and position multiple rows and columns of components on a single CustomPanel.

For more information, see Tables.

button_smplGrid.png 

Simple Grid — Inserts a simple grid, which is like a table in which each cell is the same size.

For more information, see Simple Grids.

button_wrap.png 

Wrap Content — Inserts a flow container, which is like a table. As you add components to a flow container, each is added to the right of the previous one. When a row is filled, additional components appear in the next row.

For more information, see Flow Containers (Wrap Content).

button_label.png 

Label — Inserts a text field, known as a label.

Labels are read-only for users and can be used to identify components or provide information. Labels can also be associated with a list of tasks which are performed when the user clicks the label.

For more information, see Labels.

button_button.png 

Button — Inserts a button.

Buttons can also be associated with a list of tasks which are performed when the user clicks the button.

For more information, see Buttons.

button_lines.png 

Lines — Inserts a line segment.

Line segments can be single lines, compound lines with 90degree bends, diagonal lines, or closed shapes.

For more information, see Line Segments.

button_pnlLnk.png 

Panel Link — Inserts a link to another DashBoard panel, such as a device editor or another CustomPanel.

Device editors enable you to view and modify configuration settings for the device.

For more information, see Links to Device Editors or Other CustomPanels.

button_brwsr.png 

Browser — Displays a web page, based on a URL you provide.

Web pages are fully functional, but do not include typical browser features such as an address bar or forward and back buttons.

For more information, see Web Browser Instances.

button_NDI.png 

NDI — Inserts a panel that displays NDI™ video.

For more information, see NDI Video Panels.

button_timers.png 

Timers — Allows you to add or edit timers.

Timer data can be displayed on labels. Timers can also trigger tasks.

For more information, see Timers.

If the CustomPanel is associated with one or more data sources, the Edit Mode toolbar includes additional buttons for creating objects that display and/or manipulate data parameters. Data sources include devices from which controls have been imported, and XML data files that have been associated with the panel.

If your panel uses a device as a data source, but is not associated with an XML data file, the Edit Mode toolbar includes only one additional button: Data Sources.

Table 1.2 describes buttons for creating components associated with a data source.

Table 1.2  - Buttons for Creating Components Associated with a Data Source

Button

Description

button_widget.png 

Widget — Inserts a pre-built widget into the CustomPanel.

For more information, see Widgets.

button_dataParam.png 

Param — Reveals toolbar buttons used to create components related to data sources and parameters.

button_dataDsplyParam.png 

Display or edit a parameter backed by your data source — Displays a parameter on the CustomPanel.

Drag to define the area, and then specify the parameter to display. You can also allow users to change the parameter value.

For more information, see Parameter Displays.

button_dataLbl.png 

Label — Inserts a label showing data from a parameter.

You can select an existing parameter, or create a new one. Data-backed labels are read-only to the user.

For more information, see Data-Backed Labels.

button_dataTxtFld.png 

Insert an editable text area backed by your data source — Inserts an editable text field.

You can format the text field using the options provided by the data source library. The entered data is stored in the associated parameter.

For more information, see Editable Text Areas.

button_dataChce.png 

Insert a choice (list, toggle buttons, or radio buttons) backed by your data source — Inserts a list, toggle, or radio button group on your CustomPanel.

The selected data is associated with a parameter from the data source.

For more information, see Option Choice Controls.

button_dataNum.png 

Insert a number (slider, counter, etc.) backed by your data source — Inserts a numerical entry component.

Various formats are available (text entry, sliders, faders, etc.) that allow you to customize how the user enters numeric data. The entered data is stored in the associated parameter.

For more information, see Numeric Choice Controls.

button_dataTogChce.png 

Insert a Toggle Choice (checkbox or single toggle button) backed by your data source — Inserts a toggle component.

This component requires the user to make a choice between two states. Choose between check boxes and toggle switches to customize how the user selects a state. The selected state data is stored in the associated parameter.

For more information, see Toggle Choice Controls.

button_params.png 

Add or modify data parameters in your data source — Opens the Add/Edit Parameters window, which lists parameters from your XML data source, and enables you to edit their properties.

Parameters are local variables. You can modify them programmatically, or allow users to modify them.

For more information, see Parameters and Data Sources.

button_datasrcs.png 

Modify data sources for your CustomPanel — Opens the Data Sources window, which lists data sources associated with the CustomPanel, and enables you to edit them.

For example, you can create a CustomPanel based on a particular production switcher, then re-associate the panel with another switcher.

For more information, see Parameters and Data Sources.

Table 1.3 describes buttons for creating NK Router control components.

Table 1.3  - Edit Mode Toolbar Buttons for Adding Router Controls

Button

Description

button_NK_NK.png 

NK NK — Reveals toolbar buttons used to create components related to router control.

For more information, see NK Series Router Control Panels.

 

button_NK_IPS.png 

Insert a list of IPS selectors — An IPS selector list enables you to choose a set of routers to control.

button_NK_DST.png 

Insert a list of destinations — Destinations are video router outputs.

button_NK_SRC.png 

Insert a list of sources — Sources are video router inputs.

button_NK_Lvl.png 

Insert a list of levels — Levels ensure that a certain set of inputs can only be routed to a certain set of outputs.

button_NK_Func.png 

Insert a function button (chop, take, configure, etc) — Functions are router commands.

button_NKlvlStatus.png 

Insert a level status table — The level status table lists levels and the sources and destinations associated with them.