Open Source GUI for Teaching and

Implementing Computational Physics

Project Report - IAPT NCICP 2024

Problem Statement

There is a significant lack of emphasis on teaching computational physics to

undergraduate and graduate students pursuing courses in physics or related disciplines across
different colleges and universities in India. The prominent reasons behind this include an absence
of trained faculties in computational physics and a lack of resources required for assistance in
classroom teaching.

This deficiency results in students lacking essential computational skills for

understanding complex physical concepts. Additionally, programming languages such as C++
are a powerhouse for incorporating visualization of the dynamics of multiple physical
phenomena into the learning process. An ignorant attitude towards teaching Computational
Physics skills leads to a less engaging and exciting learning experience.

Solution (in brief)

We aim to build a centralized system that:
-​ Studies several physical systems using several numerical methods
-​ Teaches students the essentials of computational physics
Innovation Incorporated
Usually, students are taught to write programs for one physical problem using a single numerical
method at a time. What if we wanted to compare the results of two methods to deduce which is
more accurate and efficient, without compiling the two different programs separately?
The primary innovation of our project lies in its integrated system design, as it eliminates the
necessity of executing distinct programs utilizing individual numerical methodologies.
Hence, we are developing an open-source GUI that serves as a one-stop solution for mastering
computational physics.

How To Use The Application?

This is the landing page of the application. In the top section, you can learn about its purpose and
features.
This is the bottom section of the landing page. Here you can learn how to use the application.

This is what is first visible when we open the Let’s Learn Page.
Clicking on the Select Program drop-down menu, we can choose from several physical problems
we wish to study.

After a program is selected, two things happen. First, the View Program Documentation And
View Program Code buttons appear to the right and bottom, respectively. Second, all the text
fields of the program, asking the user to input various parameters, become visible.
Upon clicking the View Program Documentation button, a PDF file opens up. It contains the
theory of the physical problem as well as the algorithm used to write its C++ program.

Clicking on the Select Method drop-down menu, we can choose from the three numerical
methods we wish to use for studying the problem.
After a method is selected, a View Method Documentation button appears on the right.

Clicking the View Method Documentation button, a PDF file opens up. It details the theory of
the numerical method as well as the algorithm used to write its C++ program.
The user inputs all the values and clicks on the Run button. The C++ program executes in the
background and the result is displayed: a graph plotted on a Gnuplot window.

Clicking the View program Code button, a new section appears that contains the incomplete code
of the program filled with exercises for the user to practice.
The entire code can be copied by clicking the Clipboard button at the top-right.

If an internet connection is available, clicking the Edit Online: OnlineGDB button opens up an
external link to the OnlineGDB compiler. The user can paste the copied code here, complete the
exercises, and test the results.
If an internet connection isn’t available, clicking the Edit Offline: CodeBlocks button opens up
the CodeBlocks application. The user can paste the copied code here, complete the exercises, and
test the results.

Now that we know how the application looks and what it does, it’s time to learn how it was
made. So, let’s dive right into it.

Technologies Used
The following languages were used to develop the application:
1.​ C++
To write all the programs that we ultimately intend to teach.
2.​ Django
To build the web application.
3.​ HTML-CSS-JavaScript-Bootstrap
To build the UI i.e. the front end portion.
Writing C++ Programs
First things first. We need our C++ programs. As it happens, there are two kinds of them:
1.​ For Teaching
2.​ For Application
What’s the difference and why? Let’s understand.

For Teaching
These are in a sense ‘normal’ codes. They are self-equipped to run on the terminal. They follow
the following basic structure:
1.​ Header Files
2.​ Class Declaration
3.​ Functions and Variables declaration for the class
4.​ Function definitions for the class
-​ Input Function to receive all the inputs
-​ Calculation Function(s) to compute the required quantities
-​ Output Function to display the results
5.​ Main function that uses an object to call the functions of the class

Since C++ is an object-oriented language, working with classes is easy and convenient. This is
why we use the class-based structure.

For Application
The ‘Normal’ codes can run only one problem using one numerical method at a time. We want to
offer the users the choice of running any program and any numerical method of their choice. So
we need to integrate everything into one file. Here’s how we did it:

1.​ Instead of writing down tailor-made algorithms for specific numerical techniques in
specific problems, we create separate header files for them so they can be employed in
 solving any problem. All .cpp program files are converted to .hpp header files. New .hpp
