Tutorial-2: Using GLCD Font Creator For designing patterns on OLED

   

1.Introduction

  In Tutorial-1  we learnt how to display a chessboard layout on OLED display using 8x8 pixel matrix. The pixel data to be sent was calculated by us like B10101010 . But if we want to display an Alphabate or a number, it is very time-consuming to calculate bits stream for each character. So we will use a tool called  GLCD Font Creator.   Using GLCD font creator we can get Hex code for any character in any font.

 Please watch the following video tutorial:

 




 This tutorial is divided into 2 parts:
 part 1: Displaying chessboard layout on 8x8 matrix using Hex code generated by GLCD font creator
 part 2: Displaying chessboard layout on 16x16 matrix using Hex code generated by GLCD font creator

2. Part-1: Drawing chessboard layout on 8x8 pixels

                    In this part, We will draw a chessboard layout on 8x8 pixels in GLCD font creator, then we will copy Hex code generated for our design to our Arduino code and then we will display that data on OLED display.

2.1 Drawing a Pattern 

                   Follow the following steps to draw pattern

          1) Open GLCD font creator

          2) Goto File->New Font-> New Font From Scratch

 

           3)The following window will open. Fill width and Height as 8 because our pixel matrix is 8x8.Fill other details as shown. then Press Ok.

   

          4) Following window with 8x8 matrix will open. Each block corresponds to a pixel on a display. Click on the pixels which you want to light.

         5) After clicking on pixels which we want to light. Our pattern will look like as shown in the following image.

           

              6) Now save the file by pressing 'CTR+s' and then follow following instructions

                 (1) Click on 'Export for GLCD' 
                 (2) select 'x-GLCD lib'
                 (3) Select 'MikroC'
                 (4) copy 8 Hex numbers.(Don't copy first number. 0x08,inthis case)

              Each number in the above 8 number array represents a column of 8 pixels on display. We learnt in tutorial-1 that, MSB(Most Significant Bit) of Hex number corresponds to the bottom pixel and LSB(Least Significant Bit) corresponds to the top pixel.

   if we above array is alternate 0x55 and 0xAA

                   0x55 = B01010101

                   0xAA = B10101010

      So these are the same numbers which we passed in our tutorial-1 program, the difference is just this sequence of bits are generated using GLCD software.

Now we will put a sequence of these hex numbers in an array and send it to display one by one using for loop.

 Arduino Code

3. Part-2: Drawing chessboard layout on

16x16 pixels

                    In this part, we will draw a chessboard layout on 16x16 pixels. In part 1 after sending data column pointer was incremented hence we did not need setting the position of the cursor. But in this part-2, we need to set cursor after sending every data.

           First, we will draw a pattern in GLCD software.

3.1 Drawing a Pattern

                   Follow the following steps to draw the pattern

          1) Open GLCD font creator
              

          2) Goto File->New Font-> New Font From Scratch 
                 

              3) The following window will open. Fill width and Height as 16 because our pixel matrix is 16x16. Fill other details as shown. then Press Ok.
             

                4) Following window with 16x16 matrix will open. Each block corresponds to a pixel on a display. Click on the pixels which you want to light.
                  

   5) After clicking on pixels which we want to light. Our pattern will look like as shown in the following image.
                 

   6) Now save the file by pressing 'CTR+s' and then follow following instructions
                 (1) Click on 'Export for GLCD' 
                 (2) select 'x-GLCD lib'
                 (3) Select 'MikroC'
                 (4) copy all Hex numbers except first one.(Don't copy first number. 0x01,in this case) 

         
     0x33, 0x33, 0x33, 0x33, 0xCC, 0xCC, 0xCC, 0xCC, 0x33, 0x33, 0x33, 0x33, 0xCC, 0xCC, 0xCC, 0xCC, 0x33, 0x33, 0x33, 0x33, 0xCC, 0xCC, 0xCC, 0xCC, 0x33, 0x33, 0x33, 0x33, 0xCC, 0xCC, 0xCC, 0xCC

          
             Above array of HEX code we copied is an array of bytes sequenced shown in the following image . The first byte corresponds to column 0 page 0, second-byte corresponds to column 0 page 1, Third-byte corresponds to column 1 page 0, Fourth-byte corresponds to column 1 page 1 and so on.       

       

      While sending these bytes to display via I2C, we need to set the cursor each time in same sequence as shown in the above image. 
                 

       

        Above zigzag transversing of the pixel matrix is implemented in code as follows:

____________________________________
Full Arduino Code is as follows:
____________________________________

____________________________________
Output of Code on Display:
____________________________________

Following image is captured using Milliscope