Help with embedding

[aumics]

Hello,

First off -- what an awesome tool, thanks for making this!

Disclaimer: I'm rather new to JS.

1. the options of %width/height doesn't seem to work; any value blows up the embedding to full width
2. I'm struggling to customize the options for embedding a 3D view of simple molecules. For example, trying to turn off hydrogens and I can't seem to get it to work. I'll appreciate a pointer to what I'm doing wrong.

<h1>Not Aspirin</h1>
<p>Blah blah</p>
<div style="width:600px; height:300px; border:5px; border-color:#333;">
  <span>qwerty</span>
  <div id="icn3dwrap"></div>
</div>

<script type="text/javascript">
  $( document ).ready(function() {
        var options = {};
        options['surface'] = 'molecular surface';
        // setStyle(hideHydrogens);

        //Options are available at: https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#DisplayOptions
        //options['proteins'] = 'sphere';

        var cfg = {
            divid: 'icn3dwrap',
            width: '50%',
            height: '50%',
            resize: true,
            rotate: 'right',
            mobilemenu: true,
            showcommand: true,
//            showtitle: true,
        };
        cfg['cid'] = '6106';
        if(Object.keys(options).length > 0) cfg['options'] = options;

        var icn3dui = new iCn3DUI(cfg);

        //communicate with the 3D viewer with chained functions
        $.when(icn3dui.show3DStructure()).then(function() {
          icn3dui.setOption('background','white');
          // icn3dui.setOption('opacity','0.2');
          icn3dui.setStyle('hideHydrogens')
          // icn3dui.addLabel('abcdef',0,0,0,50)
             // icn3dui.setOption('color', 'cyan');
        });
  });
</script>
  </body>

[jiywang3]

Thanks for reporting the problem of width and height. It's fixed in the recent release.

You code looks good. You just need to add the libraries at the top of your code:

<script src="https://www.ncbi.nlm.nih.gov/Structure/icn3d/lib/jquery.min.js"></script> <script src="https://www.ncbi.nlm.nih.gov/Structure/icn3d/lib/jquery-ui.min.js"></script> <script src="https://www.ncbi.nlm.nih.gov/Structure/icn3d/lib/three.min.js"></script> <script src="https://test.ncbi.nlm.nih.gov/Structure/icn3d2/icn3d_full_ui.min.js"></script>

Let me know if you see any other problems.