I found PERFECT display

okay I have found the perfect display for my shifter knob project it's round it's small enough to fit inside a 3D printed shifter knob and it's very cheap the price is slightly below $4 and as you can see it can also display colors so today I will show you how to use that display to G with the Arduino Uno but first I need to tell you three things first of all please write a comment and let me know what car do you drive I would like to create a few different versions with different logos and it will be nice to know what are the usual Brands out there the second thing is this video is actually a part of the custom shifter knob series and I believe that this is the video number seven in the first video I have used whole sensors to determine the current gear based on the shifter lever position in the second video I was experimenting with this 7 x 11 LED Matrix display the third video was about 3D printing a custom shifter KN to put that display inside video number four was about a different display the 5x5 RGB LED Matrix display video number five was about using this Shi turn up with the PC game using S Up application and video number six was about the hexagonal neopixel display and here we are on the video number seven now you don't need to watch all the previous videos but if you have any questions it's possible that the answer might be there so in any case I'll put all the links to those previous videos in the description the first thing that I want to talk about is the sponsor of today's video which is PC DB way you can use their services to get pretty much everything that you might need for your project including pcbs PCB assembly assembly stencils but even things like 3D printing CNC Machining or injection molding actually there's much more so anything you need you might find there and if you need pcbs and you use the link down in the description you can get 10 pcbs for free only paying for shipping so thank you PCB way and let's finally get to our display again this is the round display but it's not 100% Round And what I mean by that is if you tilt it you can see that the bottom of the display is actually cut off so we need to keep that in mind this is the IPS display which means it has a nice viewing angles and nice colors the brightness is decent it's not something that you will use Outdoors but it should be fine inside the car the thing that I like about this display the most is that you can get it in a few different versions and one of the version is this one with a Glass lens on top of the display and I think that it just looks perfect I mean I don't how visible it is on the camera but it's not flat it's slightly round and I think that it will look great when you place it inside a 3D printed shifter knob because it will kind of mimic the shape of the knob I mean especially if you compare it with the version without the lens the difference is quite huge this display has a chip it's the st7789 H2 that uses the spa connection the cable is included it has eight wires so we will need eight pins but you can see that it has female hair pins and I want to use that together with the arduin that also has female ha pins which means that I either need to use some kind of Shield like this one from thef robot that has male header pins or I need to place some male ha pins in between those female ha pins but we need to first know the connections and the second thing that I like about this display is documentation there is this Wicky page with all the details and you can download all the schematics all the data sheets as well as the assemble code so let's actually do that and if I open the downloaded zip file we have demos for for the Arduino ESP 32 and so on and so on and if I open the Arduino folder we have demos for the Arduino Mega and Arduino Uno for both the hardware SPI and software SPI connection there is even this picture folder where there are photos of this demo running on the Arduino so we can see what we might expect and I guess we can open some of those images and see the connections but we can as well locate this PDF file that has all the connections on the page number two and three and if I zoom in a little bit you can see that you should connect the ground to ground the VCC to 5 volts the the serial clock to pin number 13 and this is quite important because this is the hardware SPI clock on the Arduino Uno then the SDA the data pin to pin number 11 again this is the hardware SPI data pin on the Arduino Uno and then we have pins reset the data command the chip select and the backlight and those are connected to pins A4 A3 A2 and a z I guess we can connect those to any pins but I will use those listed pins at least for now so let's use the provided cables to connect the display to the Arduino Uno also the colors are slightly confusing because the VCC is in a black color while the ground is red color usually it's the other way around so once the display is connected we can jump back to the downloaded zip file and in here I will open the Arduino Uno demo Hardware SPI folder and open the 01 simple test and open the Ino file and the sketch looks like this you can see that we are using no libraries except for the SPI which should be already included in the Arduino and just in case the connection is listed in here one more time so I think that at this point we can just select the D Arduino Uno board and hit the upload button and when the sketch is running it first shows some full screen background colors then it also shows some filled [Music] circles and then also some outline circles and then it continues again from the beginning so we know that the display Works let's also try some other sketches inside the downloaded folder we have a few more I will open the second one which is called the clear screen so again open the in file and here we can see that we need two more libraries being the LCD Wiki GUI and the LCD VI SPI and both of those libraries were included in the downloaded folder if I go to libraries folder there are two zip files for those libraries and we need to install those by going to sketch include library and clicking the Ed zip library and selecting those zip files I've already done this so all that's left to do is to select the Arduino Uno board and hit the upload button again this sketch is actually simpler even than the first one it's just clearing the screen with different colors but I think that it nicely shows what could be the maximum speed that we can get from the Arduino Uno you can see that as the screen updates it takes about I don't know one or maybe two seconds to update the entire screen and we cannot get any faster than that so if you want to update the whole screen that might be an issue because it will be quite slow but thankfully we will be only updating a small portion of the screen but before we do so let's quickly go through all the our examples the next one is called Colgate test not quite sure what that means but it uses the same libraries and there is quite a lot of stuff going on so let's upload it to the uo as [Music] well and it looks like it's some kind of performance test it draws as much stuff as possible and then it measures how much time it took to draw that stuff but even without looking at those numbers I think it's quite obvious that the arduo Uno is quite slow anyway let's move to the next example this one is called the display graph and it's actually not for drawing graphs but for graphics so let's upload this one as well and we see all the different shapes and colors I quite like this demo it shows a quite a lot of different things but I think that it's time to move to our project so let's just try one more [Music] example and I will try the last one which is called display clock and it should hopefully display the analog clock so let's upload this one as well and indeed we see the animated analog clock and in here the performance is not an issue because it only needs to update once every second and I think it's not updating the whole screen only those hands so we've seen quite a lot of different examples let's see if we can use any of the code to draw our custom gear indicator I will start with the very first example called the symol test that doesn't use any libraries and I will go all the way down to find the setup function so the setup function is down there and as you can see it first initializes the SPI connection and then sets the pin mode and then it calls the LCD initialization the LCD init function if I control click on this function it will jump to that function and in here there is some initialization sequence for the chip to make sure that the display works properly we don't need to mess with that code so we jump back to the setup function I think that was all that was there so that's correct and then inside the main Loop we are clearing theist display and then drawing the circles and drawing some other circles I guess and actually the LCD clear function is quite important so I'll control click on this one and jump to that function and this function clears the display with certain color defined with this J variable and it does that by going over every single Pixel on the display so the display resolution is 240 by 198 pixels and for every of those pixels it sends two bytes of data and that's because every single Pixel every single color is represented by two bytes and since one bite is 8 Bits two bytes mean 16 bits and that's the color format being used the 16bit RGB also known as the RGB 565 because five bits are being used for the red channel six bits are being used for the green Channel and five bits are used for the blue Channel and 5 bits are 32 6 bits are 64 and 5 bits are 32 so if you multiply those three together we get 65 536 colors so let's see if we can fill the display with our own color and I found this RGB 565 Color Picker so let's just pick some random color I don't know for example this blue one and then I will copy this value for our color and use it in our code so inside the loop function I will pretty much comment out everything that's in there and only keep the LCD clear function with our color so this should be the blue color let's try to upload it to the Arduino and indeed the display is now filled with the blue color of course we don't have to use the same color for every sing single Pixel we can do something else and for example first send the value of the variable I and then send the value of the variable M which are for those loops and if I upload it again we get some kind of rainbow image we can also draw some completely random colors simply by using the random functions so I will send the random value between 0 and 255 and of course I need to do that two times and if I upload it now the display is slowly filling with random pixels also the filling of the screen is much slower now because the random function takes some CPU Cycles on the Arduino Uno and as a result it takes a few seconds to update the screen so we know how to draw pixels how to draw random pixels but what about the drawing an actual image and we will again update the pixels on the screen but we need to first store the image somehow and actually before storing the image we need to draw the image let's open a photo which is a free online graphic editor ilar to photoshop and create a new image in some small size for example only 32x 24 pixels and I want to fill this image with some random stuff so I can see that it works so I will just do whatever I want for example I will select the selection and fill this selection with some gradient for example going from black to white like so and maybe another gradient with the rainbow colors so a new selection and again the gradient going over all the rainbow colors then I will maybe select the pencil tool and draw some pixel patterns so maybe something like this I want to basically draw as much stuff as possible just to make sure that everything works as expected and maybe I can even add some text and saying hello world or at least the Hello message so let's make it smaller like that and I guess something like this should work as the test image now I need to export it and I usually export it as the PNG image but I already know that the software that I will be using doesn't support PNG images so I'll export it as the bit map image so BMB image instead and name it properly for example test image hit the save button and now we need to convert this image into the C style array if I go back to the downloads folder there is this folder number seven that has this tools image to LCD application and if I run it if I open it it looks like this and this is specifically made for converting images into the C style arrays there is also the image in the downloads folder that's showing what settings should be used so if I show it like this I can see that the first thing should be Cy array which is correct the next setting is just hard to tell from the Chinese but if I changes to the vertical scan you can see that this image changes which makes me think that it should be set to horizontal scan the bits per pixel should be 16 bits but it's kind of confusing because the 16 bit is here twice but I guess the second 16bit is actually 18 bit so it will be the first 16bit and then the size of our image is 32x 24 pixels so I just need to open the image and one thing that I found compared to this image is that you want to check the MSB first the most significant bit first otherwise it was not drawing correctly so with all the settings set we can jump to the 16bit color preview to see how it looks like and then we can click the save button to save it as a C file and once you do that the file will automatically open in notepad and that's great because we want to use that code inside our sketch so just copy this into the clipboard jump to our sketch and just paste it somewhere for example in here and let's just put the LCD clear function into the initial state where it was just filling the screen with some defined color like so and then I will copy this function and paste it one more time and let's just reanimate to draw test image instead now for now I don't need any parameters but I need to take a closer look what's going on inside this function so we already know that we are sending two bytes of data for each individual pixel but before we actually do that we are calling this address set function and I guess this is setting the area where the pixels will be filled so for now it's setting the area for the entire screen but let's maybe change that and draw the image somewhere in the middle so for example X and Y Position will be 100 and then the right Edge will be 100 plus the width of our image which is 42 and the bottom Edge will be 100 plus the height of our image which is 24 pixels however by testing this I found out that this has to be one pixel smaller so minus one for both the right Edge and the bottom Edge and then again we go over every single Pixel and we send two bytes of data I think that what I can do instead is to have only one for Loop like so that will go over every single bite inside our array which is named the G image test image let me just copy the name in here so it should go over the width of the image 42 pixels times the height of the image * 2 bytes per pixel and if I do the math so 32 * 24 * 2 it's 1536 which is the number of bytes inside our array so it's matching nicely and for every single bite I will just send the data and the data will be the G image test image of the index I and I think that's all that we need to draw our image so so inside the loop function I will first clear the display with the blue color and then I will draw the image like so and maybe wait a little bit so let's just put some delay for example 10 seconds and we can try uploading this to the Arduino and sure enough after a few seconds we see the very tiny image in the middle of the display let me actually try to zoom in as much as I can but it looks like that it's matching our original image one by one that's also because I already knew that you have to click the MSB first checkbox in the image to LCD converter utility and that you have to set the addresses inside the Arduino code one pixel smaller now this image is nice but it's very tiny so what if you want to draw much bigger image or maybe more images and that will be a problem because if I jump back to our sketch you can see that we are using 75% of the dynamic memory of the RAM memory because there is only 2 kiloby and with our image being sized 32x 24 pixels requiring two bytes for each individual pixel we are already using 1 and2 kiloby of the 2 kiloby of memory thankfully there is also a flashh memory and it's slightly bigger being 32 kiloby which will allow for storing bigger images but we have to first tell the Arduino to keep the data in the flash memory and not copy it to the r memory on the startup and we do it by using the V progam so if I just type in progam that will tell the Arduino to keep the data in the program memory in the flash memory however once we do that we have to use a special function to read the data back in and if I open the U documentation for the program the function should be there and it's called the program read by near so I just copy this function into the clipboard and paste it in our code so we want to use the LCD write data function but we will get the data using this program read by near function of our G image test image and we don't actually reference this as an array but this is the starting address of this array plus the index I and that should be hopefully enough to draw the image from the program memory so let's just upload it to the Arduino and if everything goes right there should be no visual difference we should see the very same image on the display in the middle of the display but if I go back to our sketch and show this sketch and the previous sketch side by side you can see that previously we were using 75% of the r memory of the dynamic memory and now we are using almost none so this way using the program memory we have about 42 kilobytes for our images let's update the function to not draw just this one particular image but any kind of image and for that I will just copy this function and call this function simply draw image and we need to know a few parameters we need to know the exposition and I'm using the bite variable because it one goes between 0 and 255 and since the width and the height of our image is smaller than 255 that should be enough to hold all the values then we of course need to know the Y position we need to know the width of our image and the height of our image and then we of course need to know the individual bytes of our image so let's just call this image data and this will be the array of bytes so inside our function let's delete the stuff that we are not using and maybe instead of defining those i and m variables let's just Define this inside the loop so we first set the address to be X position and Y position and the right Edge will be X position plus the width of our image minus one and the bottom Edge will be the Y position plus the height of our image minus one pixel then we will go over every single bite and that means going over the width of our image times the height of our image times two because we need two bytes for every single Pixel and then we will send the data using the LCD right data using the program read by near function to read it from the program memory and we will send the image data so image data plus I and I think that this should be enough to draw any Custom Image so let's test this function and I will test it with the very same image that we already have so inside our loop I will remove the draw test image and the delay and I will call this draw image function and just to see something different let's draw this image on the random position so the EXP Position will be random going from 0 to 240 minus the WID of the image and the Y Position will be the random function going from 0 to 198 which is the height of the screen minus the height of the image which is 2 24 the width of the image is 32 height of the image is 24 and the name of the image is up here it's this one the G image test image 32 * 24 pixels and maybe what I will do as well is to move this LCD clear function into the setup function so first we'll just clear the screen with the blue color and then inside the loop we'll be drawing those images as fast as possible on random positions let's upload this to the Arduino and see what happens and as expected the screen is first filled with the blue color and then we draw the image on random positions and surprisingly it looks quite fast when I was using this display this test actually gave me a confidence that I can use it for our gear display indicator because I should be able to update just one particular digit with a different color fast enough so I think at at this point it's time to create that custom gear indicator image I will keep using photop but this time I'll will create an image in the full screen resolution being 240 by 198 pixels which is about this size but if I look at the actual display it looks something like this so imagine this is the circle so this area is actually not present on the display but if you want want to align something to the middle to the center of the screen we cannot align it to the center of the canvas but we need to align it to the center of this circle and we of course need to keep in mind that anything inside those areas will not be visible so I think that it would make sense to create this helper Circle I will open those shapes and select the ellipse tool and in the size drop down menu I will select the fixed size to be 240 by 240 pixels and then position the circle like this to be aligned on the top side and the left side this is optional but I might add a new color fill layer in the dark gray color so the white is not that much shining into my eyes and then I will select the rectangle tool and draw a new rectangle in the size about I don't know 160 by 4 pixels like so and of course I need to double click this layer and change the color to be white and then I will select the layer together with the circle using the shift key and align it to the middle for both the vertical and the horizontal Direction so this will be the middle line of our H shifter pattern and then I will draw an A line using the rectangle tool about I don't know 4X 70 pixels align it to the left side of the other line using the arrow keys on the keyboard and then I will create a copy by pressing the ALT key on the keyboard and dragging it to the right side three more times like so and then I will select all four layers Center it vertically and then click this button to have equal gaps and then maybe I will select also this layer and the circle and again Center it vertically to have everything aligned to the center of the display now for the left most line line I only need the top half of the line so I'll zoom in a little bit and then go to edit transform scale and by default if I drag is the round you can see that it's scaling for both the width and height so what I need to do instead is to again select transform scale and press the shift button on the keyboard to only scale it for the height like so press the enter key and we have our age shifter pattern finished of course I want to addit the labels the digits and for that I will select the type tool and just type the r for reverse and I can use any font I want but I decided to make this BMW themed and for that I've downloaded actually a custom font called this BMW Hela so download this font and then go back to photo open this font Dr down menu and click this load font button select the downloaded zip file and click the open button and it will add this font to our drop down menu list so I will type in search for BMW and select this BMW helvetica font maybe make it slightly bigger for example like 46 pixels make it Center aligned if it's not white then make it of course white and then position it to the correct position for example something like this create a copy which could be done in many different ways for example right clicking the layer and selecting duplicate the layer double click the layer icon and type in digit number one or I can as well create a copy by Alt and shift clicking on the keyboard and dragging the layer around and this will be the gear number three this will be the gear number five and so on and so on and in the end after tweaking the positions with the arrow keys on the keyboard it might look something like this as for the positions and sizing this is the edge of the display but it probably makes sense to leave a little bit of space in between those digits and the edge of the display now this image looks nice but it's kind of boring we are using the color display so it might make sense to show some colors and maybe show some logo and again I decided to make this BMW themed so I searched for the bmwm logo and found this one on the Wikipedia I will open the source file which is this one and copy the URL into the clipboard and then go back to photo and in here I will select file open more open form URL and paste this URL and I want to place this into the current project so hit the okay button and we have our logo in here I will make it slightly smaller for example something like this hit the enter key on the keyboard and then again select the logo and the circle and I might as well close this tab because I don't want to see it I want to have a more space for the layer Spain and then align this logo with the circle by clicking this Center horizontally and Center vertically button to have some space between the logo and the lines I will double click the layer to open the layer style and then add the stroke effect I will change the size to be only around four pixels and then of course change the color to be black color like so and now there is a clear separation between the logo and the lines and I think that image like this could be the final design and I would like to of course see it before I start splitting this into smaller images however when I get the size of the image 240 pixels time8 pixels time 2 bytes per pixel I would need about 95 kiloby but I only have 32 kiloby on the Arduino Uno but I think that I should be still able to display this image and the idea is that I will just send the data from the PC to the Arduino Uno and then the arduin Uno will send the data to the display and just because the display has enough memory to hold the entire image of the entire screen to have the frame buffer for the display I think that something like this should work so let's keep the photo application opened and jump into the Arduino IDE in here we are still drawing the image on random positions but instead of drawing the image I want to draw whatever data we get from the PC using the serial communication and for that we need to First establish the serial communication using the serial begin function so I just copy this serial begin function into our code and paste it inside the setup function and the most important thing is the speed I want to send the data as fast as possible and if I open the serial monitor we have quite a lot of speeds to choose from I did found out that this 1152 200 bouts Works nicely so I'll use the same speed so5 200 bouts so 115,200 bouts and once we establish the St communication we want to draw on the display whatever data we get from the serial port and for that we will use the serial read function that will read the bite that was received by Arduino and actually I will copy the whole block of the code into our Arduino sketch into the main Loop but I'll only keep some of the code like so so if there is any serial data available I want to read the bite using the serial read function and I want to send this bite to the display and I've already showed you how to center the data to the display we can use the LCD right data function so I use the LCD right data function and I will send the data that I will first read to using the serial read function but we are still missing a few things the obvious one is not drawing the image inside the loop because we don't need it anymore but if I look at the draw the image function or pretty much any function that we've created draw Custom Image or LCD clear function we are first setting the Cs pin the chip select pin to low State and that's because you can have multiple SPI devices connected to the same Arduino board and they will pretty much share all the same pins they will share the same clock same data pin of course same ground and same 5vt pins the only difference there will be is that every SPI device have a separate CS pin the chip select pin and by setting one of those chip select pins to low you will control to which SPI device you want to currently speak to now we only have one SPI device this display so what I'm thinking is that we can set this chip select pin to low and keep it low all the time not setting it to high at any time so I just copy this chip select to low into the setup function so once we establish the communication I will set the chip select pin to low meaning that I will tell the SPI device I want to tell the display that I will send some data and then same as before we want to set the correct area to where we will be sending the data and for that I will use this eded set function again copy it and paste it on the end of the setup function and then once this setup function is over it will jump to the main Loop and here it will listen for the serial data and if there is some serial data it will send it to the display so let's upload it to the Arduino Uno and once it's uploaded let's open the seral monitor make sure to set the same speed as inside our serial begin function which is 115,200 BS and here we can send some data to the display but we are not sending bytes we are using Sky characters so let's see what's going on let's say I for example send the letter O which is the exm of 6f so 6f and I need to send two bytes for each individual pixel so let just say I send the lay o two times so 6 F 6f which means that I will send the data being 0 1 1 01111 0 1 1 0 1 1 one1 which doesn't make much sense but we can say that the first to five bytes are for the red channel the next six bytes for the green Channel and the last five bytes are for the blue Channel or we can just as well open our 5x5 RGB Color Picker and see what color this is so 28527 decimal is the 6f6 F hexadecimal and it should give us some green color so let's jump back to the r ID and sender o and as I do so nothing happens and there is a good reason for that we are most likely receiving the data and we are most likely sending it to the display but they are now updating the top left portion of the screen which is simply not there so what I need to do is to send much more o characters and what I mean by that is much much more so at some point we should hopefully start seeing some green pixels which seems to be the case there are a few green pixels on top so if I keep sending those okay characters I'm slowly filling the screen with green pixels which means that our approach works so instead of sending the green pixels let's just send our image from photo to prevent any gray pixels around the edge of the display I will create a new fill layer in the black color so everything is black and then I will save it as a bitmap file so export as the BMP file format but let's give it some meaningful name and save it and use that image to LCD utility to convert it but this time the size is 240 by 198 pixels and I don't want to create a c style array I want to create the binary file let's see how it looks like and it looks fine so I will save it and then I want to send that binary file to the Arduino I'm not quite sure if that's possible with the Arduino IDE so I will use a different application called the real term the real terminal set the speed to be 115,200 bytes the port in my case is port number 14 and then I'll click the open button and there is some kind of error which is saying that I'm still connected to the Arduino using the serial monitor in the Arduino IDE so I'll just close it in here and click the open button again and then go into the send Tab and there is a file that could be selected so I will open our generated file and then click the send file [Music] button and what happens is that the realterm application is sending the content of the binary file to the Arduino and then the Arduino is receiving the data and sending this data to the display so pixel by pixel line by line we are slowly drawing the image on the display and you can see how fast actually how slow this is but we don't care about the speed at this point really what I want to do is to see how the image looks on the display and I think it looks great so it's time to do this for real and to do that we cannot use a full screen image because that wouldn't fit into the Arduino Uno but I think that we can fit image for each individual digit for each individual gear and hopefully also the image for the bmwm logo in the middle and we can actually find it out quite easily by doing a simple math simple multiplications let's measure the size of one label and I think that the letter R is the biggest one so if I select the selection around the letter R I think that we need around 24x 28 pixels so 24 * 28 and we need two bytes per pixel and we have seven of those labels so time 7 which means that we need around 9 kiloby for all those label images and then we have this m image in the middle which is quite big so again let's just select the selection around this image and this could be maybe I don't know 124x 44 pixels so 144 * 48 pixels * 2 bytes per pixel which is around 13 or actually 14 kiloby and if I add those two together so 9 kiloby and 14 kiloby we would need around 23 kiloby and that should be possible on the Arduino Uno because again we have 32 kiloby of flash memory and while some of the memory is of course used for the code I think that we can squeeze 23 kiloby of the image data for the current sketch we only use around 3 kiloby of data in the flashh memory for now and 3 + 23 is still below 32 kiloby limit so let's go back into photo again and start splitting this image into multiple smaller images I would like to export all those individual gear labels as separate images and I would like to also export the M symbol in the middle as one image but I don't want to export those white lines as images because I think that I can draw those using the draw rectangle function which also means that I don't want to have those lines inside the M image now as for actually exporting the images I can rename those layers to have the- e- prefix and then I can go to file export layers and click the export layers button and that will generate all the images but those images have different sizes because the image is always scrapped to the size of the label plus it has a transparent background and I would like to have the black background instead so what I will do instead is to just just go back and create a new layer in the size of our 24x 28 pixels and maybe fill it with some color let's say for example I don't know maybe a pink color click the okay button and then lower the opacity zoom in a little bit and position it over the label and then create a copy for every single label so this will be the size of each individual digit I will also do the same thing for the M symbol in the middle so again select the selection around the symbol create a new layer and fill it with the pink color like so then I will hide all the lines as well as all those pink layers and then control click on the thumbnail of the layer to load the selection to load the size of the layer select edit copy merged that will copy everything from all the layers and then select edit paste and that will paste this image being sized 24x 28 pixels if I hide those two layers you can see that now this is the image that will be exported so I will continue like this with all the other layers control click in the thumbnail and then selecting edit cave merged and edit paste and so on and so on I think I've missed one gear so 1 2 3 4 5 six reverse and the mble in the middle again if I hide all those black layers those are the images will be exported I just need to name those properly using d d e Dash and then the image name so it will be the gear reverse d e- gear first and so on and so on and then I can go to file export layers make sure that this only layers withb D e- into name is being checked and then click the export layers button unfortunately the image to LCD doesn't support PNG images so we can either export those as JPEG images if you want and of course set the quality all the way to 100% or you can just export those as PNG images and then convert those into bitmap images using any kind of software for example I like to use this air fun View and if you go to file bch conversion SL rename you can just set the output format to bitmap file add all images and start the B and once we have those we can just open those images one by one in the image to LCD application and start generating the CR arrays by the way I've just noticed that this is saying maximum WID and maximum height so I don't think that you have to change it for every single image in case you don't want to be resized so save it as a C file I will use the same name as the image it will even open this in notepad and then I can click this button to jump to the next image in the same folder and do the same thing if you don't want to open notepad up on every single export you can just click this set button and uncheck this checkbox so we have all the C files generated let's add those into our Arduino sketch and while you can copy and paste those C files into the arino sketch folder I think I will create a new header file that I will name images. or maybe gear images. and I will paste the content of those C files in there I want to place those images inside a program memory so I will type in prog M for every single [Music] array and then I want to include this header file into our main sketch so on our sketch I will just type in include of our gear images. H file and this has to be inside quotes like this and then we can start drawing those images we already know the sizes but we also need to know the positions and if I jump back to photo p i can select any layer and then select this move tool and click this distances checkbox and that will show me the exposition y position as well as the size of the layer so let me just position this window next to the Arduino IDE like so and I can start putting in the values so for the reverse gear the x is 30 the Y is 53 and the size is 24x 28 pixels and the image name the array name is in the gear images. AG file which is this one G image gear r so this is the rir gear image and I can continue like this with all the other images and since this part is quite boring let me speed it up a little bit for you again I'm just putting the X and Y values for every single image and the array name and in total we have eight different images the final code looks like this which means that it's time to upload it to the Arduino Uno and as expected we use about 23 kiloby of the flash memory on the display we can see the blue background with our eight images 7 images for the gear labels and one image for the middle logo which means that now it's time to draw the connecting lines and as mentioned previously I will not draw those using images but I will try to find some draw rectangle function to do this and if I look into our code there is indeed a function called fill rectangle it takes the X position the Y position the width and the height and the color and if you look at the code we are doing the very similar thing as we were doing with clearing the entire screen we which means sending two bytes of data for every single Pixel but we are setting the address the area where we will draw those pixels based on the exposition y position width and height that said in order to draw those rectangles we need to know those sizes and positions and we should have those lines in our photo file but those lines are drawn in a way that they are below this m symbol which means that if I draw a rectangle like this in this size I will later cover most of the parts with this image and I will just wasting cycles for drawing this part of the rectangle so I think that what would make sense is to draw a new set of rectangles they are only taking the space that they need to I will temporarily hide the distances but before drawing those rectangles I think that I will hide this image and actually show that image because I want to see this area where this line is connecting to the m symbol and while I cannot draw the rectangle like this being skewed I think that I can draw rectangle close to the logo that will still look fine now before drawing those rectangles I might add a a color fill layer in some dark gray color and fade it out a little bit using this opacity slider like so and that will make it obvious which lines I've have already drawn and which I haven't so let's draw those using the rectangle tool and for the reverse we would need two rectangles so one rectangle I need to change the color to be white color and the second rectangle which might go all the way to the right side maybe to this position for the first gear the second gear third gear and fourth gear we only need one rectangle and then we need to rectangles for the gear number five and six but I will not draw the rectangle from Top all the way to the bottom but instead draw it like this only going to the half of the size and then this connecting rectangle on the left side and then the connecting rectangle for the gear number six and with all those rectangles created I think that you know what is the next step and that is to select the move tool click the distensive checkbox and then select one by one make sure that we see both the arduo IDE and the photo window and then I will be using this fill rectangle function so down inside our code for drawing the images I will also draw rectangle so fill a rectangle and for the reverse the x is 40 Y is 85 4 and 37 and the color is white which is either you know f f FF in the heximal OR 65 535 in the decimal value I'll probably go with the heximal value so this is the color and then I need to do the same thing for each individual rectangle so let me speed it up a little bit for you again the gears number five and six both have two rectangles even when the middle one could be shared but I will tell you why I am not doing it in a minute now since we draw this line over our M image we want to First draw that image so bmwm logo first and then all the rectangles and gear images and before uploading it to the uino let's finally clear the screen with the black color which if I open the Color Picker is just zero in both the decimal and the ex decimal value so LCD clear with the black background color and then we can upload it to the Arduino and finally after 40 or so minutes we can see the H shifter parent image being displayed on the display driven only by the Arduino Uno but this is not the end yet because eventually I would like to put it inside the car and show the current gear in a different color now we can export a new set of images from photo in a different color and I think that we might be able to fit it because I think that at this point we are using about 23 kiloby of flash memory so the images took about 99 KOB we might be able to fit the those into the 32 k white limit but I would rather make it a dynamic in a way that I can change the color to be any color that I want and you've already seen in the beginning of the video that something like this should be possible because I was switching between a few different color themes now having our label which is using black and white color is quite nice because for the black color it means all the bits are set to zero and for the white color it means all the bits are set to one and so what we can do is we can say that if the bit is one we want to show a new color and if the bit is zero if the color is black we just want to show the black color and that's exactly what the bitwise end operator is for so there is some example down here let me zoom in a little bit okay so let's just say that this first value is our mask image so this is the image for our labels which we currently have having only black and white colors and let's say that the R value is some kind of color that we want to show if we have a black color inside our image so those two zeros are the black color it doesn't quite matter what are the values in the color because we end up with the black color as well and if we have the white color inside our mask image we should end up with the new color so let's try that approach to see if it works inside our sketch we have our draw image function I will copy and paste it one more time and rename it to draw image tinted and I need to know the color that I want to use and this color should be made from two bytes and on the Arduino that's the unsigned integer variable but before I use this color I need to make a few changes inside our code currently we are going over every single bite in the array and then sending this bite to the display but I want to send the two bytes of data at the same time so I can use the first bite of the color and the second bite of the color but obviously if I do it like this I need to go over every single Pixel not over every single bite so the I variable should only go to width times height and not times two so going over every single Pixel and then the index of the bite that we are looking for will be I * 2 for the first one and I * 2 + 1 for the second one so far making this change should make no difference in drawing the image it should still look the same but now we can use this color and again this color is made from two bytes if I for example choose the red color you can see that those bytes are f8 and 0 0 and we want to apply first B so f8 to one of those bytes and the other one the 0 0 to the other bite and if I scroll up to the LCD clear function you can see that something like this was happening in here so there was also this unsigned integer J to set the de color of the LCD clear function and then it was sending the first bite and the second bite and sending this first bite was done using this bit shift operator there is actually a more beginner friendly function in the Arduino it's called the low bite and high bite and it does exactly what it says so it's using either the leftmost bite or rightmost bite so let's use those functions in our draw image tinted code so once we get this bite I will again use the bit wise end operator which is the m% symbol so m% symbol and then I will use the height bite function of our color and for the second bite I will again use the ment symbol but this time I will use the low bite of the same color so this function should hopefully draw the image in some color so let's test it out inside our main loop I will do a quick test by just copying and pasting everything one more time but this time I will not use the draw image function but draw image tinted and let's just say I want to have the r symbol the reverse gear in some red color so select the red color and copy the value of being the F800 and let's actually also use it for those rectangles and for all the other gears I will again use the draw image tinted function and show some kind of gray color like it's inside the M logo so inside a color pickle let's for example choose maybe this color so let's just copy the x value of 84 30 and use it for both the rectangles and for the images and once we have it like this let's try to test it on the Arduino and indeed we see the r gear in the red color and all the our gears in the gray color now this solution is not perfect because there are some grayscale pixels and our mask image for the nlist edges and it's not always playing very nicely with the new color that said doing this color tinting in the proper way would take too much CPU Cycles so I guess we have to live with that at this point you should have enough knowledge to show any of those gear labels in a different color so let me talk about a few things that I wanted to talk about but I kind of forgot first of all this chip on the PC is not actually the chip that's driving the display this chip is responsible for converting the voltage levels between the 3.3 volt and the 5 volt so you can use the 3.3 volt microcontrollers for example the sp42 as well as the 5vt microcontrollers for example the Arduino the chip that is driving the display is on the actual display on the glass and on this display it's hidden behind this black sticker obviously for this display it's hidden behind this Glass Lens we have talked about how the Arduino is slow but we haven't talked about what is the SPI speed and if I go to the setup function and open the SPI initialization function we are calling the SPI set CL divider function and dividing it by two which is actually the maximum speed on the Arduino Uno and since the Arduino Uno is running on 16 MHz the SPI speed is half of that being 8 MHz by the way in the demo Arduino folder there were also the software SPI examples I don't think that there is any good reason to use those it's just that everything will be much much slower talking about the speed and the memory using when we were using this image to LCD utility and we were sending this test image there was actually some test image already pre-made but it was sized 40x 40 pixels which means that 40x 40 by 2 bytes per pixel would take about 3.2 kiloby and that wouldn't fit into the Arduino Uno RAM memory again which is only 2 kiloby so that was the reason why I haven't used this one also when we were testing the full screen image on the display we could have used the arduin mea because the arduin mea has 250s 6 KOB of flash memory so our 95 kiloby image would fit in there but I thought that using the serial communication with the Arduino Uno might be quite interesting exercise finally if you like shifting I have found this very interesting keychain for just a few dollars I will put the link down in the description as well as a link to the GitHub where you can find all the files from today's video As for the next steps I think that those are quite obvious I would like to 3D print a custom shifter up like I've done before this one 47 * 11 LED Matrix display I just need to make this hole slightly smaller and I've ordered a few pla filaments which I cannot wait to try out this is the pla Sparkle which has like small shiny dots inside this black pla this pla metal as the name suggests should look like a metal this is a gray one the dark gray [Music] one and I also have this one which is the pla Galaxy and that should be changing the color slightly based on the angle you can see that the base color is like Viet but the Highlight goes to Green Hues again I cannot wait to test all those filaments and then the next step will be using some smaller Arduino or Arduino compatible board the Arduino Uno is nice for testing but it's just huge you can get the smaller Arduino Uno it's called the Arduino Mini it's pretty much the same as the Arduino Uno except being the half of the size but I think that this was more meant to be as a collector's item which you can probably tell by the packaging that said you can get the Uno mini Chinese version which is almost the same it doesn't have the packaging or the serial number but it's much cheaper you can also get this board not quite sure if it has a name on the AliExpress it's called the Arduino Nano mini Ultra small whatever but it's also cheap and it's using the very same chip as the Arduino Uno and you can see that it is small enough that it might actually fit inside the shifter knob that said I might as well use some board with the ESP 42 just to have a little bit more memory and performance we will see if you have any ideas how to improve this project please let me know in the comment section I would like to hear your feedback if you have any questions please put those down in the comment section thank you very much for watching and I hope to see you soon thanks and bye

Channel: upir

Views: 540,314

Keywords: arduino, microbit, ui, gui, ui design, arduino display, oled lcd, gauges, gauge, digital gauge, dashboard, car cluster, digital car cluster, digital dashboard, esp32, raspberry pi, round display, animation, tutorial, diy, cluster design, pixel, microbit makecode, arduino ui, custom display, custom car cluster

Id: pbqgrv5YSf0

Length: 51min 32sec (3092 seconds)

Published: Wed May 22 2024