LiteMol icon indicating copy to clipboard operation
LiteMol copied to clipboard

Published 20 hours ago • verified publisher icon dsehnal

Open local pdb files in LiteMol

Open Birch78 opened this issue 6 years ago • 9 comments

I am a complete novice in LiteMol so sorry for this "stupid" question. I want a LiteMol viewer on my hompage and used the example here (http://embed.plnkr.co/looflQ9owiGW0m9bh0fF/). But I have one major issue:

  1. No molecule is loaded in the viewer, and more importantly
  2. If i have my pdb file located in a folder how do I load this specific pdb file in the viewer?

Thanks in advance.

My code is:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <!-- 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 src="script.js"></script>
  </head>

  <body>
    <h3>LiteMol Component Demo</h3>
    
    <div class="view3d">
      <pdb-lite-mol id="litemol_1cbs" pdb-id="'1aqd'" hide-controls="true"></pdb-lite-mol>
    </div>
    
  </body>

</html>

Birch78 avatar Mar 21 '18 22:03 Birch78

Hi

Could you please check and share if there are any console error logs? as the example you are referring to is working fine I couldn't do any debugging on my side.

Just for your information, the LiteMol viewer implementation you are using is an Angular js component wrapper for LiteMol. You'll need a Local web server in order to get the example working on your local browser. Here is how you can set up a node js simple http server on your machine - http-server

To view your own files in the LiteMol component, you'll have to host them and provide the file path by setting the 'source-url' attribute. You can find the information about all the available attributes on the PDB Component Library documentation page here

mandarsd avatar Mar 22 '18 13:03 mandarsd

Sorry I have fixed the links

mandarsd avatar Mar 22 '18 17:03 mandarsd

Hi Mandarsd

I got everything working fine, except the local pdb file. I have the pdb in a folder uploaded together with the rest of my website files. Could you PLEASE show me how I provide the file path by setting the 'source-url' attribute?

THANKS A LOT

Birch78 avatar Mar 22 '18 21:03 Birch78

Here is the working demo to render pdb using 'source-url' attribute

source-url demo

Regarding the icons, I see you copied the library css and js files. css file has icon-fonts included and those files are missing on your local :) You can use the pdbe css url like cdn in your app, which should resolve the problem or download font files from here

mandarsd avatar Mar 22 '18 21:03 mandarsd

I am so sorry that I am such a BEGINNER. So how do i link to a homemade pdb file located in for instance the css library?

Thank you so much for all your help

Birch78 avatar Mar 22 '18 22:03 Birch78

Just add the complete path of your pdb file in the source-url attribute

For example : source-url='https://www.your_website.com/SOME_FOLDER/PDB_FILENAME"

mandarsd avatar Mar 22 '18 22:03 mandarsd

Hi again

Thanks a lot for helping me out. I am still unable to make this work. I am using: source-url="https://www.epsdatabase.com/litemol_js/1dv9.pdb" but without luck...

Birch78 avatar Mar 22 '18 22:03 Birch78

If you want to run a local pdb file, you should open a server, such as http-server, after setting up the server, set source-url = "http://localhost/.../a.pdb" Run it. The question about setting the source-url can be seen in the Hide attribute / parameter details at https://www.ebi.ac.uk/pdbe/pdb-component-library/doc.html#a_LiteMol. good luck

ye1002551506 avatar Feb 27 '19 07:02 ye1002551506

Hi,

regarding the URL https://www.epsdatabase.com/litemol_js/1dv9.pdb , there are these potential problems which prevent the access to this file:

  • your HTTPS does not work as it should (probably a bad certificate).
  • the server does not support cross origin requests (CORS, i.e. lacks the Access-Control-Allow-Origin: * header). This means that if you access the data from a different domain, the JavaScript is unable to download the file.

David

dsehnal avatar Feb 27 '19 18:02 dsehnal