Basic animation in your SPI LCD touchscreen

Once you've got your LCD touchscreen working it opens up a vast array of possibilities to enhance your Arduino projects. You can create games, control panels, information displays or anything else that can use a screen output.
The Adafruit GFX library contains a full set of graphics functions to let you develop your project.
In this video I'll show you how to use the library and where to find out what functions it provides. But I'll also show you the limitations of these SPI screens in terms of speed for animations.
To get animated objects on the screen you need to use an overdrawing method as the data transfer speed is too slow to clear the screen every frame. I'll cover this and then show you how to modify and optimise your code to get smooth animated displays.
All the code used in this video is available on the project page in my website.
bytesnbits.co....
You can easily get hold of one of these touchscreens at Amazon or eBay.
Amazon: amzn.to/39ZyWMD
eBay : ebay.us/sOCSyI
Adafruit GFX Library Tutorial
learn.adafruit...

[@mikhailglukhov6680]

Absolutely awesome tutorial that deserves much more views. Thank you!

[@BytesNBits]

Glad you enjoyed it!

[@patrickk2791]

Once again a marvellous video, well explained. I learned a lot. Going from basic "Arduino" style coding to using C++ classes feels like coming out of the stone age! :) Your effort is very much appreciated!

[@BytesNBits]

Hi Patrick. No problem. Moving to Object Orientated Programming makes complex coding so much easier by breaking up the problems into well defined blocks. Glad you found it useful.

[@ndrinks5550]

Excellent tutorial, and I was quite surprised to hear the N.Irish accent! Takes me back to the learning graphics on the old 386 and eventually moving to assembler to write directly to the VGA memory with all the clever smoke and mirrors type effects that could make it look like you were doing impossible things. 50hz of course being the correct refresh rate :-)

[@BytesNBits]

Thanks for the comments. Have fun with the coding.

[@freddycrespo4107]

Thanks Bytes N Bits. Perfect explanation !!

[@BytesNBits]

No problem. I hope it was useful.

[@majorutah2867]

That blew my mind, thank you sir

[@BytesNBits]

Glad you liked it!

[@umutkayacan7659]

Good video. Keep up the good work

[@BytesNBits]

Thanks

[@jeffvenqueleir2036]

Nice and use full

[@BytesNBits]

Great. I hope you got it working OK.

[@bradywinslow870]

25:30 square hits dead center

[@KJ7JHN]

Hey Bob, is the bogging down due to the Arduinos processing speed or the displays shift registers? Thanks ❤

[@BytesNBits]

I felt it was largely due to the number of pixels having to be drawn per frame rather than the processing speed. From memory the Arduino can't run the SPI at very high bandwidths so that serial channel becomes the bottleneck. I used the same screen with a raspberry Pi in some later videos running the SPI channel at around 50MHz and that gave full screen gaming at about 20Hz with simple drivers or up to 50Hz with optimised drivers.

[@edwardhammock24]

Brilliant vid! Thanks. Do you have an example of a chasing style graphic? I am programming a watering system and I want to have a mimic indicating the pump running and water flowing through the pipe. Thanks.

[@BytesNBits]

Hi. Unfortunately this setup requires you to do the animations yourself. Even animated gifs, etc. need you to handle the frame changes in code. My advice would be to create a 2 frame animation of a short horizontal and vertical pipe (basically 2 image files per direction). Draw frame one in place, then a short time later draw frame 2 over the top of it. Place multiple short lengths together to make longer pipes. Maybe use a non animated corner piece. Good luck!

[@bendertherobot910]

Very, very interesting channel... I just bought 4 of these LCD and wanted to program them. This video will be very useful!! Thank you! One question: what's the maximum clock for SPI transfers referred to this kind of LCD? I want to drive these with a STM32F103 or a STM32F429. Indeed, an LCD with SPI is very useful with STM32 because they are not fast enough when using GPIO I/O...

[@BytesNBits]

Hi. The data sheet timings suggest about 10MB/s data rate but I know people are running it at much, much higher. About 80MB/s gives you a 60Hz frame rate and some are getting this so I guess it's a matter of trying it out. I've just bought a new RPi Pico so plan some tests with that. Have fun and let me know how you get on.

[@bendertherobot910]

Thanks for the answer! I will try it in a few days...

[@JohnDoe-es5xh]

Many coordinates are int16, but not uint16. Are there any negative parameters possible, while calling these functions? Just asking. 🙂 And furthermore, you could simulate your programs within Proteus. Just use the Arduino board, the display and upload your bin / hex to the MCU. That would not stress the real hardware that much. Both components are available in Proteus.

[@BytesNBits]

Thanks for the tip. I haven't use Proteus.

[@aronvasquez7667]

Good video, can a query be used without a pencil?

[@BytesNBits]

Yes. Both resistive and capacitive screens will work with a finger. These resistive screens basically work with anything that presses on the touch panel.

[@4sfactor555]

