The Cinegy Multiviewer Layout Designer tool is used to arrange the display of the Cinegy Multiviewer window and edit its appearance according to your needs.

Cinegy Multiviewer Layout Designer allows the addition of multiple fully customizable layouts to the template that can be configured separately. It has a variety of useful tools arranged in separate groups and is easy to use and manage.

The Cinegy Multiviewer Layout Designer interface comprises 5 main panels:

layout_designer_panels

  • Controls panel – the panel that contains buttons representing dynamic and static controls that can be added to the layout.

  • Layout editing area – the Cinegy Multiviewer canvas where editing operations are performed with the controls added to it.

  • Layout tree – the tree of the controls added to the editing area of the layout template.

  • Properties panel – the panel where the parameters of the selected control are displayed.

  • Toolbar – a set of editing tools for the layout controls.

Controls Panel

The controls panel contains buttons representing controls that can be added to the layout. Cinegy Multiviewer Layout Designer offers two groups of controls to use in your layout template: static and dynamic.

Static Controls

Icon Object Description
Text Text Label Simple text label at a fixed position.
Rectangle Rectangle Framing rectangle object.
Image Image Graphic image (e.g. picture, logotype).

Dynamic Controls

Icon Object Description
Player Player Video channel preview.
Digital Clock Digital Clock Digital clock display at a fixed position.
Analog Clock Analog Clock Analog clock display at a fixed position.
CPU Indicator CPU Indicator Graphic visualization of the assigned player’s CPU activity.
HTML Widget HTML Widget Any HTML-based web pages.

To hide the available controls, press the down arrow button next to the "Dynamic" and/or "Static" group of controls. To restore the display of the controls, press the up arrow button next to the corresponding group name.

Layout Editing Area

The editing area represents the layout canvas, where all control editing operations for the current layout are performed.

 text 2B displayed insted For a closer view of your layout template and the controls on its canvas you can zoom it in using the zoom slider. Zooming in is possible up to x3. To decrease the layout template scaling, drag the scroll bar down using the mouse. It is also possible to scale the layout up / down by clicking the scroll bar and using the "↑" or "↓" keyboard keys correspondingly.

Alternatively, use the "Zoom" command from the "View" main menu to scale the layout by 25% steps:

menu_view_zoom

If there are several layouts in your template, you can scale each of them separately.

Layout Tree

In the layout tree the controls added to the editing area of the layout template are shown in two groups:

  • Graphic Level – where the names of the static controls added to the layout are displayed;
  • Dynamic Level – where the names of the dynamic controls added to the layout are displayed.

layout_tree

By default, each layout in the layout tree contains these two empty groups. As soon as the control is dragged-and-dropped to the editing area, it is placed in the corresponding group of the layout tree.

To stack the controls so that one appears in front of another, select the control(s) in the layout tree and use the corresponding button: "Up", "Down", "Top" or "Bottom". The graphic level items and the dynamic level controls are reordered independently.

Properties Panel

The properties panel represents a set of the parameters available for the currently selected control as well as for the whole layout itself.

Layout Properties

properties_panel

The "Properties" dialog can also be launched via the "Properties" command from the "Layout" main menu.

Cinegy Multiviewer Layout Designer allows you to configure the following layout settings:

  • Grid size – the size of the grid displayed in the editing area. Press the up/down arrow button to enlarge or reduce the layout grid size correspondingly. Alternatively, enter a desired value via the keyboard.
It is also possible to change the grid size via the "Grid Size" command from the "View" main menu.
  • Show grid – leave this option selected to have the grid displayed on the canvas or deselect it to hide the layout grid.
  • Grid snap – select this checkbox to align the controls on the layout canvas according to the nearest dot in the grid, i.e. snap them to the grid when resizing and/or moving them. Leave the "Grid snap" option deselected to resize and / or move the controls on the canvas freely.
The snapping to grid option works both when the grid is shown and when it is hidden.
It is also possible to snap the objects on the layout to the grid via the "Grid Size" command from the "View" main menu.
  • Grid color – the color of the grid displayed in the editing area. To change the grid color, click the corresponding field and choose the desired color either from the standard or available color sets. You can also assign the layout grid a particular color shade in the "Advanced" section.
  • Background – the color of the layout background. It can be changed in the same way as the grid color.
  • Image file – a graphic image as a layout background. Press the "..." button to choose the desired image as the layout background.
Refer to Handling Objects for detailed information on the controls properties.
  • Default player – a player added to the current layout, which will be used as the active player on Multiviewer start. All players of the current layout are available in the drop-down list.

