Quill

Quill

Quill is the authoring tool you use to create your UI. It's available on Windows, Mac, and Linux.

Data Processing#

The Data Processing area is located in the center of Quill's workspace. You can create nodes using the "Add Node" (N) button. New nodes are placed in this area.

View Tree#

The view tree has a single root view with the same name as the template. Renaming the root view renames the template. Views can have children, which are created with the small plus button that is visible when the view is selected.

Children are laid-out with their parent's bounds. It is very common to use the children arrange property to stack children views along a vertical or horizontal axis.

Each view has their own set of properties to create a widget or part of a larger widget. Complex widgets typically have many children views to draw multiple images and handle various events.

Children views can also include other templates.

View Menu#

A view's menu can be opened by right-clicking or using the small pencil icon visible on the selected view. From the view's menu you can rename the view and change its type. The view type Normal is the default and allows you to use properties to control appearance and user events.

The Template option allows you to set a different template to be embedded. Any properties you set will override properties in the root view of the referenced template.

List is like the Template option but allows you to embed the same template multiple times, once for each item in a list of data.

Placeholder is used to give more flexibility when embedded templates by allowing you to specify view to replace an included template's view.

Properties#

Each view has its own set of properties, which can be viewed and edited by click on the view in the view tree.

Inline Event Filters#

Event filters to capture user input can be added to a view using the "New Event" button at the top of the property pane.

Preview Workspace#

The preview area, to the right of the property pane, displays what the current template you're in looks like. It uses data added in the preview data editor.

Preview Data Editor#

Allows you to create and edit data to be used in the preview workspace. It can be found on the far left end of a template. Use the hotkey Q to open/close it.

Including Templates#

For information on how to embed templates to build more complex User Interfaces, please refer to Template References.

Conditions#

Created using the "New Condition" button above the view tree, conditions let you change any property in your UI based off a Boolean value, hover state, focused, etc. The orange color is used to denote a conditional value. In the example image here, the "Hover" condition is selected and shows the two properties that have a conditional value set on them.

You can add conditional values to a property from a property's menu.

Transitions between values can be animated by adding the property to an animation with an appropriate trigger.

Animation Triggers#

Selecting an animation allows you to edit triggers, which are rules for when an animation should start. By default, new animations have a single trigger that causes the animation to run when any of the properties that have been added to the animation change via a condition.

Animation Timeline#

The timeline, located above the preview workspace when an animation is selected, allows you to manage keyframes on properties that have been added to the animation. It also allows you to change the animations duration, set if it should repeat or not, and preview how the animation appears when it runs.

Keyframe Values#

Clicking on a keyframe allows you to edit its value. It can be set as the Start Value, End Value, or Custom Value. Start Value and End Value represent the property's value before a condition change, and the new conditional value (based on which condition triggered the animation.)

Keyframe Interpolation#

Clicking on the line between two keyframes allows you to add a new keyframe or change the interpolation method between the two.

Template Inputs#

Template inputs, added on the left side of the data processing area, are available to encapsulating templates when included via inlining.

Template Outputs#

Template outputs can be created on the right side of the data processing area, just above the conditions. When a template is set on a Scene Node, the template's outputs are available as outputs on the scene node.

Project Settings#

In the top right corner of Quill there is a small tag with the name of the currently opened project. Clicking it will allow you to edit various settings for the project, as well as close it allowing you to open another.

Refer to Project Structure for information on what all the settings do, as well as how you can edit them using a text editor instead of through Quill.

Shortcuts#

  • T - Search exiting templates.
  • N - Create new node.
  • Space - Add properties to the currently selected view.
  • R - View which templates include the currently selected template.
  • C - Edit template configurations.
  • V - Edit template variants.
  • Q - Toggle preview data pane.
  • W - Toggle data processing pane.
  • I - Set selected properties as inputs.
  • D - Set selected properties as data.
  • S - Set selected properties as styles.
  • Ctrl + L - Toggle log pane.
  • Ctrl + W - Close currently selected template.
  • Ctrl + I - Import templates from another project.