Adding Basic Components

This section includes generic steps for creating basic components such as basic canvases, tabs, split panels, image canvases, tables, labels, buttons, line segments, web pages, and links to devices and to other CustomPanels. These basic components do not use data sources.

For More Information on...

For information about data-backed objects, see Adding Data-Backed Components

To add a component:

1.With the CustomPanel open, enter PanelBuilder Edit Mode.

Tip: To enter Edit Mode, press CTRL+G.

2.On the Edit Mode toolbar, click the button corresponding to the type of component you want to add.

For a list of Edit Menu buttons, see The Edit Mode Toolbar.

3.On the CustomPanel, click and drag to specify the area of the new component ((Figure 1.12)).

Note: Do not drag Edit Menu buttons onto the panel. Click and hold where you want one corner of the component to appear, and drag to define the shape and size of the new component.

defnCompArea.png 

Figure 1.12  - Adding a Component (with Lines button selected, dragging to define line boundaries)

The Insert into Component dialog appears.

4.Specify the properties as required.

Which properties appear in the Insert into Component dialog box depends on the type of component you are adding.

5.Click OK.

The component appears on the CustomPanel.

For More Information on...

For detailed information about each type of component, see the corresponding section:

Basic Canvases

Tab Groups

Split Panels

Image Canvases

Tables

Simple Grids

Flow Containers (Wrap Content)

Labels

Links to Device Editors or Other CustomPanels

Buttons

Line Segments

Web Browser Instances

For information about customizing components by editing their attributes, see Editing Components.

Basic Canvases

A canvas is an area that can contain other components, including other canvases. Canvases are used to group components. When you reposition a canvas, its components move with it.

To create a basic canvas area:

1.On the Edit Mode toolbar, click the Basic Canvas button.

2.Drag a box on the panel to define the canvas area. The area outlined in green in (Figure 1.13) is a basic canvas area.

defnBlnkCnvs.png 

Figure 1.13  - Adding a Basic Canvas (with Basic canvas button selected, dragging to define canvas area)

Tip: After you create a canvas, by default it does not include a border or fill, so it may be difficult to find in the CustomPanel. To locate the canvas, hover the mouse pointer over the area until a white border appears around the canvas area.

Editing Basic Canvas Attributes

After you create a basic canvas, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For basic canvases, the Edit Component window contains the following tabs:

Abs Attributes Tab — For more information, see Abs Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Source Tab — For more information, see Source Tab.

Style Tab — For more information, see Style Tab.

For more information about using the Edit Component window, see Editing Components.

Tab Groups

A tab group contains one or more tabs, which can contain other components.

Tips about Tabs:

Tab placement — When you create a tab group, you specify what side of the tab group the tabs appear on.

If you select the center option, the tab group does not include any tabs. It is like a set of stacked canvases. You can use scripting to switch which tab is on top. This allows you to use a single area for many purposes.

Selecting a tab to edit — To select a tab in Edit Mode, press CTRL and click the tab you want to edit.

To create a tab group:

1.On the Edit Mode toolbar, click the Tab button.

Tip: If the Tab button is not visible, click the Tab and Split button to reveal the Tab button.

2.Drag a box on the panel to define the tab group area.

The Insert into Component dialog appears.

3.Specify the tab placement and number of tabs.

4.If you want each tab to contain a basic canvas, select the Create blank canvases in tabs option.

If you do not select this option, when you later add a component to a tab, the component resizes to occupy the entire tab area.

5.Click OK.

Tip: By default, the tabs are located along the top edge of the canvas.

The tab group appears. (Figure 1.14) shows a tab group with three tabs.

emptyTabGrp.png 

Figure 1.14  - An empty tab group

Editing Tab Group Attributes

After you create a tab group, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For tab groups, the Edit Component window contains the following editing tabs:

Tab Attributes Tab — For more information, see Tab Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Image Canvases

An image canvas displays an image behind all the other components on the canvas. The image can be a .jpg, .png, or .gif file.

To create an image canvas:

1.On the Edit Mode toolbar, click the Image button.

2.Drag a box on the panel to define the canvas area.

The Insert into Component dialog appears.

3.From the Background Color list, select a color to fill the area with the specified color. Select [no color] if you do not want to apply a fill.

4.In the Background (URL) box, specify the file you want to display in the canvas area.

