Show 'processing' message while doing computations

html/addHeavyAtoms.html

 The following residues are missing heavy atoms, which will be added.
 <p>
-<form method="post" action="/">
+<form id="mainform" method="post" action="/">
 <table border="1">
     <tr><th>Chain</th><th>Residue</th><th>Missing Atoms</th></tr>
 %s
 </table>
 <p>
-<input type="submit" value="Continue"/>
+<input type="button" value="Continue" onclick="submitWithSpinner()"/>
 </form>
 <script>
 setCurrentStep(5)

html/addHydrogens.html

@@ -9,7 +9,7 @@ function validateForm() {
     }
 }
 </script>
-<form method="post" action="/" onsubmit="return validateForm()">
+<form id="mainform" method="post" action="/" onsubmit="return validateForm()">
 <h1>Delete Heterogens</h1>
 A heterogen is any residue other than a standard amino acid or nucleotide.  Do you want to delete heterogens?
 <p>
@@ -23,7 +23,7 @@ Add missing hydrogen atoms?
 <p>
 <input type="checkbox" id="addCheckbox" name="add" checked> Add hydrogens appropriate for pH <input type="text" id="phfield" name="ph" value="7.0" size="5">
 <p>
-<input type="submit" value="Continue"/>
+<input type="button" value="Continue" onclick="submitWithSpinner()"/>
 </form>
 <script>
 setCurrentStep(6)

html/addResidues.html

 The SEQRES records in this PDB file include residues that are missing from the atom data section.  Do you want to add the missing residues?
 <p>
-<form method="post" action="/">
+<form id="mainform" method="post" action="/">
 <table border="1" id="table">
     <tr><th>Chain</th><th>Residue Positions</th><th>Sequence</th><th>Add?</th></tr>
 %s
 </table>
 <input type="button" value="Select All" onclick="setCheckboxes(true);"/><input type="button" value="Select None" onclick="setCheckboxes(false);"/>
 <p>
-<input type="submit" value="Continue"/>
+<input type="button" value="Continue" onclick="submitWithSpinner()"/>
 </form>
 <script>
 setCurrentStep(3)

html/convertResidues.html

 This PDB file contains non-standard residues.  Do you want to convert them to standard residues?
 <p>
-<form method="post" action="/">
+<form id="mainform" method="post" action="/">
 <table border="1" id="table">
     <tr><th>Chain</th><th>Residue</th><th>Convert To</th><th>Convert?</th></tr>
 %s
 </table>
 <input type="button" value="Select All" onclick="setCheckboxes(true);"/><input type="button" value="Select None" onclick="setCheckboxes(false);"/>
 <p>
-<input type="submit" value="Continue"/>
+<input type="button" value="Continue" onclick="submitWithSpinner()"/>
 </form>
 <script>
 setCurrentStep(4)

html/header.html

@@ -12,13 +12,66 @@ function setCurrentStep(step) {
         document.getElementById("newfile").disabled=true
 }
 function setCheckboxes(selected) {
-    checkboxes = document.getElementById("table").getElementsByTagName("input");
+    checkboxes = document.getElementById("table").getElementsByTagName("input")
     for (var i = 0; i < checkboxes.length; i++)
         checkboxes[i].checked = selected
 }
+function submitWithSpinner() {
+    animateSpinner.animateIndex = 0
+    setTimeout(function() {animateSpinner();document.getElementById('overlay').style.visibility='visible';}, 1500)
+    document.getElementById('mainform').submit()
+}
+function animateSpinner() {
+    for (var i = 0; i < 3; i++) {
+        var bar = document.getElementById("progress"+(i+1))
+        if (i == animateSpinner.animateIndex)
+            bar.style.backgroundColor = "black"
+        else
+            bar.style.backgroundColor = "lightgray"
+    }
+    animateSpinner.animateIndex = (animateSpinner.animateIndex+1)%3
+    setTimeout(function() {animateSpinner()}, 1000)
+}
 </script>