files for various numerical methods, including their general definitions and dummy
variables, are created.
2.​ Next, a master header file called ‘master.hpp’ is created where we include all the header
files of our programs and numerical methods. An algorithm (using if-else statements) is
written that allows users to choose any program of their choice. Each ‘if’ statement
represents one specific program. The code we wrote inside the main function of
individual programs is now inside these ‘if’ statements.
3.​ Until now, we have created only header files. But we need a cpp file to run our program.
So we created a ‘main.cpp’ file. Here we include the master header file and write the
main function code i.e. we create an object that uses the function of the master class from
the master.hpp.

Code modifications:
When coupled with the UI, the codes for individual programs are modified as follows:

1.​ The ‘cout’ commands are no longer needed since they are displayed as text on the UI.
The ‘cin’ commands are also not required since all the inputs are received from UI. All
the inputs are passed as parameters to the respective functions.
2.​ The ‘cout’ commands that display the results after computation are replaced by the
‘return’ commands.
3.​ With all the ‘cin’ and ‘cout’ gone, the ‘iostream’ header file is no longer needed.
4.​ An algorithm that includes the Gnuplot commands has been included in the code to plot
the computed data stored in the .txt files. This way we don’t have to write Gnuplot
commands separately in the Gnuplot window.

Up to this point, all our work with C++ is done. The goal of integrating all programs and
methods under one framework has been achieved. What we have developed until now can be run
on a terminal window. Now we move on to how to build the web application.
How does the web application work? - Django
Explained
Django is a free, open-source, high-level Python web framework that encourages rapid
development and clean, pragmatic design. Django makes it easier to build better web apps more
quickly and with less code.

Here’s how Django works:

1.​ The browser requests the URL.
2.​ Django receives the URL, checks the urls.py file, and calls the view that matches the
URL.
3.​ The view, located in views.py, checks for relevant templates in the template folder.
4.​ The template contains HTML and Django tags and is fetched by the view.
5.​ The view returns the finished HTML content to the browser.

Here’s a flowchart to better grasp the functioning of our Django application:

urls.py Explained
Django provides a way to navigate around the different pages of a website using a file called
‘urls.py’. Inside a variable called ‘urlpatterns’, we define a list of URLs that ‘views.py’ can
access. For our application, we have defined the following URLs:

1.​ ‘home’
This is a blank URL i.e. the URL of the local server. It directs us to the Home Page of our
application

2.​ ‘gui’
This leads us to the main application page where we run all the programs.

3.​ ‘codeblocks’
 This additional URL opens up a CodeBlocks editor on the local system.

views.py Explained
A view is a request handler. It is a function or method that returns the relevant template and
content - based on the HTTP request from the user. The views are usually located in a file called
‘views.py’. We have created three functions that perform specific functions:

1.​ algorithms
This is the most important function upon which our integrated GUI works. It performs
the following operations:
1.​ Loads ‘gui.html’ template.
2.​ Accepts multiple parameters, but two important parameters to be considered are
‘prog_choice’ and ‘method_choice’, which help us to decide what program we
need to run.
3.​ Runs a function named ‘cpp_function’ that takes in all the parameters as
arguments and stores the output in a variable called ‘result’. This function acts as
a bridge that connects Django (Python) with our C++ programs.
4.​ Defines the context. Context is like a dictionary – it contains a list of values of all
the text fields in the UI, which are then used to render the frontend UI in the
template files.

2.​ homePage
Its sole purpose is to load the ‘home.html’ template.​

3.​ codeBlocks
It runs the CodeBlocks application on the local system.
Templates Explained
A template is a file with HTML code describing the layout of a web page and Django tags to add
logic. The templates are located in a folder named ‘templates’. We have created six templates for
our application:

1.​ home.html
It lays out the Home page.

2.​ gui.html
It lays out the Let’s Learn page where users interact with the UI application. So it is the
most important page.

3.​ Footer.html
It displays a footer section at the bottom of every page. It contains a message from the
developers.

4.​ app-steps.html
It includes a how-to section for using the application. It is displayed as a part of the Home
page.

5.​ script.html
It includes the Javascript code to perform various functions.

6.​ style.html
It includes the CSS code for styling all the pages.
Integrating C++ with Python
Our algorithms are written in C++ but our website stack uses Python. So, we found a way to call
C++ code from the Python code. We wrote a wrapper method around C++ and turned it into an
executable function that we can import in Python. For this, we used:

1.​ CMake​
CMake is cross-platform free and open-source software for build automation, testing,
packaging, and installation of software by using a compiler-independent method. CMake
is not a build system itself; it generates another system's build files. The entire C++ code
is wrapped up in a single function to which we can pass as many parameters as we want
from a Python function.

