User Tools

Site Tools


en:template:start

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Last revision Both sides next revision
en:template:start [2017/06/19 14:36]
Nicolas Ronvel [Webfonts]
en:template:start [2017/06/22 11:00]
Nicolas Ronvel [Globals]
Line 11: Line 11:
     "​description":​ { },     "​description":​ { },
     "​fonts"​ : [ ],     "​fonts"​ : [ ],
 +    "​webfonts":​ { },
     "​sharedOptions":​ [ ],     "​sharedOptions":​ [ ],
-    "​styles"​ : [ ]+    "​styles" : [ ], 
 +    "​globals": [ ]
  };  };
 </​code>​ </​code>​
Line 40: Line 42:
 See [[custom-fonts|Custom Fonts]] for an explanation on how to add a font to your template. See [[custom-fonts|Custom Fonts]] for an explanation on how to add a font to your template.
  
 +===== Webfonts =====
 +
 +
 +The ''​webfonts''​ element in the template is optional. Any template will work even if it's missing.
 +
 +If you need specific font inside your template, and that it's available on a web library, you can reference it. It will be loaded from the library by the user's browser.
 +
 +See [[web-fonts]] for an explanation on how to add a web-font to your template.
 ===== Shared Options ===== ===== Shared Options =====
  
Line 51: Line 61:
  
 See the [[styles|Styles]] section for a more complete description of a Style. See the [[styles|Styles]] section for a more complete description of a Style.
 +
 +===== Globals =====
 +
 +The ''​globals''​ part of a template stores data that is repeated through the template, and that can be put in a single global constant, in order to help maintainability.
 +
 +It could be a color that runs through the template, a [[en:​template:​code_variables|code variable]], or even part of the canvas : 
 +
 +<code javascript>​
 +{
 +  "​globals":​ {
 +    "​icon-color":​ "#​ffffff",​
 +    "​icon-color-old":​ "#​fff5c4",​
 +    "​text-color-auto":​ "​{{value = tinycolor.mostReadable(card[color1].toHexString(),​ ['#​FFF',​ '#​888',​ '#​000'​]).toHexString();​}}",​
 +    "​gradient":​ { 
 +      "​type":​ "​linear",​
 +      "​coords":​ { "​x1":​ 333, "​y1":​ 333.80341, "​x2":​ 402, "​y2":​ 332.55273 },
 +      "​colorStops":​ [
 +        { "​offset":​ 1, "​color":​ "​$color2.hexa$",​ "​opacity":​ 1 }, 
 +        { "​offset":​ 0.2832, "​color":​ "​$color1.hexa$",​ "​opacity":​ 1 }
 +      ],
 +      "​offsetX":​ -323.59766,
 +      "​offsetY":​ -48.037109
 +    }
 +  },
 +  "​styles":​ [ ]
 +}
 +</​code>​
 +
 +A global is evaluated before any other variables, so it can contain any kind of variables (from text input, choices, color picker, ...) but a global **can not** contain another global. Also, a global is its own variable. It cannot be used inside or with another variable ([[en:​template:​code_variables|code variable]], [[en:​template:​advanced_string_variables|advanced string]], ...).
 +
 +A global will replace any mention of its name surrounded by two square brackets : ''​%%[[global-name]]%%''​.
 +
 +<code javascript>​
 +{
 +  "​type":​ "​path",​
 +  "​left":​ 0,
 +  "​top":​ 0,
 +  "​fill":​ "​[[icon-color]]"​
 +}, {
 +  "​type":​ "​path",​
 +  "​left":​ 0,
 +  "​top":​ 0,
 +  "​fill":​ "​[[gradient]]"​
 +}, {
 +  "​type":​ "​textbox",​
 +  "​left":​ 0,
 +  "​top":​ 0,
 +  "​text":​ "​$text$",​
 +  "​fill":​ "​[[text-color-auto]]"​
 +}, 
 +</​code>​
  
  
en/template/start.txt · Last modified: 2017/06/22 11:02 by Nicolas Ronvel