+<style>
+body {font-family:sans-serif}
+#progressParent {
+    position: fixed;
+    top: 40%;
+    left: 50%;
+    margin-top: -75px;
+    margin-left: -125px
+}
+#overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    background-color: rgba(255,255,255,0.75);
+    visibility:hidden;
+}
+#progressMessage {
+    width: 100%;
+    position: fixed;
+    top: 40%;
+    margin-top: 90px;
+    text-align: center
+}
+</style>
 </head>
 <body>
+<div id="overlay">
+    <div id="progressParent">
+        <div id="progress1" style="width:50px;height:150px;position:absolute;left:0px"></div>
+        <div id="progress2" style="width:50px;height:150px;position:absolute;left:100px"></div>
+        <div id="progress3" style="width:50px;height:150px;position:absolute;left:200px"></div>
+    </div>
+    <div id="progressMessage">
+        <div style="font-size:xx-large">Processing</div>
+        This may take some time.
+    </div>
+</div>
 <div style="background-color:LightSkyBlue;font-style:italic;font-size:xx-large;text-align:center">PDBFixer</div>
 <span style="background-color:LightSkyBlue;font-style:italic;font-size:large;float:right;height:100%;padding:0px 10px">
     <form method="post" action="/controls">

html/removeChains.html

 This PDB file contains %d chains.  Select which ones to include.
 <p>
-<form method="post" action="/">
+<form id="mainform" method="post" action="/">
 <table border="1" id="table">
     <tr><th>Chain</th><th># Residues</th><th>Content</th><th>Include?</th></tr>
 %s
 </table>
 <input type="button" value="Select All" onclick="setCheckboxes(true);"/><input type="button" value="Select None" onclick="setCheckboxes(false);"/>
 <p>
-<input type="submit" value="Continue"/>
+<input type="button" value="Continue" onclick="submitWithSpinner()"/>
 </form>
 <script>
 setCurrentStep(2)

html/start.html

@@ -3,19 +3,19 @@ function enableInputs() {
     if (document.getElementById("localtype").checked) {
         document.getElementById("pdbfile").disabled = false;
         document.getElementById("pdbid").disabled = true;
-        document.getElementById("submit").disabled = (document.getElementById("pdbfile").value == "");
+        document.getElementById("submitButton").disabled = (document.getElementById("pdbfile").value == "");
     }
     else {
         document.getElementById("pdbfile").disabled = true;
         document.getElementById("pdbid").disabled = false;
-        document.getElementById("submit").disabled = (document.getElementById("pdbid").value.length != 4);
+        document.getElementById("submitButton").disabled = (document.getElementById("pdbid").value.length != 4);
     }
 }
 </script>
 <h1>Welcome To PDBFixer!</h1>
 Select a PDB file to load.  It will be analyzed for problems.
 <p>
-<form method="post" action="/" enctype="multipart/form-data">
+<form id="mainform" method="post" action="/" enctype="multipart/form-data">
 <input type="radio" name="type" id="localtype" value="local" onchange="enableInputs()" checked>Load a local file
 <p style="margin-left:50px">
 PDB File: <input type="file" id="pdbfile" name="pdbfile" onchange="enableInputs()"/>
@@ -24,7 +24,7 @@ PDB File: <input type="file" id="pdbfile" name="pdbfile" onchange="enableInputs(
 <p style="margin-left:50px">
 PDB Identifier: <input type="text" id="pdbid" name="pdbid" size="4" onchange="enableInputs()" onkeyup="enableInputs()" oninput="enableInputs()" disabled>
 </p>
-<input type="submit" id="submit" value="Analyze File" disabled/>
+<input type="button" id="submitButton" value="Analyze File" onclick="submitWithSpinner()" disabled/>
 </form>
 <script>
 setCurrentStep(1)

uiserver.py

@@ -34,10 +34,10 @@ class _Handler(BaseHTTPRequestHandler):
         if path in callback:
             callback[path](parameters, self)
     
-    def sendResponse(self, response):
+    def sendResponse(self, response, type="text/html"):
         self.hasSentResponse = True
         self.send_response(200)
-        self.send_header("Content-type", "text/html")
+        self.send_header("Content-type", type)
         self.send_header("Content-length", str(len(response)))
         self.end_headers()
         self.wfile.write(response)