Making an Online Editor To Illustrate Quantum Energy Level Diagrams

Hi all,

Lately I’ve been thinking a lot about how to make my research less painful. I think there are a lot of concepts or ideas in physics that would be well suited to a proper GUI or editor. In this post I want to walk through my first stab at making a web based tool for web physics simulations.

Sketching out the design

I think a good first step would be to flush out my idea. Since this project is all about building a GUI, I think it would be good to sketch out how this thing will look and what sort of things you can do with it.

• Tool Window: Holds the…tools. These should act as buttons I think.
• Diagram Workspace: Needs to real time render user changes. I’d also like to expose it to be controlled by other web apps.
• Edit Energy Levels: I’m torn about whether it should just let the user draw willy nilly, or if the user needs to first declare what atoms/molecules are available, what orbitals are defined, and finally what states are connected…sure I’ll go with what I just said.
  • Add System: Adds an atom or molecule or any other “system.” You pick a name and should be able to add orbitals/states
  • Add State: Little salt icon is now your cursor. Click on a system and a state appears at the location you clicked. Text fields will be highlighted for you to enter name.
• Add Particle: Emoji baby (maybe baby with stork?) icon is now your cursor. Click on a state to choose where the new particle goes. Once you click, you get a dialog letting you choose particle properties like (spin, icon to use, charge? …)
• Base Canvas: I’d like to make this tool something you can embed in an iframe, so yeah. I guess let’s try to keep in mind that this tool should be in its own little container.

Update July 5 2022

Some not so great choices were made by me last month, soooo I am now just hopping on for the first time in a while

Change of Development Choices

Oddly enough I don’t want to go with babylonjs at all. It is a bit too bloated. Right now I think I want to spend a little time on building a drag and drop interactive applet from scratch.

Thus the gameplan is probably something like

• look for mozilla dev tutorials for interactive web apps
• purchase https://wizardzines.com/zines/css/ and look at the accompanying examples
• Follow a nice html + css + javascript workflow
• maybe setup a flask server to do dev work or deploy

Void the below plan

## Choosing a tool

I'm not going to lie when I say the burden of choice is getting to me. There are a lot of really cool tools to make these web based interactive applets. I'm sure whatever I pick, there are going to be like 50 more that were better suited for my needs....._ugh_. I guess I should just pick one and go with it for now. 

I think I’ll build this applet in using [babylonjs](https://www.babylonjs.com).  The main reason being that they have a nice [playground feature](https://doc.babylonjs.com/toolsAndResources/tools/playground). 
## First steps in developing the app
I don’t know if I should start here, but I’ll do it anyways. Let’s try to get a rough GUI made. [Here are the docs for babylonjs’s GUI stuff.](https://doc.babylonjs.com/divingDeeper/gui)
After reading a bit of the docs, I found some (_hopefully_) relavant info. 
- (there is a GUI editor)[https://doc.babylonjs.com/toolsAndResources/tools/guiEditor]
- [If I run into troupble, I can watch this youtube video that takes an overview of the GUI editor.]
- (https://youtu.be/9VXgZ_af-nE)
- The responsiviness and resolution panel will be important to play around with since I wanna make this embeddable. 
- Here are the [supported GUI controls in the editor](https://doc.babylonjs.com/toolsAndResources/tools/guiEditor#supported-controls)