5.From the Background Fill list, select one of the following options to specify how the image is formatted:

Crop — Fills the entire area with the image while maintaining the aspect ratio. Crops areas that do not fit.

None — Does not resize the image in any way.

Horizontal — Stretches the image to fit the horizontal space.

Vertical — Stretches the image to fit the vertical space.

Shrink — If the image is too large to fit, scales the image. If the image is too small, does not resize.

Fit — Scales the image to fit, while maintaining the aspect ratio.

Tile — Repeats the image as a series of tiles to fill the space.

Both — Stretches the image horizontally and vertically to fill the space.

Paint9 — Divides the image into nine areas (defined with Background Insets) to define fixed corners, vertically or horizontally stretched sides, and a stretched center.

6.From the Background Alignment list, select and alignment option to specify how the image appears within the canvas area.

7.Click OK to apply the changes.

The image canvas appears. (Figure 1.15) shows an image canvas with an image of a production switcher.

imgCnvs.png 

Figure 1.15  - Adding an Image Canvas, showing a picture of a Ross Video Acuity production switcher

Editing Image Canvas Attributes

After you create an image canvas, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For image canvases, the Edit Component window contains the following tabs:

Abs Attributes Tab — For more information, see Abs Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Split Panels

A split panel has vertical and/or horizontal split bars which partition it into smaller panels. Each panel can in turn be split, and can contain other components. The user can move the split bars to adjust how much of the split panel area is dedicated to each panel.

Tips about Split Panels:

Selecting all or part of a split panel — As you hover over a split panel, a border appears, indicating which component is selected. The component can be the entire split panel area, an individual panel, or both parts of a split panel. To select both parts of a split panel, hover over the bar between the two panels.

To create a split panel:

1.On the Edit Mode toolbar, click the Split Pane button.

Tip: If the Split Pane button is not visible, click the Tab and Split button to reveal the Split Pane button.

2.Drag a box on the panel to define the split panel area.

The Insert into Component dialog appears.

3.In the Orientation list, specify whether you want split the panel horizontally or vertically.

4.Drag the Division slider to specify the default position of the split bar.

Tip: For vertically-split panels, lower values position the bar toward the top. For horizontally-split panels, lower values position the bar toward the left.

5.If you want both parts of the split panel to contain a basic canvas, select the Create blank canvases option.

If you do not select this option, when you later add a component to one of the two panels, the component resizes to occupy the entire panel.

6.Click OK.

The split panel appears. (Figure 1.16) shows a split panel, with different background colors for each pane.

addSplPnl.png 

Figure 1.16  - Adding a Split Panel

7.If you want to split a panel, click it and then specify the orientation and position of the new split bar.

Editing Split Panel Attributes

After you create a split panel, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For split panels, the Edit Component window may contain the following tabs:

Split Attributes Tab — For more information, see Split Attributes Tab.

Dropspot Attributes Tab — For more information, see Dropspot Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Tables

A table is a grid of cells to which you can add other components. Each cell is a dropspot. Tables enable you to neatly arrange small components such as buttons and status indicators.

Tips about Tables

Deleting table cells — If you delete all the cells in a row or column, the remaining cells expand to fill the table area.

Table of Buttons — When you create a table, you can specify that it be filled with buttons. This is useful for creating a control panel with perfectly identical buttons. After you create the table of buttons, you can edit them individually to define their names, button types, tasks, etc. For more information, see Editing Button Attributes:.

Selecting a table or table cell — As you hover over a table, a border appears, indicating which component is selected. The component can be the entire table or an individual table cell.

Table formatting — Right-click a table cell to access the following formatting options:

Set all cell sizes to selection — Makes all cells the same size. If you display parameters in table cells, the cells resize to fit the parameter text. This option makes them all the same size.

Insets — Provides options for adding padding to individual cells or all cells. You can also remove padding from individual cells or all cells.

Add Row(s) — Adds one or more empty rows to the bottom of the table. You can choose whether the table stays the same size (cells shrink), or grows to accommodate the new row(s).

Duplicate Row — Creates one or more duplicates of the current row, including all cell contents. You can choose whether the table stays the same size (cells shrink), or grows to accommodate the new row(s).

Remove Row(s) — Deletes the current row.

Lock all proportions — The table and its cells automatically scale as the DashBoard window is resized. This option is useful for accommodating different screen sizes and resolutions.

