Structure viewer VM

Goal

Use a virtual machine to host a webpage that servers 3D structure viewers you can then embed in talks using a QR code.

Prerequisites

  1. A PDB file (or accession code) of your structure

  2. Access to CUmulus (or other cloud computing service, but instructions may differ)

  3. Some basic HTML knowledge

Protocol

  1. Create a new private network on CUmulus (with associated subnetwork)

  2. Create a router to route traffic to scinet-public

  3. Attach your new private network interface to the router

  4. Spawn a new virtual machine (or clone instance from working volume)

    • CentOS7 operating system, with 16GiB (or less)

    • Because we are just hosting a static webserver an m5.small should be fine

    • Add it to your new network

    • select the security groups required (probably at least default, http, https, and ssh-restricted)

    • add your devices’ public key to the key pair (can’t access VM without)

    • launch the instance

  5. Allocate and associate a floating IP from scinet-public

  6. Edit port security groups to match instance

  7. You should now be able to access your VM

  8. ssh centos@<your.floating.ip.address>

    • accept new fingerprint

    • will access VM as root, if your key pair is valid

  9. If you cloned your VM, you should be able to use sudo systemctl start httpd to start your website

    • put new htmls (or files) in /var/www/html/<virtual-host> (store sensative data in a different directory and link to it from within html)

    • access new website at http://<your-scinet-public-ip>/<your-file.html>

  10. If you didn’t clone your VM, install Apache:

    • sudo yum install httpd

    • sudo systemctl start httpd

    • see if it’s running: sudo systemctl status httpd

  11. Create a virtual host try here

  12. Add files to your virtual host

  13. You can then make structure viewer using 3Dmol.js

  14. Basic example of an html file using this:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
  <title>Shawn's biophys talk</title>
</head>
<body>
  <script src="https://3Dmol.org/build/3Dmol-min.js" async></script>
    <div id="container-01"; style="height: 100vh; width: 100%; position: relative;" class='viewer_3Dmoljs' data-href='1aoi.pdb' data-backgroundcolor='0xffffff' data-style='cartoon' ></div>
</body>
</html>

    • where data-href='1aoi.pdb' can be swapped out for any pdb file or you can use an accession (see documentation)

    • can also modify colors and styles

  15. Lastly, you can make a QR code by simple typing qr code <http://your.floating.ip.address/your-file.html> into Google and saving the image