search

3dmol / 3Dmol.js

WebGL accelerated JavaScript molecular graphics library
https://3dmol.org/
Other
785 stars 192 forks source link

falling back to pdb format 3Dmol-nojquery.js?2573:11429 Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. at Object.$3Dmol.base64ToArray #583

Closed ouyang-lang closed 2 years ago

ouyang-lang commented 2 years ago

my code import('jquery').then(($) => { console.log("jquery",$("#container").val()); import("3dmol/build/3Dmol-nojquery.js").then(($3Dmol) => { console.log("$3Dmol",$3Dmol); var viewer = $3Dmol.createViewer($("#container")); $3Dmol.download("pdb:4DM7",viewer,{},function(){ viewer.setBackgroundColor(0xffffffff); viewer.addArrow({ start: {x:-10.0, y:0.0, z:0.0}, end: {x:0.0, y:-10.0, z:0.0}, radius: 1.0, radiusRadio:1.0, mid:1.0, clickable:true, callback:function(){ this.color.setHex(0xFF0000FF); viewer.render( ); } }); viewer.render(); }); }) });

After I write the code according to the official website, it shows atOB coding error, I don't know how to solve it, why?

dkoes commented 2 years ago

What is an "atOB" coding error? Do you have jquery and 3dmol is appropriate places so that import can find them?

ouyang-lang commented 2 years ago

import('jquery').then(($) => { console.log("jquery",$("#container").val()); import("../../3dmol.js/build/3Dmol-nojquery.js").then(($3Dmol) => { console.log("$3Dmol",$3Dmol); let viewer = $3Dmol.createViewer('container'); console.log('$3Dmol.download',$3Dmol.download) $3Dmol.download('pdb:2nbd',viewer,{onemol: true,multimodel: true},function(m) { m.setStyle({'cartoon':{colorscheme:{prop:'ss',map:$3Dmol.ssColors.Jmol}}}); viewer.zoomTo(); viewer.render(callback); }); }) })

This is my code, is it wrong to say d3.download after import? Sorry, I am new, the error is “Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded”

dkoes commented 2 years ago

atob should be part of the window: https://developer.mozilla.org/en-US/docs/Web/API/atob

Can you verify that a simple standalone example works fine?

<div id="container" style="width: 100%; height: 100%"></div>
<script src="https://3dmol.org/build/3Dmol.js"></script>
<script type="module">
let viewer = $3Dmol.createViewer('container');
console.log('$3Dmol.download',$3Dmol.download)
$3Dmol.download('pdb:2nbd',viewer,{onemol: true,multimodel: true},function(m) {
    m.setStyle({'cartoon':{colorscheme:{prop:'ss',map:$3Dmol.ssColors.Jmol}}});
    viewer.zoomTo();
    viewer.render();
});
</script>
ouyang-lang commented 2 years ago

Hello, can't, and open the link to show 404, error: DevTools failed to load SourceMap: Could not load content for https://3dmol.csb.pitt.edu/build/netcdfjs.js.map: HTTP error: status code 404,

dkoes commented 2 years ago

can't what? What link? source maps aren't required - that message can be ignored.

ouyang-lang commented 2 years ago

Hello, I just tested it. It can be used normally when I directly introduce it into the Script of HTML page, but it always displays an error in the page of VUE format:

atob' on 'Window': The string to be decoded is not correctly encoded. at Object.$3Dmol.base64ToArray

dkoes commented 2 years ago

And why is it trying to base64decode? You are fetching text data. If you have a simple vue.js environment you can provide I would appreciate it since there are issues with it but I have no experience with it.

ouyang-lang commented 2 years ago

I'll try and let you know

neuro3d commented 2 years ago

Hi - all of a sudden as of like today, my displays using https://3dmol.org/build/3Dmol.js have not been working - is this a bug? I tried the example suggested by dkoes, which does work, but not other standard ones.

E.g. the following, which worked up til this morning, does not now.

<html>

<body>
    <script src="https://3Dmol.org/build/3Dmol-min.js" async></script>
    <div style="height: document.height; document.body.offsetWidth; position: relative; padding: 400px; 50px"
        class='viewer_3Dmoljs' data-pdb='4N8T' data-backgroundcolor='0xffffff' data-style='cartoon:color=spectrum'
        data-surface='opacity:.7;color:white'></div>
</body>

</html>
neuro3d commented 2 years ago

Just to update, however - it works on MOBILE (iOS) but not firefox, chrome, safari. Also works in PowerPoint using the webviewer add-in.

neuro3d commented 2 years ago

To doubly clarify, I wondered if it was related to this issue, which I suspect given the timing?

neuro3d commented 2 years ago

Oh actually, doesn't work on iOS either now.

dkoes commented 2 years ago

I'd moved autoload earlier in the page render process, but with async set, this meant that it was waiting for an event that had already happened. It should be fixed now. The inconsistent results you saw earlier were likely due to caching. Be sure to clear caches before testing.

neuro3d commented 2 years ago

Thank you! Everything works now!