Managing Colors, Pattern Property Definition - Bumby-Wool/builder GitHub Wiki

Pattern Object Properties

In the color_patterns.json file you will see that it is a list of objects like this one:

{
    "type": "pattern",
    "name": "Green Tie Dye",
    "svgPatternId": "green",
    "patternId": { "fill": "url(#green)"},
    "imageUrl": "/builder/resources/patterns/green_tie_dye_cropped.jpg"
}

Properties List

type - This lets the color selector know to treat this differently than a typical color. For the list of valid values see Pattern Types section below

name - This is the display name that is shown when selecting the color. It can contain spaces

svgPatternId - This is an ID for the pattern. Should not contain any spaces or special characters and must be unique.

patternId - Tells the color selector how to display the color. Follows the same format replace <svgPatternId> in { "fill": "url(#<svgPatternId>)"} with the value you chose for the svgPatternId. If these don't match your pattern won't display properly.

imageUrl - Relative path to the image which is displayed as the pattern.

Pattern Types

• "pattern" - used for wool colors
• "zipper" - used for zipper images

Pattern - Shorthand Object Notation

For a condensed version defining patterns you can simply define the name property. When used this way the name value should not contain any spaces or special characters and must be unique. It is assumed that the image file is in the following locaation resources/patterns/zippers/[name].jpg where [name] is replaced by the name you specify in the object property.

Example

{ "name": "Cenotes" }

Configures a wool color option "Cenotes" which uses an image stored as resources/patterns/Cenotes.jpg

Pattern - Full Object Notation

If you do not use the shorthand object shown above you must specify all properties of the pattern object

imageUrl defined in a full object can be an absolute URL as seen in the example below or a relative URL such as /builder/resources/patterns/Cenotes.jpg

Example

{
    "type": "pattern",
    "name": "Cenotes",
    "svgPatternId": "Cenotes",
    "patternId": { "fill": "url(#Cenotes)"},
    "imageUrl": "https://bumbywool.com/wp-content/uploads/2017/08/Cenotes.jpg"
}

Zipper - Shorthand Object Notation

For the shorthand object just specify the type "zipper" and the name. For the name property do no use spaces or special chacters. Also when using shorthand it is assumed that the zipper image file is in the following locaation resources/patterns/zippers/[name]Zipper.png where [name] is replaced by the name you specify in the object property.

Example

{ "type": "zipper", "name":"Aqua" }

Configures a zipper option "Aqua" which uses an image stored as resources/patterns/zippers/AquaZipper.png

Zipper - Full Object Notation

If you do not use the shorthand object shown above you must specify all properties of the pattern object

imageUrl defined in a full object can be an absolute URL as seen in the example below or a relative URL such as /builder/resources/patterns/zippers/AquaZipper.png

Example

{
    "type": "zipper",
    "name": "Aqua",
    "svgPatternId": "AquaZipper",
    "patternId": { "fill": "url(#AquaZipper)"},
    "imageUrl": "https://bumbywool.com/wp-content/uploads/2017/08/AquaZipper.png"
}