Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chemistry - embeddable molviewer widget #10

Open
psychemedia opened this issue Nov 6, 2019 · 1 comment

Comments

@psychemedia
Copy link
Owner

@psychemedia psychemedia commented Nov 6, 2019

A simple molecule viewer, given a form with molecule cids as values, we can select which molecule to render:

html2 = '''
<select style="width: 220px; " id="molt" name="category">

    <option value="cid:6323">typ1</option>
    <option value="cid:10485">typ2</option>
</select>
<div class="output_subarea output_html rendered_html">sdsd<div id="3dmolviewer_1573080341120505623" style="position: relative; width: 300px; height: 300px">
        fdd
        <canvas id="undefined" width="600" height="600" style="width: 300px; height: 300px; padding: 0px; position: absolute; top: 0px; left: 0px; z-index: 0;"></canvas></div>
<script>


  $3Dmolpromise = loadScriptAsync('https://3dmol.csb.pitt.edu/build/3Dmol.js');

var viewer_15730803411205056 = null;
var warn = document.getElementById("3dmolwarning_1573080341120505623");
if(warn) {
    warn.parentNode.removeChild(warn);
}
$3Dmolpromise.then(function() {
viewer_1573080341120505623 = $3Dmol.createViewer($("#3dmolviewer_1573080341120505623"),{backgroundColor:"white"});
$3Dmol.download("cid:6323", viewer_1573080341120505623, {}, function() {
viewer_1573080341120505623.setStyle({"stick": {"radius": 0.1}, "sphere": {"scale": 0.25}});
viewer_1573080341120505623.render();
})
});

$('#molt').change(function() {

  var selectedClass = $(this).val();
  $3Dmol.download(selectedClass, viewer_1573080341120505623, {}, function() {
viewer_1573080341120505623.setStyle({"stick": {"radius": 0.1}, "sphere": {"scale": 0.25}});
viewer_1573080341120505623.render();
});
});
</script></div>'''

from IPython.display import HTML
HTML(html2)

Code from cribbing how the single molecule view is rendered and this jquery / form example.

@psychemedia

This comment has been minimized.

Copy link
Owner Author

@psychemedia psychemedia commented Nov 8, 2019

To further push this into JS domain, we can get a CID from a name. For example:

https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/bromomethane/cids/JSON

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.