Creating custom templates

What format are templates?

All templates must be in SVG format, SVG is scaleable vector graphics and will work in most browsers.

How can I create and edit SVG?

I recommend using draw.io for this, it’s free and available online or as a desktop application.

By opening any of the included templates with Draw.Io you’ll instantly be able to edit them.

Template Configuration

There is no limit to what you can create in SVG, but you do need to name things correctly in order for the application to work correctly.

All naming is case insensitive and the Application will still find the correct item.

Automatic naming

By including the TEMPLATE_NAME tag in your SVG, the software will automatically pull out the name of the profile and add to the SVG.

Buttons

Button formats must be in

BUTTON_X
button_X
Button_X

Where x is your button identifier in Windows.

POV Hats

POV hats will generally be one button, with multiple ways. As opposed to hat switches which will be one button per position.

POV need to be indicated as

POV_X_D

X needs to be your POV hat ID, if you only have one on a device then it’ll start at 1.

Depending on whether you have a 4 or 8 way hat, you’ll need the following defined in the template as D (direction)

4 way

U
R
D
L

8 way

U
UR
R
DR
D
DL
L
UL

Example

POV_1_U
POV_1_R
POV_1_D
POV_1_L

AXIS

For outputting AXIS onto your joystick maps, simply use the following.

AXIS_X
AXIS_Y
AXIS_RX
AXIS_SLIDER_X

Where X is the logical axis on your device. Normally this would be X and Y for pitch/roll for example.

Tutorial

Base Templates

Included with the software are two starter templates (Portrait and Landscape), I recommend you use these as they’re made to fit on an A4 sheet of paper, and contain all the parts you need to get going.

You can find the base templates in /Templates/Custom with the download

Creating your template

  1. Open a base template in Draw.IO
  2. Add an image of your device by copying/pasting the image onto the canvas
  3. Once you’re happy with the size of the image, you need to configure it to accept lines
  4. Click your image
  5. Under Style on the right hand side, open Properties
  6. Uncheck Connectable - You can also uncheck resizeable, moveable if needed
  7. Now you will be free to use the line drawing freely
  8. You can fully change the colours and styles of the template however you wish from this point
  9. Save as .SVG and place the file in /Templates
  10. Ensure the file is named to match your device name