Changed chip layout to use SVGs

6502N.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg baseProfile="full" height="100%" version="1.1" viewBox="0,0,4000,4000" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><rect fill="black" height="4000" width="4000" x="0" y="0" /><g fill="rgb(102,255,204)" fill-rule="evenodd" id="subSplits" opacity="0.4" stroke="rgb(0,0,0)"><g class="0"><polygon points="2316,696 2316,714 2302,714 2302,696" /><polygon points="2316,833 2316,851 2302,851 2302,833" /><polygon points="2315,423 2305,423 2305,405 2305,404 2315,404" /><polygon points="2332,434 2321,434 2319,439 2303,439 2303,426 2305,424 2305,423 2315,423 2315,424 2317,425 2321,425 2323,422 2332,422" /><polygon points="2419,1074 2417,1078 2417,1094 2410,1094 2410,1072 2412,1069 2412,1063 2419,1063" /><polygon points="2316,879 2316,897 2302,897 2302,879" /><polygon points="2357,1024 2350,1024 2350,989 2357,989" /><polygon points="2316,743 2316,760 2302,760 2302,743" /><polygon points="2316,603 2316,621 2303,621 2303,603" /><polygon points="2079,1531 2073,1531 2073,1502 2079,1502" /><polygon points="2316,649 2316,667 2302,667 2302,649" /><polygon points="2314,985 2307,985 2307,949 2314,949" /><polygon points="2316,557 2316,575 2303,575 2303,557" /><polygon points="2317,465 2317,481 2300,481 2300,468 2303,466 2303,465" /></g><g class="1"><polygon points="981,2652 983,2654 983,2678 976,2678 976,2662 974,2659 974,2644 981,2644" /><polygon points="989,2694 990,2697 990,2706 978,2706 978,2704 971,2704 971,2692 977,2692 977,2686 989,2686" /></g><g class="2"><polygon points="2807,1277 2844,1277 2844,1260 2852,1260 2852,1285 2801,1285 2801,1232 2807,1232" /></g><g class="3"><polygon points="1026,3016 1017,3016 1017,3000 1018,3000 1018,2976 1012,2976 1012,2960 1026,2960" /><polygon points="1051,2943 1063,2943 1063,2954 1052,2954 1051,2956 1043,2956 1043,2962 1046,2962 1046,3006 1035,3006 1035,2953 1034,2953 1034,2939 1042,2939 1042,2936 1051,2936" /><polygon points="1051,2936 1042,2936 1042,2919 1051,2919" /><polygon points="1114,2981 1103,2981 1103,2966 1096,2966 1096,2951 1114,2951" /></g><g class="4"><polygon points="1899,739 1899,750 1886,749 1886,739" /><polygon points="1899,750 1899,759 1886,759 1886,750" /><polygon points="1900,399 1891,399 1891,380 1900,380" /><polygon points="1900,656 1900,667 1886,667 1886,656" /><polygon points="1900,788 1900,805 1886,805 1886,788" /><polygon points="1903,948 1905,950 1905,976 1899,976 1899,961 1897,959 1897,943 1903,943" /><polygon points="1899,878 1899,887 1885,887 1885,878" /><polygon points="1900,647 1900,656 1886,656 1886,647" /><polygon points="1900,556 1900,574 1886,574 1886,556" /><polygon points="1899,887 1899,898 1886,898 1886,887" /><polygon points="1900,415 1885,415 1885,401 1891,401 1891,399 1900,399" /></g><g class="5"><polygon points="2037,2420 2036,2420 2036,2427 2044,2427 2044,2436 2036,2436 2036,2443 2037,2443 2037,2453 2027,2453 2027,2376 2037,2376" /><polygon points="2053,2453 2037,2453 2037,2443 2053,2443" /><polygon points="2066,2360 2068,2364 2068,2398 2066,2401 2066,2424 2060,2424 2060,2395 2062,2392 2062,2368 2060,2365 2060,2348 2066,2348" /></g><g class="6"><polygon points="1087,2116 1081,2116 1081,2091 1087,2091" /><polygon points="1099,2160 1089,2160 1089,2151 1099,2151" /><polygon points="1091,2035 1098,2035 1098,2032 1108,2032 1108,2040 1107,2043 1107,2052 1100,2052 1100,2059 1103,2059 1103,2085 1101,2085 1097,2086 1083,2086 1083,2076 1091,2076 1091,2067 1088,2067 1088,2043 1085,2040 1085,2017 1091,2017" /><polygon points="1108,2032 1098,2032 1098,2019 1108,2019" /></g><g class="7"><polygon points="3377,3546 3427,3546 3427,3553 3371,3553 3368,3548 3350,3548 3348,3553 3291,3553 3291,3546 3340,3546 3342,3541 3375,3541" /><polygon points="3227,3307 3207,3307 3207,3299 3185,3299 3185,3297 3172,3297 3172,3304 3136,3304 3133,3302 3042,3302 3042,3315 3035,3315 3035,3309 3022,3309 3022,3312 3005,3312 3005,3311 2998,3311 2998,3303 3033,3303 3033,3294 3142,3294 3142,3298 3155,3298 3155,3289 3227,3289" /><polygon points="3377,3624 3431,3624 3431,3645 3377,3645 3373,3651 3343,3651 3341,3647 3294,3647 3294,3661 3341,3661 3346,3657 3373,3657 3377,3664 3431,3664 3431,3684 3377,3684 3373,3690 3346,3690 3341,3683 3296,3683 3296,3677 3347,3677 3351,3682 3368,3682 3372,3677 3424,3677 3424,3670 3372,3670 3368,3664 3351,3664 3346,3668 3287,3668 3287,3641 3347,3641 3350,3644 3368,3644 3372,3639 3424,3639 3424,3631 3372,3631 3368,3626 3350,3626 3347,3631 3296,3631 3296,3624 3341,3624 3343,3619 3373,3619" /><polygon points="3427,3568 3377,3568 3373,3573 3343,3573 3341,3569 3294,3569 3294,3586 3341,3586 3343,3580 3373,3580 3377,3586 3430,3586 3430,3606 3377,3606 3373,3612 3346,3612 3341,3608 3296,3608 3296,3602 3346,3602 3351,3605 3368,3605 3372,3600 3424,3600 3424,3592 3372,3592 3368,3586 3350,3586 3348,3592 3287,3592 3287,3563 3348,3563 3350,3566 3368,3566 3370,3562 3427,3562" /></g><g class="8"><polygon points="1911,2810 1917,2810 1917,2841 1910,2841 1910,2817 1904,2817 190Line truncated

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;	
-}
+}

wires.js

@@ -73,8 +73,9 @@ function setupLayerVisibility(){
 
 function setupBackground(){
 	chipbg = document.getElementById('chipbg');
-	chipbg.width = grCanvasSize;
-	chipbg.height = grCanvasSize;
+	chipbg.width = 4000;
+	chipbg.height = 4000;
+	return;
 	var ctx = chipbg.getContext('2d');
 	ctx.fillStyle = '#000000';
 	ctx.strokeStyle = 'rgba(255,255,255,0.5)';
@@ -137,10 +138,10 @@ function hexdigit(n){return '0123456789ABCDEF'.charAt(n);}
 
 function refresh(){
 	if(!chipLayoutIsVisible) return;
-	ctx.clearRect(0,0,grCanvasSize,grCanvasSize);
-	for(i in nodes){
-		if(isNodeHigh(i)) overlayNode(nodes[i].segs);
-	}
+//	ctx.clearRect(0,0,grCanvasSize,grCanvasSize);
+//	for(i in nodes){
+//		if(isNodeHigh(i)) overlayNode(nodes[i].segs);
+//	}
 	hiliteNode(hilited);
 }