Learn to build Computer Vision Mobile Apps in 3 DAYS | iOS and Android (2021)

hey everyone welcome to my channel this is the computer vision mobile apps premium course here we will learn how to build computer vision apps from scratch we will first go through the basics of image processing and then move on to create seven apps with real world applications these will include object detection augmented reality qr reader face detection color detection and more and the best part is that we will write the code once and deploy it both on android and on ios that's right whether it's samsung or an iphone or even an ipad we got you covered and don't worry if you are a beginner this course is for you we will go through step by step for learning the basics and pick up the pace when it comes to the projects so we don't waste any time and you can get started with your own projects we will use the very famous unity platform along with the opencv c-sharp wrapper both of these are paid but come with a free version too so you can learn without extra cost and when you are ready to deploy your app you can pay the one-time fee of the opencv wrapper this video is part of the course for the complete course check out the link in the description below so without further ado let's get started so for installations we are going to head on to unity.com and here we are going to start by pressing the get started button right away we can see that we have the plans and the pricings and here we have all the pro versions so all of these are paid and if we go to individual you will see that you have personal and student as well so by the looks of it it says that you are eligible for the personal version if you are earning less than 100k in the last 12 months so if you want to get started this is a good way to go but uh you have to keep in mind that if you use personal it will show the unity logo in the very beginning of the app and then later on it will not have any watermark but with pro version or the plus version that uh unity logo goes away and to be honest this 400 per year is not a very heavy price when it comes to app development so you could easily pay this off with just one project so going back to our individual we will start off with the free one so we will click on get started and here we are going to click on returning users because we don't want to add anything extra we don't want to download anything extra so we will click on that and here we will accept their terms again you have to read these that you do not make more than 100k you have not raised more than 100k and you are not currently using plus or pro versions so then you are going to download the hub so the hub will allow you to install different versions so we are going to look at how we can do that too so if you are using mac you can click on this and if you are on mac it will automatically show you the mac version so you can download that so we can click on this and it will start our hub unity hub download so i'm going to open this up and here we are going to agree uh you can install it in c or d whatever you want and uh right now it's already running so it's asking me to close it and there we have it so we can click on finish and it should open up our unity hub so once it opens up you will see something like this you will have the projects you will have an area to learn where you will have projects and tutorials these are quite helpful and then you have your community and at the end you have the installs so here you can manage which versions have you installed so as you can see i have installed the android support and the webgl support as well so to install what you have to do is you have to add and here you will be given a few options which one do you want to install so these are the latest versions and this one is the lts which stands for long-term support what this means is that they will keep updating this version they will focus more on this version and they will keep fixing the bugs of this version for a specific time period so what is that time period we can click on long term support and let's see so here we have the stable foundation projects this and that we committed releases by weekly updates so they will do bi-weekly until 2021 and after that they will do it monthly until may 2022 so that is pretty good and as you can see 2018 lts will reach the end by spring 2021 so i don't recommend you download this so either you should go with the lts of 2019 or you can go with the latest version which is uh the 2021 so uh i used 2019 for a while and i didn't have any major issues then i shifted to 2020 and i still didn't have any major issues so i have the 2020 version so if you want to be on the safe side you can download 2019 as well if you want to get those latest features then you can go with 2020 and you can install both of them if you have the space so the way you do it you select your version you go to next and here if you have not installed visual studio before you need to install that so this is the ide in which we will be writing the code so whenever we open the file to write the code we will open visual studio and we can open it directly by clicking on the what you call file within our unity and it will automatically open the visual studio for us if you prefer another ide you can do that as well but i highly recommend that you stick with visual studio and then you have the option of the platforms so here we have to select android at least if you are on windows and you have to select at least ios if you are on mac if you are on mac you can select both ios and android because you can deploy both on android and ios using mac but you cannot do it you cannot deploy on ios using windows so right now i am on windows so i will not select ios because that will be wastage and then you have the documentation which is always good to have if you want different languages you can install that too so you have other versions other platforms as well that you can install but we are going to skip that because we are interested in app development so you will click on next and you will accept the terms of visual studio and then you will start the installation process so i'm not going to do that because i already have a version installed with android build support so i will just go to projects and here we can create our new project now before we actually start creating our app we need to understand the basics of app development so specifically when it comes to design now the thing is that i see a lot of newcomers they when they are creating prototypes they don't really focus on the design now it is true that you need to focus on the functionality but you have to give a little bit of time to the design as well because when you show someone a demo they need to visualize it you need they need to be able to understand the concept as well as the kind of output they should be expecting so it is very crucial that you do not show bad designs so what is the solution now if you're like me i'm not a designer and i don't have that design gene or that artistic gene that helps you make very great artwork or design something like that so what can people like us do well the simple answer is that we can create simple designs that will be useful in prototyping but when it comes to the real app we can actually go to actual designers to build the design for us so over the years i have learned some basic techniques about design and i will be sharing with you how you can implement those to quickly get a prototype out and running so first of all you need three things the first one is the inspiration so you want to get the concepts and you want to follow an idea of a design that you have seen then second thing is your color scheme you want to focus on what kind of colors that you want to use and then the third thing is the alignment we will focus on these three things and i will show you in detail how you can approach these problems so first of all we are going to go to dribble by the way this is my website and this is the design that i did myself uh it is not the best design and it is not the worst so it works for me and the same way you can design your website or your app yourself and if you need you can go to a professional designer as well so first of all we are going to go to dribble now dribble is basically a website where you can go for inspiration so there's a lot of designers that put up their designs and you can see what kind of designs are trending what is it that is effective and what is it that you should avoid so what you can do is you can go here and you can click on mobile and you can see these app designs that are very futuristic very amazing and things like this for uh for me i cannot imagine these things so for me getting inspiration from this is very useful because i don't have that particular gene to get these designs up and running and a lot of these designs they have something very common that is simplicity so nowadays you will see the fonts are getting bigger the shapes are getting simpler if you remember there was this media player uh in our time it it was called winamp let me see if i can find it um yeah so this was that media player you can see this is this was the actual design of that media player and it was just so bad and at that time it was cool you know it has it has a lot of buttons and whatnot and but nowadays this is just really really bad so you would not see something like this nowadays instead what you see is something like a vlc player so you can see that it is very minimalistic it's not the best design either but it is very minimalistic so you might want to focus on that as well so a lot of these designs you will see that they are very simple like for example this one you have a plain white background and then you have these blue accents and then all of the buttons and the placement is very evenly done so it looks very visually appealing so this is the first step for inspiration you will go to dribble to check what other people have done and you might get an inspiration from that for example right now i am i'm looking at these different designs and i can see that the home page at least is very simple you have one color and then you have some text and you have a button so you can get inspiration like this from these designs so most of them if you look at the main screen it is very simple for example here you can see the middle one it's just a plain color and then you have the heading and maybe a subheading and maybe we can add a button here as well so this is how you get a little bit of inspiration and then the second step is the color so for color you have to pick the right colors so you will have a primary color and then you have a secondary color so you can search for these palettes going to hunt dot co so this is a website where a lot of different designers they have put these color palettes that you can use now i do recommend that you use only two colors so black gray and white these are generic colors that you can pretty much use anywhere but i'm talking about primary and secondary colors so you might want to choose something like blue or orange or yellow so for my brand you can see that i have orange color for my logo so if we go to uh my courses let's say you can see that this is my brand so you you have the orange color and then you have a little bit of blue so we can pick the same accents in our design in our app design because we want it to look more towards the company app so if we go to the color wheel you can google color wheel and you will find these color wheels which will tell you how to pick your primary and your secondary color so for example for me my main color is orange so this is my main color so i know that i should design something similar to orange so i can go to the color wheel and i can pick the orange color so this is my primary color for example and then the secondary will be blue so same way if you have yellow you can pick the secondary color as purple and vice versa if you have red then you can pick green so you can find all these different what you call color wheels and they will help you out in picking the colors so in my case you can already see that we have the orange color and the secondary was blue so this is orange then you have secondary as blue so you can see that it's already embedded here so you have orange and blue so this way the colors they actually complement each other and they really pop out and give you some good results so we are going to use these colors for our app design so our primary color will be orange and our secondary color will be blue so it can be light blue it can be dark blue but main idea is that we are going to stick with blue and orange so the last thing i want to share with you is the alignment so a lot of the times beginners they don't look at alignment properly for example i was working on this design and i have put this black masking on top of this just to make it more clear but alignment means that you want to keep the number of lines number of guided lines as minimum as possible what does that mean for example let's bring in a line and i will change it to whites so let's say that my heading is vertically aligned with this so you can see that if i go a little bit here there you go so you can see that my heading is starting at this point so then if i'm creating another heading i am keeping it aligned with this and then if i am creating some subtext i am also aligning that and then i'm also kind of aligning this logos over here as well so the same thing you will find elsewhere as well so if i drag this here you can see that this logo and this mobile screen is also kind of aligned then if you go here and you see horizontally these two are aligned as well so when they are aligned they look more systematic they look more visually appealing so for example if i remove this and i put it here and i remove all of that then it will look a little bit weird so it might not be very visible but these are small small things that could help you improve your design so you might want to consider these things so for example this c here is aligned with these logos and this one is aligned with this mobile so but if i move this let's say if i move this a little bit here then all of the what you call the placement gets really bad so a lot of beginners they don't focus on this stuff and then they make these mistakes of not aligning it properly so the idea here is that you want a minimum amount of lines guided lines minimum amount of alignments so don't try to make multiple lines and shift all of them accordingly for example what i could have done is i could have also let's say created another line over here and then i could have aligned these tick marks over here and then objects in front but i didn't do that because i'm not a designer i want to avoid any complications so i already have a line i will just align it to that and that is it so i don't need to worry too much about that but again these are not hard coded rules these are just journal guidelines you should follow to create rapid prototypes so that you can get up and running with your demos and your prototypes so you can really focus on the development part so to create our app design there are many different ways you can approach this first of all you can design it in photoshop illustrator you can use some online tools like figma but today we are going to use canva because canva is very easy to prototype and it is very very efficient and fast so what we will do is we will go to canva.com and of course it is free to use there is a paid subscription as well but you can get away with free version as well so you can create a design and here we are going to write the dimensions of our mobile phone so you can write the biggest one you are expecting or you can write even a middle one it doesn't matter that much uh all you have to do is you have to keep in mind that there will be bigger devices than what you are testing on so i do have a quite a large phone and the dimensions for that are 1080 by 2400 so i'm going to keep that as my standard size so i'm using samsung a31 so that is quite large and this is the screen size for it so the first thing we will do is we will import our color so our primary color is orange so we are going to go to elements and we will add in a box and we are going to expand it till the end and there you go so now i can change the color for this so we can pick a specific orange or we can randomly eyeball it so let's go to the colors and here i'm going to just eyeball it for now because later we can change this color as well so let's say this is our orange that we want and the second thing we will do is to import our logo so i'm using my logo that i have i've already uploaded it i can write here logo and this is the logo that i will be using this is an svg file which means that i can change the color of it as well so if i change the color it will change as well so we will keep it white and we will center it for now this is the center but as you can see it it looks really really down if you put it at the center so we can put it a little bit higher i think that looks good and we can scale it up or scale it down as we appeal as we like so here let's say 500 so that is about it and then we will add a little bit of texture to it in the background so we want to add a little bit more touch of the logo so we can copy that and we can make it bigger so something like this we can send it to back uh no we need to send it backwards one time and then we can change the transparency of it so let's say i think 15 is fine let's try 15 yeah 15 or maybe it's too much maybe 10 yeah i think 10 is better so you can play around with these and you can rotate it shift it now a lot of the elements we are using here we will use directly in unity as well and some of them we can export from here some icons we can get from different websites like flat icon or free pick so there are many resources that you can use if you want to use free icons you can always try the google icons they are called the material design so that is very useful but for now we are going to go with this we will go to text and we will add a heading here and we will write here computer vision computer and then vision so i think the font can be a little bit bigger so let's say 60 or actually let's change the font first so i want something that is curved and edgy at the same time so one font that i really like is cairo so you have kairo regular you have cairo bold so you can pick one of those so i think we can do regular or bold maybe a little bit smaller 50 around yeah that looks a little bit better so again we can change the color to white so there you go so maybe a little bit down so these changes we can make in unity as well here we are just prototyping so that everything works fine so then we will add our button so we can go to elements and we can go to shapes and we can pick our rectangle which is an outline and we can create a simple button so i think it should be a little bit thin so we can reduce the scale of it and then we can just expand it so we can put it right here maybe a little bit thicker a little bit smaller maybe so again you can play around with this we can copy this font and we can paste it here and here we can say start um i think this bold is not good we can do regular maybe yeah and probably smaller so let's say 35 no that's too small 45 yeah so something like that and maybe this as well a little bit smaller so yeah i think that is fine and then uh we can of course copy this and paste it again we can lock this so that it doesn't move and we can copy this and paste it down here and we can write about so we do need to add some information because especially if you're uploading to what do you call the app store they will not allow unless you have some information on how the app works who built it and stuff like that so that needs to be inside your app so here you can press start or you can press about so this is our main home page which is very simplistic very minimalistic as well so we will create a new file and then we will go to the second part in the second part we can keep the background white and we can add some shape at the top something curved so let's write here curve or let's write abstract abstract or let's write gradient yeah something like this we can use so or it's just the same this looks a little bit better to me we can take this we can rotate it let's say this way or maybe this way yeah let's try it this way so we can have it like this so just giving it a little bit of design and of course we can go back to our colors we can pick orange and white and then what we need to do is we need to create a menu so in this menu we will have all the chapters and the projects so we can scroll through this menu and find our write project so what we will do is we will go to our rectangle and we are going to get the the round edges one and we are going to create so there are many options we can use here we can create like a grid in which we have two in a row but to me it doesn't seem that good so what we want to do is we want to show big letters with you know some icons some images so i prefer to make it bigger and one per row so we can have this for example and then we can have a heading so let's copy the font from here just copy it again it doesn't seem to copy i don't know why so let's go to text again and we'll go to the heading and here we are going to write for example chapter one or should we write it okay let's let's write the name of the chapter for now and later on we can decide whether to write the chapter one chapter two or not so here we can write for example image capture and i think we can make it left aligned like that and again we can go to our font and change it so we can change this to white now it's way too big way way too big so we can scale it down let's say 50. that seems about right and then we can add an icon here so we can go to elements and let's say it is about image capture so let's write capture okay so we have a lot of different options here how about we write camera capture maybe just capture not with the camera so this kind of image is good i like that so again it's up to you which one you want to pick so let's say i pick this one and i will scale it down to match the size so i will try to keep it in the same alignment so as i mentioned so i can follow this alignments till here and i can follow this alignment layer so this way it will be nice and tidy and i can change this to white to make it look a little more appealing so the same thing we will do we can group this as well but it might be a little bit what is this okay this is that image that's fine so we can lock this so it doesn't bother us again and again so we can copy this and we can paste it down multiple times so this is basically our idea and we will have this to scroll so we can change the values here so for example basic basic functions something like that and then we have crop size crop and resize so again we can keep filling these things and we can change the icons as well so let's say it's about basic functions so let's write basic so when we talk about abc this kind of basic so how about we just write the letter a how about we just write that so i can take that and i can bring it to the same height there you go and i can center it with this then i can make it white so that looks good and then we have crop so we can search for crop um not this crop yeah this is actually this can work this is for cropping so there you go and we can make it white as well so now you can see it's starting to take shape another thing we can do is we can add a search bar here now we could add the functionality of search but at least for now we will add that search bar so it looks good so we can write here rectangle let's take the same thing again and here so now it it is quite obvious that we should align it with these two edges so the one over here and the one over here so we can do it like that we can bring all of this down a little bit bring this down and we can change this to gray so gray is quite universal so we can do that and then we can add the search search icon there you go so you can pick any one of these so this is quite standard so we will pick that there you go um it's a little bit big maybe let's pick this one so we can go let's say dark gray it still seems a little bit big to me okay so maybe this as well it's a little bit bigger than expected okay so now i can center this yeah now it looks better then we can do the search so we can copy this and we can increase the size of it we can remove that and we can write here search i need to check my spellings s e a r c h okay so for this we have to reduce the size so let's say 35 that's too small let's say 45 maybe 40 and then we can change the color of this as well do the same that we did earlier or maybe a little bit lighter and then we can put it here needs to go a little bit higher there you go now it's centered so that is good now we can align this with this so if we go a little bit here then we can align it here and we can push it a little bit further because we don't have anything to align here so we can write it like that so that looks fine to me and i think we can take it from there so that could be our main screen and uh yeah we also need the back button if we want to go and check the about again so if you want to go and check that about we can put a back button here so we can write here back and i think this should do it so we can keep it pretty much the similar size of our search icon and we can place it somewhere here with the same alignment like that so a little bit down maybe we can change it to white um white or black i think white is fine so this is basically our idea and we can add our logo here as well but we can do that later so now i'm thinking that for projects we can give it a blue color as well so for chapters we will keep it orange and for what do you call the projects we will make it blue so you can differentiate them and we can also add a heading uh if we wanted we can add a heading here that these are for example the projects so we can write here projects we can make it or we can go to the bold from here and we can make it let's say 60 we can change the color to gray and there you go so we can put it something like this so you these are let's say the chapters and then later on you will have projects i think this is a little too thick so something like that so then we can have the what do you call the projects so next let's add a new page and this page will be for the chapters so we are going to create a lot of different chapters so chapter one two three four they will not have webcams but they will have some images so we need to make something for that so we can copy this part here you can paste it here and like the design we saw in dribble we are going to keep it at the edges and we will curve it here and we will make its let's say 30 of our screen and then we can copy the back button so this is our back button at the same position and then we can write chapter one for example we can copy it from here we can write here that this is chapter one and we can align it with this and then we can add our actual image so i have my own image so i can just paste it here so this is my image so this right now has a little bit of shadow as you can see at the back so that you can go to adjust and is it just no it is effects i think in effects you can change the shadow yeah so you can have it here different shadows so i've added that so we should align it with this and then we should align this with that there you go so that i think it should be a little bit bigger or it was fine before maybe a little bit bigger or if if we are not aligning it here we can just center it [Music] because of the shadow it's making it a little bit weird we can remove the shadow drop shadow or we can keep it like that let's just try it like this we can move it a little bit till it feels centered okay so yeah i think that is fine so we don't want to waste too much time on one thing because we're just creating a prototype and then we can create some text so we can copy this and we can write some text here we can change the color to let's say grayish and here we are going to just randomly put some text so let's paste it here this will be the explanation that we will use later on so we can write that later so here we can write let's say 30 maybe 35 so we can again align it so that it doesn't go out and we can center it or we can keep it on the side i think it's better if it's justified like this and then at the end we need to add a button so we will add a button similar to this but i think it we can add it filled this time so let's go to x rectangle and we can pick this one there you go so we can write next so that we don't have to go back and then go to the next one we can go from here so let's center it um and let's make it bold and smaller yeah that looks good to me so this is basically the idea of all these chapters so we will be using this and then the last thing we need is the webcam example so we will have a webcam so we will have a lot of different projects that will use webcam so we need to add the uh example for that so let's say i have this image so this is my image i'm simply copy pasting it so what i can do is i can put this down here and i can create this footer and then i can create a similar header so if you go and open up your camera app in your phone you will see that they have a very large footer and header normally we don't really think about this stuff but if you really focus on it you will see that it is quite huge so we don't want to make it too big but we do have to fill it as much as we can so we will try to have it not too big and not too small and then we can add let's say this is 300 round about 300 and this is 300 as well so then we can have the capture button so let's write here what is it called maybe circle let's see if we have a circle within a circle or we can create our own circle within a circle so we can have something is it too thick seems fine so we can make it smaller and then we can add a circle inside of that so this is usually how our how our uh play buttons are or the capture buttons are so we can do it like that and we can group them so we can change their size and whatnot i think it should be a little bit bigger this inner circle should be a little bit bigger yeah that looks much better okay i can group this now and i can change its size so let's say 150ish something and then we have we will need a camera switch button so if we want to switch between front and back camera so we can write here switch let's say um or switch is like refresh as well so we can write refresh yeah something like this and we can make this a little bit smaller than the main button so we can make it white and what else do we need maybe we need the flip so let's write here flip something like that so these two should be the same size so again all of these values we will add in our unity projects so right now i'm just eyeballing it but later on we are going to use actual values so we can put white here and then at the top we need to put the back button again and we can also write the chapter name or we can add the logo again so we can put it here and this time we need to push it a little bit up and i can add the logo again i can copy it from here make it really small align it with that and there you go so i think that should be fine so again this is not the best design this is not the you won't say wow this is amazing but it is not bad to look at so if you show this as a demo it will be impressive that you have put some effort rather than just putting some random gray buttons and some random text so a little bit of effort goes a long way especially when you're creating prototypes or demos for real apps so now that we are done with this design what we can do is we can export this stuff one by one we can have these buttons these are very common squares uh maybe these icons so again i'm not sure what is the policy of canva for exporting uh single images if you are using the free version so i'm not sure about that if if it's not allowed then you can go to something like flat icon or free picks or you can go to material design material icons and here you will find a lot of different designs that you can use so for example if you are talking about the capture button so let's try to find that and these are very very good designs so you can write here capture let's say uh nothing for that let's write camera there you go so here you can see this is for camera control you can use this then you can use this there are many things you can use then let's say we want crop so let's write here crop do we have yeah so we have for crop so as you can see you will find a lot of good uh icons here and these if i'm not mistaken these are free to use these are in public domains you can read the license on them as well this is the apache license version number two so you can read more about this so once we have the overall picture of what we are going to do we will move on to the unity project and we will recreate all these four different pages and from there we will start with our projects or the chapters one by one so now let's get started with creating our app so first we will create a new project and we will call this cv underscore app we will keep the default settings for now so here we have our unity project opened up so let's have a look at the interface first so on the left hand side we have the hierarchy which has all the different objects that are present in our game or app then in the middle we have our scene and this is the exact same place we will have our game so game is basically the preview or when you press the run button this is where it will lead you to so the scene is where you keep all the objects and you can change the parameters and you can do all sorts of different things over here so this can be a 3d environment and it can be a 2d environment so right now you can see that we have the camera and it is showing that where does it see or where does it point so what we can do is we can rotate this and if you look at this icon over here this indicates that is it is in 3d mode it is in perspective and if i click on it it will change to 2d mode so we are going to mostly use the 2d mode and if you click the middle mouse button through which you can scroll if you click the middle mouse button you can pan so zoom is through the scroll and if you click in it will pan so this will allow you to move around within your environment and on the right hand side you can see we have the inspector now in the inspector we will have all different types of attributes that we can change of an object so here you can see for example we have a light so i can change the brightness i can change the color of the light the direction of the lights its placements and all sorts of different things so this is the basic concept of objects and how you can choose different attributes then at the bottom we have our project now this is a project folder and we have the console on which we can check our debug our game or app and then we have the animation so the first thing we can do is we can bring in the graphics of our project so i will right click here and i will create a new project a new folder and i will call this let's say the course and inside this i am going to drag in the graphics so this graphics folder will be available on the course page you can download it from there and it has all these different images that we will be using so but the thing is we cannot use them right now what we do have to do is we have to go to each one of these and we have to change its property so the property we have to change is basically the texture so the texture type has to be sprites 2d and ui so ui stands for user interface so we are going to use the ui method so here we will change it but instead of changing one we are going to change all of them simultaneously so let's click here i will press shift and i will click on the last one and i am going to go to default sprites and i will apply so this will change all of them and now you can see it is showing us the png images with the proper backgrounds so the same thing we will do with the other folders i will change it to sprites ui and then we will go to the other so all these graphics we are going to use uh in our design and we will see one by one how we can use them so these are all based on what we have done and this is basically the resources folder now this resources folder basically contains the images that we are going to import so you can see we have the cards image lamborghini image paper shapes and my own image for testing so for these image we are also going to say that they are ui and we are going to apply so now we can use pretty much all of these images that we have imported so once you go and open up your scenes folder you will see that there is a sample scene over here so we are not going to use this instead we are going to create our own scenes so we will create a new folder here and we will call it chapters chapters so within this chapter we are going to create another folder and we will call this chapter 1 and now whatever is required in terms of the scene and in terms of the code will be present inside this folder the same way we will create chapter 2 3 4 5 6 and 7. so we will have all these different chapters so this is the basic idea and you can see the hierarchy of the project you have the assets inside you have course then chapters and chapter one two three and then the graphics and then the scenes and all of that so this is basically your interface and now we are going to look at some settings so for the settings we are going to first go to file and we will go to build settings so in the build settings whatever scenes that we want to add to our app we have to drag in over here but this we will not do now we will do it later on for now the most important thing is that we are on the correct platform so we need to be on android now if you are using ios if you are on mac and you are using ios then you have to switch to ios i have not installed ios because i'm using windows and there will be no point for that so here i will click on android and i will click on switch platform so now we have switched to the android platform and now we will click on the player settings now this opens up quite big i think we need to minimize it and then we can just drag it in on the right hand side so there you go it's much cleaner now so there you go okay so here we have our company name so i can say murtaza's workshop and then we have the app name so i think this app name is fine cv app we can remove the underscore and then this is the version number now the next thing we have is our default icon so if you have already imported the images then you can simply select and here you can see the app icon so i can select that then in the android settings you are going to go to resolution and in the resolution we are going to set our orientation as portrait we don't want it to automatically rotate we want it to keep as portrait by default so you can have for example you can select which ones you want and which ones you want to avoid but for now we are just going to keep portrait for simplicity so once this is done we are going to close the project settings we will make this smaller and we will close this so now we can go to the edit preferences so edit and preferences and here we have to make sure that our external script editor is visual studio so if you have other ides installed on your pc you might find those as well but since we are using visual studio we want to make sure that this is enabled now the reason is that if you are using another editor or if you have selected something else over here and you open up visual studio it will not give you that auto fill features so it will not show you which methods are available which functions which variables are available so that auto format is very important because you cannot remember every method or every spelling whatever is available in the package so this is quite handy and we are going to close this so these are the settings that are required to get started with our unity project for opencv and computer vision so now we are going to create our startup page now the startup page is where you will have the start button and you will have the logo and where you will also have the option to check what the app is about so we will have an about button as well so to do this we are going to go to assets and then we will go to our course in the course we are going to right click and we are going to create a new scene so we will call this start up page so we can open this startup page by the way you can see we have some errors on the console so we can just hit clear if they clear out it means we we don't have any issues if it remains then we have a problem so we are going to go to our project and we have already opened up startup page you can see here that it says startup page so this means we have opened it up successfully so what we will do is we will first right click on our hierarchy and we are going to create a ui element and within the ui element we are going to create a canvas so the canvas is the area where our app is confined so whatever we put inside the canvas will appear in our mobile app so we have to make sure that the size of this is accurate so first of all we are going to go to the canvas scaler and here we are going to scale with screen size and the screen size we are going to choose will be the one that we have on our phone so at least for the one that we want to test so here we are going to write 1080 by 2400 now i'm using samsung a31 so if you are using another phone you can write the information of that the screen size of that now you want to test it with the biggest one and the smallest one you are working with so right now i have um given the parameters of the biggest one so once you do that you are going to go to game and in the game here you can see i have already added this what do you call style or this resolution so if you don't have this you can click on the add button and here you can label your resolution for example i will write 1080 by 2300 i don't know if the if this is valid but just for the sake of it i'm showing you how this is done so we can have the aspect ratio or we can have the fixed resolution so in this case the width is 10 1080 by 2300 so i can add that and now you can see it is constrained to that resolution so we are going to use 1080 by 2400 so i can go back to my scene and now you can see that i have that exact same dimension shown here now if i put anything inside of this it will appear pretty much with the same size as in my phone so let's add something to this so whatever elements we are going to add we are going to add within this canvas nothing should be outside this canvas so we are going to click on right click on the canvas we will go to ui and the first thing we will add is our background image so we will click on image so as you can see the image is quite small so in the middle you can see it's a hundred by hundred so we are going to go to our rectangle tool and from that rectangle tool let me click that again we are going to stretch it out so here you can see when i stretch this out my value over here for the width and the height changes so instead of stretching this out what i can do is i can write here the exact values that i want so i want this background to be bigger than my canvas because you might have a little bit bigger or a little bit smaller canvas for a different phone so that's why you want to keep the size of the biggest canvas possible or the one that you expect that it will be there so here we are going to give it a size of let's say so our width was 1080 so let's say we will give it 1500 and our height was 2005 or 2400 so let's say we give it 3 000. so now we can give the position as 0 and 0. so now it is exactly in the center okay so that is good now we can see and you can see this is the canvas area and now we have space outside as well so if our app had one specific color we could change that color by going to our image and we will go to the color and here we can pick any color that we want and you can see that it changes on the image so for our app we have an orange color at the background so we are going to change that orange color so here are the numbers double f9a00 the orange that we picked and i'm going to close this so now you can see this is my canvas and if i go to my game you can see this is the orange color the nice orange plain color that we get so now i can go back to my screen and i can call this image background background and let's say orange because i know i'm not going to change this then we can add another image so we will right click and we will add an other image and we will call this the background underscore logo so let's import our logo so we will click on the image component over here and we will click on the small dot that will open up this menu and here we are going to add the logo so where is the logo wait why can't i find it there you go it's hidden okay so this is my logo and what i can do is i can again dramatically change the scale of this actually this is not the scale this is the width and height and this here is the scale so i usually prefer to work with these values so here i can say let's say 1500 by 1500 but you can see it's not big enough so we need to go really big so let's say 3500 by 3500 so that seems quite big and what we can do is we can rotate this so here is the rotation button so you have rotate tool you have the scale tool you have the wreck tool and these are the three common tools that we will be using so now you can adjust the position of this by simply clicking on it and you can click on the move tool and you can move it around so let's see where does it look good so let's say we can keep it here maybe a little bit down or maybe like that so you can play around with this and then we can change the transparency of this so how can we do that we can click on the white color now the good thing is this is a png and i can literally change its color as well but we don't need to so whenever you are importing a png and you want to change the color within unity make sure to import it as plain white so then you can put any color on it so then we will put it as white and we will change the transparency to let's say 20. is 22 low let's try 40 now that's too much 30. i think tony was fine 20 was good so we are going to close this and we can go to our game and you can see a slight subtle texture of the logo at the back so this gives us a nice look okay so so far so good now the third thing is our logo itself that will come in the middle of our image or the middle of the app so here we will go and we will create a new image and this image again will be our logo so i can click on that and here again we can change the size of this to let's say 500 by 500 um yeah it seems nice it's not so bad one other thing that you can do if you want to be very exact with your scaling and everything when you design it in canva or whatever software you can import that image and you can bring it in the background and then you can change the transparency of it and then you can lay it exactly as you have planned but since this is just a demo app i am not putting a lot of focus on the design so i will just um eyeball it for now so i think this is fine and then what can we do next we can add our text which comes below this so we'll go to canvas we will go to ui and we will go to text so the text will be very small so you want to zoom in and first of all you want to increase the text area so here we are going to increase this size let's say till here until here then we can increase it here as well and then we are going to increase the font size so here you can see i'm increasing the font size and then i can also middle it horizontally and middle it vertically now we have selected a font so we have imported all these fonts now you might ask where are they coming from they are in the graphics and then if you go to fonts so these are the different fonts that we have imported so these i have downloaded from google fonts so you can go and select your own and just bring it here if you fancy another phone so i can click on this and then i can go to my fonts and let's pick the regular one and we can close this or should we pick a different one i think it's better if we take the bold one uh what happened okay so here we will go to the bold one yeah that looks better so now we can change the color so again we will go down and we see the color we can change it to white and here we can change the text so we can write the text here let's say computer vision we so now you will see it is not showing up because it does not have enough space so if you push it around you can see you have good amount of space but the spacing in between is really bad so we want to reduce that so this is the line spacing i can reduce that to let's say 0.6 and i can push it up here so let's go to the game and see it seems a little too low maybe a little bit higher yeah that sounds good so again i think the text may be a little bit bigger so let's change it to 75. let's try that out uh maybe a little bit higher by the way you can place this over here and you can do this simultaneously so we can do it like this so the best way to do this is using two screens so usually i have one screen for the game and the other one is for the scene so i'm doing them both of them together so that is the most ideal scenario but if you don't have a second screen you can do this as well okay so i think that is good enough for now and then we can add our button so the button how can you add you can right click and go to ui and you can add a button but the button that is by default is really really bad let me show you and it comes with this text and this uh weird panel to be honest i don't like to import this so what we can do is we can import an image instead we will right click we'll go to ui and we will create an image and in that image we are going to create a button so basically in unity all you have to do is you have to add a component so i can add a component button to this and now it has become a button so if i run this if i play it you will see that this is now a button so that's how simple it is so here we have the button so what we have to do is we have to bring in our rectangle so let's see what is the size of that so we are going to go to these sprites and here this is our button outline so we are going to select that and we are going to give it a size of 400 by 300 so this is the size that we will use we can bring it here and inside that we are going to let's name it first we are going to call it button start and then inside that we are going to create a text so we can be lazy and copy the text from here we can copy this and we can paste it inside but you can see when we paste it it doesn't go inside so we can just drag it in and leave it so now it's inside that button but you see the position is not right so what we can do is we can click on this text and now it is the child of this uh button parent so this is the parent and this is the child so we will tell the child to go to the zero position and it will automatically come in the middle of this so we will click on the child and we will go to our position and we will put it as zero so now you can see it goes directly in the middle and now what we can do is we can go to the what do you call the rex tool and then we can make sure that it doesn't go outside of the button so we can do this and then we can do that so now it's within the button so we just need to write here start and then we can reduce the size of it so there you go so now you can see it is much more visible and i can let's say change the size or i think it's good for now so if i run this and if i click on it i think that is good enough looks good so we can go back and here we can change this just to text and then we need to create another button to actually have for about so i can copy and paste this by pressing ctrl c and ctrl v you can also duplicate or you can copy and paste so here i will rename this to about about and i am going to just change the y direction so here i can bring it down a little bit and that should be fine so here we are going to rename it so let's rename it to about and there you go so i think that looks pretty good and for now i guess we are done for the home page so if i click on this sorry not the home page the startup page so if i click on this it will open this up and for now it looks good so what we will do is once we finish the page we are going to go to file we will go to build settings and we will add this page to the scenes in the build so i will drag it in or i can click on add open scenes so now i have course slash startup page in my app pages so it has an id and it has a name so our first page has been created so congratulations and now we are going to straight away go to the second page so now that we have created our startup page we are going to start with the home page because we have a lot of parameters and a lot of things that we have to do by default we are not going to do everything again and again we are going to create uh copies of what we have already done so it is a good idea to have templates for example if you are using webcam again and again it is good to create a template for webcam and then use it in different apps and then if you are using let's say we are going to do seven chapters and their outline is pretty much the same so we will create a template and we will copy that template again and again so what we will do here is that we are going to click on our startup page and we will go to edit and duplicate you can do this also by control d so this will duplicate the page and now if i double click it it will automatically open page one it says startup page one so now i need to change the name of this i'm going to call it home page and i will reload so now you can see that i have changed it to home page and now all these settings that i had to do before i don't have to do it again so here we are going to make some changes the first thing is that we don't have this logo right up front then our background color is plain white so we are going to change that uh let's go here and then um maybe we will change this because it's not very visible so maybe we will increase the okay we need to make it a little bit gray so that it is at least visible very subtle but visible okay there you go i think it's fine uh then we have the start and about button do we need those no i don't think we need those so we can remove that we also have the text now we are lazy and we don't want to create new text so i'm going to just change the color and keep it aside and we are going to use that later on okay so what we will do now is first of all we will start from the very top we will create the header so our header if you remember was kind of an abstract shape so we can go to graphics we will go to other and we have our header abstract so we will create a new image so we will create a new image here and we are going to import our abstract shape so now we want to increase the size of this so we will check the size of our canvas so it is 1500 so we are going to make the width of this 1500 and because this is imported as a square we are going to keep it 1500 by 1500 so this gives us our relevance image and we can place it somehow like that i think it looks good so you can see here the result so we can move it around left and right uh if you wish but again you can play around with these values uh i think if you have it a little bit here or yeah i think this is fine so we can have it like that okay so the next thing will be our back button so we are going to create a new button so we will right click we will go to image and we are going to import the back button so the back button will be whites and here we are going to move it around but this seems a little bit small so let's make it bigger so i think that is fine so we can place it somewhere around here so that looks good to me now one important thing here to note is that you have anchor points so if you click over here you have these anchor presets so this means that your app will be some sort of responsive so it will be based on which anchor point you have fixed so for example this header is supposed to be on the top by the way i should write here header underscore abstracts so let's place it on the top so this abstract header should always be located based on the height of your app so we are going to say instead of the center change it based on the height so anchor it based on this height then for the button here let's call it button underscore back for button we are going to say anchor it on the top left so here it's anchored on the top left instead of from the center here or somewhere here we are going to anchor it over here okay so that is the main idea so this way if you use it on different phones it will help you a little bit but again you will have to play around with these values uh it's it's not that easy that you will get it right the first time okay so moving on we are going to create um what should we create let's create the search bar so by the way we need to add the component here so we can go here add components and we can click on button and now this is a button so if i run this and you can see now it acts like a button so that's how simple that is okay great so now we need to go to our scroll bar uh not the scroll bar the search bar so we will create an input field so we will right click here we will go to ui and we are going to click on the input field so that will give us an input field and now the first thing we will do we will change its size so we will go here and we will change it to 800 and then 800 by let's say 150 so right now everything is white so it's a little bit weird but you can see on the game itself so we are going to place it somewhere that it looks good and then we are going to uh now if you see if you open it up you have a placeholder placeholder is basically the text that is when you have not written anything on it and then text is the actual text that you write on it so we will we will look into both of these once we run it now for the input field we have to select our we had a specific search bar item for it yes this one so we have the search bar rectangle so we can select that or is it too small it is a little bit small so let's pick the rectangle yeah the rectangle is good we can change its color so we can view it properly so very subtle gray maybe that okay so that is good and uh is is there a transparency on it no okay so that is good um or is it i i think we need to reduce a little bit more uh maybe here okay we can play with these colors later on for now we are going to go to the text so both for the placeholder and the text we have to apply the same parameters so i will go to the placeholder because it is visible at this point and what we can do is we can change its position so we will say that our placeholder is still here let's say because we need to add an icon for the search so i will right click here and create a ui and i will place it inside that input field so i will say that this is my what is it search icon and we will give it a dark gray color not too dark i think that's fine so we will anchor this now this is the child and this is the parent so we will anchor this child based on the parents and we will say that it is on the left hand side so it is supposed to be here so we will anchor it from the left so now you can see the anchor shifted to the left and now from the left we can give it a position so let's say our position is uh 50 let's write 50. it's too small then let's say 75 maybe a little bit more 85 so again you can play with these values and we can decrease the size of it because it looks too big way too small 75 75 uh better i think it looks good so then once that is done we are going to go over here to our placeholder and we will check that if our anchor here was how much uh what is this it is at 85 so 85 plus 85 is 170. so we will move this placeholder to 170. so it's already at 170 around so we can change this to 170. there you go so now it's evenly distributed and we can go to the placeholder again and now we are going to give it the same parameters as our previous example we will center it horizontally and vertically or do we need to we need to put it on the left side and then we need to increase the size let's say 33 seems fine and then in the font we have to pick let's say light and we can call the placeholder as search and dot dot dot of course my spellings are wrong s-e-a-r-c-h and yeah maybe a little bit bigger yeah i think now it's better so we can make it like this and then the text has to be exactly the same so for the text we will again put it from the left we will say 170 and then it will be in the middle vertically and on the left and what was the size of the placeholder it was 46 so we'll make the text 46 as well so that is good and what else we can change the color of it a little bit more we can make it a little bit darker so let's run this and see what happens so if i zoom in and if i type in here something there you go so now it's black so i can write here this is awesome there you go so again i think it is too dark maybe we can change it a little bit slightly you know okay so let's test it again yeah i think it's better now so if you want to change it during the run you can do that too but it is not guaranteed to save the change so what you can do is you can copy the color and when you pause it or stop it then you can go back here and paste the color so that is one trick to change colors okay so that is good and now we are going to create the main aspect of our homepage which is the boxes or the menu items that we can click on those are our chapters so what we will do is we will go to the canvas and we will right click and here we are going to add a special item and that is a scroll view so this scroll view will help us scroll like in a normal app so we don't have to write any code or anything all we need to do is we need to drag and drop our components within this scroll view so the first thing we will do is we will keep the size of this the same as our width of the search bar so we are going to make this 800 and then for the height we are not going to give it any particular height we will just drag it for now and we will start it somewhere here let's say so this is our idea and now if you if you see on the side there is a very subtle line you can see and you will see it on the bottom as well what is this this is basically the scroll bar the one you see in a lot of applications the one you see on your browser where you can scroll up and down but this is something you don't see on apps so we we are not going to use that so you can see now i have shifted this so to bring it back you can basically use this guidelines okay so this looks good and if we open up our scroll view we will have a few things we have the scroll horizontal and we have the scroll bar vertical now the horizontal we don't need at all so we are going to delete that but the scroll bar vertical we need because we want to scroll vertically but we don't want to delete it we want to reduce the size to zero so now there is no width for this so now you can see it is gone so that is good but we do need its functionality so that's why we are not deleting it now if we open up our viewport we have something content inside of it the content is the viewport is where you will view all the items so anything that is outside the viewport will be cut out it doesn't matter how big that is it will be cut out and the content is basically what we will have within our uh scroll view so let's say we create one rectangle so we will create an image so we will give it a size we have the rectangle and let's give it a size of of 800 by let's say 400 so this is what we have now at the background we are going to remove the color for this scroll view but for now we are going to keep it later on we are going to remove that color okay so one thing we have to do is we have to create a grid now why do we need a grid because when we create a new item i don't want to drag it and space it evenly each time so i don't want to do that i want it to scroll or i want it to adjust by its own so what i will do is i will go to the contents and i will add a new component to this and that component is vertical layout group so this vertical layout group now helps us creating that evenly spaced items so let's say i have this template and i will change the color for this to our orange so the color for our orange was this ff9800 so we are going to use that and inside that we are going to insert an image and a text so you remember the text we kept now is the time to use it where is it this is the text so we will drag it in so i can call this let's say chapter one and i have an image and i have a text inside of it so this text we are going to keep on the left side and the image we are going to keep on the right hand side so we are going to anchor the image on the right hand side and we are going to anchor the text on the left hand side now we can change their positions so here first of all we have to give in uh the size so let's say 200 by 200 and here we are going to give in let's say the position of 20. uh no 20 is not good it should be the opposite side so let's move it around here that seems fine to me minus let's say minus 200 and then for computer vision we are going to decrease the size of it let's put it to 0 0 first 0 and 0 and then we can change the size of y and here we can change the font to let's say regular and we can change the color of it to let's say white and what else we can decrease the size because it just looks way too big so maybe we can add let's say what is it 75 maybe 60. yeah it looks good and we can align it on the left and then we can push it further a little bit so let's push it a little bit further and i think it looks good so this is our standard and we can add an image here for example the first one is chapter one uh what was it i i have named all of them so you can basically reduce the size of this and you can see the chapters so chapter the first one is image capture so i can click on that and this will give you the icon so here i can write uh where is the text here in the text i can write image it should be capital i think image capture so there you go so now you can see that we have our image capture and we have our icon over here so that looks good so now i can copy these this chapter one and i can paste it multiple times now before we do that we have to make sure that it is absolutely ready uh for um what you call duplication so we need to make sure that this is a button so we will add it uh a button because we want to click on it and it will take us to that chapter uh it that chapter will be a new screen uh not a screen a scene okay so this is all good and let's see if we can move this i think the viewport is blocking it because of this we can shift it a little bit uh we can shift the scroll view or should we increase okay what we can do is we can go to the scroll view and we can change this size of 820 we can increase the size a little bit and then we can move it 20 to the side so we want to align it with this so there you go so now it's aligned and you will see that the position is 10 here and you can see that this is aligned as well so this at the end of the day we will remove the color so if we go to the scroll view and we do this it will remove the color so we want to make sure that it is centered so now it is centered and it all looks good and what we can do is now we can duplicate this so this is our chapter number one and i can just copy and paste so i can paste it let's say four times or let's say five times so now you can see that they are aligned next to each other but that is what we don't want we can go to content and if you remember the vertical layout group that we did we can add some spacing to it you can see that we can add evenly spaced items so let's say 50 and then we can also add some padding if at the top or the left we want some padding we can add that too but in this case i don't think we need any padding we can keep it to zero zero and where is the alignments we can say that it is the upper center or the uh it should not be middle center it can be upper center so just make sure it is aligned properly yeah it is still fine so that is good so here the content you can see it is not expanding based on the items we have increased so it will not be able to scroll properly if we run it and if we try to scroll it is not good so you can see it just bounces back so we need to fix that so we will go to our content and here we are going to add content filter size size filter and we are going to constrain the vertical fits to be preferred size so now you can see it is based on how many objects we have if i remove one object you will see the size automatically changes if i remove another one you can see the size changes again so this is what we want so now it is good and one more thing we need to do we need to go to our scroll view and here we are going to remove the horizontal so we are going to remove horizontal scroll completely and now if we run this you will see we can go up and down so and it is nice and smooth but if we add more let's see if it works or not so here you can see we have added more and by the way this we can remove or we can limit till here so we need to limit the content first here so let's say till here or no it should not be till here it should be till the canvas where the canvas ends so we can limit it till there so we can see everything and then if we run it now you will see that i can scroll up and there you go now if i go to the last one you will see that it it is at right at the edge so it doesn't look good because it's not showing the whole thing so what we can do is we can add a little bit of padding to the bottom so we will go to our vertical layout and in the padding at the bottom we are going to give it let's say 50. so let's try that again if we go down and there you go so now you have a little bit of padding so it doesn't look that good maybe we need to increase a little bit but because we are using 50 here i have used 50 here as well so to keep it even so the next thing would be very simple we will simply add all these different icons and names to our chapters and one more thing you can do is you can create a heading as well so let's say i create a new chapter i will bring it up and i will call this heading for let's say chapters and then i can create a heading for courses so instead of all the button and all this thing i can remove let's say the icon i have the text i can center it i can put it to zero and then i can center it from here and then it looks really big it doesn't look like a heading at all so first of all let's change it to chapters chapters spellings are correct surprisingly i will put it as bold and now you can see it says chapters so maybe a little bit bigger a little bit maybe 75 okay so now i can go to the heading chapter and here i can change the height of this so let's say right about here so now this is chapters now if you don't want this at the background you can change maybe the transparency of it to make it look different you can play around with these values you can um also make the text appear on the left hand side you can go till the end like this and here then i need to decrease the size a little bit maybe 70. so here i can change its position now so i can move it a little bit forward so right now it's from the middle so i will say it's from this side and then i will give it some value let's say till here then i can bring this back till here so there you go so that is basically your heading so now if i go back and i run this there you go so now we have these nice good what you call buttons that will navigate us to our chapters so what you have to do next is to select all of these and you have to change the name so here for example it will be chapter 2 and then it will be the image will be for chapter 2 so you can see here chapter 2 is basic functions and here we will write basic functions so if you want to do it yourself you can skip this part otherwise you can follow along so here we will write basic functions it looks small because i didn't capitalize it basic functions then we will go to the third chapter then fourth fifth sixth and seventh so we will keep this for now and later on we are going to add our apps here as well i want to run all the apps all the functionality from within one app because i don't want you to try out run different seven seven different apps or five different apps just for the testing purposes so i will put all of it in one app and then you can test all these different functionalities so for now we will keep this as seven and we will go in and change the image so the third one is crop and resize i will write here crop and again i made the same mistake crop and resize and then the fourth one is what is the fourth one it is draw shapes and text so i will write here draw shapes if you want to view this you can do that by clicking on contents and you can move it up like that so now we are on the fifth one so the fifth one is i believe warp oh i did it to the wrong one okay i need to go back not to the chapter we need to do it to the image i should have renamed it to icon that would have been better but anyways you get the idea so here i will write work and then i will write here texts to work perspective ah perspective then i will go to chapter six image will be color detection and text will be color detection then chapter 7 image will be what is it contours yes chapter contours and we will change this to contour detection okay so let's run it and enjoy the views there we go so now i can scroll up and down and i can go fast and slow and it looks awesome great so that is good so now we are going to create our chapters page so throughout chapter 1 to seven or maybe six we are going to same we are going to use the same pattern and for that we have a template so let's create that templates so we will go to our course and we are going to duplicate which one let's say we duplicate this homepage the one we just did so we will go to edits and duplicate so i can double click it uh let's just first of all cancel it so this is the startup page we need to make sure that this is saved and then i will change the name of this to let's say chapter one and i will drag it into chapters then chapter one and now i will double click it okay i copied the wrong one um okay let's let's copy that one the other one it is the home page don't save yeah don't save i think i duplicated the homepage let's try it again yeah home page and then i will write here chapter one go to chapters chapters double click it and there we go so this is chapter one now and what we will do is we will go to our canvas the orange um background orange it should be white let's remove that background white and then background logo then header so we need to first of all change the header so based on our design we have a square so this is our square and we are going to pick the same color so we will go to our scroll view contents and we will pick the color the orange color and we will paste it to our header so let's paste it here there we go so we just need to center it so the x position we need to put it as zero and i think it doesn't look that bad maybe a little bit lower yeah and then seems fine to me okay so then we need to so let's put it as square then we have the back button which should remain the same on top of that then we have the input field we will not need the input field then we have the scroll view and again we will not need the scroll view but because we are lazy we are going to take the text out of it so we don't have to put all the properties again great so this is our text so we are going to align it with this kind of and then we will place it on the side so like this chapters we can change this to let's say lights extra light bold regular i think regular is fine we just need to make it uh capital letters were not looking good so let's make it chapter one so i think that looks good and what else do we need so the next thing we need is by the way we can make this anchor on the right and we can make this anchor on the left which is already on the left i think this should be bold let's make it bold yeah this looks better and maybe the size as well it's i think a little bit smaller then it should be um let's go to the text and we can make it 75 oh it doesn't it's not enough so we can based on this we can align that and now i think it's better why is it going out let's bring it back here okay so now we are going to create an image now okay let's change this to text underscore chapter chapter number so the thing is that we are going to use an image like before but this time around we are going to use a raw image so whenever we want to display the output of our opencv functions we are going to use a raw image so images normally we will use for icons buttons and everything but whenever it comes to images or videos we are going to use whenever it comes to opencv video or images we are going to use raw image so it is pretty much the same so we can change the size of this so let's say we are going to make it 900 by 900 seems good we can push it up a little bit and we can give it a gray color so that we know where it starts and where it ends there you go and then at the bottom we need to add some text so we will copy the text we'll come down here we will change the color first of all let's say to that and then we are going to so i can write here text underscore this corruption so here we are going to write the description so i have written down the description of chapter number one so i will paste it here uh again you can find this description in the uh course page so 75 is way way too much so we are going to write let's say 50 50 or maybe 50 as big as 45 let's anyway so let's increase the size of this first so let's anchor it or let's increase the size here and then here and down i think if we center it it will look better yeah so we can reduce the size of it a little bit and then we can what is this this is on the right we need to make it centered so then we can change the position to zero so it will be right in the center and we can push it up a little bit there you go and then what we will do is we will add our button so the button will be right click ui image and we are going to add the button outline there you go so that is the outline and this time around we are going to change it to orange because the color is white at the back okay i forgot i copied the text that happens a lot uh i will go to the square i will copy the code from there the color code and then we can come back to the image and we can paste it here and now i need to increase the size so we will keep the same dimensions as we as we did before so to keep the consistency so 400 by 300 so that looks good we can anchor it to the bottom and yeah that looks good and then we can add we can call it button button underscore next and we can add and add a text inside of it but again we are going to copy this text description and we are going to paste it inside here and then we will remove all of this and we will call it next i think small letters will be better and we can change the color of its to orange and now it is already in the center so we can put the value 0 here and it will go to the center so maybe a little bit bigger 50. yeah i think it looks good so this is how we can create our chapter number one and we need to add a button to it so i can write here text underscore next that kind of rhymes text next yeah anyways so here we can write uh what do we write we write a button so we add a button and now i can test it i can click next and it works but to be honest this looks quite empty we should go a little bit higher so here i can go a little bit higher and then i can bring the text a little bit higher as well and the button a little bit higher as well now the thing is that this should be aligned with this and this button should be aligned with this otherwise it looks bad so we need to align this right about here again i'm eyeballing it you can go to exact numbers and try it out but i don't want to do that so to align this one uh the easy way is to make its on the right side and then we can align it like that like this there you go so now i think it looks good so by the way you can test you can put an image here i can put it this to white and i can put my image which is the test image so this is how it should look like so this is the basic idea so so far it looks good and then we need to make all these buttons functional by the way we are not going to use this image we are going to keep this as plain or none so that we can add our own image through the code not static like this dynamically by writing our opencv code so this is good now we are basically done with the design parts and we can go ahead and start with the navigation of the buttons and then we will start with our chapter one so now we are going to create our first script that will link all these pages together that we have created so all these scenes or pages whatever you want to call them so the idea is very simple we are going to create a new folder this is in the course and then we are going to call it scripts and inside that we are going to create a new c-sharp script so throughout the course we are going to use c-sharp for this programming of computer vision so throughout the course we are going to use c-sharp for programming so we will create a new file and we will call it page navigation now the name of this file is very important because that will be the name of your class so c sharp is object oriented so therefore we have all these different scripts as actual classes so if i double click on this it will open up visual studio and this is because we have already linked visual studio with this so if we go back to our visual studio and we go to edit and preferences inside that you will see in external tools we have linked it to visual studio community so therefore it opens up in that now if by any chance it says here miscellaneous files or the other way you can test it is by writing let's say game so if you write game it should show you game objects so if it doesn't show you it means it's not linked with unity then you need to go to tools get tools and features and there might be an update that you have to perform or you might not have installed the unity add-on so here you can see game development with unity if that is not checked you need to click on that and then you need to modify or install whatever it says so make sure you are up to date your visual studio is installed and it is at the current version the most advanced one and then the what you call you have the extension of unity as well so once both of them are done we will see something like this so here we have our namespaces you can think of these as libraries or packages which have lots of different classes and functions and methods that we can use and then we have our own class that we just created so this is the class page navigation so don't worry about these classes and these objects for now just think of this as just a single page of code that we are going to run and we are going to attach this to an object in unity we will see how we can do that later on so here we are going to say class page navigation now you will see this this is basically this basically means extension so we are getting the classes from mono behavior class as well so this is not something related to c sharp it is related to unity so monobehaviour is the base class which has all these classes or all these methods for example void start void update fixed update and lots more what you call methods that are related to unity so once we uh create any new script we will have the base class attached to it so that we can use these predefined methods so here we have the two most common methods void start and void update so start will run only once and update will run continuously like a loop so we are going to write our code uh without the start and the update we are going to remove pretty much all of it and here we are going to create our own methods so we are going to create public methods so we are going to write here public if we write it public then other scripts and other objects can access it if we make it private then it cannot be accessed from outside the script so we want to basically what we are doing is we are creating these methods that whenever we call this method it will take us to a different page so we will write here public void let's say home page was the home page the first one or the setup the startup sorry startup start up page let's say this is our method and then we are going to create some brackets and now let's go back a little bit and now we are going to write our code inside of this so to write the code here we are going to add a new namespace we are going to write here using unity engine dot scene management so basically this will allow us to load new scenes so we will write here scene manager so we are using this namespace if we don't use this namespace we will not see the scene manager so if i remove this you will see the scene manager is not recognizable so we need this namespace so now we will write scene manager dot load scene and we are going to load the scene that is called starts up page so you can give the index number so let me show where that is so if you go to file build settings you will see that you have this page startup by the way we need to add all the pages so we need to go to the home page and then we need to go to the chapters so these are the three pages that we have so far or the scenes so this is start up page this is home page and this is chapter one so we can close this and we can go back to our script so here we will call this startup page now we will copy this and we will paste and then we will paste again so here we will say that this is home page and we will call this as chapter one and we will copy this and paste here and we will copy this and paste here so now we will save this and this is a very basic code that we have written it will just open up a new what you call scene for us so now we need to link this to a button so whenever we press that button it this should happen so let's go back to our unity editor and here we are going to go let's say to our startup page now here first of all we are going to link our start button to our what you call menu page or the home page so here we are going to create a new empty object and we will call this manager so manager is an object in which we will add any script that we don't want to attach to any other object so for example if i create a script to change color of this logo again and again after every one second so i can write that code for example color changer and then i can attach that script to this image and what it will do is it will keep changing the color of this particular object but in this case we are not linking it to any object so we are going to create a generic manager and that will have this script so in every page that we create there will be a manager and in that manager we will have this script page navigation so to link it i can simply drag it in my manager or i can drag it in like this so this will add the script to it and now what i can do is i can go to my button i can go to my button here and inside that on click i am going to add this method so what i will do is i will drag my manager because this manager now has all the navigation script so i can drag that object here and i will go to the function by the way function method pretty much the same thing don't worry about that so we will go here and we will go to page navigation and then we will simply click on home page that's it so if i run this now and if i click on start it will take me to the home page and that's how simple it is so the same thing will happen in our home page so i will save this and in the home page i am going to create a manager and i am going to attach my script so i can add a component and i can write here page navigation and i can add it like this then here i need to link first of all my back button so i will go to the back button and i will add and then i will add the objects that i want to make the changes from and then page navigation and i will go to the startup page this will take me back to the startup page and then i can go to for example my pa chapter number one and i can add then i will go to the manager and then i will say page navigation chapter number one so that is how simple this is so if i run this should i run it or let's go to the chapter one as well i will save this and i will go to chapter number one and over there i will attach again i will create a new manager and i will attach the page navigation i will go to the canvas the back button and and what else we also need to attach it to the next button so i will take both of the buttons i will add for both of them and i will drag the manager but then for the function for one of them i will go to the home page and for the other one i am going to go to what is the next one chapter two so we haven't added chapter two so later when we add we can attach it so what we can do is we can go to our scripts and we can keep adding more of these chapters so for now we are going to add chapter two chapter three chapter four five six and seven so four five six and seven and later on when we add more we can change these as well so i will copy and paste so we have to make sure when we are creating the chapters we name them the same otherwise it will not open up so now that this is done we can see here that we have our chapters ready and let's go let's go to the startup page and we will try it from there so we will go all the way around and we will come back so let's go to the starts we see the chapters all good we can click on back it will take us back when press start again we can click on image capture it takes us here next will not work because there is no chapter 2 and then we can click on this and it will take us back to the home page so this is great and it works well so now we are going to build it to our android and see how it works now to enable developer mode you have to first of all go to your settings in android and then you are going to search for build number so you can write build or build number and once it searches you will click on that and it will show you your bill number and you have to tap it several times and you can see it says developer mode already has been enabled or turned on so for you when you click it several times it will turn on your developer mode so after you have enabled your build number and you have tapped it several times you will go to file you will go to build settings and here you will make sure all three pages are there that we have created and then we are on android and then we can simply click on build and run so it will ask us to name the apk so we can call it cv underscore app so now it will upload to our android device so now we can see the result here and we can click on start and that takes us to the home page and we can scroll and you can see that we have that gap here and all of this looks good i can click on image capture and it takes us to chapter number one i can go back and it takes me back here and i can go back again and it takes me to the home page or the startup page so that looks good and now we can move on to uh chapter number one where we actually create and fill up this image so now we are ready to start writing the code for opencv to load our image so that will be our first task now before we go there i want you um i want to explain how it works at the back end so it is a little bit different than if you have used it in let's say python or c plus so it will be a little bit different so what happens is that you have your folder so this is your folder in which you have the images so this is called the resources folder the spellings of resources have to be exactly the same otherwise it will not work so there is a default folder that is available in any unity game that is called resources so we have to make sure it is the same and then it will have these images inside and what we have to do is in the script we are going to create a unity texture here i have written the spelling wrong i should change that but the idea is that the texture here is based on unity platform it has its own convention then we have to change that convention to opencv mat so matt is the convention of handling images uh using opencv so once we convert that then we can write any code that we want specific to opencv we can change the color we can change it to grayscale we can find objects we can find color whatever we want to do we can do it in that opencv space and then once we are done with our code once we are done with the processing then we need to convert that mat the opencv mat back to unity texture and then we can send it to our image the raw image that we have used so this is very important because in every code we are going to do this we are going to create the unity texture then we will create the opencv mat and then we will write our mumbo jumbo code and then at the end we are going to convert it back to unity texture and send it to our display so let's see how we can do that so first of all we are going to go to our chapters we are going to open up chapter number one so here you can see our chapter and as you know we have created a raw image that we will use to display our image so here in chapter one we are going to create a new script and we are going to call it chapter one script let's say chapter one script we are going to double click to open it up and there you go so this is our chapter number one script that we are going to use to write our code so the first thing we need is our unity engine ui so our raw image so if i write here let's say if i write here raw image it is not um detected this class is not detected because it is available in unity engine ui so we need to write here using unity engine dot ui then if i write here raw image then it is accepted it is detected so what we will do is uh okay let's declare the rest of them first so we need some opencv functions right so we need those methods so we are going to use all the namespaces that we have uh the basic ones that are absolutely required so the first one will be opencv for unity dot core module and the second one is opencv for unity dot unity utilis and then using opencv unity dot image processing module image processing not image codecs so the thing is that these two are absolutely required and then this one is not required for chapter number one but for pretty much every other chapter it will be required so i'm putting this as a default so you don't have to write it again and again so what we can do is we can separate the ones that we have introduced and these are the ones that are default uh available so now we are going to write our code so first of all we need to create a public raw image so we are going to write here public raw image and we will call it image display so this image is basically the one in which we will send our texture to so this image is the image over here so this white one what did i move this one so this is the raw image that we are talking about so then we are going to in the start function we are going to write everything because we are not dealing with loops we are just dealing with an image so the first thing we have to do is we have to load our image so we will create that texture 2d texture 2d and we will call it input texture uh let's say input texture and we will call uh we will say resources resources dot load and then we will say test so we need to close that and then we will say that we want to load it as texture 2d so there you go so this line basically all it does is it declares this variable as an input texture and it loads this image so this image is basically present if we go to our course if we go to graphics we have the resources and in the resources we have the test image so one more thing that we need to do to make sure this runs we have to click all of these images we have to click all of these images we have to go to the inspector why is the inspector not showing okay we need to close this so this is our inspector and we need to make sure that they are read and write enabled because we are reading and writing the files we need to make sure it is enabled otherwise it will not work so we can hit apply now we can go back to our code and in the code we are going to create the math so so far we have created the unity texture 2d now we are going to create the matte so this will be an empty matte it is not like python that you can simply use the image in the same statement but we are going to declare it first so we are going to call it mat image is equals to new matte so matt is the format in which we use images in opencv so we will write here if you have done uh opencvc plus plus course then you might be familiar with this if you haven't done it you can check it out i have a free course on opencvc plus on youtube or on my website you can check it there so here we will write input texture this is the one that we declared dot height and then input texture dot width and then we are going to declare the type so as you can see here we have the rows we have the columns and then we have the type so inside the matrix there are values so they are asking what kind of values are you storing are they float are the integer what kind of values are they so we will say that we have a cv type so i think c is capital then v and then type yes dot cv underscore eight u and then c4 now you might be wondering wait what is that that looks so weird c v h u c four did you miss any letters maybe a b c uh anyways so this basically means that this value is eight bits eight bits means it can go from zero to two five five so bits are basically two to the power of something so two to the power of eight means 256 values and 256 values if you start from zero and not one then you get zero to two five five so my color range uh let's say if it is black it will be zero if it's white it will be two five five so this is what eight bits mean and then u means unsigned so unsigned is zero two two five five and signed is from uh minus 127 127 to 127 so this is signed and this is unsigned so that is the idea and then we have channels as four so these are four channels your channels are rgba so these are the four channels so rgb and then a is the alpha which is the transparency so this is our convention and then we are going to let's let's write it down here as well that this is we are creating um let's say create an empty math okay so these are the two steps that we have done but we didn't convert it now we need to convert the texture to matte so we will because right now this mat is empty so we need to write here uh convert texture to matte and now uh we can write here utilis dot texture 2d to matte and then input texture and then image so this is our basic idea so that first we load the image then we create an empty mat that is exactly the same size as the input texture and then we convert that texture to matte image so this is our first part now here will be our mumbo jumbo code so this is the part where we will have all our code okay so let me let's put another one and let's put here inside that this is our own code i need to close the inserts okay so here we will write our code and then at the bottom we need to convert it back again so we will copy this part and we will paste it here but this time around it will not be input it will be output texture and then we are going to create a new tech a new texture so that texture will be new texture 2d and we will call it image dot columns and then image dot rows so this is the size that we want it to be we need to add the brackets and what else then we need to give it the format again so what is the format so the format here is basically texture format dot rgba and then 32 so this is the equivalent format that we used over here so this is the unity one and then we are going to write false so it's getting quite long i can reduce the size here so this is how it looks like so here we are creating an empty texture create new texture 2d texture okay so then we need to convert our matte into this new texture so we will write here utilis dot matte to texture 2d and we will have our image and then the next thing will be our output texture so that is the basic idea so if i zoom in you can see it better so utilize dot matt to texture 2d and this basically completes our second part so first we converted the texture to matte then our code then matched back to texture now this texture we need to send to our image so we need to attach this to our raw image so here we are going to write that image display so let me go back actually so here you can see this is our image display so we are talking about this now so image display display dot texture is equals to output texture and that's it so this is how we link it so i can write here uh let's say converts texture to matte uh no matte to texture not to texture and then we are going to send or let's say display the texture on the uh raw image so this is our main idea so what else what else can we do so this is good now but the problem is this is just a name raw image we haven't actually linked it to our actual image over here this is just a random variable so how can we link it now this is the beauty of unity we can save this and we can come back here and if you remember we have managers for all the chapters so we will click on our manager and we will add our chapter one script so we will write here chapter one script and now you can see that there is an empty space for image we will just take our raw image and we will drag it in our raw image and that's it that's how you link this public object over here now if i go back you will see here that if i don't write public here and i save it this will disappear so in order to make it work you have to write public so here i am going to write public and i will save it and then when i go back it takes a little bit while it takes a while to load so and there you go so now we have the raw image and it's already linked because we linked it earlier so let's try it out and see if it works or not let's run this and there we have it that is very rare that it works on the first try so we are off to a very good start excellent i hope that it worked for you as well and now you can see that we have displayed an image if we wanted to we can change the image as well let's say we will go back and we will write here shapes shade shape shapes and if i go back here and if i run it there you go so now i can see the shapes image instead of my own image so this was basically chapter number one where we learned how to import the image the main idea you have to understand is that you have to convert the unity texture to opencv mat then do all your coding then convert the matte into texture and send it to your image it is a little bit complicated but once you get hang of it then it will be very easy it's like a template it's like boilerplate that you are using again and again [Music] [Music] so [Music] [Music] [Music] [Music] hey [Music] so [Music] [Music] you

Channel: Murtaza's Workshop - Robotics and AI

Views: 70,746

Rating: 4.8693666 out of 5

Keywords:

Id: YAhid-ux3aY

Length: 164min 46sec (9886 seconds)

Published: Fri Apr 02 2021