How to convert images to Arduino Arrays for use on LCD displays! - Tutorial

[@haydenpetersen4280]

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!

[@LukaBartonicek]

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 < image.height; y++) { if (y % 2) { for (var x = image.width -1; x >= 0; x--) { image.addPoint(x, y); } } else { for (var x = 0; x < image.width; x++) { image.addPoint(x, y); } } }

[@jensyfrenzy]

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]

Thank you Luka!

[@Phr3d13]

I had to invert the script, otherwise, on my matrix, the characters were all facing the wrong way. for (var y = 0; y < image.height; y++) { if (y % 2) { for (var x = 0; x < image.width; x++) { image.addPoint(x, y); } } else { for (var x = image.width -1; x >= 0; x--) { image.addPoint(x, y); } } }

[@subbirrahman1289]

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.

[@maddyaurora]

why did i found this channel so late, this is the best channel for arduino and more I LOVE YOU

[@BrainybitsCanada]

Thank for your comment Alin, always great to hear that the videos are helping others. Cheers!

[@danibjor]

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]

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 < image.height; y++) { for (var x = 0; x < image.width; x++) { image.addPoint(x, y); } } /* * top to bottom * backward */ for (var y = 0; y < image.height; y++) { for (var x = image.width - 1; x >= 0; x--) { image.addPoint(x, y); } }

[@andywiles7340]

Good job but you can program LCD-Converter to separate even and odd lines : for (var y = 0; y < image.height; y++) { for (var x = 0; x < image.width; x++) { if (y%2==0) image.addPoint(x, y); else image.addPoint(image.width-1-x, y) } }

[@KevinKratzke]

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 < image.height; y++) { for (var x = 0; x < image.width; 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]

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]

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]

Btw I just tried your script and it works Perfectly! Thanks again for sharing!

[@nidzjamismail4952]

Brainy-Bits Salam

[@wicert]

Dieses custom script hat vieles erleichtert. Viele Dank

[@pantanomonstruodel7453]

but what is the code for put in onto arduino ?.... I cant find it

[@MaxSMoke777]

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.

[@SteeveAustin]

@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 !!

[@cmontoya30]

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 < image.height; y++) { if ( y % 2 == 0) for (var x = 0; x < image.width; 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]

I just wanted to type in the same code. Cheers mate for (var y = 0; y < image.height; y++) { for (var x = 0; x < image.width; x++) { image.addPoint(x, y); } y=y+1; for (var x = image.width-1; x >= 0; x--) { image.addPoint(x, y); } }

[@JeremyCook]

Could you provide the Arduino code for this?

[@misfavoritaswil]

it's posible use this sprites with WS2812B led matrix?

[@JonnyRetro]

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]

Same here. Can't get it to output a 16x16 for me at all

[@donavaner3504]

Is there any example codes for 8 bit images? This video is 24 bit

[@dgndmr]

here's the code for the even/odd rows. for (var y = 0; y < image.height; y++) { if (y % 2 == 0){ for (var x = 0; x < image.width; x++) { image.addPoint(x, y); } }else{ for (var x = image.width-1; x >= 0; x--) { image.addPoint(x, y); } } }

[@CDRaff]

Thank you.

[@姚荣]

Very good project, but whether the image code can be put into the memory card, so the space is infinite

[@BrainybitsCanada]

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!

[@姚荣]

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]

Image can be converted to approprate binary format for you. This utility have such capability.

[@Rouverius]

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]

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 < image.height; y++) { for (var x = 0; x < image.width; 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]

Even better! Glad to hear it.

[@croydon21H]

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?

[@姚荣]

Up to 30 images can be added, and the first image after 31 will be disordered

[@ElectroLund]

what matrix / LED library are you using to send the arrays to the display?

[@AJB2K3]

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.

[@knightsun2920]

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?

[@acatisfinetoo3018]

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?

[@taranagnew436]

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)?

[@parvinsharma4111]

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.

[@wchen2340]

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.

[@susantoroy]

it's amazing,wow.thanks for making this

[@jaschar77]

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?

[@sub-arts128]

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.

[@israg3333]

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?

[@chuck_norris]

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.

[@XanCraft21]

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?

[@ernestorivero9909]

My friend saw your video but I have not managed to put an image in my matrix

[@apnadekhtu]

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...

[@BlueeBubble]

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 :/

[@WolfClinton1]

I hope this is useful - If you triple left click it highlights a complete line. (double click highlights a word ;-) )

[@fl7977]

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]

Was just about to send you the link for the previous video :). Good luck with your project and thanks for watching!

[@marcopolofernandes807]

is it possible to control the matrix with LEDedit or gladiator?

