Problems loading my own pdb file in LiteMol

Birch78 commented 6 years ago

I am working on implementing the molecular viewer "LiteMol" on my html webpage. The plugin is working great when loading a pdb file from a predefined library (see second code example below), but I want to load my own pdb file located in a "litemol_js" folder (fist code example below), but it is not working. The viewer is empty. Please help???

Here is my code:

<!DOCTYPE html>
<html>

  <head>

    <!-- Complied & minified library css -->
    <link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />

    <!-- Dependencey scripts (these can be skipped if already included in page) -->
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

    <!-- Complied & minified library JS -->
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>

    <script>
      angular.element(document).ready(function () {
          angular.bootstrap(document, ['pdb.component.library']);
      });
    </script>
    <style>
      .view3d {
        height:400px;
        width:400px;
        position:relative;
      }
    </style>
  </head>

  <body>
    <h3>LiteMol Component Demo</h3>

    <div class="view3d">
      <pdb-lite-mol pdb-id="''" source-url="https://www.epsdatabase.com/litemol_js/1dv9.pdb" source-format="pdb" hide-controls="true"></pdb-lite-mol>
    </div>

  </body>

</html>

And here is the working code when i load from the predefined library.

<!DOCTYPE html>
<html>

  <head>

    <!-- Complied & minified library css -->
    <link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />

    <!-- Dependencey scripts (these can be skipped if already included in page) -->
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

    <!-- Complied & minified library JS -->
    <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>

    <script>
      angular.element(document).ready(function () {
          angular.bootstrap(document, ['pdb.component.library']);
      });
    </script>
    <style>
      .view3d {
        height:400px;
        width:400px;
        position:relative;
      }
    </style>
  </head>

  <body>
    <h3>LiteMol Component Demo</h3>

    <div class="view3d">
      <pdb-lite-mol pdb-id="''" source-url="https://www.ebi.ac.uk/pdbe/entry-files/pdb1cbs.ent" source-format="pdb" hide-controls="true"></pdb-lite-mol>
    </div>

  </body>

</html>

dsehnal commented 6 years ago

Maybe the problem is that you use https:// in your url but your web does not support that?

ye1002551506 commented 5 years ago

I have the same question. I found that different pdb file formats will affect the presentation results.

When I run the local DhaA80_0001.pdb file, I can display the result, and the file looks like this.

HEADER UNKNOWN dhaa ATOM 1 N ILE A 4 -8.754 -16.132 -8.009 1.00 0.00 N
ATOM 2 HG22 ILE A 4 -6.941 -19.752 -7.067 1.00 0.00 H
ATOM 3 CG1 ILE A 4 -9.791 -18.984 -7.565 1.00 0.00 C
ATOM 4 H2 ILE A 4 -8.294 -15.261 -8.230 1.00 0.00 H
ATOM 5 H1 ILE A 4 -9.301 -16.392 -8.817 1.00 0.00 H
ATOM 6 C ILE A 4 -6.494 -17.081 -8.649 1.00 0.00 C
ATOM 7 HA ILE A 4 -7.450 -17.195 -6.778 1.00 0.00 H
My code is like this

<html>
<head>
        <!-- Complied & minified library css -->
        <link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />
        <!-- Dependencey scripts (these can be skipped if already included in page) -->
        <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
        <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

        <!-- Complied & minified library JS -->
        <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>
</head>
<body>
    <script> 

        (function () {
        'use strict';
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['pdb.component.library']);
        });
        }());

    </script>

  <pdb-lite-mol pdb-id="'1'"  source-url="http://localhost:8080/DhaA80_0001.pdb" source-format="pdb" ></pdb-lite-mol>

</body>
</html>

2.When I run the local tun_cl_001_1.pdb file, it can't be displayed,and the file looks like this.

ATOM 1 H FIL T 1 4.585 -1.820 -2.756 1.41
ATOM 2 H FIL T 1 3.963 -2.073 -2.031 1.23
CONECT 1 2 ATOM 3 H FIL T 1 3.116 -2.498 -1.804 1.19
CONECT 2 3 ATOM 4 H FIL T 1 2.356 -2.813 -1.472 1.36
CONECT 3 4 ATOM 5 H FIL T 1 1.541 -2.309 -1.443 1.32
CONECT 4 5 ATOM 6 H FIL T 1 0.822 -2.077 -0.795 1.48
CONECT 5 6 ATOM 7 H FIL T 1 0.150 -1.739 -0.173 1.82
CONECT 6 7
...

My code is like this

<!DOCTYPE html>
<html>
<head>
            <!-- Complied & minified library css -->
        <link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />

        <!-- Dependencey scripts (these can be skipped if already included in page) -->
        <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
        <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

        <!-- Complied & minified library JS -->
        <script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>
</head>
<body>
    <script> 

        (function () {
        'use strict';
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['pdb.component.library']);
        });
        }());
    </script>
   <pdb-lite-mol pdb-id="'1'"  source-url="http://localhost:8080/tun_cl_001_1.pdb" source-format="pdb" ></pdb-lite-mol>

</body>
</html>

Who is experiencing this problem? How to solve it? Thank you in advance, God.

dsehnal / LiteMol

Problems loading my own pdb file in LiteMol #29