Week 8: (Actually) Making the Web App

Hello everyone, and welcome back to my blog. Today, I’ll be continuing with the next step of the project, which is to implement the algorithm into a web app that will allow users to experiment with simulations.

This week, I’ve implemented a simple web app that will allow itself to easily be expanded into a fully functional app with versatile configurations for simulating a wide variety of systems.

Hosting

I’m talking about hosting first just to get it out of the way because it’s not really that important. I’m using Heroku to host the entire project, but for development purposes, I’m going to be testing everything on my local machine before putting it onto the production server.

Minimalistic Frontend

The frontend of the web app is the part that interacts with the users. In this case, I’ve made a simple webpage that allows the user to configure and run EM field simulations from their browser. As I’ve mentioned last week, the entire webpage is written in pure vanilla HTML/JS. One of the problems with not choosing a more complex framework such as ReactJS is that my webpage ends up with less aesthetic appeal than I would’ve liked (but it’s okay). 

Below is an early version of the website. I started by implementing one button to run a default simulation and an empty configuration form that I would later fill in. 

Later, I filled the configuration form with some simple attributes such as the dimensions and maximum timesteps of the simulation. The result is shown below.

The code for the config form is also quite simple. All I had to do was look up some documentation for the HTML input element and I ended up with a nice looking form for my webpage.

(Not so minimalistic) Backend

Now that I’ve coded the frontend, it’s time to make all the pieces fit together by connecting it to my backend server where the algorithm is actually run. The backend implementation is significantly more challenging than the frontend, so I’ll talk more in detail about it. 

The server communicates with the browser through exchanging HTTP requests. Essentially, the browser sends a request to the server to retrieve or modify information stored on the server. The server then processes the request and determines the correct response, which is then sent back to the browser.

Thus, the first logical step to constructing our backend would be to allow it to process incoming HTTP requests. Thankfully, I’m using the Django framework which has a built-in system for conveniently processing requests and generating responses. When a request comes to an address on the server, Django uses the request URL to route it to essentially what is a specific Python function that generates a response to the request. For instance, here is the function to which the “/sim” URL is routed to. The below function is responsible for running simulations on the server when the frontend sends a POST request to the server with the given configuration in the request body.

Of course, once we’ve set up the backend to receive requests, we also set up the frontend to send requests. I’ve implemented a JS function that runs when the “run” button is clicked which sends a POST request with the correct formatting to the server.

When the simulation is finished running on the server, the server returns a GIF of the visualized simulation back to the frontend to display. 

To summarize, the user interacts with the frontend by configuring the simulation and pressing the run button. When the run button is pressed, an HTTP request is sent to the server, which upon receiving the request runs the simulation with the given configuration. The result of the simulation is then returned to the frontend and displayed back to the user.

Conclusion

If you made it this far, we’re almost at the end but not there yet. There’s still a lot more work to do before we have our final product but the end is in sight! Next week, I’ll finish up the web app and deploy it to Heroku, as well as talk about the troubles I’ve encountered when coding. Thank you and see you next week!

Sources:

https://eecs.wsu.edu/~schneidj/ufdtd/

https://github.com/flaport/fdtd?tab=readme-ov-file

https://engineering.purdue.edu/wcchew/ece604s20/Lecture%20Notes/Lect37.pdf

https://ijariie.com/AdminUploadPdf/TFSF_boundary_implementation_in_the_FDTD_Algorithm_for_the_Study_of_the_Propagation_of_Electromagnetic_Waves_in_Vacuum_ijariie10883.pdf

(Next: Finishing the Web App)