Problems loading my own pdb file in LiteMol #29

Birch78 · 2018-03-24T15:05:42Z

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>

The text was updated successfully, but these errors were encountered:

dsehnal · 2018-04-04T16:36:09Z

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

ye1002551506 · 2019-02-26T08:43:47Z

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.

ye1002551506 mentioned this issue Feb 28, 2019

Cartoons cannot be constructred from this model/selection #39

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problems loading my own pdb file in LiteMol #29

Problems loading my own pdb file in LiteMol #29

Birch78 commented Mar 24, 2018

dsehnal commented Apr 4, 2018

ye1002551506 commented Feb 26, 2019 •

edited

Loading

Problems loading my own pdb file in LiteMol #29

Problems loading my own pdb file in LiteMol #29

Comments

Birch78 commented Mar 24, 2018

dsehnal commented Apr 4, 2018

ye1002551506 commented Feb 26, 2019 • edited Loading

ye1002551506 commented Feb 26, 2019 •

edited

Loading