A Display From Arduino | Arduino GIGA Display Shield

so this video is about the Ardo Giga display Shield which is more than just a display with a lot of tech in it and in this video we're going to see everything about it starting from its specifications how to use it with ardino IDE we're testing out some example projects to test all the features of it then we'll having a look over how to use the lvgl library for making some interesting GUI based applications and in the end we'll be having a look over how to use the tiny G library to construct and render 3D objects so there's a lot to discuss but let's start this video with a quick unboxing so this is how you will receive the product in the standard ardino packaging with the image and the name of the product on the top and its specifications on the back so now let's open it up so below this cardboard we get the actual display then below it we get to see some paperworks along with the ardino stickers so that's what you get in the box now let's discuss about the specs of the [Music] shield so this is a 3.97 in display with a resolution of 800x 480 pixels it comes with a capactive touchpad on the top that supports up to five finger touch and gestures it do have a dedicated ardino cam connector on the top a PDM microphone near to it and a tiny RGB LED for indication purpose then on the back we get a BMI 270 IMU for all the motion based projects and all this comes with the size of just 106 by 80 mm so those were the complete specifications of the display shield now let's jump on to ardino ID and test out some example [Music] projects so first let's start with the basic example to display our image on the screen for that you just need to go to files into examples then into ardino H7 video and here just open up the example called as Ardo logo I'll maximize this example and this example is used to display a logo of the size 300X 300 pixel and the logo file is provided here in the header file so this is the hexad decimal format or the form of a JPEG image okay so first let's try to upload this code and visualize what we are getting on screen so here the right board and comp board is already selected I'll straight hit the upload button okay so the code is uploaded and we are able to see an Ardo logo on the screen so that was a simple example to display the image on the screen and uh we can not only display the r logo but we can display any image that we want using this image converter tool okay so let me show you how to display my own logo let's techs logo on the screen for that you just need to click on this link which will open up this page on your web browser and here you need to select the image now let's try to display the complete like 800x480 pixel image and if you want to make that custom size image well you can use the free platform called as canva and here you can click on create design and select custom size now here you can provide the size that you want in my case it is 800x 480 pixels you can click on create new design and here is the 800x480 canvas okay now here you can click on the upload button to upload your own file own image I will drop this techs logo and I will arrange it to the maximum size possible perfect so after confirming everything I will click on the share button and click on the download button here I'll download it in the jpeg format and download so we got our 800x 480 pixel image now let us go back to that web page uh this now here I'll select uh click on the browse button I'll select the file which I just downloaded which is this and here I'll select the output array as binary 565 and click on the convert button now with this we got the binary version of this image file but we want the hexadecimal version for that you need to go to to this website with link I will provide in the description here click on choose file and select the binary file which you just downloaded click on the upload button and here you got all the hexa decimal values of your image click on copy output to clipboard and just paste that here inside the RDO logo. EDG header file I'll paste that here and now in the main uh code we need to change the dimension so here earlier it was 300X 300 but this time it is 800 by 480 pixels and the coordinates will be 0 comma 0 only okay that's it that's all changes you need to do in the code let's just hit the upload button and let's see what happens next so the code is successfully uploaded and we got to see the techs logo printed in full screen okay and that's how you can display any image that you want in this Giga display Shield then next up let's test out the RGB LED on the display yes there is a very small like RGB LED near to the microphone on this display which you can use for the indication purpose and to use this RGB LED well there's a very simple line of code provided in the official ardino documentation page I just copied that code and pasted it here and this will make sure that the blue pixel in that RGB LED will turn on and it will turn off all the pixels that's a very basic blink example code so I'll straight away hit the upload button let's test it out and also to make this code work you need to install this aino Giga display Library which you can easily download from the manage Library section oh the code is successfully uploaded and the green LED turned on in my case so let's just try to turn on the middle one and let's see if the blue LED turns on or not okay it's done uploading and this time the blue LED turned on and let's try out the red LED as well just to confirm everything and it's uploaded and this time the red LED turned on so the sequence is red blue and green rather than red green blue I don't know why but yeah that was a simple code to use the RGB LED moving ahead with the next feature of of this uh Giga display Shield is the microphone so it do have a PDM microphone just near to the RGB LED and they have provided some sample codes as well to test out the microphone so first code is used to uh get the values of the microphone straight on the Cal monitor or Cal proter so let's test out that microphone code quickly so I'll copy that code I'll paste it here and in this case you need to install this PDM do Edge like the library which also you can get in the manage Library section and just download it straight away and it says done uploading let's open the serial monitor the water it is set to 960 and yes I'm getting couple of response but it's hard to visualize whether it is a garbage data or a proper data let's just try to open the serial plotter hello hello hello hello hello okay so the microphone seems working let's just try out on very interesting testing of this microphone so on my YouTube like on my smartphone I'm open up a YouTube video that uh you know plays the frequency from the range 20 HZ to 20,000 Hertz okay let's play that file and observe observe the frequency response on the serial plotter so I'm putting the microphone like the phone near to the microphone and let's us test it out okay so we are able to see these sign waves on the serial plotter and slowly the frequency is increasing it seems really good so right now the frequency is 130 HZ 200 Herz 400 HZ 1,000 HZ and the frequency is high now it's 2.5 [Laughter] khz so that was the test of the microphone so you're able to see the sinus aial waves based upon different audio frequency that means the mic is working and there is one more interesting example provided by the ardino community which is kind of a collap switch that we used to make with the basic electronic circuits that same thing they have provided here so I'll copy this code let's just uh and let's just try to upload this code and see what happens okay so I'll straight of Hit the upload button also you need to have the AOG graphics. Edge library and all you can get in the same Library manager okay so the code is successfully uploaded okay so it's blue it's yellow it's again yellow but a different shade it's blue blue orange yellow blue orange yellow so the shades are changing based upon the uh clap you can say okay so that is also one of the way to test the microphone but in a very interesting way so that's how uh you can use the PDM microphone for your applications then moving on to the next example which is regarding the IMU or the iner I measurement unit which is used to determine the orientation of the display okay and to test out that we do have an example code provided so I will just copy this code and paste it here again the one Library need to be installed in my case I already already installed it and I'll St have hit the upload button now this code will let us know the XYZ AIS orientation uh based upon the movement of the display as you can see the XYZ coordinates or the X's is um know shown on the serial Monitor and based upon the movement of the display the values are changing okay so that's how you can be sure that the exomer or the IMU basically is also working in this display well there's one more interesting code to test out the IMU on this display Shield which is provided by ardino community of course and here is that code and here going to provide the ardino logo. C file as well well I'll be providing these both files uh in the description of this video and make sure ardin logo this Ino file and this C file must be in the same folder to make this code work after that make sure you have installed all the necessary libraries and just hit the upload button in my case I already uploaded the code and let me show you the uh visual demo of it so I'll turn on my smartphone screen and so here is the ardino logo and as you can see the logo is you know stabilized with the help of the IMU so even if I move the display the uh the orientation of logo is not at all changing or rather it is adjusting based upon the uh orientation of the display okay and I can shake it as well and as you can see the nice little kind of is happening here so with this we can uh test the initial measurement unit or IMU on this display Shield a very interesting example code now let's start with the most interesting feature of this display that is the lvgl support now for those who don't know about lvgl then it stands for light and versatile Graphics Library which as its name says it's a graphics Library an open source Graphics Library used for this kind of microcontroller boards to create some amazing graphical user interface on this displays okay so aino Giga do support it and we do have a couple of examples provided in the uh ardino ID so let's check out the example course and let's see what kind of user interface we can create so I'll go to the files into examples then into R No7 video and here is the lvgl demo and straight away hit the upload button after selecting the right com port and mode okay code is successfully uploaded and on the display we can see some amazing Graphics so we uh got a grid Light Grid like structure in which we have four boxes the background color is of ardino blue and on the top left left corner we get the aino logo and in the next block we get to see couple of buttons which are clickable as well so I can select Apple I can uh uncheck this banana I can select lemon okay so we have radio buttons we have checkbox buttons and here we have click me button in which the number is incrementing based upon the clicks which is quite responsive then here we have slider that says drag me and it's a very smooth slider useful for dimming the fan and dimming the brightness and stuff like that and here in the last blog we have the animating bar that's is kind of a progress bar which we can use to show the temperature the humidity or maybe the loading animation okay so this is a very basic code and we can scroll up scroll down as well okay it feels like a smartphone of course there is a like glitch it not that smooth as compared to the smartphone because of the uh frame rate but it's smooth it's it's really smooth and compared to the other displays okay so we can know scroll up for adding more widgets and stuff like that and this is the basic example of how powerful the lvgl library is so we can create some amazing graphical user interface and all this is made using that librari and of course by writing the code for it uh now to understand how you can make all these things well AR do provided a guide so let me show you so here is the Giga display Shield lvgl guide by ardino in which they have explained each and every line used in the lvgl code like how to initialize the display how to initialize the touch everything they have explained in quite uh you know simp simple manner okay so what they did here is they have made a separate code for all the four functions that were shown in this display so in this display shows the image the checkboxes the buttons the slider and the bar animation so all these codes are shown separately and explained as well for example uh this is the minimum uh minimal example code that will just show the grid like four grids on the display which will look something like this after that they shown how to add the image into that grid whose code is here after that they have shown how to add the buttons whose code is provided here and after that they have shown how to add the radio buttons then how to add the slider how to add the bar okay so all the examples are provided separately in this page with the proper explanation now this guide only limits with four or five widget but don't underestimate lvgl lvgl is way more powerful than adding this four widget so if I show you the official documentation of lvgl and here if I go to let's say examples and then into widgets as you can see these many widgets you can use you can use ARC bar button button Matrix canvas calendar line LED label spinner there are a lot of widgets and not only they provide the widgets for example if I want to add the keyboard I can select the keyboard and they have also provided the C code and the micropython code to add that keyboard into your display using the lvgl library so there is an amazing documentation I'll provide it Link in the description and by going through this documentation I have made my own two like two different kind of codes compatible with the ardino Giga display let me show you that example quotes So the first code is about adding three different buttons to control the RGB LED on the display Shield itself and here are the Declaration of all the three buttons I have one for red one for uh green and one for blue and with those buttons I can control the LED so I already uploaded the code and let me show its demo so here here are all the three buttons and I can click on red the red will turn on I can click on green the green will turn on and if I click on blue the blue will turn on and it is quite responsive and that's how you can use the lvgl library and the documentation for creating such uh graphical user interface based projects there is one more example which I took from that same lvgl documentation and it is about the aert keyboard it's kind of a different version then the quality keyboard so let me just upload this code and uh let you visualize what is this about okay the code is uploaded and as you can see we have a fully functional keyboard on the screen and I can type the letters like a z e r t y I can also use the backspace to delete it I can also press enter to go to the new line I can also like there's a cross button that is a check mark button if you want to add couple of events okay want to submit this words type here and I can also use space and colon and there is a fully functional and responsive keyboard and this all made using the lvgl library so now you kind of got idea about what lvgl is all about and how powerful it is for the GUI projects so these were only couple of examples but you can try out many others well now there is one more thing which I need to discuss and it's about the square line studio now for all those who don't know what the square line studio is then it is a part of lvgl only in which you don't need to write code to make the graphical user interface rather you can use the drag and drop method add the buttons add the labels add the colors everything in that s software and once you're done with the graphical user interface you can click on the export button it will write the code for you which you can use later on in your ardino ID so no need to write the code for setting up each and every wiget now that's is an amazing platform for sure but currently I'm not able to figure out how to use the square line studio with the ardino Giga display Shield or ardino Giga R1 Wi-Fi board but soon I will try to figure it out like how these two things work and maybe I can make a separate video about it because definitely Square Studio do deserve a separate dedicated video because it's a very like very big thing and it will be really very useful for all the GUI based projects now this Giga display do have one more very interesting feature which is the 3D engine so yes this do have a 3D engine that help us to construct and render 3D objects on it and this uses the library called as Tiny GL to make all this happens okay so they do have provided two examples like the 3D gears and one more gears plus example so let's try out those uh two example codes and let's see how it looks like how 3D objects look on this display so I'll go to the ardino ID and here of course you need to install one Library called as tinyg using the library manager and once you install that you can go to files into examples then into ardino tiny GL which is here and here we have two examples gears and gears plus so let's try out the gears example first so here in this 3D engine tutorial they haven't provided the detail explanation about how each and every line of this code works and what it meant for rather they have explained only one or two different different functions so it's really difficult to understand the code but it is what it is so the code started uploading and the code is successfully uploaded now let me just turn on the smartphone's camera so yeah we have three gears and I can interact with all the three so I can you know change its orientation I can zoom it out I can zoom it in as well using the two fingers as much as I I can wow that's this looks amazing I can zoom it out can rotate and yeah this is the 3D object like 3D gears displayed onto the Gard display Shield using tiny GL Library looks really amazing in real let's try out another example code as well so I'll go to the examples which was gears plus and I'll start of Hit the upload button here as well okay so the code is uploaded here we don't see any gears rather we see a robot coming in front of us let's try to interact with this robot okay so I can change the uh angle okay so I can wow this looks really amazing let's just try to zoom it in and zoom it out okay so I'm able to zoom out a bit this looks really amazing let just zoom it in okay so I can zoom it in and I don't know where am I right now so yeah this is the 3D uh gear plus example code provided by ardino community and only these two examples are provided for this tiny GL library for using the 3D engine to construct and render the 3D object but this opens up a lot of possibilities of course the documentation is not properly provided but we can explore the tiny GL library and try to understand each and every line of code to make our own 3D objects so that was an amazing feature so that was the gigar display shield and it's truly more than just a display so do hit the like button if you really like the display and the video and let YouTube algorithm know that this video was good and worth watching well the LL part of this video is something that excited me the most I'm looking forward to learn it more deeply and after learning that well I may make a complete home automation dashboard on this Giga display Shield to control my whole Studios but if this is something that excites you well do hit the Subscribe Button as I may upload that video in the upcoming Sunday so yeah do share your thoughts regarding this display down in the comment section and yeah that being said I am just ending this video here and now just wait for my next video Until Then explore learn share with me [Music] techs

Channel: techiesms

Views: 11,155

Keywords: 3D engine Arduino, Arduino GIGA display shield, Arduino GIGA r1 WiFi, GIGA display shield, TinyGL, arduino, arduino display, arduino giga display, arduino giga display shield, arduino giga wifi, arduino touchscreen, electronics, electronics projects, esp32, lvgl, stm32, techiesms

Id: mk-pqL84fPo

Length: 20min 16sec (1216 seconds)

Published: Sat Oct 28 2023