prepare png file for arduino tft display in stock

I found the TFT screen and Uno on Banggood.com about a month ago and over the weekend I was messing with the pair and found the tftbmp draw code in the demo.. I extended it with the ability to read any bmp file on the SD card.. so all you do is put your bitmaps on the SD and plug it in.. Having to add/edit/recompile/reload the Uno everytime is BS... Here is my code:

About: STEMpedia is a place bringing project-making tools at one place- kits, online courses, coding platforms, controller app and tons of free learning resources.

Many times to make any user interface or nicely display content, we use icons/images. In this Instructable, you will be displaying icons or logos or images on your TFT screen from Arduino with using ATmega (microcontroller used in Arduino) Flash memory. It does not require any SD Card to store bitmap images or USB connection to send image data. We will convert images from any image format like .bmp, .jpg, .jpeg, .png to its hexadecimal equivalent to be stored in flash memory of arduino mega (ATmega2560).

All microcontroller has Flash memory, where the codes are stored permanently. Arduino Mega has comparatively good amount of Flash memory, ie 256 KB of which 8 KB used by bootloader. We will be doing two things:Monochrome icons/images: The icons or images will be displayed with single color, but takes very less memory. Just 1bit for one pixel.

Colored icons/images: It depends on the TFT screen used, for eg. 1.8" SPI TFT with ST7735 driver has 16bit color. Images or icons will just look like your phone screen, but it takes lots of space. it takes 16bits (2bytes) for each pixel (16times more!!).

It requires a TFT screen compatible with arduino, few jumper cables (dupont wires), breadboard and is recommended to use 3.3V -5V level shifters (but it works without it also :P ). But we have used evive . It has all the things required to do this without any additional wiring!! Hence it helps in avoiding the repetitive task for bread-boarding. evive uses the most commonly used 1.8" SPI based TFT (ST7735R driver) having 160px by 128px along with Arduino Mega 2560 R3. Also has internal logic level shifters for ideal usage.

https://sourceforge.net/projects/lcd-image-convert...This tool has all the options for large varieties of screens available. You can even draw your own icon!!.

Also we may need to use some image resizing tool as most of the images available on internet are of very large size as compared to hoscreen. Option for Image Resizer:

If you are using the tool mentioned in last step, Please look at the images. It has lots of options to resize image for our usage. We can easily enter the value of "height" or "width" in pixels!.

Once you have the image ready, next step is to convert the image to some form of numbers as actually all images are represented by array/matrix of numbers. Since we are not going to use SD card to save images or logos or icons as its irritating everytime to have a micro SD card for this purpose, we will now convert images to hexadecimal. Then we will store it in Arduino Flash Memory.

Using the LCD_Image_Converter tool, we will get the image in hexadecimal form.Load the image usign File->Open->"SelectUrImage" If you want to edit image, use the editing tools.

Copy all the numbers!! (Here each pixel is stored in its binary form as image is monochrome. If the pixel is filled, then it will be 1 or else it will be 0)

