How to Decode and Display Bitmap Images Using an Arduino
ฝัง
- เผยแพร่เมื่อ 10 มิ.ย. 2024
- Files on an SD Card, hard drive or USB stick are just blocks of data. If you know how that data is stored you can decode the file to get the contents.
With an LCD screen and SD card reader attached to your Arduino you've got everything you need to display images. All you have to do is work out how to translate the image file into pixels.
Ready made libraries are the easy option. But with a bit of thought you can actually write your own image handler from scratch.
Let me show you how to take a bitmap image file, decode its structure, read in its data and then write its pixel information to your LCD panel. You'll find out how to work with byte level file handling and image manipulation. After this tutorial you'll have all the skills to read and write any file type, or even create your own.
For all the circuit diagrams and to download the code and sketches please visit my website page for this tutorial.
bytesnbits.co.uk/bitmap-image...
Videos for setting up the hardware
SD Card : • Connect an SPI SD Card...
LCD panel : • Connect an SPI TFT wit...
Finally someone who doesnt just throw in a bunch of libraries and function calls and there you have it (which isnt helpful/overwhelming for beginners or if your application is not off-the-shelve, custom neopixelmatrix in my case). Straight forward implementation and easy to follow presentation. Very helpful. Thanks alot.
Hi. No problem. Glad you found it useful.
This is exactly what I was hoping to find, for the same reasons as you listed. Thank you!
Glad it was helpful!
You are good at this. I especially enjoyed this video. I think I really learned a thing or two to use in my own code. Thank you.
Awesome! Thank you!
Fantastic video. I wish there were more content like this online!
Hi. Thanks for your comments. I'm glad you found it useful.
Im working on an image interpolation program at the moment and this was really helpful. God speed
Glad it helped.
Excellent - I live in the middle of nowhere in SW Australia and struggle learning C from books. Your video is a great help. I'm working on a GPS with map display and want to store the maps on an SD card. Many thanks.
Glad it was helpful!
Nice explanation. It might help me as well. I will try it. Love from sri lanka.❤️
Thanks. Glad you found it useful.
Here we go! Been looking forward to this one :)
Hope you like it!
@@BytesNBits I'm sure I will! ;)
Thanks for posting this, just got some ESP32 boards with colour touch screens, and have been having trouble getting any sketches to work.
Glad I could help
This was both a very fun and a very informative video, very well explained! Great job once again!
Thanks.
This info is all very useful. I wonder if you'd be willing to teach how to make a needle gauge, as you were discussing. I've looked at the kbv examples and they are a bit confusing. Thank you
Hi. Control panels are on my list of things to do at some point. My idea in this video to to draw / photo / etc some gauges to make a more realistic control panel. Each gauge would have a solid colour background. You would then draw the needles / pointers / etc. onto the gauge to show the value. Use the overwrite and redraw technique to erase the old pointer and then redraw the new value to animate it.
For a rotary dial you need to work out the end points of the needle. Taking the centre point makes one end easy. Next you need to translate the values into angles and then work out the coordinates of the other end using trigonometry. Then just draw a line between the two.
I hope this helps a bit. It's a bit vague but I hope you get the idea.
@@BytesNBits Yes, I understand. I'm guessing the pixels under the old needle position would have to be redrawn as well. At any rate, I enjoy your style, and am looking forward to more. BTW; you deserve so many more subscribers. Maybe you could get an article onto Hackaday?
Hello, thank you very much for sharing your work. I was wondering if there is a way to display these images in a faster way, maybe using .raw format or something similar? Is it possible to increase the speed of the process? Thanks in advance
Hi. The main bottleneck is sending the data out to the screen. This needs to be done pixel by pixel. The Arduino is very low on RAM so we can't create any sensible memory based frame buffer which would let us send the whole screen in one go. Have a look at this video for the idea using a Pi Pico - th-cam.com/video/fGfb2NvDlG4/w-d-xo.html
Thank you for sharing your wealth of knowledge with us.
I'm using a monochromatic screen (SHARP MEMORY DISPLAY) - and I'm trying to decode 1-bit bmp files with no luck. Following your guide & reducing the total byte counts / buffer doesn't seem to do the trick.
Any tips?
Much appreciated!
Hi. I would create a small bitmap image say 16 x 16 pixels. Then modify the code to output all the data is pulls out of the image file. You should then be able to see the data, what the code thought it had to do and hopefully you'll start to see where it went wrong. I hope this helps.
@@BytesNBits This helps a ton. Basically did what you suggested (except I went for a 3x3 1bit bmp). With more testing, I should be able to get something out!
Will update this thread/upload my own vid explaining how I ended up doing it.
Thanks for your reply! Cheers.
@@FebMixer Great. Let me know what happens.
Would you be able to reduce the delay in your slideshow code to display multiple images on the SD card quickly as a GIF?
The limiting factor is the screen area you need to draw for each frame. If your GIF is small you'll get a good frame rate. Full screen size and you're down to 1fps or slower.
Nice!
Thanks again for your support!
@@BytesNBits no problem. This channel deservers more subs imo
..how to make arduino recognise/read color (pixel array) in a image file at certain coordinate on that image?...used to decode timezone and country data on a globe map image file where each country is represented by a color...for auto local timekeeping GPS watches..
The code in the tutorial should give you all the data you need for a bitmap image. As you decode the file you'll be able to extract the pixel data you need.
Can I read the jpg image into bytes from arduino sd card and send it to python on laptop through bluetooth HC-06 , because i want to do the image processing but i dont know how to read the jpg image in sd card in bytes or hexadecimal format
Hi. Yes. Once you read the file in raw byte format it's just a series of 8 bit values. You can send this over any communications channel. You'll obviously need some code at the Python end to decode the data and turn it back into a jpg image inside the software.
@@BytesNBits but what is the coding to read the jpg image in bytes or hex, and send it through serial ? Do you have the video of tutorial? I am really new to this field
@@khaileng3020 You can use the code in the video to read the file in hex. That's what it's doing for the bitmap image. You can then output that over the serial monitor or another channel. At the PC end you'll need to be able to identify the data and then compile it into the jpg file for saving.
Can i display images without the bidirectional converter
Hi. The screen runs at 3.3V and the Arduino outputs at 5V. You run the risk of damaging the screen without the level shifter. If you look at my setup video for the screen and Arduino I use a simple resistor voltage divider circuit, but the level shifter is a much neater solution.
Thanks for this very helpful guide. It works but for some reason the image is mirrored. 🥴
Hi. Sometimes the pixel data is stored in a different order. Check the image height and width values in the DIB header. If they are negative the pixels are being stored in the opposite order on that axes. e.g. a negative height means the rows are top to bottom rather than bottom to top.
@@BytesNBits thanks for this. In the end it was easier to just flip the image!
Егор Смирнов
3 минуты назад (изменено)
Thank you for your job Bob! Let me ask you, i i've got an ili9225 display ant it has different methods. screen.endWrite(); screen.startWrite(); i found and they the same but was protected. but there is no method screen.writeColor(screen.color565(r, g, b), 1); and screen.setAddrWindow(). Instead it has screen.drawPixel(); that hendel some functions of setAddresWindow but i cant figure it out how change and split different librares and methods. Cold you please take a lock and me it possible to solve that problem?
Just cant place the link bu can be easy found o Git so there is an similar issue there
Hi. I'm in the process of making a video on how to write your own drivers for devices and will be using the LCD screen as an example. I'll cover how to work out the screen commands and implement them in code. That will probably give you a better answer. That one should be out the the next 2-3 weeks.
@@BytesNBits thanks a lot this will help!