Tutorial01
Welcome to this first tutorial for Geckos, which will explain, step by step, how to create a simple template. The card that we'll create through this process is a card for the Blood Bowl Starplayers. You can then have your own Star Players cards, or have the classic ones with your minis photos on it.
Let's start with a "blank" template. Some fields are required, so we define the card's size, the background, and one field that we'll use to set the name of our Star Players :
{
"fields": [
{ "name": "name", "label": "Name", "default": "Nobbla " }
],
"canvasFields": [
],
"canvasBackground": "#FF0000",
"canvasWidth": 536,
"canvasHeight": 750
}
So, this is our starting point. Let's put that template in the Geckos. Open up the demo page, display the Templates pane, and paste the above code in the template area. Click the Set button to validate the changes.
Go back to the Cards pane, and select the existing card. It's been updated but its old name has been kept. Because the default template and the one you created share the same field : name. Finally, Create a new one. Nobbla is there in the list ! It's the default value we set in the field name for our template.
Right now, our card is a big red rectangle. That's because our canvasFields section is empty. Using FabricJS (and its kitchensink), we could build the items of the card : stars, boxes, ... But that will be for another card and another tutorial.
Instead, I've got a card background set in a png file. We'll set it as background for our card. Here's the image file we'll use.
As the file is hosted on a web server, we could use its url to use it, and get this image field to add to the canvas (the canvas is where the card is drawn) :
"canvasFields": [
{ "type": "image", "width": 536, "height":750, "src": "http://tof.canardpc.com/view/2346e727-216f-4841-bff4-8041db9d94e2.jpg" }
],
That'll work, but what if the webserver is down ? Or if the image on the server is deleted ? Then, our template becomes useless. And that's not good. But there is a way to embed images into template. It's called DataUrl. The goal here is to translate a file into a string, that the browser will be able to untranslate, getting back the original file.
To achieve this, you can use the DataUrl Maker and drop your file on it to get your DataUrl. The string you'll get will replace the url of the file. It will increase the size of your template greatly, but your template will be self-contained :
"canvasFields": [
{ "type": "image", "width": 536, "height":750, "src": "data:image/png;base64,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" }
],
Paste this new code section in place of the old canvasFields section. Then press the Set button, and watch your card being updated.
We now have the background of our card, but we want to be able to edit it. We already have an editable field with the name variable. We'll work with it. As this is an Input Text Field, it generates a variable with the name $name.
Let's add a textbox element to the card, between the top stars. Why not a text element ? Because the textbox element will allow us more flexibility, with the alignment and the wrapping. Add this code to the canvasFields section, separated from the background image definition with a comma.
{ "type": "textbox", "text": "$name", "left": 91, "top": 11, "width": 351, "textAlign": "center" }
As you can see, it's pretty simple : we add a textbox, at the position {91, 11}, with a width of 351 pixels, and a text-alignment centered. This render our card name correctly thanks to the variable $name, who gets the value set in the corresponding field. But the text is poorly rendered. The FabricJS documentation lists many properties for the textbox item.
{ "type": "textbox", "text": "$name", "left": 91, "top": 11, "width": 351, "textAlign": "center", "fill": "#FFD800", "fontFamily": "Arial", "fontWeight": 700 }
We've just added three properties :
- fill sets the color of the text. It accepts any color in the form of a RGB hexadecimal value.
- fontFamily indicates which font will be used. It looks on the user font, so make sure it's a common font (or wait for it ...).
- fontWeight can accept numeric values (400, 600, 800, ...) or text values ("bold", "normal", ...). It defines the boldness of the text.
We've not added a property to set the fontSize. It exists, and is set by default to 40 (see FabricJS doc), and this size is well suited for our needs. But let's set it to 38 to see it in effect. Our whole canvasFields section now looks like this (I've reduced the DataUrl for the code to be easier to read, consider to restore it if you're testing it) :
"canvasFields": [
{ "type": "image", "width": 536, "height":750, "src": ""data:image/png;base64,iVB...." },
{ "type": "textbox", "text": "$name", "left": 91, "top": 11, "width": 351, "textAlign": "center", "fill": "#FFD800", "fontFamily": "Arial", "fontWeight": 700, "fontSize": 38 }
],
Our card now displays the name of our Star Player ! If you change it in the left editable field, it changes as well on the card image (as soon as you leave the field). Great ! Let's add some more fields !