Web Application

The web application will provide you a simple and intuitive way of designing and managing your designs.

On top of the page you’ll find a navbar which will give you access to the dashbaord, design and though the user menu, integrations and preferences.

../_images/navbar.png

Dashboard

This the usual landing page from when you are logged in. From here you’ll be able to see and manage all your designs, editing, and deleting them.

In the top left corner you will find a search box which will allow to quickly search among all your designs.

../_images/dashboard.png

Hovering over a preview will be providing you with some basic informations about it.

../_images/dashboard-hover.png

On click will allow you to Edit and delte the given design.

Edit and delete

When clicking on a design a window will pop up to provide you with a preview of you design, and allow you to either edit or delete it.

../_images/dashboard-open.png

On Edit the given design will be open in the design window.

../_images/design-example.png

Design

Clicking on this icon, will open a new design.

../_images/design.png

Design shapes and features

Note

Any shape can be moved through the arrow buttons of the keyboard, deleted with the delete and reordered with page up and down.

Key Move
left arrow move left
right arrow move right
up arrow move up
down arrow move down
delete delete shape
backspace delete value
page up move stack up
page down move stack down
../_images/design-shapes.png

The available shapes you can draw are :

Mask

Note

It is possible to have ony one Mask per design.

With this a new mask object will be added to your drawing. Mask represent the visible and invisible part of your video. This is used to match the final output.

The available fileds are:

  • Ratio : The ration w/h of the mask. Set by default at 2.2
  • Fill : The mask color.
  • Opacity : The level of transparency of the mask.

Text

Text represent a simple and non modificable text information. You can use this to write whatever you like.

The available fileds are:

  • Font Size : The size of the font in points.
  • Fill : The text color.
  • Opacity : The level of transparency of the text.
  • Text : The content of the text.
  • FontFamily: The font family which will be used to render the font.

Variable

Variable represent a simple and modificable text information, and you can consider it as a placeholder for informations. These fields are one of the most useful as they can be filled directly from the desktop integrations.

Note

variables will have to be defined in between {}

-eg : {user-name} will be then available as user-name

Variables can also contain simple strings such as: User : {{user-name}} .

The available fileds are:

  • Font Size : The size of the font in points.
  • Fill : The variable color.
  • Opacity : The level of transparency of the text.
  • Text : The content of the text.
  • FontFamily: The font family which will be used to render the font.

Current Frame

Current Frame , as the name states, will be representing the current frame.

Note

At the moment is not possible to deifine the padding, this will be added later. - padding is set to 4 digits by default.

The available fileds are:

  • Font Size : The size of the font in points.
  • Fill : The current frame text color.
  • Opacity : The level of transparency of the text.
  • Text : The content of the text.
  • FontFamily: The font family which will be used to render the font.

Timecode

With Timecode, you’ll be able to represent the current time based on your current framerate.

The available fileds are:

  • Font Size : The size of the font in points.
  • Fill : The Timecode text color.
  • Opacity : The level of transparency of the text.
  • Text : The content of the text.
  • FontFamily: The font family which will be used to render the font.

Current Date

Note

In order to have right date time representation, please remember to set your timezone in the user preferences.

Current Date will print the submission time.

The available fileds are:

  • Font Size : The size of the font in points.
  • Fill : The mask color.
  • Opacity : The level of transparency of the mask.
  • Text : The content of the text.
  • FontFamily: The font family which will be used to render the font.

Box

This will be drawing a box of any size.

The available fileds are:

  • Width : The width of the box
  • Height : The height of the box
  • Fill : The color of the box
  • Opacity : The level of transparency of the box.

Frame Range

Input sequence Frame range.

The available fileds are:

  • Font Size : The size of the font in points.
  • Fill : The mask color.
  • Opacity : The level of transparency of the mask.
  • FontFamily: The font family which will be used to render the font.

Current Resolution

Current design resolution.

The available fileds are:

  • Font Size : The size of the font in points.
  • Fill : The mask color.
  • Opacity : The level of transparency of the mask.
  • FontFamily: The font family which will be used to render the font.

Changing page

Any change applied to a design will mark it as ‘dirty’ so if you try to move to another part of the application you’ll be notified.

../_images/design-warning.png

Pressing Ok will bring you to the original destination , where cancel will allow you to either save or keep changing you design.

User Menu

The user menu will give you access to :

Integrations

../_images/integrations.png

From this page you will be able to download the currently available desktop integrations for the various os.

Help

From here you’ll be able to open this documentation.

Preferences

../_images/profile.png

Note

Username and API KEY are needed to log in with the desktop application and integrations. This allow the owner of the account to share its designs with collaborators. Collaborators won’t be able to edit, just use the available designs.

In here you’ll be able to find all the necessary informations about your user.

  • Username : the current user’s username.
  • Emal : the email used to register.
  • Timezone : the timezone where the users works from.
  • API Key : a regenerable password to login the designs from the desktop application.
  • Subscription Level : the current user’s subscription level.

Warning

Re generating New API Key will invalidate the login for any user which was using the old ones.

Logout

With this you will end you session and redirected to the home page.