Skip to content

1. UI overview

Alkapivo edited this page May 27, 2024 · 6 revisions

Components

Name Description Keyboard shortcuts
1. Title bar In this panel, we can manage the project and UI rendering using either the button or keyboard shortcuts.

On the left, there are buttons for creating a new project, saving the currently open project, and loading a project from disk. In the middle, the visu-project version is displayed. On the right, there are buttons for showing/hiding UI elements and toggling between fullscreen and windowed mode.
  • CTRL + N - new track
  • CTRL + O - open track
  • CTRL + S - save track
  • F1 - show/hide 2. Event inspector and 3. Template editor panel
  • F2 - show/hide 4. Timeline panel
  • F3 - show/hide 6. Brush editor panel
  • F4 - show/hide 5. Track control panel
  • F5 - enable/disable UI renderer
2. Event inspector Here you can modify the properties of the currently selected event on the timeline. You can select an event using the Select tool by left-clicking on the event. You can deselect an event using the Select tool by clicking on an empty area on the timeline.

The blue panel titled Event inspector contains a triangle icon and a toggle switch. The triangle allows you to invoke the event to preview its behavior. The toggle switch allows you to collapse the panel.
  • I - preview selected event
3. Template editor Here we manage all the templates that are later applied in brushes. More about templates can be found here. TODO LINK
  • T - save selected template
4. Timeline It allows adding or removing channels and placing, modifying, or removing events on individual channels. More about the timeline can be found here. TODO LINK
  • B - Brush tool
  • E - Erase tool
  • C - Clone tool
  • S - Select tool
  • + - zoom timeline in
  • - - zoom timeline out
  • G - enable/disable snap to grid
5. Track control Buttons for controlling the current position in the project and the currently selected tool. Additionally, here you will find controls for managing the timeline view and setting snap to grid. If snap is enabled, events will snap to the lines.
  • SPACE - resume/pause track
6. Brush editor Here we manage all the brushes, which are sorted by category and then type. At the bottom, there is a button to preview the selected brush and to save the properties of the currently edited brush. More about the timeline can be found here. TODO LINK
  • P - preview selected brush
  • U - save selected brush
7. Status bar

Relationships between components

  1. The Event inspector is related to the Timeline, as it allows us to edit the selected event.
  2. The Templates editor is related to the Brush editor, because the IDs of defined templates are used in brushes as parameters. To preview the operation of a template, invoke Preview on a brush using the ID of that template.
  3. The Track control is related to the Timeline, as it contains buttons for tool selection, zoom changes, and setting snap.
  4. The Status bar is related to the Timeline, as it contains fields like BPM and Sub, which allow for changing the grid density on the timeline.
Clone this wiki locally