Other option is to go for colored images (remember that it takes lot of Arduino Flash memory). Based on the TFT screen you will have to select some options like color format (1.8" SPI TFT SR7735R uses 16 bit colors: R5G6B5)Load the image usign File->Open->"SelectUrImage" If you want to edit image, use the editing tools.

Copy all the numbers!! (Here each pixel is stored in a 16bit hexadecimal number. From LSB (lowest significant bit), first 5 represent "blue", then 6 digits represent "green" and rest 5 are for red.)

Case 2: Since there is no direct function in Adafruit GFX library, we will have to write our own code for this. We will have to traverse pixel by pixel to draw image/icon.

This type of icons are very useful for making automation systems having a display bar. Such icons provide intuitiveness to users for your projects or machines.

This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.

Displaying a custom image or graphic on a LCD display is a very useful task as displays are now a premium way of providing feedback to users on any project. With this functionality, we can build projects that display our own logo, or display images that help users better understand a particular task the project is performing, providing an all-round improved User Experience (UX) for your Arduino or ESP8266 based project. Today’s tutorial will focus on how you can display graphics on most Arduino compatible displays.

The procedure described in this tutorial works with all color displays supported by Adafruit’s GFX library and also works for displays supported by the TFTLCD library from Adafruit with little modification. Some of the displays on which this procedure works include:

While these are the displays we have, and on which this tutorial was tested, we are confident it will work perfectly fine with most of the other Arduino compatible displays.

For each of the displays mentioned above, we have covered in past how to program and connect them to Arduino. You should check those tutorials, as they will give you the necessary background knowledge on how each of these displays works.

For this tutorial, we will use the 2.8″ ILI9325 TFT Display which offers a resolution of 320 x 340 pixels and we will display a bitmap image of a car.

As usual, each of the components listed above can be bought from the links attached to them. While having all of the displays listed above may be useful, you can use just one of them for this tutorial.

To demonstrate how things work, we will use the 2.8″ TFT Display. The 2.8″ TFT display comes as a shield which plugs directly into the Arduino UNO as shown in the image below.

Not all Arduino displays are available as shields, so when working with any of them, connect the display as you would when displaying text (we recommend following the detailed tutorial for the display type you use of the above list). This means no special connection is required to display graphics.

Before an image is displayed on any of the Arduino screens, it needs to be converted to a C compatible hex file and that can only happen when the image is in bitmap form. Thus, our first task is to create a bitmap version of the graphics to be displayed or convert the existing image to a bitmap file. There are several tools that can be used for creation/conversion of bitmap images including, Corel Draw and Paint.net, but for this tutorial, we will use the Paint.net.

Our demo graphics today will be a car. We will create the car on a black background and use a white fill so it’s easy for us to change the color later on.

The resolution of the graphics created should be smaller than the resolution of your display to ensure the graphics fit properly on the display. For this example, the resolution of the display is 320 x 340, thus the resolution of the graphics was set to195 x 146 pixels.

Your graphics could also include some text. Just ensure the background is black and the fill color is white if you plan to change the color within your Arduino code.

With the graphics done, save both files as .bmp with 24bits color.It is important to keep in mind that large bitmaps use up a lot of memory and may prevent your code from running properly so always keep the bitmaps as small as possible.

Image2Code is an easy-to-use, small Java utility to convert images into a byte array that can be used as a bitmap on displays that are compatible with the Adafruit-GFX or Adafruit TFTLCD (with little modification) library.

All we have to do is to load the graphics into the software by clicking the “Choose file” button and it will automatically generate a byte array equivalent to the selected bitmap file.

Paste the bit array in the graphics.c file and save. Since we have two graphics (the car and the text), You can paste their data array in the same file. check the graphics.c file attached to the zip file, under the download section to understand how to do this. Don’t forget to declare the data type as “const unsigned char“, add PROGEM in front of it and include the avr/pgmspace.h header file as shown in the image below.  This instructs the code to store the graphics data in the program memory of the Arduino.

With this done, we are now ready to write the code. Do note that this procedure is the same for all kind of displays and all kind of graphics. Convert the graphics to a bitmap file and use the Img2code utility to convert it into a hex file which can then be used in your Arduino code.

To reduce the amount of code, and stress involved in displaying the graphics, we will use two wonderful libraries; The GFX library and the TFTLCD library from Adafruit.

The GFX library, among several other useful functions, has a function called drawBitmap(), which enables the display of a monochrome bitmap image on the display. This function allows the upload of monochrome only (single color) graphics, but this can be overcome by changing the color of the bitmap using some code.

The Adafruit libraries do not support all of the displays but there are several modifications of the libraries on the internet for more displays. If you are unable to find a modified version of the library suitable for your the display, all you need do is copy the code of the drawBitmap() function from the GFX library and paste it in the Arduino sketch for your project such that it becomes a user-defined function.

The first two are thex and y coordinates of a point on the screen where we want the image to be displayed. The next argument is the array in which the bitmap is loaded in our code, in this case, it will be the name of the car and the text array located in the graphics.c file. The next two arguments are the width and height of the bitmap in pixels, in other words, the resolution of the image. The last argument is the color of the bitmap, we can use any color we like. The bitmap data must be located in program memory since Arduino has a limited amount of RAM memory available.

As usual, we start writing the sketch by including the libraries required. For this procedure, we will use the TFTLCD library alone, since we are assuming you are using a display that is not supported by the GFX library.

Next, we specify the name of the graphics to be displayed; car and title. At this stage, you should have added the bit array for these two bitmaps in the graphics.c file and the file should be placed in the same folder as the Arduino sketch.

With that done, we proceed to the void loop function, under the loop function, we call the drawbitmap() function to display the car and the text bitmap using different colors.

The last section of the code is the drawBitmap function itself, as earlier mentioned, to use the drawbitmap() function with the Adafruit TFTLCD library, we need to copy the function’s code and paste into the Arduino sketch.

Plug in your screen as shown above. If you are using any other display, connect it as shown in the corresponding linked tutorial. With the schematics in place, connect the Arduino board to your PC and upload the code. Don’t forget the graphics file needs to be in the same folder as the Arduino sketch.

That’s it for this tutorial guys. The procedure is the same for all kinds of Arduino compatible displays. If you get stuck while trying to replicate this using any other display, feel free to reach out to me via the comment sections below.

This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.

This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.

To do this, we will useLCD image converter.You can find it here :https://sourceforge.net/projects/lcd-image-converter/Resize your imageto the size of your screen (240x240)

As a 2.4inch TFT display module with a resolution of 240 * 320, it uses the SPI interface for communication. LCD has an internal controller with basic functions, which can be used to draw points, lines, circles, and rectangles, and can display English, Chinese as well as pictures.

The 2.4inch LCD uses the PH2.0 8PIN interface, which can be connected to the Raspberry Pi according to the above table: (Please connect according to the pin definition table. The color of the wiring in the picture is for reference only, and the actual color shall prevail.)

The LCD supports 12-bit, 16-bit, and 18-bit input color formats per pixel, namely RGB444, RGB565, and RGB666 three color formats, this demo uses RGB565 color format, which is also a commonly used RGB format.

For most LCD controllers, the communication mode of the controller can be configured, usually with an 8080 parallel interface, three-wire SPI, four-wire SPI, and other communication methods. This LCD uses a four-wire SPI communication interface, which can greatly save the GPIO port, and the communication speed will be faster.

Note: Different from the traditional SPI protocol, the data line from the slave to the master is hidden since the device only has a display requirement.

Framebuffer uses a video output device to drive a video display device from a memory buffer containing complete frame data. Simply put, a memory area is used to store the display content, and the display content can be changed by changing the data in the memory.

Note: The script will replace the corresponding /boot/config.txt and /etc/rc.local and restart, if the user needs, please back up the relevant files in advance.

We have carried out the low-level encapsulation, if you need to know the internal implementation can go to the corresponding directory to check, for the reason that the hardware platform and the internal implementation are different

2.We use Dev libraries by default. If you need to change to BCM2835 or WiringPi libraries ,please open RaspberryPi\c\Makefile and modify lines 13-15 as follows:

If you need to draw pictures, or display Chinese and English characters, we provide some basic functions here about some graphics processing in the directory RaspberryPi\c\lib\GUI\GUI_Paint.c(.h).

Set points of the display position and color in the buffer: here is the core GUI function, processing points display position and color in the buffer.

The fill color of a certain window in the image buffer: the image buffer part of the window filled with a certain color, usually used to fresh the screen into blank, often used for time display, fresh the last second of the screen.

Write Ascii character: In the image buffer, use (Xstart Ystart) as the left vertex, write an Ascii character, you can select Ascii visual character library, font foreground color, font background color.

Write English string: In the image buffer, use (Xstart Ystart) as the left vertex, write a string of English characters, you can choose Ascii visual character library, font foreground color, font background color.

Write Chinese string: in the image buffer, use (Xstart Ystart) as the left vertex, write a string of Chinese characters, you can choose character font, font foreground color, font background color of the GB2312 encoding

Write numbers: In the image buffer,use (Xstart Ystart) as the left vertex, write a string of numbers, you can choose Ascii visual character library, font foreground color, font background color.

Display time: in the image buffer,use (Xstart Ystart) as the left vertex, display time,you can choose Ascii visual character font, font foreground color, font background color.;

Python has an image library PIL official library link, it do not need to write code from the logical layer like C, can directly call to the image library for image processing. The following will take 1.54inch LCD as an example, we provide a brief description for the demo.

Note: Each character library contains different characters; If some characters cannot be displayed, it is recommended that you can refer to the encoding set ro used.

This post is an introduction to the Nextion display with the Arduino. We’re going to show you how to configure the display for the first time, download the needed resources, and how to integrate it with the Arduino UNO board. We’ll also make a simple graphical user interface to control the Arduino pins.

Nextion is a Human Machine Interface (HMI) solution. Nextion displays are resistive touchscreens that makes it easy to build a Graphical User Interface (GUI). It is a great solution to monitor and control processes, being mainly applied to IoT applications.

The Nextion has a built-in ARM microcontroller that controls the display, for example it takes care of generating the buttons, creating text, store images or change the background. The Nextion communicates with any microcontroller using serial communication at a 9600 baud rate.

To design the GUI, you use the Nextion Editor, in which you can add buttons, gauges, progress bars, text labels, and more to the user interface in an easy way. We have the 2.8” Nextion display basic model, that is shown in the following figure.

The best model for you, will depend on your needs. If you’re just getting started with Nextion, we recommend getting the 3.2” size which is the one used in the Nextion Editor examples (the examples also work with other sizes, but you need to make some changes). Additionally, this is the most used size, which means more open-source examples and resources for this size.

To get started with Nextion, first you need to install Nextion Editor. Go to https://nextion.itead.cc/, select the Resources tab, Download > Nextion Editor and install Nextion Editor. You can either download the .zip file or the .exe file.

Connecting the Nextion display to the Arduino is very straightforward. You just need to make four connections: GND, RX, TX, and +5V. These pins are labeled at the back of your display, as shown in the figure below.

You can power up the Nextion display directly from the Arduino 5V pin, but it is not recommended. Working with insufficient power supply may damage the display. So, you should use an external power source. You should use a 5V/1A power adaptor with a micro USB cable. Along with your Nextion display, you’ll also receive a USB to 2 pin connector, useful to connect the power adaptor to the display.

The best way to get familiar with a new software and a new device is to make a project example. Here we’re going to create a user interface in the Nextion display to control the Arduino pins, and display data.

The user interface has two pages: one controls two LEDs connected to the Arduino pins, and the other shows data gathered from the DHT11 temperature and humidity sensor;

We won’t cover step-by-step how to build the GUI in the Nextion display. But we’ll show you how to build the most important parts, so that you can learn how to actually build the user interface. After following the instructions, you should be able to complete the user interface yourself.

Additionally, we provide all the resources you need to complete this project. Here’s all the resources you need (be aware that you may need to change some settings on the user interface to match your display size):

Open Nextion Editor and go to File > New to create a new file. Give it a name and save it. Then, a window pops up to chose your Nextion model, as show in the figure below.

We’ll start by adding a background image. To use an image as a background, it should have the exact same dimensions as your Nextion display. We’re using the 2.8” display, so the background image needs to be 240×320 pixels. Check your display dimensions and edit your background image accordingly. As an example, we’re using the following image:

Here you can select the font height, type, spacing and if you want it to be bold or not. Give it a name and click the Generate font button. After that, save the .zi file and add the generator font by clicking yes.

At this moment, you can start adding components to the display area. For our project, drag three buttons, two labels and one slider, as shown in the figure below. Edit their looks as you like.

All components have an attribute called objname. This is the name of the component. Give good names to your components because you’ll need them later for the Arduino code. Also note that each component has one id number that is unique to that component in that page. The figure below shows the objname and id for the slider.

You should trigger an event for the touchable components (the buttons and the slider) so that the Arduino knows that a component was touched. You can trigger events when you press or when you release a component.

To do that, select one of the buttons, and in the event window, select the Touch Release Event tab, and put a tick on the Send Component ID option. Repeat this process for the other button, and the slider.

Our second page will display data from the DHT11 temperature and humidity sensor. We have several labels to hold the temperature in Celsius, the temperature in Fahrenheit, and the humidity. We also added a progress bar to display the humidity and an UPDATE button to refresh the readings. The bBack button redirects to page0.

Notice that we have labels to hold the units like “ºC”, “ºF” and “%”, and empty labels that will be filled with the readings when we have our Arduino code running.

Once the GUI is ready, you need to write the Arduino code so that the Nextion can interact with the Arduino and vice-versa. Writing code to interact with the Nextion display is not straightforward for beginners, but it also isn’t as complicated as it may seem.

A good way to learn how to write code for the Arduino to interact with the Nextion display is to go to the examples folder in the Nextion library folder and explore. You should be able to copy and paste code to make the Arduino do what you want.

The first thing you should do is to take note of your components in the GUI that will interact with the Arduino and take note of their ID, names and page. Here’s a table of all the components the code will interact to (your components may have a different ID depending on the order you’ve added them to the GUI).

Here you use the page ID, the component ID and their name – just check the table above with all the components. To define a text you use NexText, to define a button you use NexButton, for a slider you use NexSlider and for the progress bar you use NexProgressBar.

For the slider (h0), you have the following function that writes the current slider position on the tSlider label and sets led2 brightness accordingly:

Finally, you need a function for the bUpdate (the update button). When you click this button the DHT temperature and humidity sensor reads temperature and humidity and displays them on the corresponding labels, as well as the humidity on the progress bar. That is the bUpdatePopCallback() function.

In the setup(), you need to attach the functions created to the corresponding events. For example, when you click on the bOn button, the bOnPopCallback function will be triggered.

In this post we’ve introduced you to the Nextion display. We’ve also created a simple application user interface in the Nextion display to control the Arduino pins. The application built is just an example for you to understand how to interface different components with the Arduino – we hope you’ve found the instructions as well as the example provided useful.

In our opinion, Nextion is a great display that makes the process of creating user interfaces simple and easy. Although the Nextion Editor has some issues and limitations it is a great choice for building interfaces for your electronics projects. We have a project on how to create a Node-RED physical interface with the Nextion display and an ESP8266 to control outputs. Feel free to take a look.

When most people hear the term “JPEG decoding,” they will usually assume that it’s something really difficult, something that requires lots of processing power and complicated mathematics, something that is impossible – or at least impractical – on relatively cheap and slow 8-bit microcontroller platforms like the Arduino. In this article, we’ll learn how to take JPEG photo using an Arduino-controlled camera, turn the photo into lots and lots of pixels, and to transmit all of them via serial port to our PC – or wherever we like!

Even though what is described above is entirely possible, it is worth mentioning why exactly are we going into all the trouble of decoding a JPEG photo. After all, there’s an SD module listed in the hardware requirements above, and you’d ask “Can we just store the photo on the SD card as aphoto.jpegfile?” Sure, that is actually an important part of the entire process, but try to look at this from a different perspective: What if we want to send that photo somewhere using a slow, somewhat unreliable connection? If we simply chopped up the JPEG photo into packages and send them via a slow connection, we risk that some of them might get corrupted, while others may get lost entirely. When that happens, we most likely won’t be able to restore the original photo from the corrupted data.

However, when we decode the JPEG into bitmap, and then send the actual pixels, we risk nothing. If some of the data gets corrupted or lost during the transmission, we will still have an image, only with the corrupted data somehow discolored, misplaced, or simply missing. Granted, it’s not the same picture we originally started with, but it still carries most of the original information and is still “human-readable”. Now that we knowwhywe’re doing this, let’s take a look athowwe can approach this method.

Before we start decoding JPEG photos, first we have to take the photos. Since our ultimate goal is to take a photo, store it on a SD card and then send it somewhere. Let’s start with a simple setup that will allow us to do this.

Since we need quite a bit of RAM to decode the photos, we’ll be using Arduino Mega. Also, there’s an added bonus in the form of four separate hardware serial ports on Mega, so we can use portSerial1to communicate with the camera, and portSerialto communicate with our PC.

You probably noticed there’s a simple resistor voltage divider on the camera RX line. This is because the logic level of the VC0706 chip is 3.3 V (even though the supply voltage is 5 V), but the logic level of Arduino Mega is 5 V. Here’s a friendly advice: always use at least a voltage divider on the RX line when interfacing 5 V Arduino with 3.3 V modules. It’s much quicker than waiting until a new module arrives. The SD card reader is connected directly by SPI interface.

Now that the hardware is set up, we need to get the code sorted out. Since the library for SD cards is already a part of the standard Arduino IDE installation, we can check the SD card off the list.

Now, the Arduino will take a picture every 10 seconds or so until we run out of space on the SD card. But since the photos are typically around 48 kB, and I’m currently using 2 GB SD card, we have enough space for more than 43,000 photos. It seems reasonable to say that we don’t need that many. But now that we have some photos taken, we can now move on to the fun stuff: turning them from JPEG-compressed hard-to-manage gibberish into a simple array of pixels!

Before we start decoding, let’s take a quick look at how exactly the picture data are stored inside a JPEG file. If you don’t really care about this, please feel free to skip the next three paragraphs. If you actually know a thing or two about graphics and compressions – unlike me – you could also skip this part, as well. The following text is simplified to an extent.

When we talk about storing any sort of picture data, there are two basic approaches: lossless or lossy compression. The difference between the two is clear: when image is encoded using lossless compression, PNG for example, every pixel is exactly the same as when you started at the end of the process. This is great for things like computer graphics, but unfortunately, it comes at a cost of increased file size. On the other hand, with lossy compression like JPEG, we lose some details but the resulting file size is much smaller.

The way this is achieved in JPEG can be somewhat challenging to grasp since it involves a little something called “discrete cosine transformation”, but the main principle is actually pretty simple. First, the picture is converted from RGB color space into YCbCr. We all know RGB color space – it stores colors as values of red (R), green (G) and blue (B). YCbCr is quite different – it uses luminance (Y – basically the original image in grayscale), blue-difference chroma component (Cb – “blueness” of the picture) and red-difference chroma component (Cr – “redness” of the picture).

The way JPEG achieves the reduction in file size is actually closely related to the way human eyes process colors. Take a look at the three pictures of the Y, Cb and Cr components in the above picture. Which one looks more like the original picture? That’s right, the grayscale one! This is because the human eye is much more sensitive to luminance than to the other two components. JPEG compression uses this in a very clever way that allows it to reduce the amount of information in the Cb and Cr components while keeping the original Y component. This leads to a picture that is much smaller than the original file, and because most the compressed information was in the components human eyes aren’t too sensitive towards, you can barely notice the difference of a compressed picture in comparison to an uncompressed one.

Now let’s run a code that does the actual magic of turning JPEG into an array of pixels. Fortunately, there is a library that does exactly that – Bodmer’s JPEGDecoder (available onGitHub) which is based on an excellent picojpeg library by Rich Geldreich (also onGitHub). Even though JPEGDecoder was originally written to display images on TFT display, with a few minor tweaks it will work just fine for us.

Using the library is fairly simple: we give it the JPEG file, and the library will start generating arrays of pixels – so called Minimum Coded Units, or MCUs for short. The MCU is a block of 16 by 8 pixels. The functions in the library will return the color value for each pixel as 16-bit color value. The upper 5 bits are the red value, the middle 6 are green and the lower 5 are blue. Now we can send these values by any sort of communication channel we like. I’m going to use Serial port so that we can easily receive the data later. The following Arduino sketch decodes an image, then sends the 16-bit RGB value for each pixel in the MCU and repeats this for all the MCUs in the image file.

Header packet: This packet starts with the string “$ITHDR” and contains basic information about the image we will be sending: height and width in pixels, number of MCUs pre row and column and finally the original filename. For each image we want to send, we will send one header packet.

Now we have a code that will decode and send picture files, but there’s still one core feature missing: right now, there’s nothing listening for those data at the other end. This means it’s time to start up Processing again!

I covered a little bit of Processing inArduino Hexapod PART 3: REMOTE CONTROL to write an app that allowed us to easily control the hexapod. For a quick refresher: Processing is a Java-based language that is primarily focused on drawing stuff. This makes it perfect for what we need to do, which is displaying pixels! This program does just that.

When you run this program with the Arduino connected, and then press any key on your keyboard, you will (hopefully) see the dull, boring gray background being gradually replaced by the image that was originally stored on the SD card. And since the replacement is done pixel by pixel, the entire process has a sort of old-school, dial-up-modem style of loading the image!

The original image is 640 pixels wide and 480 pixels tall for a total of 307,200 pixels. Each of these pixels is represented by 2-byte color value, that is a total of 614,400 bytes – or 600 kilobytes – to transfer. This leaves us with the final speed of about 10 kB/s. That’s not that terrible for a “protocol” that we just made up on the go, isn’t it? Also, it shows you why image compression is so useful. The original JPEG file was only around 48 kB, while the decoded bitmap takes 600 kB. If we were to transfer the JPEG file, we would be done with it in less than 5 seconds, even when using our extremely simple “protocol.” Of course, we most likely wouldn’t be able to retrieve any data in case the transfer fails – which is something that cannot happen now.

Finally, we have proven what this article started with: processing images on Arduinoispossible and can be even useful in certain situations. We can now snap pictures using a serial camera, decode them, send them over a serial port and then receive them on the other side! Consider this article your short intro into image processing on Arduino.

As usual, there is a lot of things that can be improved. One major addition could be to encrypt our messages using AES, which is fairly easy to implement, even on Arduino. Security is usually dangerously overlooked on Arduino, so we might focus a bit more on that in another project.

In this article, you will learn how to use TFT LCDs by Arduino boards. From basic commands to professional designs and technics are all explained here.

In electronic’s projects, creating an interface between user and system is very important. This interface could be created by displaying useful data, a menu, and ease of access. A beautiful design is also very important.

There are several components to achieve this. LEDs,  7-segments, Character and Graphic displays, and full-color TFT LCDs. The right component for your projects depends on the amount of data to be displayed, type of user interaction, and processor capacity.

TFT LCD is a variant of a liquid-crystal display (LCD) that uses thin-film-transistor (TFT) technology to improve image qualities such as addressability and contrast. A TFT LCD is an active matrix LCD, in contrast to passive matrix LCDs or simple, direct-driven LCDs with a few segments.

In Arduino-based projects, the processor frequency is low. So it is not possible to display complex, high definition images and high-speed motions. Therefore, full-color TFT LCDs can only be used to display simple data and commands.

In this article, we have used libraries and advanced technics to display data, charts, menu, etc. with a professional design. This can move your project presentation to a higher level.

In electronic’s projects, creating an interface between user and system is very important. This interface could be created by displaying useful data, a menu, and ease of access. A beautiful design is also very important.

There are several components to achieve this. LEDs,  7-segments, Character and Graphic displays, and full-color TFT LCDs. The right component for your projects depends on the amount of data to be displayed, type of user interaction, and processor capacity.

TFT LCD is a variant of a liquid-crystal display (LCD) that uses thin-film-transistor (TFT) technology to improve image qualities such as addressability and contrast. A TFT LCD is an active matrix LCD, in contrast to passive matrix LCDs or simple, direct-driven LCDs with a few segments.

In Arduino-based projects, the processor frequency is low. So it is not possible to display complex, high definition images and high-speed motions. Therefore, full-color TFT LCDs can only be used to display simple data and commands.

In this article, we have used libraries and advanced technics to display data, charts, menu, etc. with a professional design. This can move your project presentation to a higher level.

Size of displays affects your project parameters. Bigger Display is not always better. if you want to display high-resolution images and signs, you should choose a big size display with higher resolution. But it decreases the speed of your processing, needs more space and also needs more current to run.

After choosing the right display, It’s time to choose the right controller. If you want to display characters, tests, numbers and static images and the speed of display is not important, the Atmega328 Arduino boards (such as Arduino UNO) are a proper choice. If the size of your code is big, The UNO board may not be enough. You can use Arduino Mega2560 instead. And if you want to show high resolution images and motions with high speed, you should use the ARM core Arduino boards such as Arduino DUE.

In electronics/computer hardware a display driver is usually a semiconductor integrated circuit (but may alternatively comprise a state machine made of discrete logic and other components) which provides an interface function between a microprocessor, microcontroller, ASIC or general-purpose peripheral interface and a particular type of display device, e.g. LCD, LED, OLED, ePaper, CRT, Vacuum fluorescent or Nixie.

The display driver will typically accept commands and data using an industry-standard general-purpose serial or parallel interface, such as TTL, CMOS, RS232, SPI, I2C, etc. and generate signals with suitable voltage, current, timing and demultiplexing to make the display show the desired text or image.

The LCDs manufacturers use different drivers in their products. Some of them are more popular and some of them are very unknown. To run your display easily, you should use Arduino LCDs libraries and add them to your code. Otherwise running the display may be very difficult. There are many free libraries you can find on the internet but the important point about the libraries is their compatibility with the LCD’s driver. The driver of your LCD must be known by your library. In this article, we use the Adafruit GFX library and MCUFRIEND KBV library and example codes. You can download them from the following links.

You must add the library and then upload the code. If it is the first time you run an Arduino board, don’t worry. Just follow these steps:Go to www.arduino.cc/en/Main/Software and download the software of your OS. Install the IDE software as instructed.

By these two functions, You can find out the resolution of the display. Just add them to the code and put the outputs in a uint16_t variable. Then read it from the Serial port by Serial.println(); . First add Serial.begin(9600); in setup().

First you should convert your image to hex code. Download the software from the following link. if you don’t want to change the settings of the software, you must invert the color of the image and make the image horizontally mirrored and rotate it 90 degrees counterclockwise. Now add it to the software and convert it. Open the exported file and copy the hex code to Arduino IDE. x and y are locations of the image. sx and sy are sizes of image. you can change the color of the image in the last input.

Upload your image and download the converted file that the UTFT libraries can process. Now copy the hex code to Arduino IDE. x and y are locations of the image. sx and sy are size of the image.

In this template, We converted a .jpg image to .c file and added to the code, wrote a string and used the fade code to display. Then we used scroll code to move the screen left. Download the .h file and add it to the folder of the Arduino sketch.

In this template, We used sin(); and cos(); functions to draw Arcs with our desired thickness and displayed number by text printing function. Then we converted an image to hex code and added them to the code and displayed the image by bitmap function. Then we used draw lines function to change the style of the image. Download the .h file and add it to the folder of the Arduino sketch.

In this template, We created a function which accepts numbers as input and displays them as a pie chart. We just use draw arc and filled circle functions.

In this template, We added a converted image to code and then used two black and white arcs to create the pointer of volumes.  Download the .h file and add it to the folder of the Arduino sketch.

In this template, We added a converted image and use the arc and print function to create this gauge.  Download the .h file and add it to folder of the Arduino sketch.

while (a < b) { Serial.println(a); j = 80 * (sin(PI * a / 2000)); i = 80 * (cos(PI * a / 2000)); j2 = 50 * (sin(PI * a / 2000)); i2 = 50 * (cos(PI * a / 2000)); tft.drawLine(i2 + 235, j2 + 169, i + 235, j + 169, tft.color565(0, 255, 255)); tft.fillRect(200, 153, 75, 33, 0x0000); tft.setTextSize(3); tft.setTextColor(0xffff); if ((a/20)>99)

while (b < a) { j = 80 * (sin(PI * a / 2000)); i = 80 * (cos(PI * a / 2000)); j2 = 50 * (sin(PI * a / 2000)); i2 = 50 * (cos(PI * a / 2000)); tft.drawLine(i2 + 235, j2 + 169, i + 235, j + 169, tft.color565(0, 0, 0)); tft.fillRect(200, 153, 75, 33, 0x0000); tft.setTextSize(3); tft.setTextColor(0xffff); if ((a/20)>99)

In this template, We display simple images one after each other very fast by bitmap function. So you can make your animation by this trick.  Download the .h file and add it to folder of the Arduino sketch.

In this template, We just display some images by RGBbitmap and bitmap functions. Just make a code for touchscreen and use this template.  Download the .h file and add it to folder of the Arduino sketch.

The speed of playing all the GIF files are edited and we made them faster or slower for better understanding. The speed of motions depends on the speed of your processor or type of code or size and thickness of elements in the code.

I just started to play with TFT LCD screen with Arduino. I used Itead 2.8″ TFT shield which is said to work great with UTFT library. Taking into account that Arduino has too limited Flash to hold a full frame of picture, and that the shield has a SD card socket on the back, I decided to make a SD card picture viewer as my first approach.

The 8-bit AVR-based Arduino has not only limited storage but also limited computation power. It is impossible to decode JPEG or PNG on-the-fly with Arduino, nor is it possible to load a whole bitmap from SD card into SRAM. The image files have to be stored in raw data format and loaded and rendered portion by portion. The native data format of the TFT control chip is RGB565 (2 bytes for a pixel, 5 bits for red, 6 bits for green, 5 bis for blue). So I used MediaCoder, which is a universal media transcoder I developed, to generate the raw image data of RGB565. It can also convert video files to a sequence of image files.

You can get MediaCoder here for free. After the software is launched, click Add button to add your image or video files, or simply drag them into to the program window. To make MediaCoder generate image files, change the “Format” to “Image” on Video tab. By default, JPEG is the output format and this can be changed to “Raw” on the right side.

There is one more option to change and it is important. As our TFT shield likes to eat 16-bit RGB565 data, we need to change the colorspace to RGB565.

Finally, set an output folder and click the Start button to kick the conversion off. When converting video file, a sequence of image files will be generated in a specified interval and you can adjust the interval or specify the number of images you want to get for each video file.

After conversion is accomplished, you will get a bunch of .RAW files in the output folder. Now plug in the SD card to your computer, create a PICTURE folder on it and copy the generated files to the folder.

Now comes the Arduino part, all we need to do is uploading the sketch I wrote to Arduino, mounting the shield, inserting the SD card. Sit back and watch your pictures showing one by one on Arduino.

Several ways exist to display bitmap images, pictures so to say, on a screen attached to an Arduino, ESP8266 or ESP32. In the present project we convert a color picture into a c-array that is either included in a sketch or saved in a file that is called from within a sketch. The screen used is a 1.3 inch, 240*240 pixel TFT display with ST7789 controller and SPI interface. Because the file size of a 240*240 color bitmap is way too large to fit program memory in an Arduino Uno we are using an ESP32 microcontroller board: ESP32-WROOM-32. The 1.3”, 240*240 TFT is one of my favorite displays, not only because of its 65,536 available colors (16 bits per pixel, RGB565) but also because of its fast SPI interface which is meticulously supported by Bodmer’s TFT_eSPI.h library.

Compared with current LCD displays and OLED displays, TFT type screens offer the luxury of nearly unlimited color. While it is possible on OLED displays to show pictures, the constraint with this type of display is that pictures are always presented in monochrome. A TFT display shows images as crisp and colorful as your smartphone’s screen does. Of course your smartphone has more pixels than the humble 240*240, which necessitates some cropping and scaling. In this project I started with a big, 2521*1688 pixels jpg image downloaded from Wikipedia.

To possess a TFT screen is one thing, making it work, that is: showing color pictures, needs some investment in ideas, time and effort. As graphical functions are called via a supporting library the selection of a competent library is of prime importance. Another issue is the communication protocol between microcontroller and display. Among the available libraries the TFT_eSPI.h library offers superior support for a variety of controllers / microcontroller board / TFT display configurations, including the configuration used in the current project.

TFT_eSPI can be installed via the Library Manager in the Arduino IDE (Tools → Manage Libraries). Additional Configuration: see section Software. Install the most recent version.

Figure 1 shows the wiring diagram. Wiring is straightforward: the VCC pin of the display breakout board is connected to the 3.3V pin of the ESP32. GND is connected to GND. Of the remaining display pins only four are necessary. Pins marked ‘SCL’ and ‘SDA’ (on other SPI displays sometimes labeled as SCLK and MOSI) are connected to pins D18 and D23 of the ESP32. Pin ‘RES’ on the TFT display is connected to pin D4 of the ESP32, and pin ‘DC’ of the display goes to pin D2 of the ESP32. Pin ‘BLK’ of the TFT is not connected.

The example here, shown in figure 1, is a picture of a ladybug. The image was acquired via a search on Wikipedia. Its credentials are: Gilles San Martin from Namur, Belgium – Coccinella magnifica, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=7694675. The original picture is beautiful, but it is also huge compared with my humble TFT: 2521*1688, format: jpg.

Resulting after all the photo editing was a 173 kB BMP image file (‘ladybug.bmp’) with dimensions 240*240 and in True Color = R5G6B5, 16-bit color depth (64k colors).

Once the proper size, color depth and format had been obtained the moment had arrived to convert the picture into c-array format. This is the format recognized and processed by the Arduino compiler.

A very convenient program to convert BMP image files to c-array format is ‘lcd-image-converter’. This is a Windows program, freely available on the internet. What one needs to do in lcd-image-converter is shown in figures 2 and 3.

First thing to do is to start the program, provide a name for the project (‘ladybug’) and check the conversion parameters. This is done via Options, Conversion. Be sure that Block Size is 16 bit, byte order ‘Little Endian’ (figure 2).

Via ‘File’ and ‘Convert’ the end result is produced: a file named ‘ladybug.c’ (file size here: 638 kb). This file is in ascii format. Its contents can be inspected with an ascii editor (Notepad, Notepad++, Gedit).

There are two ways to work with a c-array in a sketch: the ‘internal’ option, that is that the c-array is copy-pasted into the sketch, and the ‘external’ option, that includes a call from the sketch to a file located in the same folder as the sketch. Both options have pros and cons. Here we will provide both options.

0x4b41, 0x4321, 0x4321, 0x4301, 0x42e1, 0x4301, 0x4301, 0x4b41… ……..and so forth until the final pixels……. 0x8ccd, 0x84ad, 0x848c, 0x848c, 0x846c, 0xa571, 0xa571, 0xa571

The essential image c-array data can be placed into a separate file while all data are ‘imported’ at compilation time via a simple ‘include’ instruction inside the sketch. This has the advantage of a clean sketch that is easy to edit. The data file needs to be saved in the same folder as the sketch.

0x4b41, 0x4321, 0x4321, 0x4301, 0x42e1, 0x4301, 0x4301, 0x4b41… ……..and so forth until the final pixels……. 0x8ccd, 0x84ad, 0x848c, 0x848c, 0x846c, 0xa571, 0xa571, 0xa571

which is identical to the content of the 16-bit instruction in the ‘inclusive’ sketch. The 57,600 pixels remain neatly packed in a separate file. A sketch is supplied at the end of this article.

This library is extremely versatile, with many graphical functions, while it supports a great number of combinations of microcontroller boards and display controllers. The great difference between TFT_eSPI.h and alternative libraries, e.g. Adafruit_GFX.h and U8glib.h is that the so-called ‘constructor’ is absent.

The idea in TFT_eSPI is that all necessary parameters presented to the library are in a series of instructions bundled in a User_Setup.h file. As its name implies such a file is configurable by the end user. User_Setup.h contains calls to an array of drivers. Look around in the library’s folder named ‘User_Setups’. This folder is a playground for folks who like to experiment with all sorts of microcontrollers and displays. A superb idea!

– open User_Setup_Select.h and uncomment the line calling one of the pre-configured configuration files. In the present microcontroller-graphical controller combination this is a modified Setup24_ST7789.h.

After experimenting first with breadboards and jumper wires I decided to take a 7×9 cm soldering prototyping board and some pin sockets to solder a small robust bench that accommodates the ESP32-WROOM and the 2402*40 TFT (figure 4). Further software testing was done with this bench. Results were excellent. The TFT_eSPI library supports the ESP32 / ST7789 240*240 SPI TFT without any problem and, very important: very fast. I made and tested a variety of c-array coded images in a range of formats (e.g., 80*160; 128*128 and so on). They were all displayed very well on the small square screen. Condition is that the data file name is 8-character limited. One of these extra images, a picture of a dog called ‘bastien’, was cropped at 240*380 pixels and converted into a c-array (file size of the c-array: 1 MB). The sketch calling this c-array was perfectly compiled. Only the left part of the image was shown on screen with the instruction ‘tft.pushImage (0,0,240,240, bastien);‘, and the same happened when the instruction was changed into ‘ tft.pushImage (0,0,240,380,bastien);‘. This means that the TFT_eSPI library handles images benevolently. The instruction ‘’tft.pushImage (0,0,120,120, bastien);‘ produced an image on the left lower quadrant of the display, and this image contained the left lower quadrant of the bitmap picture.

An interesting option is to place several external c-array.h files into progmem in order to produce a slideshow. I tried this with two 240*240 pixel images of the famous portrait of Che Guevara; one named ‘che-red.h’ and the other ‘che-grey.h’. With a simple delay () instruction a display time between successive images can be set. A series of calls to several more external c-array image files is possible as well. Here the prospect of animation looms. The successful compilation of a 240*380 pixel c-array image tempts me to investigate how far the the envelope of the ESP32 microcontroller can be pushed with images of increasing size. Such a project can easily be entertained on my previously assembled benches that accommodate bigger SPI- or parallel displays (up to 3.95”. 320*480 pixel TFTs *, **). Another attractive project is to use a card reader to transfer images with lightning speed, pixel after pixel, from an image file on SD card to the TFT display.

Yes, really really bad coding style, i can do that better. Displaying a bitmap from sd card was just a small thought in the break of my lectures. Id never coded C++. Only Java.

So we have a colour LCD on which (thanks to various graphics libraries) we can draw lines, triangles, text etc. But adding colour graphics is possible but information (at time of writing) is rather limited. There are various examples of pulling images from an SD card (either built onto the display board, or added separately), but what if you just want a few icons etc? Having spent some time doing research most guides mentioned using GIMP to convert the image to text data you can use in your program but the data being outputted was not suitable (I noted others having similar problems) without further messing about with it. Despite following the guides to the letter I could not get the data into my program in a format that would work. However further research eventually turned up a web page called RinkyDink Electronics (

Software you will needYou will need to appropriate driver for your screen, in this case for the ST7735 based screens you can use my altered Adafruit driver (see this

The format of most LCD Colour screens.Most cheap screens will be advertised as having around 64,000 to 260,000+ colours.  It’s usually up to the software driver to select a range and for small MCU’s that is usually 65536 colours (due to memory and speed issues of the SPI bus and MCU). That means each individual pixel can be one of any of these colours. For each single pixel we wish to control we need to send the appropriate number to the screen. To store a number that could be anything between 0 and 65535 we need 16 bits or two full bytes (1 byte being 8 bits). If you are not confident in bits,bytes and hex it may be an idea to look at some tutorials on line or if you wish, skip ahead to “Converting Images” section as the technical details are not essential to getting graphics onto your display.

The Primary ColoursOur eyes are only actually sensitive to three basic colours; red,green and blue; having separate receptors at the back of the retina for these colours. But mixing these three colours together in different intensities gives us all the colours we are used to that we see every day. Displays (whether it’s your TV or phone or a small LCD) have three tiny colours on the screen per pixel (red,green and blue or RGB). They are so small that you will need a good magnifying glass to see them. By varying the intensity of these it too can display many colours. The amount of colours depends on the different intensity levels it can set the small colour segments to that together represent a single pixel. If each colour segment  only 2 levels, i.e. either on or off, then the maximum number of different colours would be 8. Look below at the three bits, one each for red, green and blue.

So we said that typically these cheap screens can handle 65536 colours (0-65535). This requires 16 bits to store (or two 8 bit bytes). But if we’ve got 3 colours (RGB) then that doesn’t divide equally! And no, it doesn’t so they set aside 5 bits for red, 6 for Green and 5 for blue adding up to 16 bits in total. So red and blue have 32 different levels of intensity but green has 64. Apparently the reason for giving green the best deal is because biologically our eyes can see more different shades of green than we can for red and blue, so having more levels for green makes sense.

So each pixel on our screen needs two bytes to be able to display the colour and they are laid out as follows (in what is termed RGB565 format or sometimes just 565 format).

MSB and LSB stand for Most Significant Byte and Least Significant Byte respectively. When you send these two bytes you need to send them either MSB first or LSB first and it all depends on what the device your talking to requires, if it wants MSB first then that’s what is sent over the SPI. This is a level of detail that you need not concern yourself with, you only need to appreciate that each pixel of colour on the screen requires two bytes to define the colour that it is.

Converting ImagesSo most of your graphics will be in one form or another, perhaps jpeg, if, png etc. etc. We need to get these into the format the display can work with, so they need converting. The format required is known as RGB565 (mentioned above if you read that section). There are several guides giving instructions to do this using the popular free “GIMP” image editing package. However I’m not sure if something has changed within the package itself or something else but the format output could not be put into our code and work with LCD screens. Further searching revealed this website

Download this graphic to your computer. It’s a simple save icon, still associated with a floppy disk