LittleProtein/demo.html at main · MatsveiTsishyn/LittleProtein · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>LittleProtein Demo</title>
  <script src="littleprotein.js"></script>
</head>
<body>

  <h2>🌸🌸🌸 Here is your LittleProtein Canvas 🌸🌸🌸</h2>
  <div id="LittleProteinCanvas1"></div>

  <script>
    const lpCanvas = LittleProteinStarter.start(
      "#LittleProteinCanvas1", // ID to find the HTML div where to generate the canvas
      1200,                    // width (X coordinate) of the canvas
      800,                     // height (Y coordinate) of the canvas
      {                        // parameters of the canvas
        //"backgroundColor": [150, 230, 230],
        //"depthShadeFactor": 2.0,
        //"viewDistance": 1.0,
        //"residuesScale": 2.0,
        //"colorsList": [
        //  [ 20,  20,  20],
        //  [ 60,  60,  60],
        //  [100, 100, 100],
        //],
        //"colorsMap": {"A": [50, 50, 50]},
      }
    );
    lpCanvas.loadDemoProtein(); // Load default demo protein strucure

    // Set colors
    //lpCanvas.setChainColor("A", [40, 40, 40]);         // Set color of a chain
    //lpCanvas.setResidueColor("A13", [40, 180, 40]);    // Set color of a residue
    //lpCanvas.proteinStructure.residues.forEach(res => {
    //  if(res.aa.three == "ALA"){
    //    lpCanvas.setResidueColor(res.resid, [  0,  15, 35]);
    //  }
    //});

    // Load another protein
    //lpCanvas.from_string("XXX");   // Load from a string
    //lpCanvas.fetch("3JCL");        // Fetch from the PDB
    //lpCanvas.fetch("P08397");      // Fetch from the AlphaFoldDB using UniProt ID

  </script>

  <p style="max-width: 1200px; word-wrap: break-word;">
    * Here you see an example of a protein 3D structure,
    but you can also drag and drop any '.pdb' file you have.<br>
    PS: you can find some in the <a href="https://www.rcsb.org/">Protein Data Bank</a>

  </p>

</body>
</html>