So recently i got several requests on my youtube
channel for this video and finally it is here.. Hi guys! Welcome back to CodeWar.
I am Ramesh and in this video i will explain about.. How to setup "graphic.h" in vs code?
By the way i have already created videos on How to setup "graphics.h" in CodeBlocks and Dev C++.
But many of you have requested me for this video. So here it is.. OK, so basically there are many
ways to setup "graphics.h" in vs code but i will show you the three best ways that you
must know about the first two are especially for beginners and those who just want to run graphics
program and the third one is for especially for those who wants to create a project using
"graphics.h" library and not just that i will also explain about some common error that you can face
when you will set up "graphic.h" in vs code and how to solve it.. So, make sure you watch the
full video and by the way i am assuming that you have already installed visual studio code
in your computer if you have not installed vs code yet then go to the official website and download it and install.. I've mentioned the link in the description of this video.
And now without wasting time let's get into it.. All right guys.. So, the graphics library that
we are going to use is made for 32-bit compiler. So first of all we will have to install
the 32-bit gcc compiler and.. I have mentioned the link in the description of this video.. So, go to this website and make sure you
download the 32-bit version and not the 64-bit By the way i have been asked many times
by beginners in my CodeBlocks video about.. whether it is safe to use 32-bit version
of compiler on 64-bit computer system or not? So, I want to mention here that it is fine
almost all the 64-bit computers nowadays also support 32-bit software.
So, you don't need to worry about it.. Now after downloading this 32-bit compiler
we have to install it. So go to downloads.. and open it.. Now make sure this "Check for updated files.." is unchecked. Then click on "Create".. Click on "Next".. "Install".. So, the installation has been finished successfully..
Now click on "Next".. and "Finish".. So, as we have installed 32-bit compiler,
now we have to set up "graphics.h" in it.. So, download the graphics library from my google drive.. I have mentioned the link in the description of this video.. And after downloading you will get
a zip file like this.. Now extract this zip file.. After extracting, you will get 4 files
in it and now hold the "Ctrl" button and click on "graphics.h" and "winbgim.h"..
to select these two files.. Copy it.. And now we have to paste it in the "include"
folder of our compiler.. So, go to this location.. "C:\TDM-GCC-32\include" Now paste here.. Now go back to the folder where you extracted
the zip file and select this file with name.. "libbgi.a".. You have to copy this file to
the "lib" folder of the compiler. So copy it.. and go to the "lib" folder.. See this location.. "C:\TDM-GCC-32\lib".. Now paste here.. Alright guys, so we have set all the required stuffs..
Now open Visual Studio Code (VS Code).. OK, now we need to install some extensions to run
our c++ code so go to the "Extension" section and.. search for "c++".. Install this extension.. Now search for "code runner".. Install this extension as well..
and by the way i want to say thanks to “Pranav Patil” and “A. Afzal” as they
have suggested me to use these extensions.. So, thanks guys!! Now, let's get back into it.. Click on "File->Open Folder"..
you can also use this shortcut (Ctrl + K) Now, select a folder where you
want to save your graphics program.. I am creating a new folder for this.. Click on "Select Folder".. Click on "Yes I trust the authors".. Now create a
new C++ file and give it any name you want.. By the way, I want to mention here that you must
create a C++ file and NOT a C file.. Because the graphics library that we are using, actually it
internally uses some C++ specific header files and those header files are not available in C language.
So, if you create a C file, you will face error but if you want to write your code in C language even
then you have to write your code in C++ file and.. it will work fine as C language is also part of C++. Right..?
So, make sure that you are creating a C++ file.. Now before writing the graphics code, we have to
edit the default configuration of c++ extension for this folder.. So, go to View->Command Palette..
You can also use this shortcut (Ctrl + Shift + P).. Now search for "C++ UI".. Select this option "C/C++: Edit Configurations (UI)".. Now here in the "Compiler path",
make sure you have selected this option.. "C:/TDM-GCC-32/bin/g++.exe".. Now in the "Compiler arguments", we have to
write all the linker flags related to "graphic.h" library.. So write.. -lbgi -lgdi32 -lcomdlg32 -luuid -loleaut32 -lole32 So, guys these are the linker flags related
to "graphics.h" library. Make sure you have written all these flags in a separate line just
like i have done here otherwise it will not work.. Now in the "Intelligence mode", select this option.. "windows-gcc-x86".. Now come to the bottom here in the
"C++ standard", I am selecting "c++11".. By the way this one is not mandatory but I mostly
code in "c++11" standard. So, that's why i have selected "c++11".. if you want to follow along
with me, you can also do it.. Now save this file.. By the way whatever settings we have done here
is important and you will have to do all these settings whenever you create a new folder for
your graphics program and once you have done these settings for this "root" folder or directory,
then you can write any number of graphics program in this folder or any other folder which
is inside this particular folder.. I hope you got what i mean. Right..? Now let's get back to our C++ file and write the graphics program.. Okay see.. Here I have included
"graphics.h" header file and it is not showing any error that means our
compiler is able to find the "graphics.h" header file.. Now let me write the whole program
and then I will show you how to run it.. So, our program is complete.. Now let me quickly
go through it before we compile our program.. By the way I am not going into
much details of this program but if you want to know then you can watch the
third video of my "Graphics Tutorial Series".. Okay, so this part is basically for creating
the graphics window.. then this will draw a circle on the graphics window and after that
this getch() will hold the program's execution until you press any key and then this
closegraph() is for closing the graphics window.. Now for compiling this program go to
"Terminal->Run Build Task".. You can also use this shortcut (Ctrl+Shift+B).. Now here you have to select this option
"C/C++:g++.exe build active file".. See the build has successfully
finished.. Now press any key to close it.. You can see here an executable
file has been created.. But we can't run it directly.. So, we need a terminal for
running our program. So go to "Terminal->New Terminal".. Now for running this program you have to write.. A dot (.) followed by forward slash (/)
and then name of the executable file.. Okay so this (.exe) part is optional.. You can avoid writing this
extension name. It will work fine.. Now hit "Enter" (key).. See.. It is working properly and this is the First Method
of running "graphics.h" program in Visual Studio Code (VS Code). By the way i suggest you to also see the Second Method..
It is a shortcut method.. But before going to the Second Method, I want to talk about some Common Errors
which you can face at this time.. Let's start with the most
common error that you can face.. Okay so in this error basically you will see that your program has
compiled successfully but when you will run your program, .. this graphics window will not open and the
program will crash.. Unfortunately you will not be able to see any return value of your
program in this terminal output when it exits because this method will not give you that much
facility but if you follow the Second Method then you will see that after crashing, your program
will return some value like this.. or this one.. and this is what i am talking about.. So, if you face
something like this then what you have to do is.. first of all make sure that you have
written exactly the same program that i have written over here because you can face this
same problem due to many reasons for example.. If you try to access data from any
dangling pointer or null pointer then you will get an exact return code that i have shown you or if
you divide any number by a zero, then again you will get another one of those return values after
your program crash.. So, make sure you have written exactly the same code as mine and then follow
the Second Method.. and after that if you get the return code same as any of these, then it is
confirm that you are also facing the same problem which i am talking about and the only
reason for facing this problem is.. The graphics library that you are using is either corrupt
or it is not copied correctly.. So, I suggest you to re-download the graphics library from the
link given in the description of this video and try again.. One more common error that people
do is in the linker settings.. Let me show you.. See this one.. I have seen many people that they
do mistake here in writing these flags.. and due to which they face error.. So, make
sure you write all these flags correctly.. So, these are two most common issues that
people face while setting "graphics.h" library.. Now if you get any other error then
either explain your problem in the comment section or you can also mail me. So, to do
this, first take the screenshot of your program.. and then go to "Terminal->Run Build Task"..
Select this "g++.exe build active file".. and after the build process
finish, take a screenshot of this.. and also you have to take the screenshot
of the "return code" that you will get after following the Second Method of setting
"graphics.h" in Visual Studio Code (VS Code).. And you have to mail me all these screenshots along with
explaining your issue.. I'll mention my gmail ID in the description of this video so that you can
easily reach to me. Now moving to the Second Method.. Okay, so in the First Method, what we were doing was..
we were compiling our program and then for running, we were going to terminal. But if we have to
compile and run our program more frequently, then running it by terminal is obviously not
a good choice.. So, we need a shortcut which can automate this process and this is what
we are going to do in this Second Method.. Now, if you are following this video from the
starting then you would have installed "Code Runner".. But if you have not installed it yet, then
quickly go to the "Extensions" section and.. install this "Code Runner".. and after installing
it, you will see this "Run Code" button here.. But in case if you don't see it then restart
your Visual Studio Code (VS Code).. Now see.. If I switch to my graphics program and
hit the "Run Code" button.. See what happened.. we are getting errors related to undefined
reference this is because our program is not being compiled with "graphics.h" related
linker flags. So, to solve this.. Go to the "Extensions".. "Code Runner" and click on this "Manage" button
and select this "Extension Settings" option.. Here you have to look for this
setting "Code-runner: Executor Map".. Now click on this "Edit in settings.json".. Okay, see.. In the previous version of "Code Runner", the "executorMap"
option was automatically being added in this "settings.json" file.. when i was clicking on "Edit in settings.json" option. But in
this current version, it is not coming.. So, if you are also not getting the "code-runner.executorMap" option,
then you will have to manually add it. So, give a comma here and in the next line
write.. "code-runner.executorMap" .. Click on this first option.. Now, here you can see we have this "cpp" name for
C++ file and its respective command over here.. This command is executed when you will click
on this "Run Code" button.. So, we have to add the graphics related linker flags in this command,
over here.. So, before this double ampersand symbol (&&) or and sign.. Whatever you call it..
You have to write.. -lbgi -lgdi32 -lcomdlg32 -luuid -loleaut32 -lole32 So, this is what I have written in this
file right now.. Make sure you have written everything correctly and by the way there
is a blank space between all these flags.. So, give a blank space between all these flags
otherwise you will get error.. Now save this file.. Okay, now if you select your graphics
program and hit this "Run Code" button See it's working now.. Let's draw one more
shape to make sure it is working correctly.. I am going to draw a rectangle.. Save your file before running it
and now hit the "Run Code" button.. See it is working fine.. So this is the Second Method of
running graphics program in Visual Studio Code (VS Code).. Now as I said after the First Method, this
is the Return Code that you have to look at.. here i have got the return code equal to zero (0) which
means my program has executed successfully.. But if you get the return code that I was talking about
and your code is same as what I have written over here.. Then you are also getting the same
problem that I was talking about.. The graphics library that you are using is either corrupt or
it is not copied correctly so re-download it from the link given in the description of this video
and try again.. Now moving to the Third Method and this is especially for those who wants to
create a project using "graphics.h" library.. Okay, so this time you will have to
do a little bit of extra to make sure things work correctly.. So, first of all go to the
"Extensions" section and search for "C++ Project".. Now you have to install this extension..
"C/C++ Project Generator".. So install it.. and now we are ready to create a project.. Now go to "View" and select the "Command Palette" option.. you can also use this shortcut (Ctrl + Shift + P).. Now search for "Create Project".. and here you can see we have two options..
"Create C++ project" and "Create C project".. So, here you have to select "C++ Project".. Don't go
for "C Project" because the graphics library that we are using will not work in C file.. So, select "C++ Project".. and now you will have to select a folder
where you want to create your project.. So, I am going to create a new folder for this project.. Now select this folder.. (Click on) "Yes, I trust the authors ".. So, our C++ Project Template has been created
and now we have to setup graphics library in it.. So, first we have to do all the settings that
we did in the First Method.. So, let's quickly do this.. Go to "View" and select "Command Palette"..
Now click on "C/C++: Edit Configuration (UI)".. Change compiler path to
"C:/TDM-GCC-32/bin/g++.exe".. Okay, now here you don't need to write
any linker flags in "Compiler arguments".. We will do this in the "Makefile" of our project.. Now change the "Intelligence mode"
to "windows-gcc-x86".. and change the "C++ standard" to C++11.. Now save it.. So it is done.. Now we have to edit our "Makefile".. So, open this "Makefile".. You can see all the
configuration related to our project is written over here.. So, first change
the C++ standard to "c++11".. Now in the "LFLAGS", you have to write all the
"graphics.h" related linker flags.. So, write.. -lbgi -lgdi32 -lcomdlg32 -luuid -loleaut32 -lole32 and now save this file.. so almost all the settings are done
and now we can write our code but before this i want to explain about
the purpose of all these folders so starting from the include folder this is the
place where you will store all your header files this lib folder will be used for restoring
all the external library files next one is this output folder so when you will compile your
project your executable file will be saved in this output folder and the last one is src folder so
this is where you will save all your c plus files okay now as we can't have just a single source
file in our project so just for demonstration i am going to create some more files in it so
let's create a header file select include folder and create a new file give it a name let's say
foo dot h by the way in a project with multiple files the same header file can be included in
multiple source files and this can cause error because when you will compile your project and the
same header file will be included multiple times then the compiler will see the same function
prototype or class declaration multiple times which is not allowed and this is a big problem
so to avoid this we will write header card code okay see in this first line hash if not defined
for underscore h basically it means if foo underscore h is not defined so if fu underscore
h is not defined then in the second line we are defining foo underscore h and then here this hash
indeed is the end of this hash if preprocessor so basically it is like an if statement which is
saying that if foo underscore h is not defined then do whatever is written in this portion
of code so when the compiler will encounter this header file for the first time then over
here it will check whether for underscore h is defined or not and as it will not be defined at
this line yet so the compiler will go through whatever is written inside this portion and as
we are defining foo under h in the second line so when the compiler will encounter this same header
file again then at this first line it will check whether funeral score h is defined or not and
as we have already defined it in the first time so the compiler will ignore whatever is written
inside this from the second time onward and in this way this code will ensure that the compiler
don't encounter anything written in this header file twice and we will not face any error related
to multiple declaration of function prototype or class declaration or any other kind of identifiers
now here i am going to write a function prototype we will not write its body over here
instead we will create a new separate source file so inside this src folder
you can create a new c plus file for this but i prefer to keep my main.cpp file
separate from all other source files so i am going to create a new folder inside
this src folder i will name it module now i will create a new source
file inside this module folder and i will write the body of this
function in that file so let's do this first of all we will have
to include our header file now let's write our function body so basically what i want to do is i will
write some graphics code in this function and i will call this function in our main
function body which is over here in main.cpp file so to do this we need graphics library so hash include graphics.h now let's write some graphics code so this part is complete we are not doing
much over here this will draw a rectangle this is some text which i want to print on the
graphics window this will change the text style and this will print the text at the center of the
graphics window now let's move to our main file okay so now we need a graphics window only
then we will be able to draw something so let me write some basic code over here okay see when i included food.h in this file it
is showing include error this is because our c plus intellisense is not able to find this
header file so we will have to explicitly add this include folder to the include path of our
c plus extension properties so to do this just hover your mouse on this line and you will see
this pop-up click on this quick fix by the way if you don't see this pop-up then you can use the
shortcut control plus period or dot key whatever you call it and now you can see this first option
add to include perth click on it and it's done now see it is not showing any error so this part is also complete
now let me quickly go through it this part is for creating the graphics window
this will print some text in the terminal just to show you that our main function is executed
then i have called this function which is written in this file over here after that this gatech will
hold the program execution until you press any key and then this close graph is
for closing the graphics window okay see we have included foo dot h in main dot
cpp file and also it is included in foo dot cpp file so when we will compile our program
this same header file will be encountered two times and that is why we have written this
header card code hope it is more clear to you now okay one more thing here we
have created a module folder and we have a source file in it but our make
file don't know about this module folder so we will have to add this folder
location in our make file so open make file and now over here just after src we have to
write the location of our module folder related to the root folder of our project so give a blank
space and write src then a forward slash module now save this file and we are done so finally we can compile
our project so go to terminal run build task you can also
use this shortcut ctrl shift b so it is compiled and now you can see that the executable file is in our output
folder now we need a terminal to run it okay so currently we are in the root directory
of our project we will have to move to the output directory to run this executable file so write
cd output and hit enter now we are in the output directory so to run this main.exe file write
dot then a forward slash main and now hit enter so it is working now see we have got
this terminal output that we have written here in our main function and in our
graphics window this thing is drawn by the font function which we have written
in this file over here now you may ask if there is any shortcut method for both compiling
and running our project because this method takes a little bit of extra effort and also
this run code button can only run a single file and not a complete project so i will tell
you about this a bit later but before that we have to set up something which is more important in
project development and that is the debugger tools so for those who don't know about dewiver
it is basically a software for testing and figuring out problems in your project
now for setting your debugger tool open this launch.json file which
is inside this dot vs folder here look for this windows attribute now
here we have to give the path of our debugger so open your explorer and
go to c drive tdmgcc32 bin now copy this location now return back to launch.json
file and paste it over here see we are getting some error
because of this backward slash you have to change this to forward
slash so let's do this quickly now go back to explorer see our debugger name is gdb32.exe
so in our launch.json file just after this bin give a forward slash and write gdb32.exe now save this file okay now go to run and click
on this start debugging wait for some time so our debugger is running fine now now we can use debugger as a shortcut method for
compiling and running our project see for running debugger f5 is assigned as the
shortcut so when we will press f5 key our project will be compiled and run so let's do some changes
in our code and see if it works fine or not okay saving the file and now if i press f5 see it is compiling it is launched and we have got the updated output so this is it guys i hope you found this video
informative make sure you smash the subscribe button to watch more informative videos
like this and also hit the bell icon to get notification of latest videos updates thanks
for watching see you in the next video peace you
