mirror of
https://github.com/fadden/6502bench.git
synced 2025-07-09 16:24:06 +00:00
eef1710d5d
Two main changes: - "Seek nearby targets" is no longer enabled by default. - The application asks the user to save new projects immediately. Various minor edits were also made. A couple of the images are slightly stale, showing ".org" rather than ".addrs", but they're in the advanced section and the difference isn't notable.
258 lines
11 KiB
HTML
258 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- START: /incl-head.html -->
|
|
<!-- common head elements -->
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
|
|
integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
|
|
<link rel="stylesheet" href="../main.css"/>
|
|
<!-- END: /incl-head.html -->
|
|
|
|
<title>Moving Around - SourceGen Tutorial</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- START: /incl-masthead.html -->
|
|
<div id="masthead">
|
|
<!--<div class="masthead-title" style="background-image: url('images/screenshot-mainwin.png');">-->
|
|
<div class="masthead-title">
|
|
6502bench
|
|
</div>
|
|
</div>
|
|
<!-- END: /incl-masthead.html -->
|
|
|
|
<!-- START: /incl-topnav.html active:#topnav-sgtutorial -->
|
|
<div id="topnav">
|
|
<!-- top navigation bar contents -->
|
|
<nav>
|
|
<a id="topnav-home" href=".././">HOME</a>
|
|
<a id="topnav-sgtutorial" class="active" href="../sgtutorial">SourceGen Tutorial</a>
|
|
<a id="topnav-menuicon" href="javascript:void(0);" class="icon" onclick="toggleSidenav()">
|
|
<i class="fa fa-bars"></i>
|
|
</a>
|
|
</nav>
|
|
<script>
|
|
// Sidenav toggle function.
|
|
//
|
|
// Use a jQuery function to toggle the sidenav bar. The initial state
|
|
// is undefined / inherited, so it will pop in and out as the screen
|
|
// resizes around the "large" breakpoint.
|
|
function toggleSidenav() {
|
|
$("#sidenav").toggle("fast");
|
|
}
|
|
</script>
|
|
</div>
|
|
<!-- END: /incl-topnav.html -->
|
|
|
|
<!-- START: incl-sidenav.html active:#sidenav-moving-around -->
|
|
<div id="sidenav">
|
|
<!-- side navigation bar contents -->
|
|
<ul>
|
|
<li id="sidenav-index"><a href="./">Introduction</a></li>
|
|
<li id="sidenav-about-disasm"><a href="about-disasm.html">About Disassembly</a></li>
|
|
<li id="sidenav-using-sourcegen"><a href="using-sourcegen.html">Using SourceGen</a>
|
|
<ul>
|
|
<li id="sidenav-moving-around" class="active"><a href="moving-around.html">Moving Around</a></li>
|
|
<li id="sidenav-making-edits"><a href="making-edits.html">Making Edits</a></li>
|
|
<li id="sidenav-labels-symbols"><a href="labels-symbols.html">Labels & Symbols</a></li>
|
|
<li id="sidenav-editing-data"><a href="editing-data.html">Editing Data Operands</a></li>
|
|
<li id="sidenav-generating-code"><a href="generating-code.html">Generating Code</a></li>
|
|
</ul></li>
|
|
<li id="sidenav-digging-deeper"><a href="digging-deeper.html">Digging Deeper</a>
|
|
<ul>
|
|
<li id="sidenav-string-formatting"><a href="string-formatting.html">String Formatting</a></li>
|
|
<li id="sidenav-local-variables"><a href="local-variables.html">Local Variables</a></li>
|
|
<li id="sidenav-inline-data"><a href="inline-data.html">Inline Data</a></li>
|
|
<li id="sidenav-odds-ends"><a href="odds-ends.html">Odds & Ends</a></li>
|
|
</ul></li>
|
|
<li id="sidenav-advanced-topics"><a href="advanced-topics.html">Advanced Topics</a>
|
|
<ul>
|
|
<li id="sidenav-address-tables"><a href="address-tables.html">Address Tables</a></li>
|
|
<li id="sidenav-extension-scripts"><a href="extension-scripts.html">Extension Scripts</a></li>
|
|
<li id="sidenav-visualizations"><a href="visualizations.html">Visualizations</a></li>
|
|
</ul></li>
|
|
<li id="sidenav-suggestions"><a href="suggestions.html">Suggestions</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- END: incl-sidenav.html -->
|
|
|
|
<div id="main">
|
|
|
|
<h2>Moving Around</h2>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-fullscreen.png" alt="t1-fullscreen"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>The display is divided into five main areas:</p>
|
|
<ol>
|
|
<li>Code listing. Disassembled code and data is shown here.</li>
|
|
<li>References. Shows a list of the places in the file that
|
|
reference the currently selected line.</li>
|
|
<li>Notes. A list of notes in the project. Useful as bookmarks.</li>
|
|
<li>Symbols. All known symbols. The buttons at the top allow you
|
|
to filter out symbol types that you're not interested in.</li>
|
|
<li>Info. Information about the selected line. For code, this
|
|
will include a summary of the instruction's behavior.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-text">
|
|
<p>The center code list window is divided into rows, one per line of disassembled
|
|
code or data. This is a standard "list view" control, so you can select a
|
|
row by left-clicking anywhere in it. Use <kbd class="key">Ctrl</kbd>+click
|
|
to toggle the selection on individual lines, and
|
|
<kbd class="key">Shift</kbd>+click to select a range of lines. You can move
|
|
the selection around with the up/down arrow keys and
|
|
<kbd class="key">PgUp</kbd>/<kbd class="key">PgDn</kbd>. Scroll the window
|
|
with the mouse wheel, or by dragging the scroll bar thumb.</p>
|
|
<p>Each row is divided into nine columns. You can adjust the column
|
|
widths by clicking and dragging the column dividers in the header</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-all-columns.png" alt="t1-all-columns"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>The columns on the right side of the window are similar to
|
|
what you'd find in assembly source code: label, opcode, operand,
|
|
comment. The columns on the left are what you'd find in a disassembly
|
|
(file offset, address, raw bytes), plus some information about
|
|
processor status flags and line attributes that may or may not be
|
|
useful to you. If you find any of these distracting, collapse the
|
|
column. (Many of the screen shots captured here will omit the
|
|
"Attr" column for the sake of compactness.)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-click-1002.png" alt="t1-click-1002"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>Click on the fourth line down, which has address 1002. The
|
|
line has a label, "L1002", and is performing an indexed load from
|
|
L1017. Both of these labels were automatically generated, and are
|
|
named for the address at which they appear. When you clicked on
|
|
the line, a few things happened:</p>
|
|
<ul>
|
|
<li>The line was highlighted in the system selection color (usually
|
|
blue).</li>
|
|
<li>Address 1017 and label L1017 were highlighted. When you select
|
|
a line with an operand that targets an in-file address, the target
|
|
address is highlighted.</li>
|
|
<li>An entry appeared in the References window. This tells you
|
|
that the only reference to L1002 is a branch from address $1009. The
|
|
branch operand on line $1009 was also highlighted.</li>
|
|
<li>The Info window filled with a bunch of text that describes the
|
|
line format and some details about the LDA instruction.</li>
|
|
</ul>
|
|
<p>Click some other lines, such as address $100B and $1014. Note how the
|
|
highlights and contents of other windows change.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-click-1017.png" alt="t1-click-1017"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>Click on L1002 again, then double-click on the opcode ("LDA"). The
|
|
selection jumps to L1017. When an operand references an in-file address,
|
|
double-clicking on the opcode will take you to it. (Double-clicking on
|
|
the operand itself opens a format editor; more on that later.)
|
|
You can accomplish the same thing by selecting the line and hitting
|
|
<kbd class="key">Ctrl+J</kbd>, or using
|
|
<samp>Jump to Operand</samp> from the <samp>Navigate</samp> menu.</p>
|
|
<p>With line L1017 selected, double-click on the line that appears in the
|
|
References window. Note the selection jumps to L1002. You can immediately
|
|
jump to any reference.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-symbol-filters.png" alt="t1-symbol-filters"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>At the top of the Symbols window on the right side of the screen is a
|
|
row of buttons. Make sure "Auto" and "Addr" are selected. You should see
|
|
three labels in the window (L1002, L1014, L1017). Double-click on "L1014"
|
|
in the Symbols list. The selection jumps to the appropriate line.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-text">
|
|
<p>Select <samp>Navigate > Find</samp>. Type "hello", and hit Enter. The
|
|
selection will move to address $100E, which is a string that says "hello!". You
|
|
can use <samp>Navigate > Find Next</samp> to try to find the next
|
|
occurrence (there isn't one). You can search for any text that appears in
|
|
the rightmost columns (label, opcode, operand, comment).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-goto-box.png" alt="t1-goto-box"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>Select <samp>Navigate > Go To</samp>. You can enter a label,
|
|
address, or file offset. Enter "<kbd>100b</kbd>" to set the selection
|
|
to the line at address $100B.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-toolbar.png" alt="t1-toolbar"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>Near the top-left of the SourceGen window is a set of toolbar icons.
|
|
Click the curly left-pointing arrow, and watch the selection move. Click
|
|
it again. Then click the curly right-arrow a couple of times. Whenever
|
|
you jump around in the file by using the Go To feature, or by double-clicking
|
|
on opcodes or lines in the side windows, the locations are added to a
|
|
navigation history. The arrows let you move forward and backward
|
|
through it.</p>
|
|
<p>The "Nav Backward" feature is usually bound to the 4th button found
|
|
on some mice (generally found on the side, activated with the thumb).
|
|
This can be used to navigate quickly through a project using only the
|
|
mouse.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- #main -->
|
|
|
|
<div id="prevnext">
|
|
<a href="using-sourcegen.html" class="btn-previous">« Previous</a>
|
|
<a href="making-edits.html" class="btn-next">Next »</a>
|
|
</div>
|
|
|
|
<!-- START: /incl-footer.html -->
|
|
<div id="footer">
|
|
<hr/>
|
|
<p>Copyright 2021 faddenSoft</p>
|
|
<!-- <p id="screen-size"></p>
|
|
<script>
|
|
var w = window.innerWidth;
|
|
var h = window.innerHeight;
|
|
var x = document.getElementById("screen-size");
|
|
x.innerHTML = "DEBUG: initial window size " + w + "x" + h;
|
|
</script> -->
|
|
</div>
|
|
<!-- END: /incl-footer.html -->
|
|
|
|
</body>
|
|
</html>
|