6502/6502bench
1
0
Fork 0
mirror of https://github.com/fadden/6502bench.git synced 2024-12-01 22:50:35 +00:00
Code Issues Projects Releases Wiki Activity
154cff3347
6502bench/docs/sgtutorial/simple-edits.html

205 lines
8.4 KiB
HTML
Raw Normal View History

First draft of updated web site Added a SourceGen tutorial with lots of screen shots. Uses "responsive web design" so it works well on mobile devices. This version is using jQuery load() calls to pull in pieces, but that causes a lot of blink when loading because the loads are asynchronous and may not complete until after the initial page render has finished. Tutorial prev/next links not yet working.
2021-06-06 21:07:36 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<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"/>
<title>Simple Edits - SourceGen Tutorial</title>
</head>
<body>
<div id="masthead">
<!-- START: /masthead-incl.html -->
<script>$("#masthead").load("/masthead-incl.html");</script>
<!-- END: /masthead-incl.html -->
</div>
<div id="topnav">
<!-- START: /topnav-incl.html active:#topnav-sgtutorial -->
<script>
// Load global topnav content, and mark current page active.
$("#topnav").load("/topnav-incl.html", function() {
$("#topnav-sgtutorial").addClass("active");
});
</script>
<!-- END: /topnav-incl.html -->
</div>
<div id="sidenav">
First cut at HTML block substitution script Fairly straightfoward in Python. Also, fixed the sidenav references, which should be using the file in the sgtutorial subdirectory. Also, tweaked index.html a bit.
2021-06-07 21:51:28 +00:00
<!-- START: sidenav-incl.html active:#sidenav-simple-edits -->
First draft of updated web site Added a SourceGen tutorial with lots of screen shots. Uses "responsive web design" so it works well on mobile devices. This version is using jQuery load() calls to pull in pieces, but that causes a lot of blink when loading because the loads are asynchronous and may not complete until after the initial page render has finished. Tutorial prev/next links not yet working.
2021-06-06 21:07:36 +00:00
<script>
// Load local sidenav content, and mark current page active.
$("#sidenav").load("sidenav-incl.html", function() {
$("#sidenav-simple-edits").addClass("active");
});
</script>
First cut at HTML block substitution script Fairly straightfoward in Python. Also, fixed the sidenav references, which should be using the file in the sgtutorial subdirectory. Also, tweaked index.html a bit.
2021-06-07 21:51:28 +00:00
<!-- END: sidenav-incl.html -->
First draft of updated web site Added a SourceGen tutorial with lots of screen shots. Uses "responsive web design" so it works well on mobile devices. This version is using jQuery load() calls to pull in pieces, but that causes a lot of blink when loading because the loads are asynchronous and may not complete until after the initial page render has finished. Tutorial prev/next links not yet working.
2021-06-06 21:07:36 +00:00
</div>
<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="#" class="btn-previous">&laquo; Previous</a>
<a href="#" class="btn-next">Next &raquo;</a>
</div>
<div id="footer">
<!-- START: /footer-incl.html -->
<script>$("#footer").load("/footer-incl.html");</script>
<!-- END: /footer-incl.html -->
</div>
</body>
</html>
Reference in New Issue Copy Permalink