Now we want to illustrate for you how we created the symbol font by adding some additional symbols. We are going to add symbols for the standard card suits of club, diamonds, hearts, and spades. First let's look at how some of the other symbols were created. Go into the SymbolMono18pt7b.h and look at line number 557 and forward that defines the Double Greater Than symbol. It looks like this.
//132 Double greater than /*| 8 4 2 1 8 4 2 1 8 4 2 1 8 4 2 1 |*/ /*| X . . . . . . , X . . . . . . . |*/ 0x80,0x80, /*| . X . . . . . , . X . . . . . . |*/ 0x40,0x40, /*| . . X . . . . , . . X . . . . . |*/ 0x20,0x20, /*| . . . X . . . , . . . X . . . . |*/ 0x10,0x10, /*| . . . . X . . , . . . . X . . . |*/ 0x08,0x08, /*| . . . . . X . , . . . . . X . . |*/ 0x04,0x04, /*| . . . . X . . , . . . . X . . . |*/ 0x08,0x08, /*| . . . X . . . , . . . X . . . . |*/ 0x10,0x10, /*| . . X . . . . , . . X . . . . . |*/ 0x20,0x20, /*| . X . . . . . , . X . . . . . . |*/ 0x40,0x40, /*| X . . . . . . , X . . . . . . . |*/ 0x80,0x80,
Most of each line is simply a comment that doesn't really generate any code but it's an array of dots that allows us to visualize what the symbol will look like. We have replaced the dots with "X" wherever a pixel is supposed to be on. Note that the center column has commas rather than periods just to give us a reference point. Across the top are the bit values that we were used to generate the actual hexadecimal data. The first four columns of the first row has an X in the column labeled 8. The next four columns are empty so the first hex value is 0x80. The pattern repeats for the right half of the symbol so we get another 0x80. As you go download row by row you can see how we generated the hex values based on where we drew the Xs. As you browse up-and-down looking at the symbols we've already created you might notice that this textbased representation using periods and Xs isn't exactly a 1-1 ratio of height to width as it appears on the actual display. This representation is going to look a little bit tall and skinny compared to how the graphic will actually look. But it gives us a pretty good idea of what we want and how to encode the data as hex values.
Now look at line 575 and forward and you will see an empty set of data that we will use to create our symbols for the four suits.
// Empty array for future expansion /*| 8 4 2 1 8 4 2 1 8 4 2 1 8 4 2 1 |*/ /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . , . . . . . . . . |*/ 0x00,0x00,
Copy and paste that section until you have 4 copies. Edit the top comment to indicate that this will be symbol "135 diamond suit". You should press the "insert" key on your keyboard. This will change the Arduino IDE editor from insert mode to overwrite mode. The cursor will change from a blinking vertical line to a blinking rectangle. Use your arrow keys to position the cursor over the dots in the comments section and then press "X" or any other distinguishing character of your choice to mark the location. When you are finished "drawing" the diamond shape it might look something like this.
//135 diamond suit /*| 8 4 2 1 8 4 2 1 8 4 2 1 8 4 2 1 |*/ /*| . . . . . . . X . . . . . . . . |*/ 0x00,0x00, /*| . . . . . . X X X . . . . . . . |*/ 0x00,0x00, /*| . . . . . . X X X . . . . . . . |*/ 0x00,0x00, /*| . . . . . X X X X X . . . . . . |*/ 0x00,0x00, /*| . . . . . X X X X X . . . . . . |*/ 0x00,0x00, /*| . . . . X X X X X X X . . . . . |*/ 0x00,0x00, /*| . . . . X X X X X X X . . . . . |*/ 0x00,0x00, /*| . . . X X X X X X X X X . . . . |*/ 0x00,0x00, /*| . . . . X X X X X X X . . . . . |*/ 0x00,0x00, /*| . . . . X X X X X X X . . . . . |*/ 0x00,0x00, /*| . . . . . X X X X X . . . . . . |*/ 0x00,0x00, /*| . . . . . X X X X X . . . . . . |*/ 0x00,0x00, /*| . . . . . . X X X . . . . . . . |*/ 0x00,0x00, /*| . . . . . . X X X . . . . . . . |*/ 0x00,0x00, /*| . . . . . . . X . . . . . . . . |*/ 0x00,0x00,
At this point all we have done is edit the comment. We haven't really entered any actual data. The top line will be very easy because there is just a single pixel in the center column labeled "1" so this results in data "0x01,0x00". The second row has X in both column 2 and 1 so we add them together. On the right half there is a X in column 8 so we end up with "0x03,0x80". The third row is identical. The fourth row we add up 4+2+1 for the left half. On the right half we have 8+4 which is 12 but represented in hexadecimal as "c" therefore the data for that line is "0x07,0xc0". You can use the insert key overwrite feature to change the zeros to the proper hexadecimal value. When completed, the section of code looks like this.
//135 diamond suit /*| 8 4 2 1 8 4 2 1 8 4 2 1 8 4 2 1 |*/ /*| . . . . . . . X . . . . . . . . |*/ 0x01,0x00, /*| . . . . . . X X X . . . . . . . |*/ 0x03,0x80, /*| . . . . . . X X X . . . . . . . |*/ 0x03,0x80, /*| . . . . . X X X X X . . . . . . |*/ 0x07,0xc0, /*| . . . . . X X X X X . . . . . . |*/ 0x07,0xc0, /*| . . . . X X X X X X X . . . . . |*/ 0x0f,0xe0, /*| . . . . X X X X X X X . . . . . |*/ 0x0f,0xe0, /*| . . . X X X X X X X X X . . . . |*/ 0x1f,0xf0, /*| . . . . X X X X X X X . . . . . |*/ 0x0f,0xe0, /*| . . . . X X X X X X X . . . . . |*/ 0x0f,0xe0, /*| . . . . . X X X X X . . . . . . |*/ 0x07,0xc0, /*| . . . . . X X X X X . . . . . . |*/ 0x07,0xc0, /*| . . . . . . X X X . . . . . . . |*/ 0x03,0x80, /*| . . . . . . X X X . . . . . . . |*/ 0x03,0x80, /*| . . . . . . . X . . . . . . . . |*/ 0x01,0x00,
Now scroll down into the glyph information table and edit the data for glyph 135. Because the "space bar" glyph prior to this was three rows of pixels tall, it took six bytes of data to define it. The "space bar" data started at index 976 so our data for the diamond will start at 982. As always the width is 16 pixels. We have defined 15 rows of pixels for the height. The xAdvance is always 21, we will try dX of 3 and dY of 16. When edited, that section of code looks like this.
{ 954, 16,11, 21, 3,-13}, //133 double greater than
{ 976, 16, 3, 21, 2,- 2}, //134 space bar
{ 982, 16,15, 21, 3,-16}, //135 diamond suit
{ 0, 16,21, 21, 3,-19}, //136
{ 0, 16,21, 21, 3,-19}, //137
Go back to the main sketch and in the setup function change the default magnifier to 4 and the First_Glyph to 134 so that we can on the symbols we are currently working on. Compile and upload the sketch.
delay (1000); Magnifier=4; First_Glyph=134; Show ();
The results will look like this. You might want to play around with the dX and dY values to see how they affect the position of the diamond within the grid.
You can then proceed to design your own version of hearts, clubs, and spades. Here is our version.
//136 hearts suit /*| 8 4 2 1 8 4 2 1 8 4 2 1 8 4 2 1 |*/ /*| . . . X X . . , . . X X . . . . |*/ 0x18,0x30, /*| . X X X X X . , . X X X X X . . |*/ 0x7c,0x7c, /*| X X X X X X X , X X X X X X X . |*/ 0xfe,0xfe, /*| X X X X X X X X X X X X X X X . |*/ 0xff,0xfe, /*| X X X X X X X X X X X X X X X . |*/ 0xff,0xfe, /*| . X X X X X X X X X X X X X . . |*/ 0x7f,0xfc, /*| . X X X X X X X X X X X X X . . |*/ 0x7f,0xfc, /*| . . X X X X X X X X X X X . . . |*/ 0x3f,0xf8, /*| . . X X X X X X X X X X X . . . |*/ 0x3f,0xf8, /*| . . . X X X X X X X X X . . . . |*/ 0x1f,0xf0, /*| . . . . X X X X X X X . . . . . |*/ 0x0f,0xe0, /*| . . . . . X X X X X . . . . . . |*/ 0x07,0xc0, /*| . . . . . . X X X . . . . . . . |*/ 0x03,0x80, /*| . . . . . . . X . . . . . . . . |*/ 0x01,0x00, //137 clubs suit /*| 8 4 2 1 8 4 2 1 8 4 2 1 8 4 2 1 |*/ /*| . . . . . . X X X . . . . . . . |*/ 0x03,0x80, /*| . . . . X X X X X X X . . . . . |*/ 0x0f,0xe0, /*| . . . X X X X X X X X X . . . . |*/ 0x1f,0xf0, /*| . . . X X X X X X X X X . . . . |*/ 0x1f,0xf0, /*| . . . . X X X X X X X . . . . . |*/ 0x0f,0xe0, /*| . . . . . . X X X . . . . . . . |*/ 0x03,0x80, /*| . . . . . . . X . . . . . . . . |*/ 0x01,0x00, /*| . . X X . . . X . . . X X . . . |*/ 0x31,0x18, /*| . X X X X . . X . . X X X X . . |*/ 0x79,0x3c, /*| X X X X X X . X . X X X X X X . |*/ 0xfd,0x7e, /*| X X X X X X X X X X X X X X X . |*/ 0xff,0xfe, /*| X X X X X X . X . X X X X X X . |*/ 0xfd,0x7e, /*| . X X X X . . X . . X X X X . . |*/ 0x79,0x3c, /*| . . X X . . . X . . . X X . . . |*/ 0x31,0x18, /*| . . . . . . . X . . . . . . . . |*/ 0x01,0x00, /*| . . . . . . . X . . . . . . . . |*/ 0x01,0x00, /*| . . . . . . X X X . . . . . . . |*/ 0x03,0x80, //138 spades suit /*| 8 4 2 1 8 4 2 1 8 4 2 1 8 4 2 1 |*/ /*| . . . . . . . X . . . . . . . . |*/ 0x01,0x00, /*| . . . . . . X X X . . . . . . . |*/ 0x03,0x80, /*| . . . . . X X X X X . . . . . . |*/ 0x07,0xc0, /*| . . . . X X X X X X X . . . . . |*/ 0x0f,0xe0, /*| . . . X X X X X X X X X . . . . |*/ 0x1f,0xf0, /*| . . X X X X X X X X X X X . . . |*/ 0x3f,0xf8, /*| . . X X X X X X X X X X X . . . |*/ 0x3f,0xf8, /*| . X X X X X X X X X X X X X . . |*/ 0x7f,0xfc, /*| . X X X X X X X X X X X X X . . |*/ 0x7f,0xfc, /*| X X X X X X X X X X X X X X X . |*/ 0xff,0xfe, /*| X X X X X X X X X X X X X X X . |*/ 0xff,0xfe, /*| . X X X X X X X X X X X X X . . |*/ 0x7f,0xfc, /*| . . X X X X . X . X X X X . . . |*/ 0x3d,0x3c, /*| . . . X X . . X . . X X . . . . |*/ 0x19,0x30, /*| . . . . . . . X . . . . . . . . |*/ 0x01,0x00, /*| . . . . . . . X . . . . . . . . |*/ 0x01,0x00, /*| . . . . . . X X X . . . . . . . |*/ 0x03,0x80,
Here is the glyph data.
I { 976, 16, 3, 21, 2,- 2}, //134 space bar
{ 982, 16,15, 21, 3,-16}, //135 diamond suit
{ 1012, 16,14, 21, 3,-15}, //136 heart suit
{ 1040, 16,17, 21, 3,-16}, //137 clubs suit
{ 1074, 16,17, 21, 3,-16}, //138 spades suit
{ 0, 16,21, 21, 3,-19}, //139
Finally at the bottom of the file you should add some definitions so that we can refer to these new symbols in our application programs.
#define MY_SPACE_BAR 134 #define MY_DIAMOND_SUIT 135 #define MY_HEARTS_SUIT 136 #define MY_CLUB_SUIT 137 #define MY_SPADE_SUIT 138
In the next section we will show you how to display these characters in your application program.