Can you do with GIF images?? I wanna built a touchscreen DIGI PET with this

[@BytesNBits]

You'll need to either find a library that handles GIF format files or write your own. You need to be able to break it down to pixels. Have a look in the Adafruit graphics library. It may well handle GIF.

[@jaimeperez7967]

what about with capacitive version? i can't make it work, is the gt911 version, do you have any information?

[@BytesNBits]

You'll probably need a different library that supports your touch panel. Have a look at the data sheet to see what driver chip it uses.

[@PeetHobby]

I just redraw the rectangle(or bmp, ect) in background colors, so it gets erased and then draw a new rectangle in the new position in normal colors again. That is faster than refreshing a whole bar.

[@BytesNBits]

That sounds good.

[@haricore_]

Would this work with a dot matrix lcd?

[@BytesNBits]

The basic ideas will be the same but the driver code will be different.

[@atihrot755]

Dear sir, how do I start drawing on the LCD display? I have all the libraries uploaded. Need to configure the screen? I have a 2.8 inch LCD. Please help. Well thank you.

[@BytesNBits]

Hi. Is your LCD powered by the ILI9341 driver. If not you'll need to load the correct driver version that matches your screen. Most drivers are in the library package.

[@cyberspider78910]

can you suggest proteus simulation for this project ??

[@BytesNBits]

Hi. Sorry, I don't use Proteus.

[@Mike4_friends]

SD card - did you get it to work with this display?

[@BytesNBits]

Hi. I haven't had a play with the SD card yet. I'll be making another video soon using some images stored on the card. Keep an eye out for that one in a couple of weeks.

[@diyk-h-m2423]

@@BytesNBits yes sir please make soon i need to learn to be make my project

[@kalamabidin922]

Only showing white screen, nothing showing, how to solve this problem

[@BytesNBits]

Hi. I've replied on your other comment.

[@jimdesposito9433]

Hi Bob, great tutorial, very well made and a pleasure to follow along with. Just one comment, for anyone copy/pasting code from the website into Arduino IDE, change &lt; to < and &gt; to > and &amp; to &.

[@BytesNBits]

Thanks for the info! My code highlighter on the website has messed up some of the older posts. I'll have to go through and update them.

[@majorutah2867]

What does that mean? I'm really trying to learn this stuff. Maybe I'll look it up Xy

[@viktorhugo8252]

Is it possible to animate the breakout game with ESP8266 and ILI9341 SPI? I think my configuration limit for fillscreen is 2 sec and not 0,5 sec. how can I configure the SPI and speed up? the MCU clock is 160 MHz, and I can’t find SPI speed in the adafruit library. I think you use the UNO board and the same display and the same library. your demonstration video is very good. 40MHz ist possible kzbin.info/www/bejne/gKKaeKOneZKqldksi=1qWuzGt5KJI5a6s9

[@BytesNBits]

The ESP8266 has a lot more power than the Arudino I used in the video so you'll be fine. The trick is to only redraw the parts of the screen you need to on each frame. I think I made a video on the breakout game. Have a look in the Arduino playlist.

[@viktorhugo8252]

@ , thank you, Esp8266 have two SPI ports, one is fast enough. And there is a power up when using direct port access for SPI, it is a little complex. The best way is the HSPI port with special defined ports. I will try theses ports and will see if this will be faster. I need the speed for sending pictures from SD-Card to TFT with ILI9341 or ST7789 driver. animating pictures is the second challenge. one picture without jpeg compression have about 160kByte at 320x240 65K. If the SPI speed is 6 MByte/sec a picture need about 27ms. the SD-Card interface is slower. Perhaps I reach the max of 40 MByte/s for the tft display but I am not shure . I can’t find a clear screen command , a fillscreen command is very slow.on this displays. with ESP32 and par8 interface tft this is no problem with 480x320 resolution.

[@viktorhugo8252]

@ , I solved the problem with special SPI ports and SPI.setspeed() line. the SPI speed is no more a problem. Speed is now 8-10 fillscreen commands in 1 sec without direct access. With direct access it can be doubled.

[@masonjodood554]

16:01

[@stoptheirlies]

Bob, I don't know what is going on but the files you have put on your website for us to download are nothing like what you show us here, this file on your site has the setup in the wrong place half way through the script and the script does not match what you show on here, Also some of your other script files have C++ code in them which will not run in the Arduino IDE, Pretty abysmal really and I am thinking you don't care as I have messaged you twice and you have not bothered to respond. Bob. UK

[@BytesNBits]

Sorry you're having problems. I've had a look at the code. It's all OK apart from the website code renderer has replaced the < symbols with the html code &lt; and > with &gt;. I think this is on the older code listings. Do a find and replace and the code should compile, though do have a look in case some other characters have been replaced. I assure you I do care. This is why I post these videos. I try to answer as many comments as I can.

[@ijustwanttogosailing8248]

Intro is too loud :-//

[@BytesNBits]

Hi. Sorry about that :)