Redesign of GUI

[fightling]

I open this issue in relation to my current work at branch feature/newgui.

The new transition module has a more generic approach for defining composites.

The current voctomix UI concept can not handle the diversity and so I've decided to redesign the GUI a lot. I also tried to consider some wishes from the issues list. This issue is to tell you about what I have done and to discuss further improvements.

The current version of the UI looks like this:

As you can see the former layout inspires the new one: We have all source previews at the left vertically aligned and the mix preview is in the main area at top-right.

The former toolbar has been technically moved to the bottom and is almost empty. All compositing functionality has been moved in a new composite dialogue below the mix preview.

Because the voctomix2 aims to have a preview mix and a live mix display beside to each other the next layout is about to change to what I saw from professional mixing systems. These use a preview monitoring which consists of preview mix and live mix in the upper half of the window/screen and views of all sources below in the lower half.

Currently I'm focusing on the redesign of voctomix underlying mixing pipeline and so I've implemented the preview/live-concept in the mixing dialogue but without displaying the preview mix.

Mixing Panel

So in the mixing dialogue you see two rows describing the current live (green labels) and the current preview composite (yellow labels). Beside these there are currently three mixing buttons (RETAKE, CUT and TRANS).

First let's focus at the current preview composite (yellow):

PREVIEW

The whole area has a vertical label at the left named PREVIEW. Within you see four panels:

CHANNEL A / CHANNEL B

In these two panels you can select the first an second source for a composite (similar to A and B in the former voctomix). The controls prevent selecting a source twice like the former A/B-buttons did.

COMPOSITE

In this panel you select one of the composites which are configured within the connected voctocore. In our case this is FULL SCREEN, SIDE BY SIDE and LECTURE (which is similar to side-by-side-preview).

MODIFY

Modifiers can be configured to replace composites when selected. Currently top features are configured in our example: MIRROR and 4:3 which currently apply to LECTURE only. The first one mirrors the composite so that the speaker on channel B can be placed left or right to the slides on channel A. The second one changes the lecture composite to use a different cropping to display 4:3 slides more accurately.

OUTPUT

The output consists of the same four panels but can't be clicked and only display the current live mix composite.

MIX

The mix panel has the following three buttons:

RETAKE

Retake gets the current live composite setting and selects it in the preview composite panels. With RETAKE you can easily get the current live composite to modify it.

CUT

This button hard-cuts the current live composite to the current preview composite. Also a retake will be done automatically so you can easily toggle between two composites by pressing CUT repeatedly.

TRANS

Works like CUT but tries to apply one of the transitions defined in the voctocore configuration.

Configuration

The composite dialogue can be configured quite freely. All buttons can be hidden, renamed, reordered and accelerator keys and tool tips can be set for all panels:

CHANNEL A tool bar

This toolbar is addressed in a section called toolbar.sources.a:

[toolbar.sources.a]
cam1.name = CAM1
cam1.key = F1
cam1.tip = Select source CAM1 on channel A
cam1.pos = 0

cam2.name = CAM2
cam2.key = F2
cam2.tip = Select source CAM2 on channel A
cam2.pos = 1

cam3.name = LONG
cam3.key = F3
cam3.tip = Select source LONG on channel A
cam3.pos = 2

grabber.name = SLIDES
grabber.key = F4
grabber.tip = Select source SLIDES on channel A
grabber.pos = 3

Each button uses the source's name as prefix and has several items:

.name

.name defines how the GUI names this source. We use a capitalized naming and rename the grabber source to SLIDES here. If no name has defined the source will be named by it's original identifier.

.key

Sets the accelerator key in python-gtk like manner. We're using the function keys F1 to F4 here. If you don't use this attribute no key will be set.

.tip

Defines a tool tip with a short description. The accelerator key will be appended automatically to the tool tip.

.pos

Sets the order of the buttons within the panel.

CHANNEL B tool bar

Is quite similar to the CHANNEL A tool bar.

[toolbar.sources.b]
cam1.name = CAM1
cam1.key = 1
cam1.tip = Select source CAM1 on channel B
cam1.pos = 0

cam2.name = CAM2
cam2.key = 2
cam2.tip = Select source CAM2 on channel B
cam2.pos = 1

cam3.name = LONG
cam3.key = 3
cam3.tip = Select source LONG on channel B
cam3.pos = 2

grabber.name = SLIDES
grabber.key = 4
grabber.tip = Select source SLIDES on channel B
grabber.pos = 3

COMPOSITE tool bar

This tool bar defines who and which composites will be available in the COMPOSITE panel:

[toolbar.composites]
fs.name = FULL SCREEN
fs.key = F5
fs.tip = Show channel A on full screen
fs.pos = 0

sbs.name = SIDE BY SIDE
sbs.key = F6
sbs.tip = Put channel A beside channel B
sbs.pos = 1

lec.name = LECTURE
lec.key = F7
lec.tip = Put cropped channel B beside large channel A
lec.pos = 2

Like with the sources the item names in that section consists of the composite name (as configured in voctocore) and an attribute name. The attributes are the same to the sources attributes.

MODIFY tool bar

The modify tool bar also uses the same attributes but adds one called .replace.

[toolbar.mods]
mirror.name = MIRROR
mirror.replace = lec->|lec
mirror.key = F9
mirror.tip = Horizontally mirror composite\n(e.g. when speaker moves to the other side)
mirror.pos = 0

ratio.name = 4:3
ratio.replace = lec->lec_43
ratio.key = F10
ratio.tip = Crop channel A to 4:3 ratio
ratio.pos = 1

.replace

As described in the transitions documentation composites in voctomix2 are described by a string of the format C(A,B) where C is the composite and A and B are the sources to use. Additionally composites can be mirrored horizontally by using a | as prefix.

On the voctocore side we defined the following composites in our example: fs, sbs and lec. And we've added lec_43 which uses a 4:3 cropping for source A.

To implement the mirror modifier a composite like lec(cam1,cam2) will be changed to |lec(cam1,cam2) which mirrors it.

The 4:3 feature is similar and simply replaces lec by lec_43. So lec(cam1,cam2) will become lec_43(cam1,cam2).

Voctogui will check if replacements will have effect for the current composite and disables modifiers automatically. So MIRROR and 4:3 will be enabled only when LECTURE is selected because the replacement rules only apply to lec.

MIX

The MIX toolbar has three buttons which are defined like in the other sections. For getting a better looking layout an attribute named expand was added:

[toolbar.mix]
retake.name   = RETAKE
retake.key    = BackSpace
retake.tip    = Copy output composite to preview for modification\n(output remains untouched)
retake.pos    = 0

cut.name      = CUT
cut.key       = Return
cut.tip       = Hard cut preview composite to output.
cut.pos       = 1
cut.expand    = True

trans.name    = TRANS
trans.key     = space
trans.tip     = Use transition to cut preview composite to output
trans.pos     = 2
trans.expand  = True

.expand

Expands the button to the available space within the panel layout if set. If you expand multiple buttons they will share the available space.

[fightling]

solved in voctomix2