Organic Chemistry web based application and synthesis search engine

[Sensei]

What I meant,

on PC when you hover atom, without clicking, there is displayed popup window, with atom details, where you can click and edit stuff e.g. change charge.

on smartphone there is no hover, so pop up window does not show up, so user cannot edit stuff.

on smartphone you can just click on atom, and wedge-dash notation is changed.

 

I would try different approach:

LMB on atom selects atom, and show popup window.

LMB on bond to change wedge-dash notation or select bond (and make tools operating on one or more selected bonds).

LMB neither atom nor bond, and together with movement (dragging), to pan.

LMB with two fingers to zoom-in and zoom-out. Detection how many fingers clicked on HTML element you can do using this API:

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

Zoom in/out on PC you can implement using wheel event.

https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent

When some atom is selected toolbox activates operations on it. e.g. delete, edit.

When some bond is selected toolbox activates operations on it. e.g. delete, edit.

You will also need select all, select none, toggle selection tools.

 

BTW, I have huge issues with panning molecule view. i.e. entire page is scrolled top/bottom instead..

 

[mgperson2002]

Right, so definitely not all functionality is available yet on smartphone, but the subset of the functionality necessary for designing and editting a molecule IS there on the smartphone. If there is any confusion about HOW to specifically edit the molecule, there ARE tutorials available (the question icon in the upper right of the workspace). If you are able to, would appreciate any feedback on the tutorial itself.

The approach of also adding the pop-up window on the smart phone CERTAINLY is something to be considered. It would definitely introduce all the atom details and click and change to edit modality to the smaller screens. One pretty import consideration, though, is that a small screen often does not have the pixel real estate to both include a reasonably sized workpsace AND the aforementioned pop-up window. My goal for small screen design was to prioritize plenty of screen real estate for the workspace view and editting of the molecule while still offering full editting functionality. Adding the pop-up window was a secondary consideration. That said, I am certainly amenable to suggestions for how that pop up window might work. I'm hesistant to put that pop up window in a place where the user would have to scroll to find it, because I'd like to keep the entire experience of molecule editting contained within the screen size. I'm also a bit hesitant to put in the same pop up style of view/editting, because that would require the user to switch back and forth between viewing the entire molecule AND viewing specific info on one atom. 

If you have a suggestion for how to maintain the simplicity and practicality of viewing the entire molecule at once while still viewing the detail of an individual atom and being able to edit that atom on a small screen, I am all ears!

As for your interface suggestions,

LMB instead of hover to select atom: This is interesting. I am open to more feedback of if the volume of users prefer this method. 

LMB to change bond: Also open to volume of feedback on this. In my mind I wanted to make the editting of the bond type (single, double, triple) or the orientation of the bond (dashed/wedge) to be simple enough to be done WITHOUT the popup window. 

LMB to pan: This is actually what currently happens. 

Using the two finger zoom in zoom out as opposed to using the + and - buttons is certainly possible.

I am interested in your suggested of select all/select none as well. This could certainly be a future feature to implement.

Finally, re: panning molecule view and the scroll top/bottom, do you mean how the molecule workspace is layed out on a small screen? Do you have any other suggestions or preferences for accomplishing this?

Keep the feedback coming. Goal is to make this eventually the ultimate o-chem tool, lofty a goal as that is.

 

 

[mgperson2002]

A quick update. Hopefully some of the panning issues will be resolved by a new "auto zoom out" feature that will detect if the molecule exceeds the boundaries of the workspace upon its loading. https://www.organicchemmaster.com/MolGen/Molecules/remdesivir?options=AtomAbbrev Remdesivir, among other more complex molecules, will be more easily seen.

Thanks again for the feedback. My goal is to one day work with a large team to build this app out to be as useful as it can be to chemistry students and chemists.

[mgperson2002]

Hi again all. Another quick update. Two new reactions are now supported by the framework of the application:

The Benzoin condensation reaction which can be viewed here: https://www.organicchemmaster.com/Molgen/Reaction/benzaldehyde/benzoin?options=Calc,Reac and here: https://www.organicchemmaster.com/Reaction/Rule/031

As well as the Dieckmann condensation reaction which can be viewed here: https://tinyurl.com/5cet2mpv and here: https://tinyurl.com/4tam8kwa

In each of the two reactions the first link provides the parameters for a synthesis pathway search (going from molecule A to molecule B) which utilizes that reaction and the second link provides a description of the reaction and a sandbox tool to predict the product of the reaction with a given reactant molecule.

I am still looking to create a large team to build this app out to be as useful as possible to both students and chemists. Thanks.

[mgperson2002]

Pinch in and pinch out gestures (using two fingers) are now supported for zoom in and zoom out effects of the molecule. A good example on which to test the new support is https://organicchemmaster.com/MolGen/Molecules/remdesivir?Options=AtomAbbrev

Write up of the update is at: http://molecularpathwaygenerator.blogspot.com/2021/09/introduction-of-pinch-zoom-controls-for.html

[mgperson2002]

For anyone interested: There's now an OChemdle game up on the site, with a tournament starting Oct 1. https://organicchemmaster.com/chemdle/signup