Skip to content
This repository has been archived by the owner on Sep 2, 2020. It is now read-only.

BadgeStudio config

Erik Christensen edited this page Feb 10, 2014 · 9 revisions

A description of the JSON file used to configure BadgeStudio's visual badge design options.

An example:

{
  "shapes": [
    {
      "image": "shape1.png",
      "backgrounds": [
        {
         "image": "back1.png",
         "center": "60,50",
         "scale": "1.0"
        }, 
        {
          "image": "back2.png"
        }
      ],
      "texts" : [
        {
          "font": "myfont.svg",
          "lineWidth": "100",
          "align": "center",
          "alignPoint": "50,50",
          "maxSize": "20",
          "minSize": "10",
          "background": {
            "image": "fontback1.png",
            "center": "50,50"
          }
        },
        {
          "font": "myfont.svg",
          "lineWidth": "200",
          "align": "left",
          "alignPoint": "0,25",
          "maxSize": "24",
          "minSize": "10"
        }
      ],
      "iconLayout": {
        "center": "50,50",
        "scale": "0.9"
      },
      "borders": [
        "shape1border1.png",
        "shape1border2.png"
      ]
    },
    {
      "image": "shape2.png",
      "backgrounds": [
        {
          "name": "back1"
        },
        {
          "name": "back3"
        }
      ]
    }
  ],
  "colors": [
    ["#FFFFFF", "#AAAAAA", "#000000"],
    ["#000000", "#AAAAAA", "#FFFFFF"]
  ]
}

Required fields below are in bold. All coordinates are in pixels.

Top-level fields:

  • shapes: An array of objects defining each available badge shape. (see format below)
  • colors: An array of hex color triplets of the form ["#AAAAAA", "#BBBBBB", "#CCCCCC"] defining the available color options

Shapes object fields:

  • image: The name of the file containing the shape image data
  • backgrounds: An array of objects defining the available "background" options for this badge. If excluded, backgrounds cannot be used on this badge. (see format below)
  • iconLayout: An object that defines how icons and images will be placed on the badge. If excluded, icons and images cannot be placed on the badge shape. (see format below)
  • borders: An array of file names that contain the available "border" images for this shape. If excluded, borders are not available for this badge shape.
  • texts: An array of objects defining the available "text" options for this shape. If excluded, text cannot be placed on this badge shape. (see format below)

iconLayout fields:

  • center: A string of the format "X,Y" that defines the X,Y coordinates of the center of any icons or images that are placed on the badge
  • scale: A number that indicates the initial scale value of any icons placed on the badge. If excluded, defaults to 1.0

texts fields:

  • font: file name that contains the font used by this option
  • lineWidth: Maximum width, in pixels, of the line of text displayed. The font size will decrease to keep the text within this maximum width. If excluded, text can be displayed across the entire width of the badge image.
  • align: One of "center", "left", or "right". Describes the justification of the text. Defaults to "center".
  • alignPoint: A string of the format "X,Y" that defines the point at which text is aligned (the Y coordinates describes the baseline point of the text) If excluded, defaults to the center point of the badge.
  • maxSize: The maximum font size to use (this will be the default provided the text fits within lineWidth
  • minSize: The minimum font size to use. The font will gradually reduce in size to stay within lineWidth. Once minSize is reached, no more text can be added.
  • background: An object describing the background to use for this text option. If this is defined, user-selected backgrounds will be disabled. (see format below)

backgrounds fields (both "background" within the "texts" object and "backgrounds" within the "shapes" object share this format):

  • image: A file name containing the background image.
  • center: A string of the form "X,Y" that defines the location on the badge to place the center of the background image. If excluded, defaults to the center point of the badge.
  • scale: A number that describes how the background image should be scaled. If excluded, defaults to 1.0.

Some consequences of this format:

All image files for badge Shapes, Backgrounds and Borders should be colored only using three pre-defined colors (which colors are used will be configurable, but all files must use the same colors). These colors will later be changed based on the "Color" option chosen by the user.

Each badge shape that is added must define all of its Background, Borders and Text options. Adding a new shape option will therefore involve defining quite a bit of stuff.

Certain Text options can disable Background options that would otherwise be available for a given badge shape. This only happens when a Text option includes its own Background. (is this correct?)