Lots of improvements to appearance of UI

pdbfixer/html/header.html

@@ -42,7 +42,32 @@ function animateSpinner() {
 }
 }
 </script>
 </script>
 <style>
 <style>
-body {font-family:sans-serif}
+body {
+    margin-top: 0;
+    font-family:sans-serif;
+    background-color: rgb(217,217,217);
+    background-image: url("/image?name=background.jpg");
+    background-size: 80%;
+    background-repeat: repeat-y
+}
+input {
+    font-size: small
+}
+select {
+    font-size: small
+}
+table {
+    border-collapse: collapse;
+    border: 1pt solid black;
+    margin: 7pt
+}
+th {
+    padding: 2pt;
+    background-color: lightgray
+}
+td {
+    padding: 2pt
+}
 #progressParent {
 #progressParent {
     position: fixed;
     position: fixed;
     top: 40%;
     top: 40%;
@@ -80,8 +105,9 @@ body {font-family:sans-serif}
         This may take some time.
         This may take some time.
     </div>
     </div>
 </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">
+<span style="font-style:italic;font-size:large;float:right;position:relative;top:0;right:0;height:100%;padding:10px 10px">
+    <img src="/image?name=logo_small.png"/>
+    <p/>
     <form method="post" action="/controls">
     <form method="post" action="/controls">
         <input type="submit" name="newfile" value="New File" id="newfile"/>
         <input type="submit" name="newfile" value="New File" id="newfile"/>
         <input type="submit" name="quit" value="Quit" style="float:right"/>
         <input type="submit" name="quit" value="Quit" style="float:right"/>

pdbfixer/ui.py

@@ -20,6 +20,11 @@ def loadHtmlFile(name):
     file = os.path.join(htmlPath, name)
     file = os.path.join(htmlPath, name)
     return open(file).read()
     return open(file).read()
 
 
+def loadImageFile(name):
+    imagePath = os.path.join(os.path.dirname(__file__), 'images')
+    file = os.path.join(imagePath, name)
+    return open(file).read()
+
 def controlsCallback(parameters, handler):
 def controlsCallback(parameters, handler):
     if 'newfile' in parameters:
     if 'newfile' in parameters:
         displayStartPage()
         displayStartPage()
@@ -29,6 +34,16 @@ def controlsCallback(parameters, handler):
         global uiIsRunning
         global uiIsRunning
         uiIsRunning = False
         uiIsRunning = False
 
 
+def imageCallback(parameters, handler):
+    name = parameters['name'][0]
+    image = loadImageFile(name)
+    type = None
+    if name.endswith('.png'):
+        type = 'image/png'
+    elif name.endswith('.jpeg') or name.endswith('.jpg'):
+        type = 'image/jpeg'
+    handler.sendResponse(image, type=type)
+
 def startPageCallback(parameters, handler):
 def startPageCallback(parameters, handler):
     global fixer
     global fixer
     if 'type' in parameters:
     if 'type' in parameters:
@@ -200,6 +215,7 @@ def launchUI():
     header = loadHtmlFile("header.html")
     header = loadHtmlFile("header.html")
     uiserver.beginServing()
     uiserver.beginServing()
     uiserver.setCallback(controlsCallback, "/controls")
     uiserver.setCallback(controlsCallback, "/controls")
+    uiserver.setCallback(imageCallback, "/image")
     displayStartPage()
     displayStartPage()
     url = 'http://localhost:'+str(uiserver.server.server_address[1])
     url = 'http://localhost:'+str(uiserver.server.server_address[1])
     print("PDBFixer running: %s " % url)
     print("PDBFixer running: %s " % url)