Properties Estimation: Draw 2D molecule with HTML5 program
2011.4.19
I strat to convert JAVA programs to HTML5. However, Web Edition limits are taken over. Atom is used, C, N, O, S only. Can not handle aromatic (just recognized as ring C = C).The maximum number of heavy atoms is 20. (The commercial version, F, Cl, Br, I, P, B, Si can be used. Handle the aromatic, heavy atoms can use up to 120.) If I get a lot of requests, I may release iPad / iPhone / iPod Touch full functionality version.
Start up screen.
The light blue part is called the canvas in HTML5. The actual drawing is done on this part. Other buttons, radio buttons, text fields, text areas previously existed as a form object. CSS control position, size, color and appearance in HTML5. Therefore, if your browser does not support HTML5, you can not see the canvas. And position of the parts looks a mess. Above picture, using a carbon atom, Draw mode is selected. Then, press (finger touch) the mouse inside the canvas and drag (without releasing the mouse button or finger) the position, you will see the Atom and bond.
Bond length is fixed. If you change the position (with hold down mouse button), the bond line move in 15 degree increments. When lelease, the bond and other atom will appear.
(Without pushing the mouse button) and place your mouse over this atom, the red circle will appear. (But, of course, with iPad, nothing happens. Position can be detected without pushing the mouse button, but touch panel can not be found where finger locate.)
Mouse button is pressed at that position, you can extend the molecule.
You can draw the other position.
If you set cursor right molecule left Carbon (red circle will appear) and push the mouse button, drag the mouse to the left molecule right carbon (red circle will appear again),
Bond is created where you release the button. In this case, the bond length is ignored.
Press the mouse on a atom,
マウスを押したまま他の原子の上に行くと赤丸が現れる。
red circle appears on the other atoms,
Select Erase mode and set cursur to one atom (red circle appear) press the button, and release, (iPad will not appear the red circle shown below)
Then the atom is cleared.
Point your mouse at the midpoint of the bond, two red circle appears. Press and release the mouse with erase mode,
One bond is cleared.
Select Move mode, press the mouse at the the other area of canvas (not exist atoms nor bond), hold and drag the mouse, all the molecule translate with same amount mouse move.
With Move mode, set cursor on one atom (red circle will appear) then push mouse and drag, then the only atom will move.
Select Draw Mode, and select the oxygen atom. Set cursor to one atom (res circle appear) , then push mouse,
and release, carbon atom is replaced with oxtgen atom.
The atom are held after drawing.
Once the molecule is done, push calculation button. Molecules are split into its constituent functional groups, and calculate certain properties.
iPhone/iPod touch version (Mobile safari)
Old iOS will not work this program. My iPod touch is v3.1 and fail to run.
Atoms and the mode switch button located below. The information that appears on the screen. Draw the molecule as before, press the button of oxygen.
When touching on the carbon and replaced to oxygen.
if you push i button, program break molecule to functional groups and calculate properties,
and change to background view that have calculation result. You can clear molecule here. iAfter seeing the results, press Done to return to the previous screen.
Please try to understand with play in real.
