Merge branch 'ed' into svg

index.html

@@ -72,7 +72,7 @@ More information in the <a href="http://visual6502.org/wiki/index.php?title=Jssi
 </span>
 <div class="frame" id="frame">
 <div class="chip" id="chip">
-<canvas class="chip" id="chipbg"></canvas>
+<object data="6502N.svg" type="image/svg+xml" id="chipbg" style="position: absolute; width: 600px; height:600px;"></object>
 <canvas class="chip" id="overlay"></canvas>
 <canvas class="chip" id="hilite"></canvas>
 <canvas class="chip" id="hitbuffer"></canvas>

kiosk.css

@@ -50,6 +50,13 @@ canvas.chip {
  height: 600px;
 }
 
+object.chipbg {
+ position: absolute;
+ width: 600px;
+ height: 600px;
+}
+
+
 div.buttons{
  position: absolute;
  top: -5px;
@@ -91,4 +98,4 @@ table.memtable {
 #title {
 font-size:30px;
 font-weight:bold;	
-}
+}

kioskWires.js

@@ -144,12 +144,19 @@ function mouseUp(e){
 }
 
 function setZoom(n){
+	var svg = chipbg.getSVGDocument();
+	svg = svg.childNodes[0];
+
 	zoom = n;
 	setChipStyle({
 		width: 600*n+'px',
 		height: 600*n+'px'
 	});
+
+	svg.style.width = 600*n+'px';
+	svg.style.height = 600*n+'px';
 	recenter();
+
 }
 
 function recenter(){
@@ -193,7 +200,7 @@ function handleClick(e){
 function setChipStyle(props){
 	for(var i in props){
 		chipbg.style[i] = props[i];
-		overlay.style[i] = props[i];
+//		overlay.style[i] = props[i];
 		hilite.style[i] = props[i];
 		hitbuffer.style[i] = props[i];
 	}

wires.js

@@ -22,6 +22,11 @@
 
 var frame, chipbg, overlay, hilite, hitbuffer, ctx;
 var nodes = new Array();
+var lastState = new Array();
+var polyAttr = new Array();
+var metalAttr = new Array();
+var polyOffFill;
+var metalOffFill;
 var transistors = {};
 var nodenamelist=[];
 
@@ -40,6 +45,7 @@ function setupNodes(){
 			            state: false, gates: new Array(), c1c2s: new Array()};
 		if(w==ngnd) continue;
 		if(w==npwr) continue;
+		lastState[i] = 0;
 		nodes[w].segs.push(seg.slice(3));
 	}
 }
@@ -73,8 +79,20 @@ function setupLayerVisibility(){
 
 function setupBackground(){
 	chipbg = document.getElementById('chipbg');
-	chipbg.width = grCanvasSize;
-	chipbg.height = grCanvasSize;
+	chipbg.width = 4000;
+	chipbg.height = 4000;
+	var svg = chipbg.getSVGDocument();
+	svg = svg.childNodes[0];
+	var poly = svg.getElementById('poly');
+	var metal = svg.getElementById('metal');
+	polyOffFill = poly.getAttribute('fill');
+	metalOffFill = metal.getAttribute('fill');
+	for(var i in nodes){
+		polyAttr[i] = poly.getElementsByClassName(i+'')[0];	 
+		metalAttr[i] = metal.getElementsByClassName(i+'')[0];	 
+	}
+	return;
+
 	var ctx = chipbg.getContext('2d');
 	ctx.fillStyle = '#000000';
 	ctx.strokeStyle = 'rgba(255,255,255,0.5)';
@@ -93,10 +111,10 @@ function setupBackground(){
 }
 
 function setupOverlay(){
-	overlay = document.getElementById('overlay');
-	overlay.width = grCanvasSize;
-	overlay.height = grCanvasSize;
-	ctx = overlay.getContext('2d');
+//	overlay = document.getElementById('overlay');
+//	overlay.width = grCanvasSize;
+//	overlay.height = grCanvasSize;
+//	ctx = overlay.getContext('2d');
 }
 
 function setupHilite(){
@@ -137,20 +155,44 @@ function hexdigit(n){return '0123456789ABCDEF'.charAt(n);}
 
 function refresh(){
 	if(!chipLayoutIsVisible) return;
-	ctx.clearRect(0,0,grCanvasSize,grCanvasSize);
+//	ctx.clearRect(0,0,grCanvasSize,grCanvasSize);
+//	for(i in nodes){
+//		if(isNodeHigh(i)) overlayNode(nodes[i].segs);
+//	}
 	for(i in nodes){
-		if(isNodeHigh(i)) overlayNode(nodes[i].segs);
-	}
+		if(isNodeHigh(i)){
+			if(lastState[i]==1)continue;
+
+			var n = polyAttr[i];
+			var n2 = metalAttr[i];
+			if(n!=undefined)
+				n.setAttribute('fill', 'rgb(0,255,255)');
+			if(n2!=undefined)
+				n2.setAttribute('fill', 'rgb(0,255,255)');
+			lastState[i] = 1;
+		} else {
+			if(lastState[i]==0)continue;
+
+			var n = polyAttr[i];
+			var n2 = metalAttr[i];
+
+			if(n!=undefined)
+				n.setAttribute('fill', polyOffFill);
+			if(n2!=undefined)
+				n2.setAttribute('fill', metalOffFill);
+			lastState[i] = 0;
+		}
+	}	
 	hiliteNode(hilited);
 }
 
-function overlayNode(w){
-	ctx.fillStyle = 'rgba(255,0,64,0.4)';
-	for(i in w) {
-		drawSeg(ctx, w[i]);
-		ctx.fill();
-	}
-}
+//function overlayNode(w){
+//	ctx.fillStyle = 'rgba(255,0,64,0.4)';
+//	for(i in w) {
+//		drawSeg(ctx, w[i]);
+//		ctx.fill();
+//	}
+//}
 
 // originally to highlight using a list of node numbers
 //   but can now include transistor names