# Displaying Images on a Color Graphic LCD

Discussion in 'Microcontrollers, Programming and IoT' started by Supercap2F, Jun 28, 2016.

1. ### Supercap2F

550
150
Mar 22, 2014
Hey Guys!

I've been working on graphical stuff for LCDs recently, and right now I'm trying to display a image on a color TFT with a PIC. The driver chip for the display is a ILI9163, and the PIC is a 24EP512GP. The display is in a 5R:6G:5B 16 bit color format.

So my problem is turning a image into a C array of that format. From doing some research it looks like I can directly extract the image data from a 16-bit .bmp picture but I haven't been able to figure out how. I also found a couple programs that claimed they could make a C array from a image, but I haven't had luck with them either...

I really don't know if I'm going at this the right way or what to try next. So I thought I would see if I could get some tips here.

Thanks!!
Dan

2. ### Harald KappModeratorModerator

11,162
2,550
Nov 17, 2011
Here's someone explaining a bit more detailed the usage of such an LCD.

This guy has a library which can (among others) convert an RGB24 value to an RGB565 value. A link to his github repository is at the bottom of the page.

The bmp file format for reading the bitmap into memory is described here.

3. ### Supercap2F

550
150
Mar 22, 2014
In your second link, the guy has a online program to convert a 24-bit .bmp file to 16-bit C array - which is just what I need. So I ran a bitmap through it and here's what I got on the display:

The original image (40x37px):

The code I used to display the array on the screen is:
Code:
```for(y=0;y<40;y++)
for(x=0;x<37;x++)
PlotPoint(x,y,image[x+y*40]);```
(which is paraphrased off his website)
I don't quite understand why I have to multiply x+y by 40 in the image variable, why couldn't I just put x+y in there (I tried it and it didn't work)? I must be doing something wrong given the output on the screen...

Thanks!!

P.S. How did you find the second link anyway? I googled for about an hour for something like this and didn't come up with anything really useful.

4. ### Supercap2F

550
150
Mar 22, 2014
I got it to work!

Apparently I had a issue with the way colors are transferred to the display with PlotPoint...

I also got rid of that weird strip at the bottom by changing the code:
Code:
```for(y=0;y<37;y++)
for(x=0;x<37;x++)
PlotPoint(x,y,image[x+y*40]);```
I still don't understand that x+y*40 thing though.

5. ### Harald KappModeratorModerator

11,162
2,550
Nov 17, 2011
image[] is a one dimensional array, where the data is arranged one line after the other. To get the index of a pixel in line y, row x, you have to find the starting index for this line within the array which is y*40 for a line length of 40, then index from that on to row x, so index=40*y +x.

I Googled too, for a few minutes. It's a matter of the right keywords. I used something like 'IL9163 library PIC' or similar. I don't remember exactly.

Supercap2F likes this.
6. ### Supercap2F

550
150
Mar 22, 2014
Okay, That makes since. Thank you for your time Harald!

For anyone else reading this thread: I found a better image converter on github here. It's very nice and can import multiple file formats.
Dan