[@姚荣]

What is the version of lcd-image, I use the latest version, the code and picture are not the same, there are some...

[@BrainybitsCanada]

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.

[@expfox4851]

how to do it in app inventor 2

[@codewithmalik3665]

Sir how to convert these array into only 1 color le'ts say Red !

[@juliocesardemoraescarvalho758]

Where do you buy these components

[@anthonyp4209]

Just what I needed - thanks man

[@desdsdyugug3900]

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

[@GBUKMilo]

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 < image.height; y++) { for (var x = 0; x < image.width; 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]

hello, i dont know why my number of pixel in one line of mine only have 11 pixels, can you help me bro

[@avonfonds2567]

Can you convert av input to bitmap ??

[@fanyucup4095]

Hi Sir, it was a cool project... Is this program work for p10 or p4.74 led panel single colour??

[@ernestorivero9909]

Mi amigo vi tu vídeo pero no he logrado poner una imagen en mi matrix

[@taranagnew436]

can you do the same process for gifs?

[@kaoshavoc]

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]

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 < image.height; y++) { for (var x = 0; x < image.width; 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]

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]

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

[@PerchEagle]

How to do it in byte size ?

[@taranagnew436]

can you convert gifs to play on a adafruit 32x32 led matrix?

[@taranagnew436]

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?

[@saivarshinithamtam6577]

I am getting different color as output not as my input can anyone help me?

[@nithinbabu52]

Good work .nice keep itup

[@purnota890]

Good work ,genius

[@BrainybitsCanada]

Thanks for watching!

[@amanimad6358]

Ohh. Wow.This is realy wow.Thanks for this.

[@sumedhburbure4173]

Great content. Thanks

[@BrainybitsCanada]

Thanks for your comment and for watching!

[@nidzjamismail4952]

Sumedh Burbure

[@farooq6073]

It's amazing tutorial easy learn thanks for helping me

[@megam2009]

esto solo funciona para 16x16, no sirve para otras dimensiones, acabo de intertarlo muchas veces

[@megam2009]

me sirvio colega con otras dimensiones, te amo

[@danielkintana642]

@@megam2009 Como fue que lo hiciste

[@megam2009]

@@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

Yo uso LED Matrix Studio, hasta te deja intercalar el código y no hacerlo a mano. dibujas y haces mil cosas

[@mutanibenjamin2959]

awesome n helpful video

[@Fogaata]

Lots of fun!

[@tpolarbeart]

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.width; x++) { image.addPoint(x, y); i = 1; } } else{ for (var x = image.width - 1; x >= 0; x--) { image.addPoint(x, y); i = 0 } } }

[@BrainybitsCanada]

Cool! Thanks for sharing!

[@cchallett1]

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 < image.height;) { for (var x = 0; x < image.width; 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]

Where i have to put it in the code?

[@nazishali1085]

Good work

[@walterrldias]

Amen brother ! txs so much.

[@ernestorivero9909]

Estuve viendo este video tuyo pero no logro poner la imagen en mi matrix si te mando mi correo me ayudas

[@farrouq_aja]

amazing project sir, can i see your code sir ?

[@komaliram2362]

A good feature about texto

[@aventureentrepreneurial5590]

thanks very much. God bless you

[@jiteshsehgal4542]

Good video

[@RaiNdeso]

I like your video

[@alamjk1]

nice job

[@MuhammadIjaz-hs6ey]

nice video

[@taijulislam1407]

good job

[@Don_Meggi]

Thanks............

[@boydbros.3659]

SWEET

[@hannansha4534]

veri good and helpfull all video thenx for you

[@rajeshwarisubedi3744]

Good sharing

[@waka7377]

me encanta porqque ahorra mucho trabajoooooooo

[@ItaloLima]

Good !! First !!

[@sunilsurkheti3900]

nice

[@Learnduino]

Hello, nice project,

[@BrainybitsCanada]

Thanks for watching!

[@Learnduino]

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]

@@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.

[@SvetiMFNikola]

Cool

[@prsahoo3350]

super

[@someshvemula9966]

You should create moonwalk 😂 I think that's impossible 😂😂

[@ملخصاترياضية-ه3ف]

top

[@bradleywhais7779]

when you start to do it by hand, and realize there has to be a better way

[@BrainybitsCanada]

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!

[@somedude5414]

sed and awk could automate that. :P

[@theresonator01]

Lol of you resoldered your strips you be a lot faster 😂

[@abate1710]

convert images to arduino

[@ernestorivero9909]

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

[@junmarkdaraydo1385]

nice video

[@تلاواتياسرالدوسري-ص8ك]

nice