6502/6502bench
1
0
Fork 0
mirror of https://github.com/fadden/6502bench.git synced 2024-12-02 13:51:36 +00:00
Code Issues Projects Releases Wiki Activity
3b37f9a449
6502bench/docs/sgtutorial/simple-edits.html

251 lines
11 KiB
HTML
Raw Normal View History

Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
Tweak web page include structure Renamed from "*-incl.html" to "incl-*.html" so they sort together. Moved <div> for all but incl-head inside include file. Overall this shouldn't do anything but move the magic comments around inside the HTML files.
2021-07-11 01:46:33 +00:00
<!-- START: /incl-head.html -->
Add ${ROOT} substitution Doesn't really affect the pages on the web, but it's easier to preview them in the filesystem when linked to "../main.css" rather than "/main.css". The common portion of the <head> section is now in a separate "include" file. Added some indentation to masthead/topnav/sidenav so it looks nicer in the merged source listing.
2021-06-28 20:37:26 +00:00
<!-- common head elements -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
<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"/>
Add ${ROOT} substitution Doesn't really affect the pages on the web, but it's easier to preview them in the filesystem when linked to "../main.css" rather than "/main.css". The common portion of the <head> section is now in a separate "include" file. Added some indentation to masthead/topnav/sidenav so it looks nicer in the merged source listing.
2021-06-28 20:37:26 +00:00
<link rel="stylesheet" href="../main.css"/>
Tweak web page include structure Renamed from "*-incl.html" to "incl-*.html" so they sort together. Moved <div> for all but incl-head inside include file. Overall this shouldn't do anything but move the magic comments around inside the HTML files.
2021-07-11 01:46:33 +00:00
<!-- END: /incl-head.html -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
<title>Simple Edits - SourceGen Tutorial</title>
</head>
<body>
Tweak web page include structure Renamed from "*-incl.html" to "incl-*.html" so they sort together. Moved <div> for all but incl-head inside include file. Overall this shouldn't do anything but move the magic comments around inside the HTML files.
2021-07-11 01:46:33 +00:00
<!-- START: /incl-masthead.html -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
<div id="masthead">
Add ${ROOT} substitution Doesn't really affect the pages on the web, but it's easier to preview them in the filesystem when linked to "../main.css" rather than "/main.css". The common portion of the <head> section is now in a separate "include" file. Added some indentation to masthead/topnav/sidenav so it looks nicer in the merged source listing.
2021-06-28 20:37:26 +00:00
<!--<div class="masthead-title" style="background-image: url('images/screenshot-mainwin.png');">-->
<div class="masthead-title">
6502bench
</div>
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
</div>
Tweak web page include structure Renamed from "*-incl.html" to "incl-*.html" so they sort together. Moved <div> for all but incl-head inside include file. Overall this shouldn't do anything but move the magic comments around inside the HTML files.
2021-07-11 01:46:33 +00:00
<!-- END: /incl-masthead.html -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
Tweak web page include structure Renamed from "*-incl.html" to "incl-*.html" so they sort together. Moved <div> for all but incl-head inside include file. Overall this shouldn't do anything but move the magic comments around inside the HTML files.
2021-07-11 01:46:33 +00:00
<!-- START: /incl-topnav.html active:#topnav-sgtutorial -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
<div id="topnav">
Add ${ROOT} substitution Doesn't really affect the pages on the web, but it's easier to preview them in the filesystem when linked to "../main.css" rather than "/main.css". The common portion of the <head> section is now in a separate "include" file. Added some indentation to masthead/topnav/sidenav so it looks nicer in the merged source listing.
2021-06-28 20:37:26 +00:00
<!-- 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>
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
</div>
Tweak web page include structure Renamed from "*-incl.html" to "incl-*.html" so they sort together. Moved <div> for all but incl-head inside include file. Overall this shouldn't do anything but move the magic comments around inside the HTML files.
2021-07-11 01:46:33 +00:00
<!-- END: /incl-topnav.html -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
Tweak web page include structure Renamed from "*-incl.html" to "incl-*.html" so they sort together. Moved <div> for all but incl-head inside include file. Overall this shouldn't do anything but move the magic comments around inside the HTML files.
2021-07-11 01:46:33 +00:00
<!-- START: incl-sidenav.html active:#sidenav-simple-edits -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
<div id="sidenav">
Add ${ROOT} substitution Doesn't really affect the pages on the web, but it's easier to preview them in the filesystem when linked to "../main.css" rather than "/main.css". The common portion of the <head> section is now in a separate "include" file. Added some indentation to masthead/topnav/sidenav so it looks nicer in the merged source listing.
2021-06-28 20:37:26 +00:00
<!-- side navigation bar contents -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
<ul>
Add ${ROOT} substitution Doesn't really affect the pages on the web, but it's easier to preview them in the filesystem when linked to "../main.css" rather than "/main.css". The common portion of the <head> section is now in a separate "include" file. Added some indentation to masthead/topnav/sidenav so it looks nicer in the merged source listing.
2021-06-28 20:37:26 +00:00
<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"><a href="moving-around.html">Moving Around</a></li>
<li id="sidenav-simple-edits" class="active"><a href="simple-edits.html">Simple Edits</a></li>
<li id="sidenav-labels-symbols"><a href="labels-symbols.html">Labels &amp; 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 &amp; 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>
</ul>
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
</div>
Tweak web page include structure Renamed from "*-incl.html" to "incl-*.html" so they sort together. Moved <div> for all but incl-head inside include file. Overall this shouldn't do anything but move the magic comments around inside the HTML files.
2021-07-11 01:46:33 +00:00
<!-- END: incl-sidenav.html -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
<div id="main">
<h2>Simple Edits</h2>
<div class="grid-container">
<div class="grid-item-text">
<p>Click the very first line of the file, which is a comment that says
something like "6502bench SourceGen vX.Y.Z". There are three ways to
open the comment editor:</p>
<ol>
<li>Select <samp>Actions &gt; Edit Long Comment</samp> from the menu bar.</li>
<li>Right click, and select <samp>Edit Long Comment</samp> from the
pop-up menu. (This menu is exactly the same as the Actions menu.)</li>
<li>Double-click the comment</li>
</ol>
<p>Most things in the code list will respond to a double-click.
Double-clicking on addresses, flags, labels, operands, and comments will
open editors for those things. Double-clicking on a value in the "bytes"
column will open a floating hex dump viewer. This is usually the most
convenient way to edit something: point and click.</p>
</div>
</div>
<div class="grid-container">
<div class="grid-item-image">
<img src="images/t1-edit-long-comment.png" alt="t1-edit-long-comment"/>
</div>
<div class="grid-item-text">
<p>Double-click the comment to open the editor. Type some words into the
upper window, and note that a formatted version appears in the bottom
window. Experiment with the maximum line width and "render in box"
settings to see what they do. You can hit Enter to create line breaks,
or let SourceGen wrap lines for you. When you're done, click <samp>OK</samp>.
(Or hit <kbd class="key">Ctrl+Enter</kbd>.)</p>
<p>When the dialog closes, you'll see your new comment in place at the
top of the file. If you typed enough words, your comment will span
multiple lines. You can select the comment by selecting any line in it.</p>
</div>
</div>
<div class="grid-container">
<!--<div class="grid-item-image">
<img src="images/t1-multi-disab.png" alt="t1-multi-disab"/>
</div>-->
<div class="grid-item-text">
<p>Click on the comment, then shift-click on L1014. Right-click, and look
at the menu. Nearly all of the menu items are disabled. Most edit features
are only enabled when a single instance of a relevant item is selected, so
for example <samp>Edit Long Comment</samp> won't be enabled if you have an
instruction selected.</p>
</div>
</div>
<div class="grid-container">
<div class="grid-item-image">
<img src="images/t1-edit-note.png" alt="t1-edit-note"/>
</div>
<div class="grid-item-text">
<p>Let's add a note. Click on $100E (the line with "hello!"), then
select <samp>Actions &gt; Edit Note</samp>. Type a few words, pick a color,
and click <samp>OK</samp> (or hit <kbd class="key">Ctrl+Enter</kbd>).
Your note appears in the code, and also in the
window on the bottom left. Notes are like long comments, with three key
differences:</p>
<ol>
<li>You can't pick their line width, but you can pick their color.</li>
<li>They don't appear in generated assembly sources, making them
useful for leaving notes to yourself as you work.</li>
<li>They're listed in the Notes window. Double-clicking them jumps
the selection to the note, making them useful as bookmarks.</li>
</ol>
</div>
</div>
<div class="grid-container">
<div class="grid-item-image">
<img src="images/t1-set-addr-1017.png" alt="t1-set-addr-1017"/>
</div>
<div class="grid-item-text">
<p>It's time to do something with the code. If you look at what the code
does you'll see that it's copying several dozen bytes from $1017
to $2000, then jumping to $2000. It appears to be relocating the next
part of the code before
executing it. We want to let the disassembler know what's going on, so
select the line at address $1017 and then
<samp>Actions &gt; Set Address</samp>. (Or double-click on
"<code>1017</code>" in the <samp>Addr</samp> column.)
In the <samp>Set Address</samp> dialog, type "<kbd>2000</kbd>", and hit Enter.)</p>
</div>
</div>
<div class="grid-container">
<div class="grid-item-image">
<img src="images/t1-addr-chg-1017.png" alt="t1-addr-chg-1017"/>
</div>
<div class="grid-item-text">
<p>Note the way the code list has changed. When you changed the address,
the <code>JMP $2000</code> at address $1014 found a home inside
the bounds of the file, so
the code tracer was able to find the instructions there.</p>
</div>
</div>
<div class="grid-container">
<div class="grid-item-text">
<p>From the menu, select <samp>Edit &gt; Undo</samp>. Notice how
everything reverts to the way it was. Now, select
<samp>Edit &gt; Redo</samp> to restore the changes. You can undo any change you
make to the project. (The undo history is <strong>not</strong> saved in
the project file, though, so when you exit the program the history is
lost.)</p>
<p>As you make alterations to the addresses, notice that, while the
<samp>Address</samp> column changes, the <samp>Offset</samp> column does not.
File offsets never change, which is why they're shown here and
in the References and Notes windows. (They can, however, be distracting,
so you'll be forgiven if you reduce the offset column width to zero.)</p>
</div>
</div>
<div class="grid-container">
<div class="grid-item-image">
<img src="images/t1-simple-instr-edit.png" alt="t1-simple-instr-edit"/>
</div>
<div class="grid-item-text">
<p>Select the line with address $2003 ("CMP #$04"), then
<samp>Actions &gt; Edit Operand</samp>. This allows you to pick how you want the
operand to look. It's currently set to "Default", which for an 8-bit
immediate argument means it's shown as a hexadecimal value. Click
"Binary", then "OK". It now appears as a binary value.</p>
</div>
</div>
<div class="grid-container">
<div class="grid-item-image">
<img src="images/t1-2003-done.png" alt="t1-2003-done"/>
</div>
<div class="grid-item-text">
<p>On that same line, select <samp>Actions &gt; Edit Comment</samp>. Type a short
comment, and hit <kbd class="key">Enter</kbd>. Your comment appears
in the "comment" column.</p>
</div>
</div>
</div> <!-- #main -->
<div id="prevnext">
<a href="moving-around.html" class="btn-previous">&laquo; Previous</a>
<a href="labels-symbols.html" class="btn-next">Next &raquo;</a>
</div>
Tweak web page include structure Renamed from "*-incl.html" to "incl-*.html" so they sort together. Moved <div> for all but incl-head inside include file. Overall this shouldn't do anything but move the magic comments around inside the HTML files.
2021-07-11 01:46:33 +00:00
<!-- START: /incl-footer.html -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
<div id="footer">
Add ${ROOT} substitution Doesn't really affect the pages on the web, but it's easier to preview them in the filesystem when linked to "../main.css" rather than "/main.css". The common portion of the <head> section is now in a separate "include" file. Added some indentation to masthead/topnav/sidenav so it looks nicer in the merged source listing.
2021-06-28 20:37:26 +00:00
<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> -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
</div>
Tweak web page include structure Renamed from "*-incl.html" to "incl-*.html" so they sort together. Moved <div> for all but incl-head inside include file. Overall this shouldn't do anything but move the magic comments around inside the HTML files.
2021-07-11 01:46:33 +00:00
<!-- END: /incl-footer.html -->
Execute scripts This change applies the substitution scripts on the HTML files, replacing away the jQuery load() calls with the actual file contents, and setting the correct URLs to the prev/next buttons.
2021-06-08 00:14:16 +00:00
</body>
</html>
Reference in New Issue Copy Permalink