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

[dev]major rejig of css and DOM hierarchy - removes some hard coded numbers and allows for large/small logstream when chip is hidden/visible

This commit is contained in:
BigEd 2010-10-02 16:37:33 +00:00
parent 2d20ef2dad
commit d6e516cafa
2 changed files with 117 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
index.html
View File

@ -54,6 +54,8 @@ Enter your own program into the array of RAM
</div>
</span>
<div class="frame" id="frame">
<div class="leftcolumn">
<div id="chipsurround">
<div class="chip" id="chip">
<span id="waiting">Please wait while graphics is initialising...</span>
<canvas class="chip" id="chipbg"></canvas>
@ -61,29 +63,13 @@ Enter your own program into the array of RAM
<canvas class="chip" id="hilite"></canvas>
<canvas class="chip" id="hitbuffer"></canvas>
</div>
<div class="nochip" id="nochip" style="display:none">
</div> <!-- chipsurround -->
<div class="nochip" id="nochip">
<form>
<input type="button" value="Show chip layout" onclick="updateChipLayoutVisibility(true)" />
</form>
</div>
<div class = "buttons">
<div style="position:relative; float:left;">
<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 style="float:left;">
<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>Expert:
<input type="checkbox" id="expertModeCheckbox" name="0" onchange="updateExpertMode(this.checked)" />
</span>
</div>
</div>
<p class="status" id="status">x: 0<br>y: 0</p>
<table class="memtable" id="memtable"></table>
</div>
<div id="layoutControlPanel" style="display:none">
<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)
@ -95,32 +81,53 @@ Enter your own program into the array of RAM
<form>
<input type="button" value="Hide Chip Layout" onclick="updateChipLayoutVisibility(false)" />
<input type="button" value="Clear Highlighting" onclick="clearHighlight()" />
<span style="border:thin solid;padding:2px;border-color:gray">
<span class="animatebox">
Animate during simulation:
<input type="checkbox" id="animateModeCheckbox" onchange="updateChipLayoutAnimation(this.checked)"
/></span>
&nbsp;
<a href="" style="padding:2px;" id="linkHere" >Link to this location</a>
<a href="" id="linkHere" >Link to this location</a>
</form>
</div>
<div id="expertControlPanel" style="display:none">
<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 style="height:200px;overflow:auto">
<div id="logstreamscroller">
<table class="logstream" id="logstream"></table>
</div>
</div>
<br />
</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>
<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 />
<br />
</div> <!-- footer -->
</div> <!-- closing 'frame' div -->
<script type="text/javascript"><!--
google_ad_client = "pub-9008420149077488";

116
wires.css
View File

@ -23,22 +23,47 @@
body {
background: white;
color: black;
/* font-family: cursive;*/
font-family :Verdana, Arial, Helvetica, Sans-Serif;
font-size: 12px;
}
#title {
font-size: 30px;
font-weight: bold;
}
div.frame {
margin-left: 10px;
position: relative;
width: 1150px;
height: 600px;
min-width: 1120px; /* ugh - prevent memtable flowing underneath chip */
}
div.leftcolumn {
float: left;
width: 804px; /* ugh - matches the div.chip width + border */
}
div.rightcolumn {
float: left;
margin-left: 8px;
}
div.footer {
clear: both;
padding-top: 10px;
}
div.nochip {
display:none;
}
div#chipsurround {
height: 600px; /* matches the div.chip height */
}
div.chip {
background: lightgray;
border: 2px solid gray;
position: absolute;
position: absolute; /* must be absolute to contain the canvas */
width: 800px;
height: 600px;
overflow: hidden;
@ -46,56 +71,85 @@ div.chip {
canvas.chip {
position: absolute;
width: 600px;
height: 600px;
width: 600px; /* square chip image same height as div.chip */
height: 600px; /* square */
}
div.twobuttons{
position:relative;
float:left;
}
div.threebuttons{
float:left;
}
div.buttons{
position: absolute;
top: -5px;
left: 820px;
/* top: -5px; */
}
p.status {
position: absolute;
left: 820px;
top: 20px;
div.status {
clear: left;
padding-top: 10px;
padding-bottom: 10px;
font-family: monospace;
font-size: 12px;
}
img.navbutton{
img.navbutton {
border: 0px;
}
img.navplay{
img.navplay {
position: relative;
margin-right: 5px;
border: 0px;
}
img.navstop{
img.navstop {
position: absolute;
border: 0px;
}
span.expertcheckbox {
margin-left: 20px;
}
table.memtable {
font-family: monospace;
font-size: 12px;
border-spacing: 0px;
}
div#layoutControlPanel{
display:none;
margin-top: 2px;
margin-bottom: 2px;
}
div#expertControlPanel{
display:none;
}
span.animatebox{
border:thin solid;
padding:2px;
border-color:gray;
}
a#linkHere{
padding:2px;
}
div#logstreamscroller{
height:200px;
width:800px;
overflow:auto;
}
table.logstream {
font-family: monospace;
font-size: 12px;
border-spacing: 2px;
text-align:center;
}
table.memtable {
position: absolute;
top: 78px;
left: 820px;
font-family: monospace;
font-size: 12px;
border-spacing: 0px;
}
#title {
font-size:30px;
font-weight:bold;
}