three panel splittable (dynamic) screen layout

expert.css

@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2010 Brian Silverman, Barry Silverman
+ Copyright (c) 2010 Brian Silverman, Barry Silverman, Ed Spittles
 
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
@@ -38,13 +38,11 @@ div.frame {
 }
 
 div.leftcolumn {
- float: left;
  width: 804px;       /* ugh - matches the div.chip width + border */
 }
 
 div.rightcolumn {
- float: left;
- margin-left: 8px;
+ padding-left: 8px;
 }
 
 div.footer {
@@ -76,7 +74,6 @@ canvas.chip {
 }
 
 div.twobuttons{
- position:relative;
  float:left;
 }
 
@@ -101,7 +98,6 @@ img.navbutton {
 }
 
 img.navplay {
- position: relative;
  margin-right: 5px;
  border: 0px;
 }
@@ -119,6 +115,7 @@ table.memtable {
  font-family: monospace;
  font-size: 12px;
  border-spacing: 0px;
+ overflow: auto;
 }
 
 div#layoutControlPanel{
@@ -142,8 +139,6 @@ a#linkHere{
 }
 
 div#logstreamscroller{
- height:200px;
- width:800px;
  overflow:auto;
 }
 
@@ -153,3 +148,47 @@ table.logstream {
  border-spacing: 2px;
  text-align:center;
 }
+
+/* Splitter */
+#frame {
+ height: 750px;
+}
+
+div.leftcolumn, div.rightcolumn, {
+ overflow: auto;
+}
+
+div#righttopdiv, div#tracingdiv {
+ overflow: auto;
+ background-color: white;
+}
+
+div.rightcolumn {
+ background-color: white;
+}
+
+.vsplitbar {
+ width: 5px;
+ background: #aaa;
+}
+
+.vsplitbar {
+ width: 6px;
+ background: #669 url(3rdparty/img/vgrabber.gif) no-repeat center;
+}
+
+.vsplitbar:hover, .vsplitbar.active {
+ background: #c66 url(3rdparty/img/vgrabber.gif) no-repeat center;
+ opacity: 0.7;
+ filter: alpha(opacity=70); /* IE */
+ background: #c99;
+}
+
+.hsplitbar {
+ height: 6px;
+ background: #669 url(3rdparty/img/hgrabber.gif) no-repeat center;
+}
+
+.hsplitbar.active, .hsplitbar:hover {
+ background: #c66 url(3rdparty/img/hgrabber.gif) no-repeat center;
+}

expert.html

@@ -12,6 +12,9 @@
 <script src="memtable.js"></script>
 <script src="macros.js"></script>
 <script src="testprogram.js"></script>
+<script src="3rdparty/jquery-1.3.2.min.js"></script>
+<script src="3rdparty/jquery.cookie.js"></script>
+<script src="3rdparty/splitter.js"></script>
 
 <script type="text/javascript">
 function handleOnload() {
@@ -24,7 +27,25 @@ function handleOnload() {
 	}else{
 		setTimeout(setup,200);
 	}
-}
+};
+
+// initialise splitter (built on jquery)
+$().ready(function(){
+	$("#frame").splitter({
+		type: "v",
+		outline: true,
+		minLeft: 20,
+		sizeLeft: 810,
+		resizeToWidth: true,
+		anchorToWindow: true,
+	});
+	$("#rightcolumn").splitter({
+		type: "h",
+		outline: true,
+		sizeBottom: 180,
+		minTop: 100,
+	});
+});
 </script>
 
 </head>
@@ -75,19 +96,9 @@ function handleOnload() {
   <a href="" id="linkHere" >Link to this location</a>
   </form>
 </div>
-<div id="expertControlPanel">
-  <form>
-  <input type="button" value="Trace more" onclick="updateLoglevel(++loglevel)" />
-  <input type="button" value="Trace less" onclick="updateLoglevel(--loglevel)" />
-  <input type="button" value="Headless Go" onclick="goFor()" />
-  </form>
-  <br />
-  <div id="logstreamscroller">
-  <table class="logstream" id="logstream"></table>
-  </div>
-</div>
 </div> <!-- closing leftcolumn -->
-<div class="rightcolumn">
+<div class="rightcolumn" id="rightcolumn">
+<div id="righttopdiv">
 <div class = "buttons">
   <div class="twobuttons">
     <a href ="javascript:stopChip()" id="stop"><img class="navstop" src="images/stop.png" title="stop"></a>
@@ -98,10 +109,28 @@ function handleOnload() {
     <a href ="javascript:stepBack()"><img class="navbutton" src="images/prev.png" title="back"></a>
     <a href ="javascript:stepForward()"><img class="navbutton" src="images/next.png" title="step"></a>
   </div>
-</div>
+</div>  <!-- buttons -->
 <div class="status" id="status"><p>x: 0<br>y: 0</p>
-</div>
-<table class="memtable" id="memtable"></table>
+</div> <!-- status -->
+
+   <div id="memtablediv">
+	<table class="memtable" id="memtable"></table>
+   </div>
+</div> <!-- righttopdiv -->
+
+   <div id="tracingdiv">
+	<div id="expertControlPanel">
+	  <form>
+	  <input type="button" value="Trace more" onclick="updateLoglevel(++loglevel)" />
+	  <input type="button" value="Trace less" onclick="updateLoglevel(--loglevel)" />
+	  <input type="button" value="Headless Go" onclick="goFor()" />
+	  </form>
+	  <br />
+	</div>
+	<div id="logstreamscroller">
+	       <table class="logstream" id="logstream"></table>
+	</div>
+   </div>
 </div> <!-- closing rightcolumn -->
 </div> <!-- closing 'frame' div -->
 </body>

expertWires.js

@@ -312,7 +312,7 @@ function updateChipLayoutVisibility(isOn){
 		if(expertMode)
 			document.getElementById('layoutControlPanel').style.display = 'block';
 		document.getElementById('nochip').style.display = 'none';
-		document.getElementById('logstreamscroller').style.height="260px";
+		//document.getElementById('logstreamscroller').style.height="260px";
 		// allow the display to update while we load the graphics
 		updateChipLayoutAnimation(true);
 		setStatus('loading graphics...');
@@ -324,7 +324,7 @@ function updateChipLayoutVisibility(isOn){
 		document.getElementById('chipsurround').style.display = 'none';
 		document.getElementById('layoutControlPanel').style.display = 'none';
 		document.getElementById('nochip').style.display = 'block';
-		document.getElementById('logstreamscroller').style.height="880px";
+		//document.getElementById('logstreamscroller').style.height="880px";
 	}
 }