First cut refactor into expert and kiosk
This commit is contained in:
Barry Silverman
parent
dc0fb1ef06
commit
cede111a0f
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<title>Visual 6502 in JavaScript</title>
|
||||
<style type="text/css">@import "expert.css";</style>
|
||||
<script src="segdefs.js"></script>
|
||||
<script src="transdefs.js"></script>
|
||||
<script src="nodenames.js"></script>
|
||||
<script src="wires.js"></script>
|
||||
<script src="expertWires.js"></script>
|
||||
<script src="chipsim.js"></script>
|
||||
<script src="memtable.js"></script>
|
||||
<script src="macros.js"></script>
|
||||
<script src="testprogram.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function handleOnload() {
|
||||
/MSIE (\d+\.\d+);/.test(navigator.appVersion);
|
||||
IEVersion=Number(RegExp.$1);
|
||||
if((navigator.appName == 'Microsoft Internet Explorer') && (IEVersion<9)){
|
||||
document.getElementById('browsertrouble').innerHTML=
|
||||
'<p>Sorry, '+navigator.appName+' not supported - showing you a picture instead!</p>';
|
||||
document.getElementById('frame').innerHTML='<a href="browsertrouble.html"><img src="images/jssim2.png" style="border:10px"></a>';
|
||||
}else{
|
||||
setTimeout(setup,200);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="handleOnload();">
|
||||
<span id="plain">
|
||||
<a href="http://www.visual6502.org/faq.html">FAQ</a>
|
||||
<a href="http://blog.visual6502.org">Blog</a>
|
||||
<a href="http://www.visual6502.org/links.html">Links</a> 
|
||||
</span>
|
||||
<div class="frame" id="frame">
|
||||
<div class="leftcolumn">
|
||||
<div id="chipsurround">
|
||||
<div class="chip" id="chip">
|
||||
<span id="waiting">Please wait, graphics initialising...</span>
|
||||
<canvas class="chip" id="chipbg"></canvas>
|
||||
<canvas class="chip" id="overlay"></canvas>
|
||||
<canvas class="chip" id="hilite"></canvas>
|
||||
<canvas class="chip" id="hitbuffer"></canvas>
|
||||
</div>
|
||||
</div> <!-- chipsurround -->
|
||||
<div class="nochip" id="nochip">
|
||||
<form>
|
||||
<input type="button" value="Show chip layout" onclick="updateChipLayoutVisibility(true)" />
|
||||
</form>
|
||||
</div>
|
||||
<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)
|
||||
<input type="checkbox" name="4" id="updateShow4" onchange="updateShow(this.name,this.checked)" />(powered diffusion)
|
||||
<input type="checkbox" name="5" id="updateShow5" onchange="updateShow(this.name,this.checked)" />(polysilicon)
|
||||
<input type="checkbox" name="0" id="updateShow0" onchange="updateShow(this.name,this.checked)" />(metal)
|
||||
<input type="checkbox" name="2" id="updateShow2" onchange="updateShow(this.name,this.checked)" />(protection)
|
||||
</form>
|
||||
<form>
|
||||
<input type="button" value="Hide Chip Layout" onclick="updateChipLayoutVisibility(false)" />
|
||||
<input type="button" value="Clear Highlighting" onclick="clearHighlight()" />
|
||||
<span class="animatebox">
|
||||
Animate during simulation:
|
||||
<input type="checkbox" id="animateModeCheckbox" onchange="updateChipLayoutAnimation(this.checked)"
|
||||
/></span>
|
||||
|
||||
<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)" />
|
||||
</form>
|
||||
<br />
|
||||
<div id="logstreamscroller">
|
||||
<table class="logstream" id="logstream"></table>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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> <!-- closing 'frame' div -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,341 @@
|
|||
/*
|
||||
Copyright (c) 2010 Brian Silverman, Barry Silverman
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
*/
|
||||
|
||||
var centerx=300, centery=300;
|
||||
var zoom=1;
|
||||
var dragMouseX, dragMouseY, moved;
|
||||
var statbox;
|
||||
|
||||
// Some constants for the graphics presentation
|
||||
// the canvas is embedded in an 800x600 clipping div
|
||||
// which gives rise to some of the 300 and 400 values in the code
|
||||
// there are also some 600 values
|
||||
// the 6502D chip coords are in the box (216,179) to (8983,9807)
|
||||
// we have 4 canvases all the same size, now 2000 pixels square
|
||||
// chip background - the layout
|
||||
// overlay - a red/white transparency to show logic high or low
|
||||
// hilite - to show the selected polygon
|
||||
// hitbuffer - abusing color values to return which polygon is under a point
|
||||
// we no longer use a scaling transform - we now scale the chip data at
|
||||
// the point of drawing line segments
|
||||
// if the canvas is any smaller than chip coordinates there will be
|
||||
// rounding artifacts, and at high zoom there will be anti-aliasing on edges.
|
||||
var grMaxZoom=12;
|
||||
var grChipSize=10000;
|
||||
var grCanvasSize=2000;
|
||||
var grLineWidth=1;
|
||||
|
||||
// Index of layerNames corresponds to index into drawLayers
|
||||
var layernames = ['metal', 'switched diffusion', 'inputdiode', 'grounded diffusion', 'powered diffusion', 'polysilicon'];
|
||||
var colors = ['rgba(128,128,192,0.4)','#FFFF00','#FF00FF','#4DFF4D',
|
||||
'#FF4D4D','#801AC0','rgba(128,0,255,0.75)'];
|
||||
var drawlayers = [true, true, true, true, true, true];
|
||||
|
||||
// some modes and parameters which can be passed in from the URL query
|
||||
var moveHereFirst;
|
||||
var expertMode=false
|
||||
var animateChipLayout = true;
|
||||
var chipLayoutIsVisible = true;
|
||||
var userCode=[];
|
||||
var userResetLow;
|
||||
var userResetHigh;
|
||||
var userSteps;
|
||||
var testprogram=[];
|
||||
var testprogramAddress;
|
||||
|
||||
/////////////////////////
|
||||
//
|
||||
// Drawing Setup
|
||||
//
|
||||
/////////////////////////
|
||||
|
||||
// try to present a meaningful page before starting expensive work
|
||||
function setup(){
|
||||
statbox = document.getElementById('status');
|
||||
setStatus('loading 6502...');
|
||||
setTimeout(setup_part2, 0);
|
||||
}
|
||||
|
||||
function setup_part2(){
|
||||
frame = document.getElementById('frame');
|
||||
statbox = document.getElementById('status');
|
||||
setupParams();
|
||||
updateExpertMode(expertMode);
|
||||
setupNodes();
|
||||
setupTransistors();
|
||||
if(chipLayoutIsVisible){
|
||||
// if user requests no chip layout, we can do no canvas operations at all
|
||||
// which saves a lot of memory and allows us to run on small systems
|
||||
updateChipLayoutVisibility(true);
|
||||
}
|
||||
window.onkeypress = function(e){handleKey(e);}
|
||||
setStatus('resetting 6502...');
|
||||
setTimeout(setup_part3, 0);
|
||||
}
|
||||
|
||||
function setup_part3(){
|
||||
setupTable();
|
||||
setupNodeNameList();
|
||||
loadProgram();
|
||||
initChip();
|
||||
document.getElementById('stop').style.visibility = 'hidden';
|
||||
go();
|
||||
}
|
||||
|
||||
function setupParams(){
|
||||
if(location.search=="")
|
||||
return
|
||||
var queryParts=location.search.slice(1).split('&');
|
||||
var panx;
|
||||
var pany;
|
||||
var zoom;
|
||||
var userAddress;
|
||||
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
|
||||
//
|
||||
// user interface mode control
|
||||
if(name=="loglevel" && parseInt(value)!=NaN){
|
||||
updateLoglevel(value);
|
||||
} else if(name=="expert" && value.indexOf("t")==0){
|
||||
updateExpertMode(true);
|
||||
} else if(name=="graphics" && value.indexOf("f")==0){
|
||||
updateChipLayoutVisibility(false);
|
||||
} else
|
||||
// place the graphics window at a point of interest
|
||||
if(name=="panx" && parseInt(value)!=NaN){
|
||||
panx=parseInt(value);
|
||||
} else if(name=="pany" && parseInt(value)!=NaN){
|
||||
pany=parseInt(value);
|
||||
} else if(name=="zoom" && parseInt(value)!=NaN){
|
||||
zoom=parseInt(value);
|
||||
} else
|
||||
// load a test program: Address, Data and Reset
|
||||
if(name=="a" && parseInt(value,16)!=NaN){
|
||||
userAddress=parseInt(value,16);
|
||||
} else if(name=="d" && value.match(/[0-9a-fA-F]*/)[0].length==value.length){
|
||||
for(var j=0;j<value.length;j+=2)
|
||||
userCode[userAddress++]=parseInt(value.slice(j,j+2),16);
|
||||
} else if(name=="r" && parseInt(value,16)!=NaN){
|
||||
userResetLow=parseInt(value,16)%256;
|
||||
userResetHigh=(parseInt(value,16)>>8)%256;
|
||||
} else
|
||||
// run a test program, and optionally check against a golden checksum
|
||||
if(name=="steps" && parseInt(value)!=NaN){
|
||||
userSteps=parseInt(value);
|
||||
running=true;
|
||||
} else if(name=="checksum" && parseInt(value,16)!=NaN){
|
||||
goldenChecksum=(0x100000000+parseInt(value,16)).toString(16).slice(-8);
|
||||
} else {
|
||||
if(loglevel>0)
|
||||
console.log('unrecognised parameters:',params);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(panx!=null && pany!=null && zoom!=null)
|
||||
moveHereFirst=[panx,pany,zoom];
|
||||
}
|
||||
|
||||
function updateChipLayoutAnimation(isOn){
|
||||
// simulation is much faster if we don't update the chip layout on every step
|
||||
animateChipLayout=isOn;
|
||||
document.getElementById('animateModeCheckbox').checked = animateChipLayout;
|
||||
}
|
||||
|
||||
/////////////////////////
|
||||
//
|
||||
// User Interface
|
||||
//
|
||||
/////////////////////////
|
||||
|
||||
function handleKey(e){
|
||||
var c = e.charCode;
|
||||
c = String.fromCharCode(c);
|
||||
if('<>?npZzx'.indexOf(c)==-1) return;
|
||||
if((c=='Z'||c=='x'||c=='<') && zoom>1) setZoom(zoom/1.2);
|
||||
else if((c=='z'||c=='>') && zoom<grMaxZoom) setZoom(zoom*1.2);
|
||||
else if(c=='?') setZoom(1);
|
||||
else if(c=='n') stepForward();
|
||||
else if(c=='p') stepBack();
|
||||
}
|
||||
|
||||
function mouseDown(e){
|
||||
e.preventDefault();
|
||||
moved=false;
|
||||
dragMouseX = e.clientX;
|
||||
dragMouseY = e.clientY;
|
||||
window.onmousemove = function(e){mouseMove(e)};
|
||||
window.onmouseup = function(e){mouseUp(e)};
|
||||
}
|
||||
|
||||
function mouseMove(e){
|
||||
moved = true;
|
||||
if(zoom==1) return;
|
||||
var dx = e.clientX-dragMouseX;
|
||||
var dy = e.clientY-dragMouseY;
|
||||
dragMouseX = e.clientX;
|
||||
dragMouseY = e.clientY;
|
||||
centerx-=dx/zoom;
|
||||
centerx = Math.max(centerx, 400/zoom);
|
||||
centerx = Math.min(centerx, 600-400/zoom);
|
||||
centery-=dy/zoom;
|
||||
centery = Math.max(centery, 300/zoom);
|
||||
centery = Math.min(centery, 600-300/zoom);
|
||||
recenter();
|
||||
}
|
||||
|
||||
function mouseUp(e){
|
||||
if(!moved) handleClick(e);
|
||||
window.onmousemove = undefined;
|
||||
window.onmouseup = undefined;
|
||||
}
|
||||
|
||||
function setZoom(n){
|
||||
zoom = n;
|
||||
setChipStyle({
|
||||
width: 600*n+'px',
|
||||
height: 600*n+'px'
|
||||
});
|
||||
recenter();
|
||||
}
|
||||
|
||||
function recenter(){
|
||||
var top = -centery*zoom+300;
|
||||
top = Math.min(top, 0);
|
||||
top = Math.max(top, -600*(zoom-1));
|
||||
var left = -centerx*zoom+400;
|
||||
left = Math.min(left, 0);
|
||||
left = Math.max(left, (zoom==1)?100:-600*zoom+800);
|
||||
setChipStyle({
|
||||
top: top+'px',
|
||||
left: left+'px',
|
||||
});
|
||||
document.getElementById('linkHere').href=location.pathname+"?"+whereAmIAsQuery();
|
||||
}
|
||||
|
||||
function handleClick(e){
|
||||
var x = localx(hilite, e.clientX)/zoom;
|
||||
var y = localy(hilite, e.clientY)/zoom;
|
||||
var w = findNodeNumber(x,y);
|
||||
if(e.shiftKey) hiliteNode(getNodeGroup(w));
|
||||
else {var a=new Array(); a.push(w); hiliteNode(a);}
|
||||
var cx = Math.round(x*grChipSize/600);
|
||||
var cy = Math.round(y*grChipSize/600);
|
||||
if(w==-1) {
|
||||
setStatus('x: '+cx, 'y: '+cy);
|
||||
} else {
|
||||
var s1='x: ' + cx + ' y: ' + cy;
|
||||
var s2='node: ' + w + ' ' + nodeName(w);
|
||||
setStatus(s1, s2);
|
||||
if(ctrace) console.log(s1, s2);
|
||||
}
|
||||
}
|
||||
|
||||
function updateLoglevel(value){
|
||||
loglevel = value;
|
||||
initLogbox(signalSet(loglevel));
|
||||
}
|
||||
|
||||
function updateExpertMode(isOn){
|
||||
expertMode=true
|
||||
document.getElementById('expertControlPanel').style.display = 'block';
|
||||
if(loglevel==0)
|
||||
updateLoglevel(1);
|
||||
if(chipLayoutIsVisible)
|
||||
document.getElementById('layoutControlPanel').style.display = 'block';
|
||||
}
|
||||
|
||||
function updateChipLayoutVisibility(isOn){
|
||||
chipLayoutIsVisible=isOn;
|
||||
if(chipLayoutIsVisible) {
|
||||
document.getElementById('chipsurround').style.display = 'block';
|
||||
if(expertMode)
|
||||
document.getElementById('layoutControlPanel').style.display = 'block';
|
||||
document.getElementById('nochip').style.display = 'none';
|
||||
document.getElementById('logstreamscroller').style.height="260px";
|
||||
// allow the display to update while we load the graphics
|
||||
setStatus('loading graphics...');
|
||||
setTimeout(setupChipLayoutGraphics, 0);
|
||||
} else {
|
||||
// cannot animate the layout if there is no canvas
|
||||
updateChipLayoutAnimation(false);
|
||||
// replace the layout display with a button to show it
|
||||
document.getElementById('chipsurround').style.display = 'none';
|
||||
document.getElementById('layoutControlPanel').style.display = 'none';
|
||||
document.getElementById('nochip').style.display = 'block';
|
||||
document.getElementById('logstreamscroller').style.height="880px";
|
||||
}
|
||||
}
|
||||
|
||||
function setupChipLayoutGraphics(){
|
||||
setupLayerVisibility();
|
||||
setupBackground();
|
||||
setupOverlay();
|
||||
setupHilite();
|
||||
setupHitBuffer();
|
||||
recenter();
|
||||
refresh();
|
||||
document.getElementById('waiting').style.display = 'none';
|
||||
setStatus('Ready!'); // would prefer chipStatus but it's not idempotent
|
||||
if(moveHereFirst!=null)
|
||||
moveHere(moveHereFirst);
|
||||
hilite.onmousedown = function(e){mouseDown(e);}
|
||||
}
|
||||
|
||||
// utility function to save graphics pan and zoom
|
||||
function whereAmIAsQuery(){
|
||||
var w=whereAmI();
|
||||
return "panx="+w[0]+"&pany="+w[1]+"&zoom="+w[2]
|
||||
}
|
||||
function whereAmI(){
|
||||
return [centerx, centery, zoom];
|
||||
}
|
||||
|
||||
// restore graphics pan and zoom (perhaps as given in the URL)
|
||||
function moveHere(place){
|
||||
centerx = place[0];
|
||||
centery = place[1];
|
||||
setZoom(place[2]);
|
||||
}
|
||||
|
||||
/////////////////////////
|
||||
//
|
||||
// Etc.
|
||||
//
|
||||
/////////////////////////
|
||||
|
||||
function setChipStyle(props){
|
||||
for(var i in props){
|
||||
chipbg.style[i] = props[i];
|
||||
overlay.style[i] = props[i];
|
||||
hilite.style[i] = props[i];
|
||||
hitbuffer.style[i] = props[i];
|
||||
}
|
||||
}
|
||||
|
||||
47
index.html
47
index.html
|
|
@ -2,11 +2,12 @@
|
|||
|
||||
<head>
|
||||
<title>Visual 6502 in JavaScript</title>
|
||||
<style type="text/css">@import "wires.css";</style>
|
||||
<style type="text/css">@import "expert.css";</style>
|
||||
<script src="segdefs.js"></script>
|
||||
<script src="transdefs.js"></script>
|
||||
<script src="nodenames.js"></script>
|
||||
<script src="wires.js"></script>
|
||||
<script src="expertWires.js"></script>
|
||||
<script src="chipsim.js"></script>
|
||||
<script src="memtable.js"></script>
|
||||
<script src="macros.js"></script>
|
||||
|
|
@ -29,30 +30,10 @@ function handleOnload() {
|
|||
</head>
|
||||
|
||||
<body onload="handleOnload();">
|
||||
<div id="basicModeText1">
|
||||
<br />
|
||||
<span id="title"><a href="http://visual6502.org">The Visual 6502</a></span>
|
||||
<br />
|
||||
</div>
|
||||
<span id="plain">
|
||||
<a href="http://www.visual6502.org/faq.html">FAQ</a>
|
||||
<a href="http://blog.visual6502.org">Blog</a>
|
||||
<a href="http://www.visual6502.org/links.html">Links</a> 
|
||||
<div id="basicModeText2">
|
||||
<br /><br />
|
||||
This simulator uses HTML5 features only found on the latest versions of browsers and needs
|
||||
lots of RAM. If you have trouble, please <a href="browsertrouble.html">check compatibility.</a>
|
||||
<br />
|
||||
<span id="browsertrouble"></span>
|
||||
<br />
|
||||
Hit '>' to zoom in, '<' to zoom out
|
||||
<br />
|
||||
Left-click and drag to scroll around
|
||||
<br />
|
||||
Enter your own program into the array of RAM
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
</span>
|
||||
<div class="frame" id="frame">
|
||||
<div class="leftcolumn">
|
||||
|
|
@ -111,36 +92,12 @@ Enter your own program into the array of RAM
|
|||
<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 />
|
||||
</div> <!-- footer -->
|
||||
</div> <!-- closing 'frame' div -->
|
||||
|
||||
<script type="text/javascript"><!--
|
||||
google_ad_client = "pub-9008420149077488";
|
||||
/* 728x90, created 9/22/10 */
|
||||
google_ad_slot = "4303982675";
|
||||
google_ad_width = 728;
|
||||
google_ad_height = 90;
|
||||
//-->
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
/*
|
||||
Copyright (c) 2010 Brian Silverman, Barry Silverman
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
*/
|
||||
|
||||
body {
|
||||
background: white;
|
||||
color: black;
|
||||
/* font-family: cursive;*/
|
||||
font-family :Verdana, Arial, Helvetica, Sans-Serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div.frame {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
width: 1150px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
div.chip {
|
||||
background: lightgray;
|
||||
border: 2px solid gray;
|
||||
position: absolute;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
canvas.chip {
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
div.buttons{
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 820px;
|
||||
}
|
||||
|
||||
p.status {
|
||||
position: absolute;
|
||||
left: 820px;
|
||||
top: 20px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
img.navbutton{
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
img.navplay{
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
img.navstop{
|
||||
position: absolute;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
table.memtable {
|
||||
position: absolute;
|
||||
top: 78px;
|
||||
left: 820px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size:30px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<title>Visual 6502 in JavaScript</title>
|
||||
<style type="text/css">@import "kiosk.css";</style>
|
||||
<script src="segdefs.js"></script>
|
||||
<script src="transdefs.js"></script>
|
||||
<script src="nodenames.js"></script>
|
||||
<script src="kioskWires.js"></script>
|
||||
<script src="wires.js"></script>
|
||||
<script src="chipsim.js"></script>
|
||||
<script src="memtable.js"></script>
|
||||
<script src="testprogram.js"></script>
|
||||
<script src="macros.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function handleOnload() {
|
||||
/MSIE (\d+\.\d+);/.test(navigator.appVersion);
|
||||
IEVersion=Number(RegExp.$1);
|
||||
if((navigator.appName == 'Microsoft Internet Explorer') && (IEVersion<9)){
|
||||
document.getElementById('browsertrouble').innerHTML=
|
||||
'<p>Sorry, '+navigator.appName+' not supported - showing you a picture instead!</p>';
|
||||
document.getElementById('frame').innerHTML='<a href="browsertrouble.html"><img src="images/jssim2.png" style="border:10px"></a>';
|
||||
}else{
|
||||
setTimeout(setup,200);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="handleOnload();">
|
||||
<br />
|
||||
<span id="title"><a href="http://visual6502.org">The Visual 6502</a></span>
|
||||
<span id="plain">
|
||||
<br />
|
||||
<a href="http://www.visual6502.org/faq.html">FAQ</a>
|
||||
<a href="http://blog.visual6502.org">Blog</a>
|
||||
<a href="http://www.visual6502.org/links.html">Links</a> 
|
||||
<br /><br />
|
||||
This simulator uses HTML5 features only found on the latest versions of browsers and needs
|
||||
lots of RAM. If you have trouble, please <a href="browsertrouble.html">check compatibility.</a>
|
||||
<br />
|
||||
<span id="browsertrouble"></span>
|
||||
<br />
|
||||
Hit '>' to zoom in, '<' to zoom out
|
||||
<br />
|
||||
Left-click and drag to scroll around
|
||||
<br />
|
||||
Enter your own program into the array of RAM
|
||||
<br />
|
||||
<br />
|
||||
</span>
|
||||
<div class="frame" id="frame">
|
||||
<div class="chip" id="chip">
|
||||
<canvas class="chip" id="chipbg"></canvas>
|
||||
<canvas class="chip" id="overlay"></canvas>
|
||||
<canvas class="chip" id="hilite"></canvas>
|
||||
<canvas class="chip" id="hitbuffer"></canvas>
|
||||
</div>
|
||||
<div class = "buttons">
|
||||
<div style="position:relative; float:left;">
|
||||
<a href ="javascript:stopChip()"id="stop"><img class="navstop" src="images/stop.png"></a>
|
||||
<a href ="javascript:runChip()" id="start"><img class="navplay" src="images/play.png"></a>
|
||||
</div>
|
||||
<div style="float:left;">
|
||||
<a href ="javascript:resetChip()"><img class="navbutton" src="images/up.png"></a>
|
||||
<a href ="javascript:stepBack()"><img class="navbutton" src="images/prev.png"></a>
|
||||
<a href ="javascript:stepForward()"><img class="navbutton" src="images/next.png"></a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="status" id="status">x: 0<br>y: 0</p>
|
||||
<table class="memtable" id="memtable"></table>
|
||||
</div>
|
||||
<div id="updateShow">
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
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 />
|
||||
For in-depth 6502 investigation and some more advanced features, try our <a href="/expert/JSSim/index.html">Experimenter's (Beta) version</a>.
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<script type="text/javascript"><!--
|
||||
google_ad_client = "pub-9008420149077488";
|
||||
/* 728x90, created 9/22/10 */
|
||||
google_ad_slot = "4303982675";
|
||||
google_ad_width = 728;
|
||||
google_ad_height = 90;
|
||||
//-->
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
/*
|
||||
Copyright (c) 2010 Brian Silverman, Barry Silverman
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
*/
|
||||
|
||||
var centerx=300, centery=300;
|
||||
var zoom=1;
|
||||
var dragMouseX, dragMouseY, moved;
|
||||
var statbox;
|
||||
var userSteps;
|
||||
var animateChipLayout = true;
|
||||
var userCode=[];
|
||||
var userResetLow;
|
||||
var userResetHigh;
|
||||
|
||||
// Some constants for the graphics presentation
|
||||
// the canvas is embedded in an 800x600 clipping div
|
||||
// which gives rise to some of the 300 and 400 values in the code
|
||||
// there are also some 600 values
|
||||
// the 6502D chip coords are in the box (216,179) to (8983,9807)
|
||||
// we have 4 canvases all the same size, now 2000 pixels square
|
||||
// chip background - the layout
|
||||
// overlay - a red/white transparency to show logic high or low
|
||||
// hilite - to show the selected polygon
|
||||
// hitbuffer - abusing color values to return which polygon is under a point
|
||||
// we no longer use a scaling transform - we now scale the chip data at
|
||||
// the point of drawing line segments
|
||||
// if the canvas is any smaller than chip coordinates there will be
|
||||
// rounding artifacts, and at high zoom there will be anti-aliasing on edges.
|
||||
var grMaxZoom=12;
|
||||
var grChipSize=10000;
|
||||
var grCanvasSize=2000;
|
||||
var grLineWidth=1;
|
||||
|
||||
// Index of layerNames corresponds to index into drawLayers
|
||||
var layernames = ['metal', 'switched diffusion', 'inputdiode', 'grounded diffusion', 'powered diffusion', 'polysilicon'];
|
||||
var colors = ['rgba(128,128,192,0.4)','#FFFF00','#FF00FF','#4DFF4D',
|
||||
'#FF4D4D','#801AC0','rgba(128,0,255,0.75)'];
|
||||
var drawlayers = [true, true, true, true, true, true];
|
||||
|
||||
/////////////////////////
|
||||
//
|
||||
// Drawing Setup
|
||||
//
|
||||
/////////////////////////
|
||||
|
||||
// try to present a meaningful page before starting expensive work
|
||||
function setup(){
|
||||
statbox = document.getElementById('status');
|
||||
setStatus('loading 6502...');
|
||||
setTimeout(setup_part2, 0);
|
||||
}
|
||||
|
||||
function setup_part2(){
|
||||
frame = document.getElementById('frame');
|
||||
statbox = document.getElementById('status');
|
||||
setupNodes();
|
||||
setupTransistors();
|
||||
setupLayerVisibility();
|
||||
setupBackground();
|
||||
setupOverlay();
|
||||
setupHilite();
|
||||
setupHitBuffer();
|
||||
recenter();
|
||||
refresh();
|
||||
setupTable();
|
||||
window.onkeypress = function(e){handleKey(e);}
|
||||
hilite.onmousedown = function(e){mouseDown(e);}
|
||||
setStatus('resetting 6502...');
|
||||
setTimeout(setup_part3, 0);
|
||||
}
|
||||
|
||||
function setup_part3(){
|
||||
loadProgram();
|
||||
initChip();
|
||||
document.getElementById('stop').style.visibility = 'hidden';
|
||||
go();
|
||||
}
|
||||
|
||||
|
||||
/////////////////////////
|
||||
//
|
||||
// User Interface
|
||||
//
|
||||
/////////////////////////
|
||||
|
||||
function handleKey(e){
|
||||
var c = e.charCode;
|
||||
c = String.fromCharCode(c);
|
||||
if('<>?np'.indexOf(c)==-1) return;
|
||||
if(c=='<' && zoom>1) setZoom(zoom/1.2);
|
||||
else if(c=='>' && zoom<grMaxZoom) setZoom(zoom*1.2);
|
||||
else if(c=='?') setZoom(1);
|
||||
else if(c=='n') stepForward();
|
||||
else if(c=='p') stepBack();
|
||||
}
|
||||
|
||||
function mouseDown(e){
|
||||
e.preventDefault();
|
||||
moved=false;
|
||||
dragMouseX = e.clientX;
|
||||
dragMouseY = e.clientY;
|
||||
window.onmousemove = function(e){mouseMove(e)};
|
||||
window.onmouseup = function(e){mouseUp(e)};
|
||||
}
|
||||
|
||||
function mouseMove(e){
|
||||
moved = true;
|
||||
if(zoom==1) return;
|
||||
var dx = e.clientX-dragMouseX;
|
||||
var dy = e.clientY-dragMouseY;
|
||||
dragMouseX = e.clientX;
|
||||
dragMouseY = e.clientY;
|
||||
centerx-=dx/zoom;
|
||||
centerx = Math.max(centerx, 400/zoom);
|
||||
centerx = Math.min(centerx, 600-400/zoom);
|
||||
centery-=dy/zoom;
|
||||
centery = Math.max(centery, 300/zoom);
|
||||
centery = Math.min(centery, 600-300/zoom);
|
||||
recenter();
|
||||
}
|
||||
|
||||
function mouseUp(e){
|
||||
if(!moved) handleClick(e);
|
||||
window.onmousemove = undefined;
|
||||
window.onmouseup = undefined;
|
||||
}
|
||||
|
||||
function setZoom(n){
|
||||
zoom = n;
|
||||
setChipStyle({
|
||||
width: 600*n+'px',
|
||||
height: 600*n+'px'
|
||||
});
|
||||
recenter();
|
||||
}
|
||||
|
||||
function recenter(){
|
||||
var top = -centery*zoom+300;
|
||||
top = Math.min(top, 0);
|
||||
top = Math.max(top, -600*(zoom-1));
|
||||
var left = -centerx*zoom+400;
|
||||
left = Math.min(left, 0);
|
||||
left = Math.max(left, (zoom==1)?100:-600*zoom+800);
|
||||
setChipStyle({
|
||||
top: top+'px',
|
||||
left: left+'px',
|
||||
});
|
||||
}
|
||||
|
||||
function handleClick(e){
|
||||
var x = localx(hilite, e.clientX)/zoom;
|
||||
var y = localy(hilite, e.clientY)/zoom;
|
||||
var w = findNodeNumber(x,y);
|
||||
if(e.shiftKey) hiliteNode(getNodeGroup(w));
|
||||
else {var a=new Array(); a.push(w); hiliteNode(a);}
|
||||
var cx = Math.round(x*grChipSize/600);
|
||||
var cy = Math.round(y*grChipSize/600);
|
||||
if(w==-1) setStatus('x:',cx,'<br>','y:',cy);
|
||||
else {
|
||||
var s1='x: ' + cx + ' y: ' + cy;
|
||||
var s2='node: ' + w + ' ' + nodeName(w);
|
||||
setStatus(s1, s2);
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////
|
||||
//
|
||||
// Etc.
|
||||
//
|
||||
/////////////////////////
|
||||
|
||||
function setChipStyle(props){
|
||||
for(var i in props){
|
||||
chipbg.style[i] = props[i];
|
||||
overlay.style[i] = props[i];
|
||||
hilite.style[i] = props[i];
|
||||
hitbuffer.style[i] = props[i];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -403,6 +403,8 @@ function estimatedHz(){
|
|||
|
||||
function initLogbox(names){
|
||||
var logbox=document.getElementById('logstream');
|
||||
if(logbox==null)return;
|
||||
|
||||
logStream = [];
|
||||
logStream.push("<td>" + names.join("</td><td>") + "</td>");
|
||||
logbox.innerHTML = "<tr>"+logStream.join("</tr><tr>")+"</tr>";
|
||||
|
|
|
|||
18
save.php
18
save.php
|
|
@ -1,18 +0,0 @@
|
|||
<?php
|
||||
|
||||
$filename = $_REQUEST['name'];
|
||||
file_put_contents1($filename, file_get_contents("php://input"));
|
||||
|
||||
function file_put_contents1($filename, $data) {
|
||||
$f = @fopen($filename, 'w');
|
||||
if ($f) {
|
||||
$bytes = fwrite($f, $data);
|
||||
fclose($f);
|
||||
return $bytes;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
332
wires.js
332
wires.js
|
|
@ -21,36 +21,6 @@
|
|||
*/
|
||||
|
||||
var frame, chipbg, overlay, hilite, hitbuffer, ctx;
|
||||
var centerx=300, centery=300;
|
||||
var zoom=1;
|
||||
var dragMouseX, dragMouseY, moved;
|
||||
var statbox;
|
||||
|
||||
// Some constants for the graphics presentation
|
||||
// the canvas is embedded in an 800x600 clipping div
|
||||
// which gives rise to some of the 300 and 400 values in the code
|
||||
// there are also some 600 values
|
||||
// the 6502D chip coords are in the box (216,179) to (8983,9807)
|
||||
// we have 4 canvases all the same size, now 2000 pixels square
|
||||
// chip background - the layout
|
||||
// overlay - a red/white transparency to show logic high or low
|
||||
// hilite - to show the selected polygon
|
||||
// hitbuffer - abusing color values to return which polygon is under a point
|
||||
// we no longer use a scaling transform - we now scale the chip data at
|
||||
// the point of drawing line segments
|
||||
// if the canvas is any smaller than chip coordinates there will be
|
||||
// rounding artifacts, and at high zoom there will be anti-aliasing on edges.
|
||||
var grMaxZoom=12;
|
||||
var grChipSize=10000;
|
||||
var grCanvasSize=2000;
|
||||
var grLineWidth=1;
|
||||
|
||||
// Index of layerNames corresponds to index into drawLayers
|
||||
var layernames = ['metal', 'switched diffusion', 'inputdiode', 'grounded diffusion', 'powered diffusion', 'polysilicon'];
|
||||
var colors = ['rgba(128,128,192,0.4)','#FFFF00','#FF00FF','#4DFF4D',
|
||||
'#FF4D4D','#801AC0','rgba(128,0,255,0.75)'];
|
||||
var drawlayers = [true, true, true, true, true, true];
|
||||
|
||||
var nodes = new Array();
|
||||
var transistors = {};
|
||||
var nodenamelist=[];
|
||||
|
|
@ -58,124 +28,6 @@ var nodenamelist=[];
|
|||
var ngnd = nodenames['vss'];
|
||||
var npwr = nodenames['vcc'];
|
||||
|
||||
// some modes and parameters which can be passed in from the URL query
|
||||
var moveHereFirst;
|
||||
var expertMode=false
|
||||
var animateChipLayout = true;
|
||||
var chipLayoutIsVisible = true;
|
||||
var userCode=[];
|
||||
var userResetLow;
|
||||
var userResetHigh;
|
||||
var userSteps;
|
||||
var testprogram=[];
|
||||
var testprogramAddress;
|
||||
|
||||
/////////////////////////
|
||||
//
|
||||
// Drawing Setup
|
||||
//
|
||||
/////////////////////////
|
||||
|
||||
// try to present a meaningful page before starting expensive work
|
||||
function setup(){
|
||||
statbox = document.getElementById('status');
|
||||
setStatus('loading 6502...');
|
||||
setTimeout(setup_part2, 0);
|
||||
}
|
||||
|
||||
function setup_part2(){
|
||||
frame = document.getElementById('frame');
|
||||
statbox = document.getElementById('status');
|
||||
setupParams();
|
||||
updateExpertMode(expertMode);
|
||||
setupNodes();
|
||||
setupTransistors();
|
||||
if(chipLayoutIsVisible){
|
||||
// if user requests no chip layout, we can do no canvas operations at all
|
||||
// which saves a lot of memory and allows us to run on small systems
|
||||
updateChipLayoutVisibility(true);
|
||||
}
|
||||
window.onkeypress = function(e){handleKey(e);}
|
||||
setStatus('resetting 6502...');
|
||||
setTimeout(setup_part3, 0);
|
||||
}
|
||||
|
||||
function setup_part3(){
|
||||
setupTable();
|
||||
setupNodeNameList();
|
||||
loadProgram();
|
||||
initChip();
|
||||
document.getElementById('stop').style.visibility = 'hidden';
|
||||
go();
|
||||
}
|
||||
|
||||
function setupParams(){
|
||||
if(location.search=="")
|
||||
return
|
||||
var queryParts=location.search.slice(1).split('&');
|
||||
var panx;
|
||||
var pany;
|
||||
var zoom;
|
||||
var userAddress;
|
||||
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
|
||||
//
|
||||
// user interface mode control
|
||||
if(name=="loglevel" && parseInt(value)!=NaN){
|
||||
updateLoglevel(value);
|
||||
} else if(name=="expert" && value.indexOf("t")==0){
|
||||
updateExpertMode(true);
|
||||
} else if(name=="graphics" && value.indexOf("f")==0){
|
||||
updateChipLayoutVisibility(false);
|
||||
} else
|
||||
// place the graphics window at a point of interest
|
||||
if(name=="panx" && parseInt(value)!=NaN){
|
||||
panx=parseInt(value);
|
||||
} else if(name=="pany" && parseInt(value)!=NaN){
|
||||
pany=parseInt(value);
|
||||
} else if(name=="zoom" && parseInt(value)!=NaN){
|
||||
zoom=parseInt(value);
|
||||
} else
|
||||
// load a test program: Address, Data and Reset
|
||||
if(name=="a" && parseInt(value,16)!=NaN){
|
||||
userAddress=parseInt(value,16);
|
||||
} else if(name=="d" && value.match(/[0-9a-fA-F]*/)[0].length==value.length){
|
||||
for(var j=0;j<value.length;j+=2)
|
||||
userCode[userAddress++]=parseInt(value.slice(j,j+2),16);
|
||||
} else if(name=="r" && parseInt(value,16)!=NaN){
|
||||
userResetLow=parseInt(value,16)%256;
|
||||
userResetHigh=(parseInt(value,16)>>8)%256;
|
||||
} else
|
||||
// run a test program, and optionally check against a golden checksum
|
||||
if(name=="steps" && parseInt(value)!=NaN){
|
||||
userSteps=parseInt(value);
|
||||
running=true;
|
||||
} else if(name=="checksum" && parseInt(value,16)!=NaN){
|
||||
goldenChecksum=(0x100000000+parseInt(value,16)).toString(16).slice(-8);
|
||||
} else {
|
||||
if(loglevel>0)
|
||||
console.log('unrecognised parameters:',params);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(panx!=null && pany!=null && zoom!=null)
|
||||
moveHereFirst=[panx,pany,zoom];
|
||||
}
|
||||
|
||||
function updateChipLayoutAnimation(isOn){
|
||||
// simulation is much faster if we don't update the chip layout on every step
|
||||
animateChipLayout=isOn;
|
||||
document.getElementById('animateModeCheckbox').checked = animateChipLayout;
|
||||
}
|
||||
|
||||
function setupNodes(){
|
||||
for(var i in segdefs){
|
||||
var seg = segdefs[i];
|
||||
|
|
@ -278,8 +130,6 @@ 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);
|
||||
|
|
@ -316,95 +166,6 @@ function drawSeg(ctx, seg){
|
|||
ctx.lineTo(grScale(seg[0]+dx), grScale(grChipSize-seg[1]));
|
||||
}
|
||||
|
||||
/////////////////////////
|
||||
//
|
||||
// User Interface
|
||||
//
|
||||
/////////////////////////
|
||||
|
||||
function handleKey(e){
|
||||
var c = e.charCode;
|
||||
c = String.fromCharCode(c);
|
||||
if('<>?npZzx'.indexOf(c)==-1) return;
|
||||
if((c=='Z'||c=='x'||c=='<') && zoom>1) setZoom(zoom/1.2);
|
||||
else if((c=='z'||c=='>') && zoom<grMaxZoom) setZoom(zoom*1.2);
|
||||
else if(c=='?') setZoom(1);
|
||||
else if(c=='n') stepForward();
|
||||
else if(c=='p') stepBack();
|
||||
}
|
||||
|
||||
function mouseDown(e){
|
||||
e.preventDefault();
|
||||
moved=false;
|
||||
dragMouseX = e.clientX;
|
||||
dragMouseY = e.clientY;
|
||||
window.onmousemove = function(e){mouseMove(e)};
|
||||
window.onmouseup = function(e){mouseUp(e)};
|
||||
}
|
||||
|
||||
function mouseMove(e){
|
||||
moved = true;
|
||||
if(zoom==1) return;
|
||||
var dx = e.clientX-dragMouseX;
|
||||
var dy = e.clientY-dragMouseY;
|
||||
dragMouseX = e.clientX;
|
||||
dragMouseY = e.clientY;
|
||||
centerx-=dx/zoom;
|
||||
centerx = Math.max(centerx, 400/zoom);
|
||||
centerx = Math.min(centerx, 600-400/zoom);
|
||||
centery-=dy/zoom;
|
||||
centery = Math.max(centery, 300/zoom);
|
||||
centery = Math.min(centery, 600-300/zoom);
|
||||
recenter();
|
||||
}
|
||||
|
||||
function mouseUp(e){
|
||||
if(!moved) handleClick(e);
|
||||
window.onmousemove = undefined;
|
||||
window.onmouseup = undefined;
|
||||
}
|
||||
|
||||
function setZoom(n){
|
||||
zoom = n;
|
||||
setChipStyle({
|
||||
width: 600*n+'px',
|
||||
height: 600*n+'px'
|
||||
});
|
||||
recenter();
|
||||
}
|
||||
|
||||
function recenter(){
|
||||
var top = -centery*zoom+300;
|
||||
top = Math.min(top, 0);
|
||||
top = Math.max(top, -600*(zoom-1));
|
||||
var left = -centerx*zoom+400;
|
||||
left = Math.min(left, 0);
|
||||
left = Math.max(left, (zoom==1)?100:-600*zoom+800);
|
||||
setChipStyle({
|
||||
top: top+'px',
|
||||
left: left+'px',
|
||||
});
|
||||
document.getElementById('linkHere').href=location.pathname+"?"+whereAmIAsQuery();
|
||||
}
|
||||
|
||||
function handleClick(e){
|
||||
var x = localx(hilite, e.clientX)/zoom;
|
||||
var y = localy(hilite, e.clientY)/zoom;
|
||||
var w = findNodeNumber(x,y);
|
||||
if(e.shiftKey) hiliteNode(getNodeGroup(w));
|
||||
else {var a=new Array(); a.push(w); hiliteNode(a);}
|
||||
var cx = Math.round(x*grChipSize/600);
|
||||
var cy = Math.round(y*grChipSize/600);
|
||||
if(w==-1) {
|
||||
setStatus('x: '+cx, 'y: '+cy);
|
||||
} else {
|
||||
var s1='x: ' + cx + ' y: ' + cy;
|
||||
var s2='node: ' + w + ' ' + nodeName(w);
|
||||
setStatus(s1, s2);
|
||||
if(ctrace) console.log(s1, s2);
|
||||
}
|
||||
}
|
||||
|
||||
function findNodeNumber(x,y){
|
||||
var ctx = hitbuffer.getContext('2d');
|
||||
var pixels = ctx.getImageData(x*grCanvasSize/600, y*grCanvasSize/600, 2, 2).data;
|
||||
|
|
@ -415,31 +176,6 @@ function findNodeNumber(x,y){
|
|||
return (high<<8)+(mid<<4)+low;
|
||||
}
|
||||
|
||||
function updateLoglevel(value){
|
||||
loglevel = value;
|
||||
initLogbox(signalSet(loglevel));
|
||||
}
|
||||
|
||||
function updateExpertMode(isOn){
|
||||
expertMode=isOn
|
||||
document.getElementById('expertModeCheckbox').checked = expertMode;
|
||||
if(expertMode){
|
||||
document.getElementById('expertControlPanel').style.display = 'block';
|
||||
document.getElementById('basicModeText1').style.display = 'none';
|
||||
document.getElementById('basicModeText2').style.display = 'none';
|
||||
if(loglevel==0)
|
||||
updateLoglevel(1);
|
||||
if(chipLayoutIsVisible)
|
||||
document.getElementById('layoutControlPanel').style.display = 'block';
|
||||
} else {
|
||||
document.getElementById('expertControlPanel').style.display = 'none';
|
||||
document.getElementById('basicModeText1').style.display = 'block';
|
||||
document.getElementById('basicModeText2').style.display = 'block';
|
||||
if(chipLayoutIsVisible)
|
||||
document.getElementById('layoutControlPanel').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function clearHighlight(){
|
||||
// remove red/white overlay according to logic value
|
||||
// for easier layout navigation
|
||||
|
|
@ -451,74 +187,6 @@ function updateShow(layer, on){
|
|||
setupBackground();
|
||||
}
|
||||
|
||||
function updateChipLayoutVisibility(isOn){
|
||||
chipLayoutIsVisible=isOn;
|
||||
if(chipLayoutIsVisible) {
|
||||
document.getElementById('chipsurround').style.display = 'block';
|
||||
if(expertMode)
|
||||
document.getElementById('layoutControlPanel').style.display = 'block';
|
||||
document.getElementById('nochip').style.display = 'none';
|
||||
document.getElementById('logstreamscroller').style.height="260px";
|
||||
// allow the display to update while we load the graphics
|
||||
setStatus('loading graphics...');
|
||||
setTimeout(setupChipLayoutGraphics, 0);
|
||||
} else {
|
||||
// cannot animate the layout if there is no canvas
|
||||
updateChipLayoutAnimation(false);
|
||||
// replace the layout display with a button to show it
|
||||
document.getElementById('chipsurround').style.display = 'none';
|
||||
document.getElementById('layoutControlPanel').style.display = 'none';
|
||||
document.getElementById('nochip').style.display = 'block';
|
||||
document.getElementById('logstreamscroller').style.height="880px";
|
||||
}
|
||||
}
|
||||
|
||||
function setupChipLayoutGraphics(){
|
||||
setupLayerVisibility();
|
||||
setupBackground();
|
||||
setupOverlay();
|
||||
setupHilite();
|
||||
setupHitBuffer();
|
||||
recenter();
|
||||
refresh();
|
||||
document.getElementById('waiting').style.display = 'none';
|
||||
setStatus('Ready!'); // would prefer chipStatus but it's not idempotent
|
||||
if(moveHereFirst!=null)
|
||||
moveHere(moveHereFirst);
|
||||
hilite.onmousedown = function(e){mouseDown(e);}
|
||||
}
|
||||
|
||||
// utility function to save graphics pan and zoom
|
||||
function whereAmIAsQuery(){
|
||||
var w=whereAmI();
|
||||
return "panx="+w[0]+"&pany="+w[1]+"&zoom="+w[2]
|
||||
}
|
||||
function whereAmI(){
|
||||
return [centerx, centery, zoom];
|
||||
}
|
||||
|
||||
// restore graphics pan and zoom (perhaps as given in the URL)
|
||||
function moveHere(place){
|
||||
centerx = place[0];
|
||||
centery = place[1];
|
||||
setZoom(place[2]);
|
||||
}
|
||||
|
||||
/////////////////////////
|
||||
//
|
||||
// Etc.
|
||||
//
|
||||
/////////////////////////
|
||||
|
||||
function setChipStyle(props){
|
||||
for(var i in props){
|
||||
chipbg.style[i] = props[i];
|
||||
overlay.style[i] = props[i];
|
||||
hilite.style[i] = props[i];
|
||||
hitbuffer.style[i] = props[i];
|
||||
}
|
||||
}
|
||||
|
||||
// we draw the chip data scaled down to the canvas
|
||||
// and so avoid scaling a large canvas
|
||||
function grScale(x){
|
||||
|
|
|
|||
Loading…
Reference in New Issue