Unlock all proportions — The table and its cells maintain their current sizes and shapes. This option is useful for ensuring a consistent visual display.

Delete — Deletes the selected cell. Cells to the right of the deleted cell shift left.

Note: There are many other formatting options available through the Edit Component window. Double-click a cell to edit its properties.

To create a table:

1.On the Edit Mode toolbar, click the Table button.

Tip: If the Table button is not visible, click the Grids/Tables button to reveal the Table button.

2.Drag a box on the CustomPanel to define the table area.

The Insert into Component dialog appears.

3.Specify the number of rows and columns in the table.

4.If you want all the table cells to contain buttons, select the Fill with buttons box.

5.If the table is going to be populated by parameter values and you want to limit the number of columns in the table, set Max Elements Per Row.

For example, this option is useful if you want to create a table of buttons, each of which includes a choice as defined in a parameter with nine values. Create a one-cell table and set Max Elements Per Row to 3. Drag the parameter onto the table, setting it as a choice list, with the Keep returned elements together option unselected. The table will have three rows of three buttons, each of which contains one of the nine choices defined in the parameter.

6.Click OK.

The table appears. (Figure 1.17) shows a table with three rows and three columns.

Each cell contains an X to indicate that it is empty.

addTable.png 

Figure 1.17  - Adding a Table

Editing Table Attributes

After you create a table, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For tables and table cells, the Edit Component window may contain the following tabs:

Table Attributes Tab — For more information, see Table Attributes Tab.

Container Attributes Tab — For more information, see Container Attributes Tab.

Dropspot Attributes Tab — For more information, see Dropspot Attributes Tab.

Tr Attributes Tab — For more information, see Tr Attributes Tab.

Abs Attributes Tab — For more information, see Abs Attributes Tab.

Table Cell Attributes Tab — For more information, see Table Cell Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Simple Grids

A simple grid is like a table, but with all cells the same size. Each cell is a dropspot into which you can insert other components.

When you create a simple grid, you specify the number of rows and/or columns. If you insert more components than there are cells in the grid, additional columns are created.

We recommend you specify the number of rows and columns when you create the simple grid. Otherwise, the simple grid has only one row and it divides into equal-width columns as you add components.

To create a simple grid:

1.On the Edit Mode toolbar, click the Simple Grid button.

Tip: If the Simple Grid button is not visible, click the Grids/Tables button to reveal the Simple Grid button.

2.Drag a box on the CustomPanel to define the grid area.

The Insert into Component dialog appears.

3.Beside Rows and/or Columns, select Override Default, and then specify the number of rows and/or columns you want in the simple grid.

4.Click OK.

The simple grid appears. The rows and columns are not apparent until you insert components.

Editing Simple Grid Attributes

After you create a simple grid, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For simple grids, the Edit Component window may contain the following tabs:

Simplegrid Attributes Tab — For more information, see Simplegrid Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Flow Containers (Wrap Content)

A flow container is like a table, but without a predefined number of rows and columns.

When you create a flow container, you can specify whether to keep all components widths and/or heights the same.

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.

To create a flow container (wrap content):

1.On the Edit Mode toolbar, click the Wrap Content button.

Tip: If the Wrap Content button is not visible, click the Grids/Tables button to reveal the Wrap Content button.

2.Drag a box on the CustomPanel to define the flow container area.

The Insert into Component dialog appears.

3.If you want the components to be neatly aligned along the right or left edge of the container, or centered within the container, specify the Horizontal Alignment accordingly.

4.If you want the widths of all components in the container to be the same, select Keep all widths the same.

All component widths will match the width of the widest one.

5.If you want the heights of all components in the container to be the same, select Keep all heights the same.

All component heights will match the height of the tallest one.

6.If Keep all widths the same is selected, and you want all the components to fill a single row if possible, select Fill single line if possible.

If the components widths are small enough that the components can all fit on one row with extra space, the widths are expanded to fill the row.

7.Click OK.

The flow container appears. No rows or columns are apparent until you insert components.

Editing Flow Container Attributes

After you create a flow container, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For flow containers, the Edit Component window may contain the following tabs:

Flow Attributes Tab — For more information, see Flow Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Labels

Labels are blocks of stand-alone text. Labels can be used as headers or banners anywhere on the CustomPanel, positioned beside components to provide descriptions of the component function, or added anywhere to provide additional information.

