-
Notifications
You must be signed in to change notification settings - Fork 18
Canvas Code Variables
Sometimes, it's not convenient to let the user set all the canvas configuration. Also, the value of a variable may result in a specific value set to a property, but with a specific value not linked to the original variable (a width depending on the value of a Checkbox, for instance).
The JS Code Variable is there for this kind of manipulation. It's an advanced way to make templates, but with this, you can achieve truly amazing interactive cards.
For a variable to be used as a JS Code Variable, it needs to be encapsulated by _double brackets. Inside those brackets, you can then put any kind of Javascript code. The goal of this code is to put a value inside a variable name value. The content of this variable will be then put inside the property :
"canvasFields": [
{ "type": "rect", "width": "{{if (true) { value = 30; } else { value = 10; }}}" }
]
This example is of course useless, because it will always put 30 to the value variable. But, keep reading.
The interest of such a variable is to use the content of other variables. For example, the user can have a Choice Input to select a type of card : leader or follower. This field is named cardType
.
By using card[cardType]
as a JS variable in the code, you can access the value of the cardType
variable. Each variable generated by an editable field can then be accessed this way. And you can, in our example, set the background color of a rectangle this way :
"canvasFields": [
{ "type": "rect", "backgroundColor": "{{if (card[cardType] == 'leader') { value = "#FF0000"; } else { value = "#00FF00"; }}}" }
]
Of course, you're not limited to the use of one variable, and can mix with as many variables as you need.
Well, you can make anything you want as long as it is valid in Javascript. That covers a large spectrum of actions. But be reminded that you need the value of the variable value
in order for the canvas property to be filled.
Don't use the return
keyword in this code, it will not work and could break the display. This function could still evolve, to use things such as functions, constants, and other things. Any idea ? Any need ? Write an Issue about it !
Feel free to post your questions via Issues if something is unclear or missing in the wiki. Better documentation = Better templates !