Toolbar

The toolbar contains a set of editing tools for the layout controls:

layout_designer_toolbar

Button Action
New Press the "New" button to create a new layout template. The keyboard shortcut is <Ctrl+N>.
Open Press the "Open" button to open a previously created layout template by selecting the desired one in the common "Open" dialog box. The keyboard shortcut is <Ctrl+O>.
Save Press the "Save" button to save all the changes made to the layout template. The keyboard shortcut is <Ctrl+S>.
Undo Press the "Undo" button to undo one or more (up to 50) actions. The keyboard shortcut is <Ctrl+Z>.
Copy-Paste Select a control on the editing area and press the "Cut" / "Copy" button to cut or copy it respectively. The keyboard shortcuts are <Ctrl+X> and <Ctrl+C>. Press the "Paste" button to insert the control to the desired position on the editing area. The keyboard shortcut is <Ctrl+V>.
Delete To remove a control, select it on the editing area and press the "Delete" button or hit the <Del> key on the keyboard.
Bring Forward Select a control on the editing area and press the "Bring Forward" button to bring it one layer up. If several controls are selected, press this button to bring them all one layer up on the editing area correspondingly.
Bring To Front Select a control on the editing area and press the "Bring To Front" button to bring it to the topmost level. If several controls are selected, pressing this button will result in bringing the first selected object to the topmost level; the rest of the selected controls will be brought one layer up correspondingly.
Send Backward Select a control on the editing area and press the "Send Backward" button to send it one layer down. If several controls are selected, press this button to send them all one layer down on the editing area correspondingly.
Send To Back Select a control on the editing area and press the "Send To Back" button to send it to the bottommost level. If several controls are selected, pressing this button will result in sending the first selected object to the bottommost level; the rest of the selected controls will be sent one layer down correspondingly.
Align Top Select two or more controls and press the "Align Top" button to align them to the level of the first selected control.
Align Bottom Select two or more controls and press the "Align Bottom" button to align them to the level of the first selected control.
Align Left Select two or more controls and press the "Align Left" button to left-align them according to the first selected control.
Align Right Select two or more controls and press the "Align Right" button to right-align them according to the first selected control.
Align Horizontal Center Select three or more controls and press the "Align Horizontal Center" button to align them according to the center horizontal line of the first selected control.
Align Vertical Center Select three or more controls and press the "Align Vertical Center" button to align them according to the center vertical line of the first selected control.
Same Width The "Make Same Width" function resizes two or more selected controls so that they become of the same width according to the first selected control.
Same Height The "Make Same Height" function resizes two or more selected controls so that they become of the same height according to the first selected control.
Same Size The "Make Same Size" function resizes two or more selected controls so that they become of the same size according to the first selected control.
Horizontal Spacing Equal Use the "Make Horizontal Spacing Equal" function to make the horizontal spacing between the selected controls equal on the canvas.
Increase Horizontal Spacing Use the "Increase Horizontal Spacing" function to make the horizontal spacing between the selected controls on the canvas larger.
Decrease Horizontal Spacing Use the "Decrease Horizontal Spacing" function to make the horizontal spacing between the selected controls on the canvas smaller.
Remove Horizontal Spacing Use the "Remove Horizontal Spacing" function to remove the horizontal spacing between the selected controls on the canvas.
Vertical Spacing Equal Use the "Make Vertical Spacing Equal" function to make the vertical spacing between the selected controls equal on the canvas.
Increase Vertical Spacing Use the "Increase Vertical Spacing" function to make the vertical spacing between the selected controls on the canvas smaller.
Decrease Vertical Spacing Use the "Decrease Vertical Spacing" function to make the vertical spacing between the selected controls on the canvas smaller.
Remove Vertical Spacing Use the "Remove Vertical Spacing" function to remove the vertical spacing between the selected controls on the canvas.
The order buttons become enabled when at least one control is selected. The alignment buttons become enabled when two or more controls are selected. The size and spacing changing buttons become enabled when three or more controls are selected.
The same commands are accessible from the corresponding main menu drop-down lists as well as from the context menu of the selected object(s).

You can manage the order of the function groups by dragging them to the desired place on the toolbar:

layout_designer_toolbar_chngd_order

It is also possible to hide the buttons by dragging the right side of the corresponding function group to the left:

layout_designer_toolbar_hid_buttons

To view the hidden buttons, click the down arrow button next to the hidden function group; all the buttons from this group will displayed on the panel below:

toolbar_hidden_buttons_shown