Creating custom templates

Template Format

All templates must be in SVG format, SVG is scaleable vector graphics and will work in most browsers. They’re infinite canvas (can be as large as you need) and very easy to create.

How the templates work

The SVG files can be in any design you wish. Placeholders (see template schema) are placed in the file in whatver way you wish (label, box, circle etc).

Joystick Diagrams will go through the SVG and replace these keys with the correct items from your profiles.

For a full list of supported keys see template schema

How to edit/create SVGs

For templates included, you’re advised to use draw.io which is free (web based or desktop app). While you can edit them with other software, you may encounter issues using the packaged ones with them due to the way Draw.IO works with these files.

For more information on how to specifically use these tools visit SVG Tutorial

It’s highly recommended when you edit templates for your own usage you do not overwrite existing templates and instead save them elsewhere.

Not doing this may mean you lose them on upgrades

Starter Template

Introduction

This guide is designed to help you quickly set up a basic starter template for your device, complete with buttons, axis, pov, and modifier examples. All you need is an image of your device to get started (or run the starter template as-is against your profile to test)

Step-by-Step Instructions

  1. Download the Starter Template: First, download the starter template from starter template. Choose a location on your computer to save the file.

  2. Open with Draw.IO: Next, open the downloaded SVG file using Draw.IO. This tool allows you to edit and customize the template.

  3. Customize Your Template:
    • Upload your device’s image into Draw.IO.
    • Add any missing buttons, povs, or axis as required by your device.
    • Ensure all elements are correctly placed and labeled.
  4. Save Your Template: Once you’ve added your device’s image and made any necessary adjustments, save your final template
  5. Configure and Test: Finally, configure the template against your device in Joystick Diagrams and test your export to ensure everything works as expected.

What the template looks like

Template Schema

When making templates, while design choice is entirely yours, you must use a set of allowed keys to have binds display in your template.

Template Schema covers these keys