Open local pdb files in LiteMol

Birch78 commented 6 years ago

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>

mandarsd commented 6 years ago

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 commented 6 years ago

Sorry I have fixed the links

Birch78 commented 6 years ago

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

mandarsd commented 6 years ago

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

Birch78 commented 6 years ago

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

mandarsd commented 6 years ago

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"

Birch78 commented 6 years ago

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...

ye1002551506 commented 5 years ago

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

dsehnal commented 5 years ago

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 / LiteMol

Open local pdb files in LiteMol #28