6502/visual6502
1
0
Fork 0
mirror of https://github.com/trebonian/visual6502.git synced 2024-12-22 12:29:20 +00:00
Code Issues Projects Releases Wiki Activity

three panel splittable (dynamic) screen layout

Browse Source
This commit is contained in:
BigEd 2010-10-31 13:39:31 +00:00
parent 0156a72ae7
commit 39959e711e
3 changed files with 94 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
expert.css
View File

@ -1,5 +1,5 @@
/*
Copyright (c) 2010 Brian Silverman, Barry Silverman
Copyright (c) 2010 Brian Silverman, Barry Silverman, Ed Spittles
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
@ -38,13 +38,11 @@ div.frame {
}
div.leftcolumn {
float: left;
width: 804px; /* ugh - matches the div.chip width + border */
}
div.rightcolumn {
float: left;
margin-left: 8px;
padding-left: 8px;
}
div.footer {
@ -76,7 +74,6 @@ canvas.chip {
}
div.twobuttons{
position:relative;
float:left;
}
@ -101,7 +98,6 @@ img.navbutton {
}
img.navplay {
position: relative;
margin-right: 5px;
border: 0px;
}
@ -119,6 +115,7 @@ table.memtable {
font-family: monospace;
font-size: 12px;
border-spacing: 0px;
overflow: auto;
}
div#layoutControlPanel{
@ -142,8 +139,6 @@ a#linkHere{
}
div#logstreamscroller{
height:200px;
width:800px;
overflow:auto;
}
@ -153,3 +148,47 @@ table.logstream {
border-spacing: 2px;
text-align:center;
}
/* Splitter */
#frame {
height: 750px;
}
div.leftcolumn, div.rightcolumn, {
overflow: auto;
}
div#righttopdiv, div#tracingdiv {
overflow: auto;
background-color: white;
}
div.rightcolumn {
background-color: white;
}
.vsplitbar {
width: 5px;
background: #aaa;
}
.vsplitbar {
width: 6px;
background: #669 url(3rdparty/img/vgrabber.gif) no-repeat center;
}
.vsplitbar:hover, .vsplitbar.active {
background: #c66 url(3rdparty/img/vgrabber.gif) no-repeat center;
opacity: 0.7;
filter: alpha(opacity=70); /* IE */
background: #c99;
}
.hsplitbar {
height: 6px;
background: #669 url(3rdparty/img/hgrabber.gif) no-repeat center;
}
.hsplitbar.active, .hsplitbar:hover {
background: #c66 url(3rdparty/img/hgrabber.gif) no-repeat center;
}

61
expert.html
View File

@ -12,6 +12,9 @@
<script src="memtable.js"></script>
<script src="macros.js"></script>
<script src="testprogram.js"></script>
<script src="3rdparty/jquery-1.3.2.min.js"></script>
<script src="3rdparty/jquery.cookie.js"></script>
<script src="3rdparty/splitter.js"></script>
<script type="text/javascript">
function handleOnload() {
@ -24,7 +27,25 @@ function handleOnload() {
}else{
setTimeout(setup,200);
}
}
};
// initialise splitter (built on jquery)
$().ready(function(){
$("#frame").splitter({
type: "v",
outline: true,
minLeft: 20,
sizeLeft: 810,
resizeToWidth: true,
anchorToWindow: true,
});
$("#rightcolumn").splitter({
type: "h",
outline: true,
sizeBottom: 180,
minTop: 100,
});
});
</script>
</head>
@ -75,19 +96,9 @@ function handleOnload() {
<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)" />
<input type="button" value="Headless Go" onclick="goFor()" />
</form>
<br />
<div id="logstreamscroller">
<table class="logstream" id="logstream"></table>
</div>
</div>
</div> <!-- closing leftcolumn -->
<div class="rightcolumn">
<div class="rightcolumn" id="rightcolumn">
<div id="righttopdiv">
<div class = "buttons">
<div class="twobuttons">
<a href ="javascript:stopChip()" id="stop"><img class="navstop" src="images/stop.png" title="stop"></a>
@ -98,10 +109,28 @@ function handleOnload() {
<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> <!-- buttons -->
<div class="status" id="status"><p>x: 0<br>y: 0</p>
</div>
<table class="memtable" id="memtable"></table>
</div> <!-- status -->
<div id="memtablediv">
<table class="memtable" id="memtable"></table>
</div>
</div> <!-- righttopdiv -->
<div id="tracingdiv">
<div id="expertControlPanel">
<form>
<input type="button" value="Trace more" onclick="updateLoglevel(++loglevel)" />
<input type="button" value="Trace less" onclick="updateLoglevel(--loglevel)" />
<input type="button" value="Headless Go" onclick="goFor()" />
</form>
<br />
</div>
<div id="logstreamscroller">
<table class="logstream" id="logstream"></table>
</div>
</div>
</div> <!-- closing rightcolumn -->
</div> <!-- closing 'frame' div -->
</body>

4
expertWires.js
View File

@ -312,7 +312,7 @@ function updateChipLayoutVisibility(isOn){
if(expertMode)
document.getElementById('layoutControlPanel').style.display = 'block';
document.getElementById('nochip').style.display = 'none';
document.getElementById('logstreamscroller').style.height="260px";
//document.getElementById('logstreamscroller').style.height="260px";
// allow the display to update while we load the graphics
updateChipLayoutAnimation(true);
setStatus('loading graphics...');
@ -324,7 +324,7 @@ function updateChipLayoutVisibility(isOn){
document.getElementById('chipsurround').style.display = 'none';
document.getElementById('layoutControlPanel').style.display = 'none';
document.getElementById('nochip').style.display = 'block';
document.getElementById('logstreamscroller').style.height="880px";
//document.getElementById('logstreamscroller').style.height="880px";
}
}