[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

View File

@ -28,13 +28,16 @@ function handleOnload() {
</head>
<body onload="handleOnload();">
<div id="basicModeText1">
<br />
<span id="title"><a href="http://visual6502.org">The Visual 6502</a></span>
<span id="plain">
<br />
</div>
<span id="plain">
<a href="http://www.visual6502.org/faq.html">FAQ</a>&nbsp;
<a href="http://blog.visual6502.org">Blog</a>&nbsp;
<a href="http://www.visual6502.org/links.html">Links</a>&nbsp
<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>
@ -47,7 +50,8 @@ Left-click and drag to scroll around
<br />
Enter your own program into the array of RAM
<br />
<br />
<br />
</div>
</span>
<div class="frame" id="frame">
<div class="chip" id="chip">
@ -59,7 +63,7 @@ Enter your own program into the array of RAM
</div>
<div class="nochip" id="nochip" style="display:none">
<form>
<input type="button" value="Show chip layout" onclick="showChipLayout()" />
<input type="button" value="Show chip layout" onclick="updateChipLayoutVisibility(true)" />
</form>
</div>
<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)
</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()" />
</form>
Animate during simulation: <input type="checkbox" id="animateModeCheckbox" onchange="updateChipLayoutAnimation(this.checked)" />

View File

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