From a2d20cc40360893cabeadfcdf835d019edbf719a Mon Sep 17 00:00:00 2001
From: BigEd <ed.spittles@gmail.com>
Date: Fri, 1 Oct 2010 11:29:22 +0000
Subject: [PATCH] [dev]handle URL params like
 ?graphics=false&expert=true&loglevel=4

---
 chipsim.js |   1 -
 index.html |  23 ++++++++----
 wires.js   | 104 +++++++++++++++++++++++++++++++++++++++++++----------
 3 files changed, 102 insertions(+), 26 deletions(-)

diff --git a/chipsim.js b/chipsim.js
index ad3b54f..12d7956 100644
--- a/chipsim.js
+++ b/chipsim.js
@@ -23,7 +23,6 @@
 var ctrace = false;
 var traceTheseNodes = [];
 var traceTheseTransistors = [];
-var noGraphics = false;
 var loglevel = 0;
 var ridx = 0;
 
diff --git a/index.html b/index.html
index 22ab52e..43f7398 100644
--- a/index.html
+++ b/index.html
@@ -56,24 +56,29 @@ 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">
+  <form>
+  <input type="button" value="Show chip layout" onclick="showChipLayout()" />
+  </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>
+    <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 id="expertMode">Expert:
-      <input type="checkbox" name="0" onchange="updateExpertMode(this.checked)" />
+    <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="controlPanel" style="display:none">
+<div id="layoutControlPanel" style="display:none">
   <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)
@@ -84,8 +89,12 @@ Enter your own program into the array of RAM
   </form>
   <form>
   <input type="button" value="Clear Highlighting" onclick="clearHighlight()" />
-  <input type="button" value="Trace more" onclick="updateLoglevel(1)" />
-  <input type="button" value="Trace less" onclick="updateLoglevel(-1)" />
+  </form>
+</div>
+<div id="expertControlPanel" style="display:none">
+  <form>
+  <input type="button" value="Trace more" onclick="updateLoglevel(++loglevel)" />
+  <input type="button" value="Trace less" onclick="updateLoglevel(--loglevel)" />
   </form>
   <br />
   <table class="logstream" id="logstream"></table>
diff --git a/wires.js b/wires.js
index d911800..73e5b4f 100644
--- a/wires.js
+++ b/wires.js
@@ -39,6 +39,10 @@ var nodenamelist=[];
 var ngnd = nodenames['vss'];
 var npwr = nodenames['vcc'];
 
+// some modes and parameters which can be passed in from the URL query
+var expertMode=false
+var drawGraphics = true;
+var loadCanvas = true;
 
 /////////////////////////
 //
@@ -56,19 +60,16 @@ function setup(){
 function setup_part2(){
 	frame = document.getElementById('frame');
 	statbox = document.getElementById('status');
+	setupParams();
+	updateExpertMode(expertMode);
 	setupNodes();
 	setupTransistors();
-	setupLayerVisibility();
-	setupBackground();
-	setupOverlay();
-	setupHilite();
-	setupHitBuffer();
-	recenter();
-	refresh();
+	if(loadCanvas){
+		showChipLayout();
+	}
 	setupTable();
 	setupNodeNameList();
 	window.onkeypress = function(e){handleKey(e);}
-	hilite.onmousedown = function(e){mouseDown(e);}
 	setStatus('resetting 6502...');
 	setTimeout(setup_part3, 0);
 }
@@ -79,6 +80,45 @@ function setup_part3(){
 	go();
 }
 
+function setupParams(){
+	if(location.search=="")
+		return
+	var queryParts=location.search.slice(1).split('&');
+	for(var i=0;i<queryParts.length;i++){
+		var params=queryParts[i].split("=");
+		if(params.length!=2){
+			if(loglevel>0)
+				console.log('malformed parameters',params);
+			break;
+		}
+		var name=params[0];
+		var value=params[1].replace(/\/$/,""); // chrome sometimes adds trailing slash
+		// be (relatively) forgiving in what we accept
+		if(name=="loglevel" && parseInt(value)>0){
+			updateLoglevel(value);
+		} else if(name=="expert" && value.indexOf("t")==0){
+			updateExpertMode(true);
+		} else if(name=="graphics" && value.indexOf("f")==0){
+			setupNoGraphics();
+		} else {
+			if(loglevel>0)
+				console.log('unrecognised parameters:',params);
+			break;
+		}
+	}
+}
+
+function setupNoGraphics(){
+	// if user requests no graphics, we'll do no canvas operations at all
+	// which saves a lot of memory and allows us to run on small systems
+	loadCanvas=false;
+	// should the canvas later be loaded, we don't want to draw to it
+	// which speeds up simulation
+	drawGraphics=false;
+	// we'll also hide or shrink the graphics panel and replace it
+	hideChipLayout();
+}
+
 function setupNodes(){
 	for(var i in segdefs){
 		var seg = segdefs[i];
@@ -185,6 +225,8 @@ function hexdigit(n){return '0123456789ABCDEF'.charAt(n);}
 /////////////////////////
 
 function refresh(){
+	if(!drawGraphics)
+		return;
 	ctx.clearRect(0,0,10000,10000);
 	for(i in nodes){
 		if(isNodeHigh(i)) overlayNode(nodes[i].segs);
@@ -215,7 +257,7 @@ function hiliteNode(n){
 
 
 function drawSeg(ctx, seg){
-	if(noGraphics) return;
+	if(!drawGraphics) return;
 	var dx = 400;
 	ctx.beginPath();
 	ctx.moveTo(seg[0]+dx, 10000-seg[1])
@@ -321,19 +363,21 @@ function findNodeNumber(x,y){
 	return (high<<8)+(mid<<4)+low;
 }
 
-function updateLoglevel(delta){
-	loglevel += delta;
+function updateLoglevel(value){
+	console.log("updateLoglevel:",value,loglevel);
+	loglevel = value;
 	initLogbox(signalSet(loglevel));
 }
 
-function updateExpertMode(on){
-	if(on){
-		document.getElementById('controlPanel').style.display = 'block';
-		loglevel=1;
-		initLogbox(signalSet(loglevel));
+function updateExpertMode(isOn){
+	expertMode=isOn
+	document.getElementById('expertModeCheckbox').checked = expertMode;
+	if(expertMode){
+		document.getElementById('expertControlPanel').style.display = 'block';
+		if(loglevel==0)
+			updateLoglevel(1);
 	} else {
-		document.getElementById('controlPanel').style.display = 'none';
-		loglevel=0;
+		document.getElementById('expertControlPanel').style.display = 'none';
 	}
 }
 
@@ -348,6 +392,30 @@ function updateShow(layer, on){
 	setupBackground();
 }
 
+function showChipLayout(){
+	// make the layout display visible and setup the canvas
+	document.getElementById('chip').style.display = 'block';
+	document.getElementById('layoutControlPanel').style.display = 'block';
+	document.getElementById('nochip').style.display = 'none';
+	// experts see the control panel and can enable animation manually
+	drawGraphics=!expertMode;
+	setupLayerVisibility();
+	setupBackground();
+	setupOverlay();
+	setupHilite();
+	setupHitBuffer();
+	recenter();
+	refresh();
+	hilite.onmousedown = function(e){mouseDown(e);}
+}
+
+function hideChipLayout(){
+	// replace the layout display with a button to show it
+	document.getElementById('chip').style.display = 'none';
+	document.getElementById('layoutControlPanel').style.display = 'none';
+	document.getElementById('nochip').style.display = 'block';
+}
+
 /////////////////////////
 //
 // Etc.