ProGFX supports advance function to draw text on graphical LCD screen. ProGFX support multiple fonts, fonts with variable width characters, absolute pixel based positioning, and utility function to get the dimension of text in any specified font. The last feature is used to cleanly position text relative to other graphic and text objects on screen. So lets get started.

First you will need a tool that will help convert any Windows Font to ProGFX compatible format. Thanks to Mr. F. Maximilian Thiele we have a great tool called Font Creator. You can download it from here.

It is a Java application so you need the Java Runtime to use it. Launch the app using start.bat file. You will get a screen similar to this.

GLCD Font Creator Main Screen

Font Creator Main Screen

From file menu select "New Font" , and configure the New Font Dialog as follows.

New Font Dialog

  • Name = Arial12
  • Import Font = Arial
  • Size =12

And click ok.

From Export Menu Select "Export Font", Give it the name "Arial12.h" while saving.

Create a AVR Studio Project(avr-gcc type) with GFX Support. The steps are given in the following tutorials.

Name the AVR Studio Project as "FontDemo". Open the project folder in Windows Explorer (or My Computer) and create a new folder inside it called "fonts". This folder will hold all fonts used by our project. Copy the font that you have just created (Arial12.h) to this folder. The following example program illustrate the use of custom fonts.


1     /******************************************************************************
2
3     ProGFX Example Programs
4     ***********************
5
6        Example to demonstrate the use of custom fonts.
7
8     Website:
9        http://www.ProGFX.org
10
11    Hardware:
12       AVR ATmega32 @ 16MHz
13       Fuse High = 0xC9 Low=0xFF
14
15    Compiler:
16       avr-gcc
17       http://winavr.sourceforge.net/
18
19    Project Manager:
20       AVR Studio 4.17 Build 666
21
22
23
24    Copyright:
25       (C) 2008-2011 eXtreme Electronics
26       www.eXtremeElectronics.co.in
27
28    Author:
29       Avinash Gupta
30       me@avinashgupta.com
31       http://www.avinashgupta.com
32
33    ******************************************************************************/
34
35    #include <gfx.h>
36    #include <font.h>
37
38    //Our newly created Arial12 Font
39    #include "fonts/Arial12.h"
40
41    void main()
42    {
43       //Initialize the ProGFX Engine
44       GFXInit();
45
46       //Select a Font
47       GFXSetFont(Arial12);
48
49       //Write Some Text to the screen
50       GFXWriteStringXY(1,1,"This is Arial12 Font !",GFX_COLOR_BLACK);
51
52       //Now Write the buffer to actual screen
53       GFXUpdate();
54
55       //Wait Forever
56       while(1);
57
58    }

Copy/Paste the above program in FontDemo.c file. Build and run the program. You will get a screen similar to this.

GLCD Font Demo

GLCD Font Demo

 

Before you can use any custom font you need to include it in your main program. It is done in line 39 of above program.

#include "fonts/Arial12.h"

Then in line 47 we select this font as an active font. This is done by using the Function

GFXSetFont();

The parameter is the name of the font. In our case while creating the font we used the name "Arial12" so we call as

GFXSetFont(Arial12);

This sets Arial12 as active font and all the drawing will be done using this font.

We write some text to the screen using a call to

GFXWriteStringXY(1,1,"This is Arial12 Font !",GFX_COLOR_BLACK);

The first parameter is the x co-ordinate of the text, second is y, third is the text to draw, the fourth is the color in which to draw.

Using Multiple Fonts

You can use many different fonts in the same program. Create two more fonts using the Font Creator as described above. You can select any font you like. In this example I will create two more fonts with the following style.

  • Font Name: Comic24
    • Windows Font name = Comic Sans MS
    • Size 24
    • Bold = Yes
  • Font Name Times18
    • Windows Font Name = Times New Roman
    • Size 18
    • Italic = Yes

Create a new project named "MultiFont" using AVR Studio with ProgGFX support. Inside the project folder create a new folder called "fonts". Put all three fonts created inside it. In the "MultiFont.c" file copy/paste the following code.


1     /******************************************************************************
2
3     ProGFX Example Programs
4     ***********************
5
6        Example to demonstrate the use of multiple custom fonts. Draws some text
7        using three different fonts.
8
9     Website:
10       http://www.ProGFX.org
11
12    Hardware:
13       AVR ATmega32 @ 16MHz
14       Fuse High = 0xC9 Low=0xFF
15
16    Compiler:
17       avr-gcc
18       http://winavr.sourceforge.net/
19
20    Project Manager:
21       AVR Studio 4.17 Build 666
22
23
24
25    Copyright:
26       (C) 2008-2011 eXtreme Electronics
27       www.eXtremeElectronics.co.in
28
29    Author:
30       Avinash Gupta
31       me@avinashgupta.com
32       http://www.avinashgupta.com
33
34    ******************************************************************************/
35
36    #include <gfx.h>
37    #include <font.h>
38
39    //Fonts
40    #include "fonts/Arial12.h"
41    #include "fonts/Comic24.h"
42    #include "fonts/Times18.h"
43
44    void main()
45    {
46       uint8_t y=1;
47
48       //Initialize the ProGFX Engine
49       GFXInit();
50
51       //Select a Font
52       GFXSetFont(Arial12);
53
54       //Write Some Text to the screen
55       GFXWriteStringXY(1,y,"This is Arial12 Font !",GFX_COLOR_BLACK);
56
57       //Calculate new line co-ordinates
58       y+=GFXGetCharHeight();
59       y+=2;//go down two more pixel
60
61       //Select a Font
62       GFXSetFont(Comic24);
63
64       //Write Some Text to the screen
65       GFXWriteStringXY(1,y,"Comic24 !",GFX_COLOR_BLACK);
66
67       //Calculate new line co-ordinates
68       y+=GFXGetCharHeight();
69       y+=2;//go down two more pixel
70
71       //Select a Font
72       GFXSetFont(Times18);
73
74       //Write Some Text to the screen
75       GFXWriteStringXY(1,y,"This is Times18 !",GFX_COLOR_BLACK);
76
77       //Now Write the buffer to actual screen
78       GFXUpdate();
79
80       //Wait Forever
81       while(1);
82
83    }

Build and run the program. You will get output similar to this.

GLCD Multi Font Demo

GLCD Multi Font Demo

 

Downloads

Other Parts of the Tutorial Series

Avinash

Avinash Gupta is solely focused on free and high quality tutorial to make learning embedded system fun !

More Posts - Website

Follow Me:
FacebookLinkedInGoogle Plus