From d6e516cafa1a6bdb65181362a6068c217d80091f Mon Sep 17 00:00:00 2001
From: BigEd <ed.spittles@gmail.com>
Date: Sat, 2 Oct 2010 16:37:33 +0000
Subject: [PATCH] [dev]major rejig of css and DOM hierarchy - removes some hard
 coded numbers and allows for large/small logstream when chip is
 hidden/visible

---
 index.html |  57 ++++++++++++++------------
 wires.css  | 116 +++++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 117 insertions(+), 56 deletions(-)

diff --git a/index.html b/index.html
index 2e93a46..142e7f9 100644
--- a/index.html
+++ b/index.html
@@ -54,6 +54,8 @@ Enter your own program into the array of RAM
 </div>
 </span>
 <div class="frame" id="frame">
+<div class="leftcolumn">
+<div id="chipsurround">
 <div class="chip" id="chip">
 <span id="waiting">Please wait while graphics is initialising...</span>
 <canvas class="chip" id="chipbg"></canvas>
@@ -61,29 +63,13 @@ Enter your own program into the array of RAM
 <canvas class="chip" id="hilite"></canvas>
 <canvas class="chip" id="hitbuffer"></canvas>
 </div>
-<div class="nochip" id="nochip" style="display:none">
+</div> <!-- chipsurround -->
+<div class="nochip" id="nochip">
   <form>
   <input type="button" value="Show chip layout" onclick="updateChipLayoutVisibility(true)" />
   </form>
 </div>
-<div class = "buttons">
-  <div style="position:relative; float:left;">
-    <a href ="javascript:stopChip()" id="stop"><img class="navstop" src="images/stop.png" title="stop"></a>
-    <a href ="javascript:runChip()"  id="start"><img class="navplay" src="images/play.png" title="run"></a>
-  </div>
-  <div style="float:left;">
-    <a href ="javascript:resetChip()"><img class="navbutton" src="images/up.png" title="reset"></a>
-    <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>
-    <span>Expert:
-      <input type="checkbox" id="expertModeCheckbox" name="0" onchange="updateExpertMode(this.checked)" />
-    </span>
-  </div>
-</div>
-<p class="status" id="status">x: 0<br>y: 0</p>
-<table class="memtable" id="memtable"></table>
-</div>
-<div id="layoutControlPanel" style="display:none">
+<div id="layoutControlPanel">
   <form id="updateShow"> Show:
   <input type="checkbox" name="1" id="updateShow1" onchange="updateShow(this.name,this.checked)" />(diffusion)
   <input type="checkbox" name="3" id="updateShow3" onchange="updateShow(this.name,this.checked)" />(grounded diffusion)
@@ -95,32 +81,53 @@ Enter your own program into the array of RAM
   <form>
   <input type="button" value="Hide Chip Layout" onclick="updateChipLayoutVisibility(false)" />
   <input type="button" value="Clear Highlighting" onclick="clearHighlight()" />
-  <span style="border:thin solid;padding:2px;border-color:gray">
+  <span class="animatebox">
     Animate during simulation:
     <input type="checkbox" id="animateModeCheckbox" onchange="updateChipLayoutAnimation(this.checked)" 
     /></span>
   &nbsp;
-  <a href="" style="padding:2px;" id="linkHere" >Link to this location</a>
+  <a href="" id="linkHere" >Link to this location</a>
   </form>
 </div>
-<div id="expertControlPanel" style="display:none">
+<div id="expertControlPanel">
   <form>
   <input type="button" value="Trace more" onclick="updateLoglevel(++loglevel)" />
   <input type="button" value="Trace less" onclick="updateLoglevel(--loglevel)" />
   </form>
   <br />
-  <div style="height:200px;overflow:auto">
+  <div id="logstreamscroller">
   <table class="logstream" id="logstream"></table>
   </div>
 </div>
