Тёмный
No video :(

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

Brainy-Bits
Подписаться 49 тыс.
Просмотров 99 тыс.
50% 1

Опубликовано:

 

22 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 145   
@LukaBartonicek
@LukaBartonicek 5 лет назад
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
@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
@JonnyRetro 4 года назад
Thank you Luka!
@Phr3d13
@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 < 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); } } }
@andywiles7340
@andywiles7340 4 года назад
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) } }
@haydenpetersen4280
@haydenpetersen4280 4 года назад
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!
@cmontoya30
@cmontoya30 3 года назад
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
@FlowHailer 3 года назад
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); } }
@MaxSMoke777
@MaxSMoke777 4 года назад
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.
@dgndmr
@dgndmr 4 года назад
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
@CDRaff 11 месяцев назад
Thank you.
@subbirrahman1289
@subbirrahman1289 4 года назад
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.
@danibjor
@danibjor 6 лет назад
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
@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 < 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); } }
@maddyaurora
@maddyaurora 5 лет назад
why did i found this channel so late, this is the best channel for arduino and more I LOVE YOU
@BrainybitsCanada
@BrainybitsCanada 5 лет назад
Thank for your comment Alin, always great to hear that the videos are helping others. Cheers!
@Rouverius
@Rouverius 6 лет назад
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
@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 < 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
@Rouverius 6 лет назад
Even better! Glad to hear it.
@susantoroy
@susantoroy 4 года назад
it's amazing,wow.thanks for making this
@KevinKratzke
@KevinKratzke 6 лет назад
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
@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
@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
@BrainybitsCanada 6 лет назад
Btw I just tried your script and it works Perfectly! Thanks again for sharing!
@nidzjamismail4952
@nidzjamismail4952 6 лет назад
Brainy-Bits Salam
@wicert
@wicert 5 лет назад
Dieses custom script hat vieles erleichtert. Viele Dank
@SteeveAustin
@SteeveAustin 5 лет назад
@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 !!
@pantanomonstruodel7453
@pantanomonstruodel7453 Год назад
but what is the code for put in onto arduino ?.... I cant find it
@anthonyp4209
@anthonyp4209 2 года назад
Just what I needed - thanks man
@user-rm3wd8oi5w
@user-rm3wd8oi5w 6 лет назад
Up to 30 images can be added, and the first image after 31 will be disordered
@GBUKMilo
@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
@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
@kheeee Год назад
hello, i dont know why my number of pixel in one line of mine only have 11 pixels, can you help me bro
@nithinbabu52
@nithinbabu52 4 года назад
Good work .nice keep itup
@JeremyCook
@JeremyCook 3 года назад
Could you provide the Arduino code for this?
@user-rm3wd8oi5w
@user-rm3wd8oi5w 6 лет назад
Very good project, but whether the image code can be put into the memory card, so the space is infinite
@BrainybitsCanada
@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
@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
@leharuso 6 лет назад
Image can be converted to approprate binary format for you. This utility have such capability.
@amanimad6358
@amanimad6358 4 года назад
Ohh. Wow.This is realy wow.Thanks for this.
@WolfClinton1
@WolfClinton1 Год назад
I hope this is useful - If you triple left click it highlights a complete line. (double click highlights a word ;-) )
@farooq6073
@farooq6073 4 года назад
It's amazing tutorial easy learn thanks for helping me
@JonnyRetro
@JonnyRetro 4 года назад
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
@ThatTalkingDogGuy 4 года назад
Same here. Can't get it to output a 16x16 for me at all
@cchallett1
@cchallett1 4 года назад
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
@3dl-3d-printchannel74 4 года назад
Where i have to put it in the code?
@sumedhburbure4173
@sumedhburbure4173 6 лет назад
Great content. Thanks
@BrainybitsCanada
@BrainybitsCanada 6 лет назад
Thanks for your comment and for watching!
@nidzjamismail4952
@nidzjamismail4952 6 лет назад
Sumedh Burbure
@kaoshavoc
@kaoshavoc 6 лет назад
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
@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 < 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
@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
@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
@fl7977
@fl7977 5 лет назад
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
@BrainybitsCanada 5 лет назад
Was just about to send you the link for the previous video :). Good luck with your project and thanks for watching!
@wchen2340
@wchen2340 2 года назад
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.
@mutanibenjamin2959
@mutanibenjamin2959 4 года назад
awesome n helpful video
@israg3333
@israg3333 4 года назад
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?
@sub-arts128
@sub-arts128 3 года назад
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.
@walterrldias
@walterrldias 4 года назад
Amen brother ! txs so much.
@donavaner3504
@donavaner3504 4 года назад
Is there any example codes for 8 bit images? This video is 24 bit
@komaliram2362
@komaliram2362 4 года назад
A good feature about texto
@mrinalroymrinal4632
@mrinalroymrinal4632 4 года назад
Good work ,genius
@BrainybitsCanada
@BrainybitsCanada 4 года назад
Thanks for watching!
@AJB2K3
@AJB2K3 4 года назад
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.
@aventureentrepreneurial5590
@aventureentrepreneurial5590 3 года назад
thanks very much. God bless you
@nazishali1085
@nazishali1085 4 года назад
Good work
@Fogaata
@Fogaata 6 лет назад
Lots of fun!
@alamjk1
@alamjk1 4 года назад
nice job
@apnadekhtu
@apnadekhtu 4 года назад
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...
@Don_Meggi
@Don_Meggi 6 лет назад
Thanks............
@croydon21H
@croydon21H 2 года назад
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?
@expfox4851
@expfox4851 3 года назад
how to do it in app inventor 2
@taranagnew436
@taranagnew436 6 лет назад
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
@parvinsharma4111 6 лет назад
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.
@XanCraft21
@XanCraft21 4 года назад
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?
@acatisfinetoo3018
@acatisfinetoo3018 4 года назад
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?
@knightsun2920
@knightsun2920 2 года назад
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?
@taijulislam1407
@taijulislam1407 4 года назад
good job
@ernestorivero9909
@ernestorivero9909 Год назад
My friend saw your video but I have not managed to put an image in my matrix
@boydbros.3659
@boydbros.3659 6 лет назад
SWEET
@fanyucup4095
@fanyucup4095 5 лет назад
Hi Sir, it was a cool project... Is this program work for p10 or p4.74 led panel single colour??
@desdsdyugug3900
@desdsdyugug3900 4 года назад
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
@chuck_norris
@chuck_norris 5 лет назад
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.
@jaschar77
@jaschar77 4 года назад
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?
@hannansha4534
@hannansha4534 4 года назад
veri good and helpfull all video thenx for you
@codewithmalik3665
@codewithmalik3665 5 лет назад
Sir how to convert these array into only 1 color le'ts say Red !
@jiteshsehgal4542
@jiteshsehgal4542 4 года назад
Good video
@RaiNdeso
@RaiNdeso 4 года назад
I like your video
@saivarshinithamtam6577
@saivarshinithamtam6577 Год назад
I am getting different color as output not as my input can anyone help me?
@marcopolofernandes807
@marcopolofernandes807 5 лет назад
is it possible to control the matrix with LEDedit or gladiator?
@BlueeBubble
@BlueeBubble 4 года назад
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 :/
@rajeshwarisubedi3744
@rajeshwarisubedi3744 4 года назад
Good sharing
@ernestorivero9909
@ernestorivero9909 Год назад
Mi amigo vi tu vídeo pero no he logrado poner una imagen en mi matrix
@MuhammadIjaz-hs6ey
@MuhammadIjaz-hs6ey 4 года назад
nice video
@user-rm3wd8oi5w
@user-rm3wd8oi5w 6 лет назад
What is the version of lcd-image, I use the latest version, the code and picture are not the same, there are some...
@BrainybitsCanada
@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.
@PerchEagle
@PerchEagle 4 года назад
How to do it in byte size ?
@tpolarbeart
@tpolarbeart 4 года назад
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
@BrainybitsCanada 4 года назад
Cool! Thanks for sharing!
@taranagnew436
@taranagnew436 5 лет назад
can you do the same process for gifs?
@someshvemula9966
@someshvemula9966 5 лет назад
You should create moonwalk 😂 I think that's impossible 😂😂
@waka7377
@waka7377 4 года назад
me encanta porqque ahorra mucho trabajoooooooo
@avonfonds2567
@avonfonds2567 5 лет назад
Can you convert av input to bitmap ??
@sunilsurkheti3900
@sunilsurkheti3900 4 года назад
nice
@juliocesardemoraescarvalho758
@juliocesardemoraescarvalho758 4 года назад
Where do you buy these components
@megam2009
@megam2009 3 года назад
esto solo funciona para 16x16, no sirve para otras dimensiones, acabo de intertarlo muchas veces
@megam2009
@megam2009 3 года назад
me sirvio colega con otras dimensiones, te amo
@danielkintana642
@danielkintana642 3 года назад
@@megam2009 Como fue que lo hiciste
@megam2009
@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
@taranagnew436
@taranagnew436 6 лет назад
can you convert gifs to play on a adafruit 32x32 led matrix?
@taranagnew436
@taranagnew436 6 лет назад
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?
@prsahoo3350
@prsahoo3350 4 года назад
super
@SvetiMFNikola
@SvetiMFNikola 6 лет назад
Cool
@user-ow9ke4td8e
@user-ow9ke4td8e 4 года назад
top
@farrouq_aja
@farrouq_aja 3 года назад
amazing project sir, can i see your code sir ?
@somedude5414
@somedude5414 4 года назад
sed and awk could automate that. :P
@Learnduino
@Learnduino 5 лет назад
Hello, nice project,
@BrainybitsCanada
@BrainybitsCanada 5 лет назад
Thanks for watching!
@Learnduino
@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
@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.
@theresonator01
@theresonator01 4 года назад
Lol of you resoldered your strips you be a lot faster 😂
@bradleywhais7779
@bradleywhais7779 5 лет назад
when you start to do it by hand, and realize there has to be a better way
@BrainybitsCanada
@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!
@abate1710
@abate1710 4 года назад
convert images to arduino
@ItaloLima
@ItaloLima 6 лет назад
Good !! First !!
@ernestorivero9909
@ernestorivero9909 Год назад
Estuve viendo este video tuyo pero no logro poner la imagen en mi matrix si te mando mi correo me ayudas
@ernestorivero9909
@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
@junmarkdaraydo1385 4 года назад
nice video
@user-zm1fb7nu8w
@user-zm1fb7nu8w 4 года назад
nice
Далее
How to use Excel to Animate LEDs!  Arduino + WS2812 LEDs
17:01
OBLADAET - BARMAN
03:06
Просмотров 102 тыс.
RGB LED Matrix with an ESP8266 - How to get started
6:13
ESP32 powered WS2812B LED Matrix [Part 1]
8:05
Просмотров 84 тыс.
Control RGB LEDs with Arduino || Arduino Essentials #1
4:23
how to display images on 0.96" oled using arduino
7:07
How to Build a Massive LED Wall on a Budget
14:30
Просмотров 342 тыс.