Home Explore Help
Sign In
web
/
TmMolStar
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

- prepared seq. diagram for getting aminoAcidNumber from Mol*
- added click event to ply-wrapper (at the moment: hardcoded change of aminoAcidNumber is working)

MarcoSchaeferT 6 years ago
parent
19cabfb446
commit
b9cf09b57a
3 changed files with 74 additions and 3 deletions
Split View Show Diff Stats
  1. 58 1
      src/examples/ply-wrapper/index.html
  2. 14 1
      src/examples/ply-wrapper/index.ts
  3. 2 1
      src/mol-model-formats/shape/ply.ts

+ 58 - 1
src/examples/ply-wrapper/index.html
View File 

@@ -18,6 +18,19 @@
 
                 height: 400px;
 
                 border: 1px solid #ccc;
 
             }
 
+            #select {
 
+                position: absolute;
 
+                left: 10px;
 
+                top: 480px;
 
+            }
 
+            #diagram {
 
+                position: absolute;
 
+                left: 10px;
 
+                top: 520px;
 
+                width: 1210px;
 
+                height: 510px;
 
+                border: 1px solid #ccc;
 
+            }
 
 
             #controls {
 
                 position: absolute;
 
@@ -43,8 +56,11 @@
 
         </style>
 
         <link rel="stylesheet" type="text/css" href="app.css" />
 
         <script type="text/javascript" src="./index.js"></script>
 
+        <link rel="stylesheet" type="text/css" href="/FProject5.3/style.css">
 
+        <!--<link rel="stylesheet" type="text/css" href="/FProject5.3/dist/slimselect.css" />-->
 
     </head>
 
     <body>
 
+    <script>var aminoAcid = 68</script>
 
         <div id='controls'>
 
             <h3>Source</h3>
 
             <input type='text' id='plyurl' placeholder='plyurl' style='width: 400px' />
 
@@ -64,7 +80,7 @@
 
 
             function $(id) { return document.getElementById(id); }
 
         
-            var pdbId = '1rwe', assemblyId= 'preferred';
 
+            var pdbId = '1tca', assemblyId= 'preferred';
 
             var url = '/test-data/' + pdbId + '_updated.cif';
 
             var format = 'cif';
 
 
@@ -93,6 +109,8 @@
 
                 console.log('Model Info', info);
 
             });
 
 
+
 
+
 
             addControl('Load Asym Unit', () => PluginWrapper.load({ plyurl: plyurl, url: url, format: format }));
 
             addControl('Load Assembly', () => PluginWrapper.load({ plyurl: plyurl, url: url, format: format, assemblyId: assemblyId }));
 
 
@@ -156,6 +174,45 @@
 
                 h.innerText = header;
 
                 $('controls').appendChild(h);
 
             }
 
+    PluginWrapper.klick;
 
+        </script>
 
+
 
+        <!-- --------- FProject start --------- -->
 
+        <select id="select" onchange="iniciar()">
 
+            <option value="/FProject5.3/Contact_density/run_0.json">Run 0</option>
 
+            <option value="/FProject5.3/Contact_density/run_1.json">Run 1</option>
 
+            <option value="/FProject5.3/Contact_density/run_2.json">Run 2</option>
 
+            <option value="/FProject5.3/Contact_density/run_3.json">Run 3</option>
 
+            <option value="/FProject5.3/Contact_density/run_4.json">Run 4</option>
 
+            <option value="/FProject5.3/Contact_density/run_5.json">Run 5</option>
 
+            <option value="/FProject5.3/Contact_density/run_6.json">Run 6</option>
 
+            <option value="/FProject5.3/Contact_density/run_7.json">Run 7</option>
 
+            <option value="/FProject5.3/Contact_density/run_8.json">Run 8</option>
 
+            <option value="/FProject5.3/Contact_density/run_9.json">Run 9</option>
 
+            <option value="/FProject5.3/Contact_density/run_total.json">Run total</option>
 
+        </select>
 
+        <div id="diagram">
 
+        </div>
 
+        <!--
 
+        <script>
 
+            setTimeout(function() {
 
+                new SlimSelect({
 
+                    select: '#select'
 
+                })
 
+            }, 300)
 
         </script>
 
+        <script src="/FProject5.3/dist/slimselect.min.js"></script>
 
+        -->
 
+
 
+        <!-- load the d3.js library -->
 
+        <script src="/FProject5.3/d3.v4.min.js"></script>
 
+        <script src="/FProject5.3/jquery-3.3.1.min.js"></script>
 
+        <script src="https://d3js.org/d3-path.v1.min.js"></script>
 
+        <script src="https://d3js.org/d3-shape.v1.min.js"></script>
 
+
 
+        <script src="/FProject5.3/scriptv2.js">
 
+        </script>
 
+        <!-- --------- FProject end --------- -->
 
+
 
     </body>
 
 </html>

+ 14 - 1
src/examples/ply-wrapper/index.ts
View File 

@@ -19,8 +19,11 @@ import { LoadParams, SupportedFormats, RepresentationStyle, ModelInfo } from './
 
 import { RxEventHelper } from 'mol-util/rx-event-helper';
 
 import { ControlsWrapper } from './ui/controls';
 
 import { PluginState } from 'mol-plugin/state';
 
+import { Canvas3D } from 'mol-canvas3d/canvas3d';
 
 require('mol-plugin/skin/light.scss')
 
 
+
 
+
 
 class MolStarPLYWrapper {
 
     static VERSION_MAJOR = 2;
 
     static VERSION_MINOR = 0;
 
@@ -31,6 +34,7 @@ class MolStarPLYWrapper {
 
         modelInfo: this._ev<ModelInfo>()
 
     };
 
 
+
 
     plugin: PluginContext;
 
 
     init(target: string | HTMLElement) {
 
@@ -56,6 +60,15 @@ class MolStarPLYWrapper {
 
         return this.plugin.state.dataState;
 
     }
 
 
+    get klick(){
 
+    this.plugin.canvas3d.interaction.click.subscribe(e =>{
 
+          console.log('atomID', e)
 
+            aminoAcid = 169;
 
+        })
 
+        return 0
 
+    }
 
+
 
+
 
     private download(b: StateBuilder.To<PSO.Root>, url: string) {
 
         return b.apply(StateTransforms.Data.Download, { url, isBinary: false })
 
     }
 
@@ -232,4 +245,4 @@ class MolStarPLYWrapper {
 
     }
 
 }
 
 
-(window as any).MolStarPLYWrapper = MolStarPLYWrapper;
 
+(window as any).MolStarPLYWrapper = MolStarPLYWrapper;

+ 2 - 1
src/mol-model-formats/shape/ply.ts
View File 

@@ -42,7 +42,7 @@ async function getShape(ctx: RuntimeContext, parsedData: PlyData, props: {}, sha
 
     const { vertices, normals, faces, colors, properties } = parsedData
 
     const mesh = await getPlyMesh(ctx, vertices, normals, faces, shape && shape.geometry)
 
     return shape || Shape.create(
 
-        'test', mesh,
 
+        'ply-mesh', mesh,
 
         (groupId: number) => {
 
             return Color.fromRgb(
 
                 colors[faces[4 * groupId + 1] * 3 + 0],
 
@@ -72,4 +72,5 @@ export function shapeFromPly(source: PlyFile, params?: {}) {
 
             geometryUtils: Mesh.Utils
 
         }
 
     })
 
+
 
 }