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": {
    "shape1": {
      "image": "shape1.png",
      "iconLayout": {
        "center": "50,50",
        "scale": 0.9
      },
      "borders": [
        "shape1border1.png",
        "shape1border2.png"
      ],
      "texts" : [
        {
          "name": "text1",
          "center": "50,50"
        },
        {
          "name": "text2",
          "center": "70,50",
          "scale": "0.9"
        }
      ],
      "backgrounds": [
        {
         "name": "back1",
         "center": "60,50",
         "scale": "1.0"
        }, 
        {
          "name": "back2"
        }
      ]
    },
    "shape2": {
      "image": "shape2.png",
      "backgrounds": [
        {
          "name": "back1"
        },
        {
          "name": "back3"
        }
      ]
    }
  },
  "backgrounds": {
    "back1": {
      "image": "back1.png"
    },
    "back2": {
      "image": "back2.png"
    }
  },
  "texts": {
    "text1": {
      "font": "myfont.svg",
      "lineWidth": "100",
      "align": "center",
      "alignPoint": "50,50",
      "maxSize": "20",
      "minSize": "10",
      "background": {
        "image": "fontback1.png",
        "center": "50,50"
      }
    },
    "text2": {
      "font": "myfont.svg",
      "lineWidth": "200",
      "align": "left",
      "alignPoint": "0,25",
      "maxSize": "24",
      "minSize": "10"
    }
  },
  "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
  • iconLayout - An object that defines how icons and images will be placed on the badge (see format below)
  • borders - An array of file names that contain the available "border" images for this shape.
  • texts - An array of objects defining the available "text" options for this shape. (see format below)
  • backgrounds - An array of objects defining the available "background" options for this badge (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.

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.
  • align - One of "center", "left", or "right". Describes the justification of the text.
  • 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)
  • 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)
  • center - a string of the format "X,Y" that defines the X,Y coordinates of the center of the text displayed using this option
  • scale - A number that indicates the

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
  • scale - A number that describes how the background image should be scaled.