You can also assign tasks to a label, so that PanelBuilder performs the tasks when a user clicks the label. For more information, see Assigning Tasks to Buttons, Labels, and Timers.

To create a label:

1.On the Edit Mode toolbar, click the Label button.

2.Drag a box on the panel to define the label area.

The Insert into Component dialog appears.

3.In the Name box, type the text you want to appear on the label.

4.In the ID box, specify an ID (optional).

IDs are used in scripts to refer to objects. If no scripting is required, you do not need to specify an ID.

5.In the Text Alignment box, specify how to align the text within its box.

6.If you want to format the text as a banner, select the Header box.

The background of the label area is automatically set to blue and the text is set to white.

7.Click OK.

The label appears. (Figure 1.18) shows a label with a red background.

Tip: By default labels have no borders. You can edit the border settings to create a border around the label.

addLabel.png 

Figure 1.18  - Adding a Label

Editing Label Attributes

After you create a label, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For labels, the Edit Component window contains the following tabs:

Label Attributes Tab — For more information, see Label Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Links to Device Editors or Other CustomPanels

You create a link that, when clicked by the user, automatically opens a device editor or another CustomPanel in the Device View.

Tips About Links:

You can create link areas over an image canvas, to add links to a picture. When editing the link, on the Tag Attributes tab set Button Style to Label. On the Style tab, set Background Fill to None.

To create a link:

1.On the Edit Mode toolbar, click the Panel Link button.

2.Drag a box on the panel to define the link area.

The Insert into Component dialog appears.

3.If you want to link to a device editor, in the All Connections list, double-click the device node to which you want to link.

Tip: The All Connections list shows the contents of your DashBoard client’s Tree View.

4.If you want to link to a CustomPanel, do one of the following:

In the File Navigator list, double-click the CustomPanel (.grid file) to which you want to link.

In the Local File area, browse to the CustomPanel (.grid file) to which you want to link.

5.Specify whether the link should appear as a button or as a label.

6.Click OK.

The link button or label appears.

Tip: By default there is no text on link buttons or labels, and link labels have no borders. This is useful for creating invisible link areas. If you want the link to be visible, you can edit the link name to add text, and edit the border settings to create a border.

Editing Link Attributes

After you create a link, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For links, the Edit Component window contains the following tabs:

Tag Attributes Tab — For more information, see Tag Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

 

Buttons

Buttons are controls you can add to CustomPanels to enable users to send commands or perform tasks.

This section describes how to create buttons on CustomPanels. For information about how to configure buttons to perform specific tasks, see Assigning Tasks to Buttons, Labels, and Timers.

You can create single buttons, or groups of buttons (table of buttons).

To create a single button:

1.On the Edit Mode toolbar, click the Button button.

2.Drag a box on the panel to define the button area.

The Insert into Component dialog appears.

3.In the Name box, type the text you want to appear on or beside the button.

4.In the ID box, specify an ID (optional).

IDs are used in scripts to refer to objects. If no scripting is required, you do not need to specify an ID.

5.In the Type list, click a button type:

Push — When clicked, PanelBuilder performs the assigned tasks.

The visual appearance of the button changes momentarily while it is being clicked, and then reverts to its default appearance when it is released.

Toggle — When clicked, switches between two states (ON and OFF).

When the button changes state, PanelBuilder performs the assigned tasks. Alternatively, you can create a script that detects the state change and performs tasks based on which state has been activated.

Tip: The visual appearance (style) of the button can be different for each of three states (Default, Toggle On, and Toggle Off). Toggle button styles are defined on subtabs of the Style tab, in the Edit Component window.

Checkbox — When clicked, switches between two states (ON and OFF).

When the button is ON, the check box contains a check mark. When the button is OFF, the check box is empty.

When the button changes state, PanelBuilder performs the assigned tasks. Alternatively, you can create a script that detects the state change and performs tasks based on which state has been activated.

Tip: The visual appearance (style) of the button can be different for each of three states (Default, Toggle On, and Toggle Off). Checkbox button styles are defined on subtabs of the Style tab, in the Edit Component window.

Radio — When clicked, switches between two states (ON and OFF).

When the button is ON, the round button is filled. When the button is OFF, the round button is empty. When the button changes state, PanelBuilder performs the assigned tasks. Alternatively, you can create a script that detects the state change and performs tasks based on which state has been activated.

