6502
/
visual6502
mirror of https://github.com/trebonian/visual6502.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[dev]tidy rough edges in expert and graphics mode switching

This commit is contained in:
BigEd 2010-10-01 14:51:17 +00:00
parent 0ae95d5338
commit 0892586d75
2 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -28,13 +28,16 @@ function handleOnload() {
</head> </head>
<body onload="handleOnload();"> <body onload="handleOnload();">
<div id="basicModeText1">
<br /> <br />
<span id="title"><a href="http://visual6502.org">The Visual 6502</a></span> <span id="title"><a href="http://visual6502.org">The Visual 6502</a></span>
<span id="plain">
<br /> <br />
</div>
<span id="plain">
<a href="http://www.visual6502.org/faq.html">FAQ</a>&nbsp; <a href="http://www.visual6502.org/faq.html">FAQ</a>&nbsp;
<a href="http://blog.visual6502.org">Blog</a>&nbsp; <a href="http://blog.visual6502.org">Blog</a>&nbsp;
<a href="http://www.visual6502.org/links.html">Links</a>&nbsp <a href="http://www.visual6502.org/links.html">Links</a>&nbsp
<div id="basicModeText2">
<br /><br /> <br /><br />
This simulator uses HTML5 features only found on the latest versions of browsers and needs 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> lots of RAM. If you have trouble, please <a href="browsertrouble.html">check compatibility.</a>
@ -47,7 +50,8 @@ Left-click and drag to scroll around
<br /> <br />
Enter your own program into the array of RAM Enter your own program into the array of RAM
<br /> <br />
<br /> <br />
</div>
</span> </span>
<div class="frame" id="frame"> <div class="frame" id="frame">
<div class="chip" id="chip"> <div class="chip" id="chip">
@ -59,7 +63,7 @@ Enter your own program into the array of RAM
</div> </div>
<div class="nochip" id="nochip" style="display:none"> <div class="nochip" id="nochip" style="display:none">
<form> <form>
<input type="button" value="Show chip layout" onclick="showChipLayout()" /> <input type="button" value="Show chip layout" onclick="updateChipLayoutVisibility(true)" />
</form> </form>
</div> </div>
<div class = "buttons"> <div class = "buttons">
@ -89,7 +93,7 @@ Enter your own program into the array of RAM
<input type="checkbox" name="2" id="updateShow2" onchange="updateShow(this.name,this.checked)" />(protection) <input type="checkbox" name="2" id="updateShow2" onchange="updateShow(this.name,this.checked)" />(protection)
</form> </form>
<form> <form>
<input type="button" value="Hide Chip Layout" onclick="hideChipLayout()" /> <input type="button" value="Hide Chip Layout" onclick="updateChipLayoutVisibility(false)" />
<input type="button" value="Clear Highlighting" onclick="clearHighlight()" /> <input type="button" value="Clear Highlighting" onclick="clearHighlight()" />
</form> </form>
Animate during simulation: <input type="checkbox" id="animateModeCheckbox" onchange="updateChipLayoutAnimation(this.checked)" /> Animate during simulation: <input type="checkbox" id="animateModeCheckbox" onchange="updateChipLayoutAnimation(this.checked)" />

68
wires.js
View File

@ -42,7 +42,7 @@ var npwr = nodenames['vcc'];
// some modes and parameters which can be passed in from the URL query // some modes and parameters which can be passed in from the URL query
var expertMode=false var expertMode=false
var animateChipLayout = true; var animateChipLayout = true;
var loadCanvas = true; var chipLayoutIsVisible = true;
///////////////////////// /////////////////////////
// //
@ -64,8 +64,10 @@ function setup_part2(){
updateExpertMode(expertMode); updateExpertMode(expertMode);
setupNodes(); setupNodes();
setupTransistors(); setupTransistors();
if(loadCanvas){ if(chipLayoutIsVisible){
showChipLayout(); // 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);
} }
setupTable(); setupTable();
setupNodeNameList(); setupNodeNameList();
@ -99,7 +101,7 @@ function setupParams(){
} else if(name=="expert" && value.indexOf("t")==0){ } else if(name=="expert" && value.indexOf("t")==0){
updateExpertMode(true); updateExpertMode(true);
} else if(name=="graphics" && value.indexOf("f")==0){ } else if(name=="graphics" && value.indexOf("f")==0){
hideChipLayout(); updateChipLayoutVisibility(false);
} else { } else {
if(loglevel>0) if(loglevel>0)
console.log('unrecognised parameters:',params); console.log('unrecognised parameters:',params);
@ -111,10 +113,7 @@ function setupParams(){
function updateChipLayoutAnimation(isOn){ function updateChipLayoutAnimation(isOn){
// simulation is much faster if we don't update the chip layout on every step // simulation is much faster if we don't update the chip layout on every step
animateChipLayout=isOn; animateChipLayout=isOn;
if(animateChipLayout && !loadCanvas) { document.getElementById('animateModeCheckbox').checked = animateChipLayout;
loadCanvas=true;
showChipLayout();
}
} }
function setupNodes(){ function setupNodes(){
@ -223,7 +222,7 @@ function hexdigit(n){return '0123456789ABCDEF'.charAt(n);}
///////////////////////// /////////////////////////
function refresh(){ function refresh(){
if(!loadCanvas) if(!chipLayoutIsVisible)
return; return;
ctx.clearRect(0,0,10000,10000); ctx.clearRect(0,0,10000,10000);
for(i in nodes){ for(i in nodes){
@ -369,10 +368,16 @@ function updateExpertMode(isOn){
document.getElementById('expertModeCheckbox').checked = expertMode; document.getElementById('expertModeCheckbox').checked = expertMode;
if(expertMode){ if(expertMode){
document.getElementById('expertControlPanel').style.display = 'block'; document.getElementById('expertControlPanel').style.display = 'block';
document.getElementById('basicModeText1').style.display = 'none';
document.getElementById('basicModeText2').style.display = 'none';
if(loglevel==0) if(loglevel==0)
updateLoglevel(1); updateLoglevel(1);
if(chipLayoutIsVisible)
document.getElementById('layoutControlPanel').style.display = 'block';
} else { } else {
document.getElementById('expertControlPanel').style.display = 'none'; document.getElementById('expertControlPanel').style.display = 'none';
document.getElementById('basicModeText1').style.display = 'block';
document.getElementById('basicModeText2').style.display = 'block';
} }
} }
@ -387,17 +392,27 @@ function updateShow(layer, on){
setupBackground(); setupBackground();
} }
function showChipLayout(){ function updateChipLayoutVisibility(isOn){
// make the layout display visible and setup the canvas chipLayoutIsVisible=isOn;
document.getElementById('chip').style.display = 'block'; if(chipLayoutIsVisible) {
document.getElementById('layoutControlPanel').style.display = 'block'; document.getElementById('chip').style.display = 'block';
document.getElementById('nochip').style.display = 'none'; if(expertMode)
// allow the display to update while we load the graphics document.getElementById('layoutControlPanel').style.display = 'block';
setStatus('loading graphics...'); document.getElementById('nochip').style.display = 'none';
setTimeout(showChipLayout_part2, 0); // 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('chip').style.display = 'none';
document.getElementById('layoutControlPanel').style.display = 'none';
document.getElementById('nochip').style.display = 'block';
}
} }
function showChipLayout_part2(){ function setupChipLayoutGraphics(){
setupLayerVisibility(); setupLayerVisibility();
setupBackground(); setupBackground();
setupOverlay(); setupOverlay();
@ -410,18 +425,15 @@ function showChipLayout_part2(){
hilite.onmousedown = function(e){mouseDown(e);} hilite.onmousedown = function(e){mouseDown(e);}
} }
function hideChipLayout(){ function where(){
// replace the layout display with a button to show it return [centerx, centery, zoom];
document.getElementById('chip').style.display = 'none';
document.getElementById('layoutControlPanel').style.display = 'none';
document.getElementById('nochip').style.display = 'block';
// 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
loadCanvas=false;
// cannot animate the layout if there is no canvas
animateChipLayout=false;
} }
function moveto(place){
centerx = place[0];
centery = place[1];
setZoom(place[2]);
}
///////////////////////// /////////////////////////
// //