Improved JMol Viewer html file

git-svn-id: https://xerteonlinetoolkits.googlecode.com/svn/trunk@72 912cdd6b-5c7d-d5a7-a2ba-d0f0cdb91641
thexerteproject · Aug 24, 2011 · ec0a89c · ec0a89c
1 parent 57f2540
commit ec0a89c
Showing 1 changed file with 96 additions and 14 deletions.
diff --git a/JMolViewer/jmol.htm b/JMolViewer/jmol.htm
@@ -1,20 +1,102 @@
 <head>
   <title>JMol Example</title>
-  <script src="jmol/Jmol.js" type="text/javascript"></script> <!--  Use your own path here {#1} -->
+ 	<script src="jmol/Jmol.js" type="text/javascript"></script><!-- Use your own path here -->
+	<script type="text/javascript">
+		var str = document.location.search.substr(1,document.location.search.length);
+		var modelFile = str.split('xyz=')[1];
+		//var modelFile = "jmol/models/DNEIBA_+H.mol2";
+
+	</script>
+
+	<style type="text/css">
+	<!--
+	.style1 {
+		font-size: 11px;
+	}
+
+	.holder {
+		width: 400px;
+		height: 454px;
+	}
+
+	.header {
+		border: solid 2px white;
+		background-color: #E6E6E6;
+		font-size: 13px;
+		padding: 5px 10px 5px 10px;
+	}
+
+	.model {
+		border: solid 2px white;
+		background-color: white;
+		text-align: center;
+	}
+
+	.controls {
+		border: solid 2px white;
+		background-color: #E6E6E6;
+		padding: 10px;
+	}
+	-->
+	</style>
+
 </head>
 
+<body style="margin:0; width:100%; height:100%; min-height:100%; background-color:#D6E0EC; font-family:Verdana, sans-serif; font-size:11px">
+
+	<form>
+
+	<div class="holder">
+
+		<!--<div class="header"><script type="text/javascript">document.write(modelTitle);</script></div>-->
+
+		<div class="model">
+			<script type="text/javascript">
+			  jmolInitialize("jmol");
+			  jmolSetAppletColor("white");
+			  jmolApplet([375, 394], "load " + modelFile + "; set antialiasDisplay true;");
+			  jmolSetButtonCssClass("style1");
+			  jmolSetCheckboxCssClass("style1");
+			  jmolSetMenuCssClass("style1");
+			</script>
+		</div>
+
+		<div class="controls">		
+			<script type="text/javascript">
+			  jmolHtml("Display: ");
+			  jmolMenu([
+			  ["spacefill on; wireframe off; backbone on; cartoon off; color cpk", "CPK"],
+			  ["spacefill 25%; wireframe 35%; backbone on; cartoon off; color cpk", "Ball and Stick", "selected"],
+			  ["spacefill off; wireframe 20%; backbone on; cartoon off; color cpk", "Sticks"],
+			  ["spacefill off; wireframe on; backbone on; cartoon off; color cpk", "Wireframe"],
+			  ["spacefill off; wireframe off; backbone on; cartoon on; color cartoon structure", "Cartoon"],
+			  ["spacefill off; wireframe off; backbone 0.4; cartoon off; color structure", "Backbone"]
+			  ]);
+			  jmolHtml(" &nbsp;&nbsp;&nbsp;&nbsp;");
+			  jmolHtml("Background: ");
+			  jmolMenu([
+			  ["background white", "white", "selected"],
+			  ["background black", "black"],
+			  ["background skyblue", "blue"]
+			  ]);
+			  jmolBr();
+			  jmolBr();
+			  jmolHtml("Labels: ");
+			  jmolMenu([
+			  ["label off", "None", "selected"],
+			  ["label %e", "Element symbol"],
+			  ["label %a", "Atom name"]
+			  ]);
+			  jmolHtml(" &nbsp;&nbsp;&nbsp;&nbsp;");
+			  jmolHtml("Spin: ");
+			  jmolCheckbox("spin on", "spin off", "");
+			  jmolHtml(" &nbsp;&nbsp;&nbsp;&nbsp;");
+			  jmolButton("load " + modelFile + "; background white", "Reset model"); // ** when clicked drop downs need to change **
+			</script>
+		</div>
+
+	</div>
+
+  </form>
 
-
-<body  style="width:100%; height:100%; min-height:100%; background-color:'#87CEEB'">
-
-    <script type="text/javascript">
-
-	var str = document.location.search.substr(1,document.location.search.length);
-	var xyzFile = str.split('xyz=')[1];
-
-      	jmolInitialize("jmol", false);
-	jmolSetAppletColor('#FFFFFF');
-      	jmolApplet([380, 454], "load " + xyzFile);
-
-    </script>
 </body>