Eigen componenten toevoegen

Tricity custom component JSON screenshots

Since Tricity 2.0.1 it is possible to add your own components to the components library.

The components are images in the SVG format with a meta description in a json file. So for every component you want to add you need 2 files: 1 svg and 1 json file. Here you can download an example of both files.

The json file contains meta information about the svg file so that Tricity knows the size of the image (and can draw the connectors correctly). The json file is a text file that can be edited with any text editor (such as Atom, Visual Studio Code, Xcode, ...). The following attributes are described in the json file:

  • name - The textual description of the component (e.g. "Fire extinguisher")
  • svg - The file name of the SVG file containing the actual image
  • leftOffset - A number between 0 and 1 that indicates how much space there is between the left side of the SVG file and the left side of the image.
  • rightOffset - A number between 0 and 1 that indicates how much space there is between the right side of the SVG file and the right side of the image.
  • topOffset - A number between 0 and 1 that indicates how much space there is between the top of the SVG file and the top of the image.
  • bottomOffset - A number between 0 and 1 that indicates how much space there is between the bottom of the SVG file and the bottom of the image.
  • uniqueId - Unique number. Once selected, this should not be changed, or Tricity projects that have used the component will no longer open correctly. Start eg. with number 1 and for each new component you can increase this.

Copy both files (svg and json) into the Tricity folder of your iPad or Mac:

  • Mac In your library, Library/Containers/Tricity/Data/Documents. You open Finder, hold down the Option key on your keyboard, and click Go > Library at the top of your menu bar. In that folder, go to Containers > Tricity > Documents.
  • iPad You plug your iPad into your Mac with a cable and make sure you trust the iPad. Then you go to your iPad in Finder, then to the Files/Files tab and then you drag both files (svg and json) onto the Tricity folder.