2.​ build_script.bat
build_script.bat file is a batch file that stores commands to be executed in a serial order.
We use it to automate the tasks for compiling C++ code and then converting it into a
format that could be used by Python with the help of CMake. In case the user is writing
code on Linux/Mac systems, we have added a shell script called build_script.sh, which
can be run on these systems.

By using the above tools, we have made sure that the tools we are using are cross-platform
and do not restrict anyone from using them.

UI (HTML-CSS-JavaScript-Bootstrap)
All the work at the back end is complete. Now we build our UI. Its main components are
explained below:
Home Page
It is the landing page of the application and consists of two sections.
-​ The first section introduces you to the purpose of the application and the features that it
offers.
-​ The next section details step-by-step how to use the application. The code for this is
included in a separate template named ‘app-steps.html’.

Let’s Learn Page

Here the main application is displayed. It contains a form that the user can interact with. After
filling out the form, the user clicks on the Run button and the results are displayed in the form of
alerts and graphs plotted on the Gnuplot window. Users can read the documentation of all the
programs and methods. Lastly, they can learn how to write code for these problems.

The conditions-based display logic on this page is accomplished via the Django template system
which uses variables, filters, and tags to perform certain functions.

style.html
As noted before, it includes the CSS code. CSS is used to define styles for your web pages,
including the design, layout, and variations in display for different devices and screen sizes.
It follows a class-based structure. Attributes are defined under each class and given specific
values. Elements of HTML pages can be stylized by calling particular classes.

script.html
This file includes the JavaScript code. JavaScript is a scripting or programming language that
allows you to implement complex features on web pages like dynamically updating content,
storing useful values inside variables, performing operations on pieces of text, and running code
in response to certain events occurring on a web page.
Most of our JavaScript code is based on the ‘getElementById’ method. It returns an element with
a specified value. Once an element is fetched this way, we can perform certain operations like
hiding/showing it on the page or opening a link (to documentation or a compiler).

How to run the application on your system?

Pre-Requisites
Before the user can run the application, a few things need to be set up:
1.​ Install Gnuplot
2.​ Install Python
3.​ Install C++
4.​ Install Microsoft Build Tools

Getting Started
The following instructions will help the user to get started with the project for the first time:

1.​ Open Command Prompt/Terminal and navigate to a path of your choice.

2.​ Run the following command to get the project code from GitHub: “git clone
https://github.com/samreetdhillon/IAPT.git”.
3.​ Run “cd IAPT”.
4.​ If you are using a Windows machine, then run the “setup.bat” command to set up the
project. For Linux/Mac machines, run the “source setup.sh” command to set up the
project.
Ongoing Work
1.​ Making of .exe (executable) file: The development of GUI is complete for now, but the
development of .exe (executable file) is still underway. After the .exe file is ready, users
can download the application from our GitHub repository, which contains all the
development details about this open-source UI.​
The application will give users a hassle-free way to interact with our GUI, as they don't
need to write any commands to set up the local server. After downloading the application,
they can directly immerse themselves in learning computational physics by completing
the exercises, reading documentation to learn how to solve them, and then running the
codes to see the results using Gnuplot.​

2.​ Incorporation of Gnuplot into UI: For this project, Gnuplot has been used to visualize
the results of all the problems under study. As soon as the user runs the program, a
Gnuplot window pops up and displays the result, but we are still in the process of
integrating Gnuplot into the UI so that instead of a window popping up, we get a plot that
is embedded into the UI. This integration will give the users easy access and a more
all-in-one package-type experience with the UI.

Future Prospects
1.​ Addition of Computational Physics problems according to the curriculum of different
state and central universities.
2.​ Addition of Computational Physics problems corresponding to different complex
physical phenomena.
3.​ Inclusion of animations in addition to graphs for better visualization of the results.
4.​ Integrating scientific libraries like GSL(GNU Scientific Library) into the package.
 5.​ Documentation and code of the problems will be available in multiple programming
languages, including C++, Python, Scilab, etc.
6.​ Integrating an Internet Forum into the GUI for the users to troubleshoot, interact amongst
themselves, with us, or post their thoughts about potential improvements in the GUI.

GitHub Link
The project is hosted on GitHub. Here’s the link:
https://github.com/samreetdhillon/IAPT

Authors
1.​ Amritanshu Thakur
Department of Physics,
Panjab University, Chandigarh
[email protected]
2.​ Samanpreet Singh Lang​
Department of Physics,
Panjab University, Chandigarh
[email protected]
3.​ Samreet Singh Dhillon​
Department of Physics,
Panjab University, Chandigarh
[email protected]