dllahr / tsol3d Goto Github PK

command to build webpack: (from modules directory)

~/node_modules/.bin/webpack tsol3d.js  ../build/assembledTsol3d.js --output-library '$tsol3d'

can add --optimize-minimize to generate minimized / optimized version

dev mode for build - monitor files and rebuild when they are saved:

~/node_modules/.bin/webpack tsol3d.js  ../build/assembledTsol3d.js --output-library '$tsol3d'  --progress --watch

0. install git, setup github account
1. install node (tested with version 7.4.0)
2. check out the code from github git clone [email protected]:dllahr/tsol3d.git
3. from a terminal / command line, cd into where you cloned the above and do the following from there
4. install http-server with npm npm install -g http-server
5. run the http server: http-server .
6. try things out:
   1. open http://127.0.0.1:8080 in your browser
   2. navigate to "tests", then choose e.g. "test_TIM_6mer_fragment_A73_I78.html"
   3. try to rotate, zoom, click the buttons etc.
7. install webpack npm install -g webpack
8. run webpack in development mode (it will monitor for file changes and rebuild the library):
   1. cd into the "modules" subdirectory
   2. run webpack:
   3. ~/node_modules/.bin/webpack tsol3d.js ../build/assembledTsol3d.js --output-library '$tsol3d' --progress --watch
9. try it out:
   1. edit the file modules/tim6merFragmentA73I78.js, change one of the entries in the line that assigns "button_values" e.g. "stick" to "stick hello world"
   2. notice that in the terminal where you ran the webpack command it has produced some output indicating the changed file it noticed, and that the new library was produced
   3. refresh the browser (make sure caching is off), notice that the button text you edited has changed (e.g. from "stick" to "stick hello world")

In this example we'll make a rendering of the structure of glucose.

0. create new module
   1. in modules, copy simpleTemplate.js to glucose.js
   2. rename the module in the file - do a find / replace of simpleTemplate --> glucose
1. add the structure pdb file to data directory (in this case, added glucose.pdb)
2. reference the new module in tsol3d.js - edit tsol3d.js (also in modules directory)
   1. copy all simpleTemplate or simple_template entries and make an analogous entry for glucose
      1. e.g. "import glucose from './glucose'"
      2. export const export_glucose = glucose;
      3. etc.
      4. important note: when editing the builderMap to add an entry, need to add a comma to the end of the previous line
3. create the test
   1. in tests, copy test_simple_template.html to test_glucose.html
   2. edit the <h2> (header level 2) line to say "Glucose" instead of "Simple Template"
   3. edit the line in the script that calls $tsol3d
      1. change it to call export_glucose instead of export_simpleTemplate
      2. change the location of the data to be ../data/glucose.pdb
4. try it out in your local browser
5. if it is working, add it to your git repo / github repository
   1. check which files were modified: git status
      1. should be modules/tsol3d.js
      2. untracked should be:
         1. modules/glucose.js
         2. tests/test_glucose.html
   2. update your repository
      1. git fetch
      2. git pull
   3. add files to be committed
      1. git add modules/glucose.js
      2. git add tests/test_glucose.html
      3. git add modules/tsol3d.js
   4. commit: git commit -m "added view of glucose"
      • (with a message relevant to the view you've added)
   5. push to github: git push