Tutorial-4: Adding Indian Languages in OLED Display

1. Introduction        

                     In the previous tutorial, we saw how to print English font on OLED display. In this tutorial, we will see how to print Indian languages. It was easy to print English characters as there is no composite word made from two half letters. But in Devnagari it is not the case. We will see what are the challenges to print Devanagari on OLED

In Indian languages, we are going to print Devanagari script. And in Devanagari script, we are going to use Shivaji02 font. You can use any other font also.

 Please watch the following video before reading Further

2. Creating Hex code For Font

Steps to create a custom font for OLED are as follows:

     1)   Open GLCD Font creator
     2)   Goto File->New Font-> Import An Existing System Font

       3) Following window will open. I am selecting  

                                Font  -> Shivaji2 ,

                        Font style ->  Regular

                            Size      -> 22

        4) We want to input the ASCII code of start and last character. input 32 to 137 as shown in the following image

       5) The following window will open. Now click on 'Export for GLCD'

         6) In following windows 1)select mikroC 2) then copy full array in between two curly braces { }.

                         

 7)   paste the copied array in data[][] array declared in Arduino code.

3. Problems

3.1 separate characters

                      in the previous tutorial no. 3 we printed an English font. In English there are no composite words made from two half letters. But in Devanagari maximum words are made from two half characters. like as shown below

            @yaa = @ +y + a+ a

See in the image below, if we print Devanagari script using the same method which was used to print English then each character will be seen separately which is not expected. we are shifting cursor by the same amount before printing a new character. 

 3.2  Solution-1

                    In the above image, we saw that there is a large gap between two characters when we print the Devanagari script. one solution for this is decreasing the spacing between two characters as shown in the image below:

    But one problem in the above method is overlapping of two characters. Rightmost pixels of '@ ' are masked by leftmost pixels of 'y '. So need some improvement in this solution.

 3.3  Solution-2

               In solution-1 there is a problem at the overlapping region of two characters. The solution to this problem is OR operation in the overlapping region. OR operation means a pixel in the overlapping region will be ON if it is ON for one of the two characters.   The image below shows the effect of OR operation in the overlapping region.  The dotted red line represents the overlapped region.

                   We can see in the above image, OR operation in the overlapping region solved our problem. so we will implement solution-2

4. Implementation of the Solution

                 In the above section we saw, solution-2 solved our problem in the overlapping region. In this section, we will see how to implement solution-2.
                  In 0.96 inch OLED I had,  we can write data at any column and page, but we can't read it back. For OR operation, we need to do OR operation of Rightmost overlapping pixels of character which is printed on-screen with leftmost pixels of the character which is to be printed.

    We can see in the above image, we need to OR operation of the region inside two dotted rectangles. But the problem is we can't access data in OLED.
The solution to this is, storing the copy of the data which we are sending to the OLED.  This copy is a 2D array and it is called screen buffer.

Following image shows the screen buffer:

After OR operation and sending data to OLED, screen and screen buffer will show composite characters as we were expecting. You can see it in the following image

5. To print String: 

                           In the previous tutorial code, we built one function called

print_string();

we need to pass a string that is to be printed. Now we will see want kind of string is to pass to this function to print Devanagari Font.

Following image shows the English keyboard to Shivaji Font conversion

   1)  Open Microsoft word (or any editor in which we can select a font)
   2)  Select Shivaji02 font
   3)  write a Devanagari string that you want to display in using the above image
   4)  Copy that Devnagari String and paste it in arduino code in 
                     print_string("String",0,0);

6.Arduino Code:

                      

                             

Tutorial-3: Adding Custom English Font in OLED Display

1. Introduction

                 In the previous tutorial, we displayed a 12x24 matrix on OLED display. In this tutorial, we will display English font on OLED. We will create Hex code for English font in GLCD Font Creator. 

 Please Video of this on Youtube:

 

2. Creating Hex code For Font

Steps to create a custom font for OLED are as follows:

     1)   Open GLCD Font creator

     2)   Goto File->New Font-> Import An Existing System Font

     

        3)   Following window will open. I am selecting  

                                Font  -> @DFGothic-EB font ,

                        Font style ->  Regular

                            Size      ->  18

                    

      

      4)   We want to input the ASCII code of start and last character:

              

      5)   Following window will open. Now click on 'Export for GLCD'

           

         

         6) In following windows 1)select mikroC 2) then copy full array in between two  curly braces { }.

  

      

Storing Array in Flash memory:

          In the following image, we calculated the number of bytes required for storing a single character Hex code

          37bytes are require for storing single character's Hex code

           

          No. of characters we want to display = 127-31= 96

                                                                     

          No. of bytes required for 96 characters = 96 x 37 = 3552 byte

           But SRAM of Microcontroller ( Arduino in this case) is 2 kb i.e 2048 bytes

                                                                        

          So we will store our Hex code array in Flash memory which is 32kb in Arduino. It is done using PROGMEM as follows:

                 const PROGMEM dataType variableName[] = {};    

 Also, you need to know the first character is represented by first 37 items in an array and their index are from 0 to 36 in which the first number does not represent any pixel. Next character is represented by items with index 37-73 as shown in following image.

    The following function 
          1) takes input as a character, x and y position
          2) finds line no. in array ( as shown in above image)
          3) Finds the index of item from which hex code of character to be displayed is started and add 1 because first Hex no. does not represent any pixel
       

       

      To Print string we need to call above function in a loop and also each time we need to shift cursor by character width to print next character in at next location on the screen. Following code implement the same
_______

             

  

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