How to convert images to Arduino Arrays for use on LCD displays! - Tutorial
Ғылым және технология
In this tutorial I'll show you how I managed to create the arcade characters that were displayed on the RGB Matrix animation frame. But this can be used for any type of LCD display.
Links:
LCD-IMAGE-CONVERTER: sourceforge.net/projects/lcd-...
Sprite image resources: www.spriters-resource.com
Find more information about this and other tutorials on my website:
brainy-bits.com/
Facebook: / brainybits
Twitter: / brainy_bits
Пікірлер: 145
Yassss.... I have been looking for this solution for weeks now! Built the box a while ago and have been suffering through writing 256 individual assignments to each LED. Painful! Thanks a heap!
You are an awesome person. Not many people out there have shared this kind of tutorial... You saved a lot of time for me. God bless you.
why did i found this channel so late, this is the best channel for arduino and more I LOVE YOU
@BrainybitsCanada
5 жыл бұрын
Thank for your comment Alin, always great to hear that the videos are helping others. Cheers!
great tip with this program. how did you manage to film your matrix this way? i have great problems to make a foto or even a film of my matrix. in most times the lcds brighten all up and the camera sees no colos.
Just what I needed - thanks man
Hello Brainy good afternoon, your videos are amazing really, so I have a question, there is a way for putting together a scroll and an image in the 16x16 lcd matrix using the libraries NeoMatrix?
it's amazing,wow.thanks for making this
Hi, you mentioned ' more than 16 x 16 ' @5:50 . does this mean we can convert a 32 x 32 and get it displayed on a 16 x 16 led matrix?
Is the image flipped? When you copied it the black margin was on the left (as a viewer sees it) but on the picture frame its on the rights as the viewer see it. BTW thank you for this as I was looking for a way to simplify ws2812 image generation on M5Stack products.
You can make this INFINITELY easier on yourself by "interlacing" your image. Select every other line, straight across. Then flip what you've selected horizontally. You could streamline doing this multiple images of the same size (like animation frames) by making this selection into a mask. They just paste in each frame, select the mask, and flip the image lines. Save and repeat.
You can use the % (mod) operator on the for-loop for the lines ( if lineNum % 2 == 0 ), then on the pixels on that row, count 0-16 or 16-0 depending on that if-statement
@oliverpasche1013
5 жыл бұрын
Sorry to be a noob. Please help me out show the final script, I just can´t get it to work.... Here's the two diffrent scripts: * top to bottom * forward */ for (var y = 0; y for (var x = 0; x image.addPoint(x, y); } } /* * top to bottom * backward */ for (var y = 0; y for (var x = image.width - 1; x >= 0; x--) { image.addPoint(x, y); } }
Good work .nice keep itup
if i want to download a image off of the web and off the website what size should the pictures be, i can you put text at the top and the image at the bottom (for holidays and stuff)?
Nice one btw your channel helping me a lot but i had problem.. The problem is that why second array of same image?? Is that second array was for different sprite To animate?? Just help me i am noob...
Hi, Thank you for the video. Actually, I am trying to display any random coloured image on flexible LED display build by using WS2812B strips(60*45 = 2700 pixels) controlled by Arduino, so i just want to know if the same software i can use to convert images to Arduino Arrays for use on LED displays. Please help with this.
Hi Sir, it was a cool project... Is this program work for p10 or p4.74 led panel single colour??
how would i store this on a SD card instead of using the limited space on the arduino. what format should the data be in...i am guessing hex file to store the raw data?
I really need your help with something. I have everything the same like you but I have a 15 x 15 Led Martix. And a newer version of gimb 2.10.18 where can i set the settings at web and how can I save the Date at .bmp?
Ohh. Wow.This is realy wow.Thanks for this.
but what is the code for put in onto arduino ?.... I cant find it
How do you your code only allows for two images? How would I display as many image's in a Mega 2560 larger 256 KB flash ram?
Good job but you can program LCD-Converter to separate even and odd lines : for (var y = 0; y for (var x = 0; x if (y%2==0) image.addPoint(x, y); else image.addPoint(image.width-1-x, y) } }
@Brainy-Bits Hello, you do not need to be odd and even. In LCD Image Converter put 'LEFT TO RIGHT' and check the 'BANDS' box below. Enjoy !!
I followed your tutorial to the letter and for some reason im ending up with 22 rows and 16 lines for a 16x16 bmp image!? Tried all sorts, cant seem to get it to give me 16 rows. Really odd. Any ideas?
@ThatTalkingDogGuy
4 жыл бұрын
Same here. Can't get it to output a 16x16 for me at all
It's amazing tutorial easy learn thanks for helping me
is it possible to control the matrix with LEDedit or gladiator?
i think the output stream handler should reflect the topology. for this type of alternating lines (like my led matrix is configured) 4 lines of code did the trick for now. messing up the sprite data is kinda meh.
awesome n helpful video
Lots of fun!
Maybe I am a bit late, but I was wondering how you display the color arrays of the Characters on the matrix? Are you using fast led? Maybe you can post an example code, that would be great! Edit: Watched your previous Video, now i understand it, i hope this method is less heap-intesnse since my 11x11 Matrix always ran out of free heap...
@BrainybitsCanada
5 жыл бұрын
Was just about to send you the link for the previous video :). Good luck with your project and thanks for watching!
Is there any example codes for 8 bit images? This video is 24 bit
Good work ,genius
@BrainybitsCanada
4 жыл бұрын
Thanks for watching!
Great content. Thanks
@BrainybitsCanada
6 жыл бұрын
Thanks for your comment and for watching!
@nidzjamismail4952
6 жыл бұрын
Sumedh Burbure
Good work
Here's the custom script for scanning the image in LCD image converter without the need for manual copying of every even line. In order to use the script you need to check the "Use custom script" checkbox. for (var y = 0; y if (y % 2) { for (var x = image.width -1; x >= 0; x--) { image.addPoint(x, y); } } else { for (var x = 0; x image.addPoint(x, y); } } }
@jensyfrenzy
5 жыл бұрын
Came here to post this exact same thing. Really wish I would've seen that I could use a custom script after making 4 sprites manually. Thanks for sharing!
@JonnyRetro
4 жыл бұрын
Thank you Luka!
@Phr3d13
4 жыл бұрын
I had to invert the script, otherwise, on my matrix, the characters were all facing the wrong way. for (var y = 0; y if (y % 2) { for (var x = 0; x image.addPoint(x, y); } } else { for (var x = image.width -1; x >= 0; x--) { image.addPoint(x, y); } } }
This program only works with single pixel drawing. It is not compatible with display libraries on arduino that can draw bitmaps. I need something that draws in 8x1 pixel rows, not 1x1. I want to uninstall the program on windows 10, but it doesn’t show up in my settings, but everything else does. How do I uninstall this program on windows 10?
Amen brother ! txs so much.
Can I print it on oled ssd 1331 display if not then pleas tell me how to do it pleas it is very important to me please fast
Where do you buy these components
What is the version of lcd-image, I use the latest version, the code and picture are not the same, there are some...
@BrainybitsCanada
6 жыл бұрын
I'm using this version: Revision 466b2e2 from 2016-10-12 21:59:31 +0500 Qt 5.7.0 It's not the latest one so maybe some changes were made? Thanks for pointing that out, I'll check out the most recent version to see if it's different.
My friend saw your video but I have not managed to put an image in my matrix
Could you provide the Arduino code for this?
nice job
Can you convert av input to bitmap ??
thanks very much. God bless you
I haven't gotten a chance to test it out on an connected matrix, but I think you can get LCD Image Converter to output the alternating line order by selecting "Use custom script" on the Prepare tab of the conversion options and using code like: /* * top to bottom * forward/backward alternating */ for (var y = 0; y for (var x = 0; x image.addPoint(x, y); } y++; for (var x = image.width - 1; x > -1; x--) { image.addPoint(x, y); } } There might be a more elegant way to do it, but I looked at the output for a simple 8x8 rainbow gradient and it appeared that the lines were alternating correctly.
@BrainybitsCanada
6 жыл бұрын
I think you're right, thanks a lot for sharing the solution, like I said in the video this LCD image converter software has a lot of options and your observation just made it even better!
@KevinKratzke
6 жыл бұрын
No problem! Your videos are helping me out a lot as I dive back in to electronics, so I'm happy to return the favor (even just a little bit)!
@BrainybitsCanada
6 жыл бұрын
Btw I just tried your script and it works Perfectly! Thanks again for sharing!
@nidzjamismail4952
6 жыл бұрын
Brainy-Bits Salam
@wicert
5 жыл бұрын
Dieses custom script hat vieles erleichtert. Viele Dank
Hello. I have an improvement to make the array creation easier and faster. After setting the software up, in the PREPARE tab mark the option "Use custom script", and paste the next code: for (var y = 0; y { if ( y % 2 == 0) for (var x = 0; x { image.addPoint(x, y); } else for (var x = image.width - 1; x >= 0; x--) { image.addPoint(x, y); } } This will create the arrays ready to be copied without the need of creating the backward code. Let me know if it worked for you, I just tested and it is fine. BTW, thanks for the tutorial.
@FlowHailer
3 жыл бұрын
I just wanted to type in the same code. Cheers mate for (var y = 0; y for (var x = 0; x image.addPoint(x, y); } y=y+1; for (var x = image.width-1; x >= 0; x--) { image.addPoint(x, y); } }
Good video
can you do the same process for gifs?
A good feature about texto
Very good project, but whether the image code can be put into the memory card, so the space is infinite
@BrainybitsCanada
6 жыл бұрын
Good idea, I guess you could connect an SD card reader module and save the array information there. Thanks for the suggestion and for watching!
@user-rm3wd8oi5w
6 жыл бұрын
I just suggested that I don't have such technical capabilities, but I believe you can, I'm very much looking forward to what you can do, and why the code I have transferred out is different from the image.
@leharuso
6 жыл бұрын
Image can be converted to approprate binary format for you. This utility have such capability.
nice video
Good sharing
here's the code for the even/odd rows. for (var y = 0; y if (y % 2 == 0){ for (var x = 0; x image.addPoint(x, y); } }else{ for (var x = image.width-1; x >= 0; x--) { image.addPoint(x, y); } } }
@CDRaff
8 ай бұрын
Thank you.
I hope this is useful - If you triple left click it highlights a complete line. (double click highlights a word ;-) )
What if I want to convert a GIF image to display on esp8266? does anyone know how to do it?? Thanks! been scratching my head for hours :/
good job
can you convert gifs to play on a adafruit 32x32 led matrix?
@taranagnew436
5 жыл бұрын
and you would put the images or gifs in the void loop and all the setup functions in void setup and define the int's above void setup?
Up to 30 images can be added, and the first image after 31 will be disordered
I like your video
If you are not interested in rewiring it, you should be able to handle this in code instead. Ex. If the row is odd, run the loop normally but if even then a seperate loop that accesses the column data in reverse.
@BrainybitsCanada
6 жыл бұрын
Probably could have done this in the Arduino code like you just suggested, but someone here in the comments, Kevin Kratzke, found a solution to make the LCD Image Converter program change the way it creates the array by using the "Use custom script" option and entering this code: /* * top to bottom * forward/backward alternating */ for (var y = 0; y for (var x = 0; x image.addPoint(x, y); } y++; for (var x = image.width - 1; x > -1; x--) { image.addPoint(x, y); } } I tried it, and it works perfectly, the array gets created in the left-right, right-left and then you just copy and paste in the Arduino code. Thanks for your comment and for watching of course!
@Rouverius
6 жыл бұрын
Even better! Glad to hear it.
How to do it in byte size ?
Mi amigo vi tu vídeo pero no he logrado poner una imagen en mi matrix
amazing project sir, can i see your code sir ?
I am getting different color as output not as my input can anyone help me?
Estuve viendo este video tuyo pero no logro poner la imagen en mi matrix si te mando mi correo me ayudas
Sir how to convert these array into only 1 color le'ts say Red !
how to do it in app inventor 2
Thanks............
SWEET
I would look into using a scripting language to do that. You could write one script that would reverse every other line for you and use it with all pics.
@BrainybitsCanada
6 жыл бұрын
Hi, a viewer of this video created a script like you are suggesting that you can input in the "use custom script" box of the software, and it does work perfectly. I copied and pasted is reply below if you want to check it out. Thank you for your comment and for watching btw. Kevin Kratzke2 months ago I haven't gotten a chance to test it out on an connected matrix, but I think you can get LCD Image Converter to output the alternating line order by selecting "Use custom script" on the Prepare tab of the conversion options and using code like: /* * top to bottom * forward/backward alternating */ for (var y = 0; y for (var x = 0; x image.addPoint(x, y); } y++; for (var x = image.width - 1; x > -1; x--) { image.addPoint(x, y); } } There might be a more elegant way to do it, but I looked at the output for a simple 8x8 rainbow gradient and it appeared that the lines were alternating correctly.
@nipunagunarathne4882
6 жыл бұрын
or you could rearrange the strips to match the software? looks like that would be much much MUCH easier to do than digging around in code.
@kaoshavoc
6 жыл бұрын
Nipuna Gunarathne scripts usually take a few minutes to write and you would Not have to dig around in any code. I thibk you misunderstoodwhat i said. And it looks as though what i said was already done
nice
Cool
super
me encanta porqque ahorra mucho trabajoooooooo
veri good and helpfull all video thenx for you
esto solo funciona para 16x16, no sirve para otras dimensiones, acabo de intertarlo muchas veces
@megam2009
3 жыл бұрын
me sirvio colega con otras dimensiones, te amo
@danielkintana642
3 жыл бұрын
@@megam2009 Como fue que lo hiciste
@megam2009
3 жыл бұрын
@@danielkintana642 PUES USO OTRO PROGRAMA PARA LAS IMAGENES, POWER LED ESTUDIO BETA V0.8.9 HAGO EL LOGO Y LO PASO A BMP DE AHI USO EL OTRO PROGRAMA Y LO PASO A ARDUINO
3 жыл бұрын
Yo uso LED Matrix Studio, hasta te deja intercalar el código y no hacerlo a mano. dibujas y haces mil cosas
Programmed my own code for the lines to automatically flip.... AND THEN found out that multiple other people had done this. Darn. Oh well, here is my own code that seems to work: /* * top to bottom * forward and backward */ for (var y = 0; y for (var x = 0; x image.addPoint(x, y); } for (var x = image.width - 1; x >= 0; x--) { image.addPoint(x, y+1); } y=y+2 }
@3dl-3d-printchannel74
4 жыл бұрын
Where i have to put it in the code?
top
I made a custom script so you don't have to keep copying and pasting every other line. My setup was bottom to top then forward to backwards. So slightly differently than his but you just have to flip the for loops to make it like his. var i = 0; for (var y = image.height - 1; y >= 0; y--) { if(i == 0){ for (var x = 0; x image.addPoint(x, y); i = 1; } } else{ for (var x = image.width - 1; x >= 0; x--) { image.addPoint(x, y); i = 0 } } }
@BrainybitsCanada
4 жыл бұрын
Cool! Thanks for sharing!
You should create moonwalk 😂 I think that's impossible 😂😂
Here is the script for the conversion so you don't have to copy and paste all those lines. /* * top to bottom * forward */ for (var y = 0; y for (var x = 0; x image.addPoint(x, y); } y++; for (var x = image.width - 1; x >= 0; x--) { image.addPoint(x, y); } }
@GBUKMilo
Жыл бұрын
Also, don't use the "preview" to copy the code from, the app is a little buggy and doesn't update. So copy this script in, close + save the conversion, then File > Convert, and copy from the output file
@kheeee
9 ай бұрын
hello, i dont know why my number of pixel in one line of mine only have 11 pixels, can you help me bro
sed and awk could automate that. :P
3:09 #define width 16 #define height 16 int ind(int x, int y) { if (y % 2 != 0)return (width - 1 - x) + y * width; else return x + y * width; } problem gone.
Hello, nice project,
@BrainybitsCanada
5 жыл бұрын
Thanks for watching!
@Learnduino
5 жыл бұрын
I have a question. you would be able to make an arduino project with a matrix matrix eg 32x32 and after pressing button 1 a red down arrow will appear, after pressing the button 2 you will see the red arrow up? arrows could be animated
@BrainybitsCanada
5 жыл бұрын
@@Learnduino Sure, you would have to modify the code to reflect the numbers of less: #define NUM_LEDS 1024 and make the images in that format.
when you start to do it by hand, and realize there has to be a better way
@BrainybitsCanada
5 жыл бұрын
Thanks to my awesome viewers for showing me a better way! Always a great feeling when someone takes the time to offer his help and knowledge. Cheers!
Lol of you resoldered your strips you be a lot faster 😂
convert images to arduino
Good !! First !!
I was watching this video of you but I can not put the image in my matrix if I send you my email you help me
nice video
nice