6.If you do not want the button to have a three-dimensional visual effect, select the Flat Look box.

7.Use the options in the Task area to configure the button to perform one or more tasks when the user selects it. For more information, see Assigning Tasks to Buttons, Labels, and Timers.

8.Click OK.

The button appears. (Figure 1.19) shows the toolbar and various types of buttons.

addBttns.png 

Figure 1.19  - Adding Buttons

To create a group of buttons:

1.Create a table and select the Fill with buttons option.

For more information, see Tables.

2.Edit the buttons individually to define their names, button types, tasks, etc.

Editing Button Attributes:

After you create a button, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it.

For single buttons and grouped buttons, the Edit Component window may contain the following tabs:

Button Attributes Tab — For more information, see Button Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

Table Cell Attributes Tab — For more information, see Table Cell Attributes Tab.

For more information about using the Edit Component window, see Editing Components.

Line Segments

You can create line segments on CustomPanels.

When you create a line segment, you define the area it occupies. By default, the line extends from the top left corner of the area to the bottom right corner, and has an arrow at the bottom right end. The line has three nodes: one at the start, one where it bends, and one at the end. You can move the nodes, and also insert additional nodes to extend the line path.

To create a line segment:

1.On the Edit Mode toolbar, click the Insert line segments button.   

   

2.Drag a box on the panel to define the line segment area.

A line appears, with three nodes, as shown in (Figure 1.20).

lineSegs.png

Figure 1.20  - Creating a Line Segment

3.Modify the line segment as desired, in any of the following ways:

Change the size and proportions of the line by resizing its container:

On the Edit Mode toolbar, click the Resize components button, and then drag the sides and corners of the line segment box.

Select a node:

Point at a node and then press Ctrl+click.

Reposition a node:

Point at the node, press and hold Ctrl+click, and drag the node.

Add a node at the end of the line:

Point to where you want the new node, and the press Ctrl+double-click. The line extends to the new node.

Add a node along the line:

Point to a node adjacent to where you want the new node, and then press Ctrl+double-click. The new node is created in the same position. Reposition the new node.

Delete a node:

Point at the node, press Ctrl+click to select the node, and then press Delete.

Delete the entire line segment:

On the Edit Mode toolbar, click the Select/Drag Components button, click the line segment, and then press Delete.

To further modify a line segment using the Edit Component dialog:

1.In the Edit Mode toolbar, click the Select/Drag components button, double-click the line segment to open the Edit Component dialog, and then click the Source tab.

The source code that defines the line segment appears. A line segment consists of a lines element which contains two or more point elements. The line extends from the first point through each of the subsequent points.

2.Edit general line characteristics as follows:

To allow the line to travel diagonally from point to point, change the diagonals attribute to true.

To show arrows at the start and/or end of the line, set the startarrow and/or endarrow attributes to true, respectively.

Specify whether the horizontal (x) and vertical (y) position of points is defined in pixels or as a percentage of the line segment area:

For pixels, set the percent attribute to true.

For percentage, set the percent attribute to false.

3.Edit point characteristics as follows:

To move a point, edit the point element’s horizontal (x) and vertical (y) position values.

To add a point, add a point element and define its horizontal (x) and vertical (y) position values.

To create a closed shape, make the first and last point elements identical.

4.To change the style of the line segment, click the Style tab and then change settings as desired.

5.To change the position or anchoring of the line segment area (container), click the Position/Stretch attributes tab, and then change settings as desired.

6.When you are finished editing the line segment, click Apply and Close.

Web Browser Instances

You can add active web browser instances to your CustomPanel to display fully-interactive web pages. Web browser instances are like canvases, which you can overlay with other components.

Tips about Web Browser Instances:

Web pages are not displayed in Edit Mode — After you add a web browser instance, you must exit Edit Mode to see the actual web page.

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

To add a web browser instance:

1.On the Edit Mode toolbar, click the Insert web browser button.

2.Drag a box on the panel to define the web browser area.

The Insert into Component dialog appears.

3.In the URL box, type the address of the web page you want to display in the browser.

For example, to display the Ross Video website, type http://www.rossvideo.com.

4.Click OK.

The browser instance appears.

Editing Web Browser Attributes

After you add a web browser instance, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For web browser canvases, the Edit Component window contains the following tabs:

Browser Attributes Tab — For more information, see Browser Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.