-<br />
+</div> <!-- closing leftcolumn -->
+<div class="rightcolumn">
+<div class = "buttons">
+  <div class="twobuttons">
+    <a href ="javascript:stopChip()" id="stop"><img class="navstop" src="images/stop.png" title="stop"></a>
+    <a href ="javascript:runChip()"  id="start"><img class="navplay" src="images/play.png" title="run"></a>
+  </div>
+  <div class="threebuttons">
+    <a href ="javascript:resetChip()"><img class="navbutton" src="images/up.png" title="reset"></a>
+    <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>
+    <span class="expertcheckbox">Expert:
+      <input type="checkbox" id="expertModeCheckbox" name="0" onchange="updateExpertMode(this.checked)" />
+    </span>
+  </div>
+</div>
+<div class="status" id="status"><p>x: 0<br>y: 0</p>
+</div>
+<table class="memtable" id="memtable"></table>
+</div> <!-- closing rightcolumn -->
+<div class="footer">
 Source code is available on <a href="http://github.com/trebonian/visual6502">github visual6502</a>.
 Use the online <a href="http://www.6502asm.com/">emulator and assembler</a> from 6502asm.com
 and <a href="http://www.e-tradition.net/bytes/6502/disassembler.html">disassembler</a> from e-tradition.net
 <br />
 In addition to this JavaScript project, see our <a href="../python6502.html">Python-based simulator</a> which may be easier to customize, verify, and apply to the study of long programs.<br />
 <br />
-<br />
+</div> <!-- footer -->
+</div> <!-- closing 'frame' div -->
 
 <script type="text/javascript"><!--
 google_ad_client = "pub-9008420149077488";
diff --git a/wires.css b/wires.css
index 6e04f8e..03326ea 100644
--- a/wires.css
+++ b/wires.css
@@ -23,22 +23,47 @@
 body {
  background: white;
  color: black;
-/* font-family: cursive;*/
  font-family :Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 12px;
 }
 
+#title {
+ font-size: 30px;
+ font-weight: bold;
+}
+
 div.frame {
  margin-left: 10px;
- position: relative;
- width: 1150px;
- height: 600px;
+ min-width: 1120px;  /* ugh - prevent memtable flowing underneath chip */
+}
+
+div.leftcolumn {
+ float: left;
+ width: 804px;       /* ugh - matches the div.chip width + border */
+}
+
+div.rightcolumn {
+ float: left;
+ margin-left: 8px;
+}
+
+div.footer {
+ clear: both;
+ padding-top: 10px;
+}
+
+div.nochip {
+ display:none;
+}
+
+div#chipsurround {
+ height: 600px;      /* matches the div.chip height */
 }
 
 div.chip {
  background: lightgray;
  border: 2px solid gray;
- position: absolute;
+ position: absolute; /* must be absolute to contain the canvas */
  width: 800px;
  height: 600px;
  overflow: hidden;
@@ -46,56 +71,85 @@ div.chip {
 
 canvas.chip {
  position: absolute;
- width: 600px;
- height: 600px;
+ width: 600px;       /* square chip image same height as div.chip */
+ height: 600px;      /* square */
+}
+
+div.twobuttons{
+ position:relative;
+ float:left;
+}
+
+div.threebuttons{
+ float:left;
 }
 
 div.buttons{
- position: absolute;
- top: -5px;
- left: 820px;
+ /* top: -5px; */
 }
 
-p.status {
- position: absolute;
- left: 820px;
- top: 20px;
+div.status {
+ clear: left;
+ padding-top: 10px;
+ padding-bottom: 10px;
  font-family: monospace;
  font-size: 12px;
 }
 
-img.navbutton{
+img.navbutton {
  border: 0px;
 }
 
-img.navplay{
+img.navplay {
  position: relative;
  margin-right: 5px;
  border: 0px;
 }
 
-img.navstop{
+img.navstop {
  position: absolute;
  border: 0px;
 }
 
+span.expertcheckbox {
+ margin-left: 20px;
+}
+
+table.memtable {
+ font-family: monospace;
+ font-size: 12px;
+ border-spacing: 0px;
+}
+
+div#layoutControlPanel{
+ display:none;
+ margin-top: 2px;
+ margin-bottom: 2px;
+}
+
+div#expertControlPanel{
+ display:none;
+}
+
+span.animatebox{
+ border:thin solid;
+ padding:2px;
+ border-color:gray;
+}
+
+a#linkHere{
+ padding:2px;
+}
+
+div#logstreamscroller{
+ height:200px;
+ width:800px;
+ overflow:auto;
+}
+
 table.logstream {
  font-family: monospace;
  font-size: 12px;
  border-spacing: 2px;
  text-align:center;
 }
-
-table.memtable {
- position: absolute;
- top: 78px;
- left: 820px;
- font-family: monospace;
- font-size: 12px;
- border-spacing: 0px;
-}
-
-#title {
-font-size:30px;
-font-weight:bold;	
-}