mirror of
https://github.com/fadden/6502bench.git
synced 2024-12-01 22:50:35 +00:00
7c5a0dfdb8
A bit of Javascript was used to remove the hamburger icon when a page doesn't have a #sidenav. This worked when sidenav-incl was being loaded with jQuery load(), because that mechanism works asynchronously, and #sidenav was part of the DOM before it ran. Once we started merging HTML fragments directly into the pages, the script got called before #sidenav was defined, so the icon was always being removed. One solution would be to move the script to footer-incl.html, to follow the preferred practice of placing scripts at the bottom of the <body>. The better solution was to move the "no-sidenav" class from #main to <body>, so that all components can see it. This lets us use CSS rules to hide the icon.
248 lines
10 KiB
HTML
248 lines
10 KiB
HTML
<!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>Editing Data - SourceGen Tutorial</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="masthead">
|
|
<!-- START: /masthead-incl.html -->
|
|
<!--<div class="masthead-title" style="background-image: url('images/screenshot-mainwin.png');">-->
|
|
<div class="masthead-title">
|
|
6502bench
|
|
</div>
|
|
<!-- END: /masthead-incl.html -->
|
|
</div>
|
|
|
|
<div id="topnav">
|
|
<!-- START: /topnav-incl.html active:#topnav-sgtutorial -->
|
|
<!-- 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>
|
|
<!-- END: /topnav-incl.html -->
|
|
</div>
|
|
|
|
<div id="sidenav">
|
|
<!-- START: sidenav-incl.html active:#sidenav-editing-data -->
|
|
<!-- 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"><a href="moving-around.html">Moving Around</a></li>
|
|
<li id="sidenav-simple-edits"><a href="simple-edits.html">Simple Edits</a></li>
|
|
<li id="sidenav-labels-symbols"><a href="labels-symbols.html">Labels & Symbols</a></li>
|
|
<li id="sidenav-editing-data" class="active"><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>
|
|
</ul>
|
|
<!-- END: sidenav-incl.html -->
|
|
</div>
|
|
|
|
<div id="main">
|
|
|
|
<h2>Editing Data</h2>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-data-stringblob.png" alt="t1-data-stringblob"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>There's some string and numeric data down at the bottom of the file. The
|
|
final string appears to be multiple strings stuck together. (You may need
|
|
to increase the width of the Operand column to see the whole thing.) Notice
|
|
that the opcode for the very last line is '+', which means the operand
|
|
is a continuation of the previous line. Long data items can span multiple
|
|
lines, split every 64 characters (including delimiters), but they are
|
|
still single items: selecting any part selects the whole.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-data-editdlg-1.png" alt="t1-data-editdlg-1"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>Select the last line in the file, then <samp>Actions > Edit Operand</samp>.
|
|
You'll notice that this dialog is much different from the one you got when editing
|
|
the operand of an instruction. At the top it will say "<samp>65 bytes
|
|
selected</samp>". You can format this as a single 65-byte string, as 65 individual
|
|
items, or various things in between. For now, select <samp>Single bytes</samp>,
|
|
and then on the right, select <samp>ASCII (low or high) character</samp>.
|
|
Click <samp>OK</samp>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-data-edited-1.png" alt="t1-data-edited-1"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>Each character is now on its own line. The selection still spans the
|
|
same set of addresses.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-data-editdlg-2.png" alt="t1-data-editdlg-2"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>Select address $203D on its own, then Actions > Edit Label. Set the
|
|
label to "<kbd>STR1</kbd>". Move up a bit and select address $2030, then scroll to
|
|
the bottom and shift-click address $2070. Select
|
|
<samp>Actions > Edit Operand</samp>.
|
|
At the top it should now say, "<samp>65 bytes selected in 2 groups</samp>".
|
|
There are two groups because the presence of a label split the data into
|
|
two separate regions. From the <samp>Character encoding</samp> pop-up down
|
|
in the "String" section, make sure <samp>Low or High ASCII</samp> encoding
|
|
is selected, then select the <samp>Mixed character and non-character</samp>
|
|
string type and click <samp>OK</samp>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-data-edited-2.png" alt="t1-data-edited-2"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>We now have two <code>.STR</code> lines, one for <samp>"string zero "</samp>,
|
|
and one with the "<samp>STR1</samp>" label and the rest of the string data.
|
|
This is okay,
|
|
but it's not really what we want. The code at $200B appears to be loading
|
|
a 16-bit address from data at $2025, so we want to use that if we can.</p>
|
|
<p>Select <samp>Edit > Undo</samp> three times. You should be back to the
|
|
state where there's a single <code>.STR</code> line at the bottom of
|
|
the file, split across two lines with a '+'.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-data-string-bytes.png" alt="t1-data-string-bytes"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>Select the line at $2026. This is currently formatted as a string,
|
|
but that appears to be incorrect, so let's format it as individual bytes
|
|
instead. There's an easy way to do that: use
|
|
<samp>Actions > Toggle Single-Byte Format</samp>
|
|
(or hit <kbd class="key">Ctrl+B</kbd>).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-text">
|
|
<p>The data starting at $2025 appears to be 16-bit little-endian
|
|
addresses that point into the table of strings, so let's format
|
|
them appropriately.</p>
|
|
<!--
|
|
<p>Double-click the operand column on line $2025 ("$30") to open
|
|
the operand data format editor. Because you only have one byte selected,
|
|
most of the options are disabled. This won't do what we want, so
|
|
click <samp>Cancel</samp>.</p>
|
|
-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-data-editdlg-3.png" alt="t1-data-editdlg-3"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>Select the line at $2025, then shift-click the line at $202E. Right-click
|
|
and select <samp>Edit Operand</samp>. If you selected the correct set of bytes,
|
|
the top line in the dialog should now say, "<samp>10 bytes selected</samp>".
|
|
Because 10 is a multiple of two, the 16-bit formats are enabled. It's not a multiple
|
|
of 3 or 4, so the 24-bit and 32-bit options are not enabled. Click the
|
|
<samp>16-bit words, little-endian</samp> radio button, then over to the right,
|
|
click the <samp>Address</samp> radio button. Click <samp>OK</samp>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-image">
|
|
<img src="images/t1-data-edited-3.png" alt="t1-data-edited-3"/>
|
|
</div>
|
|
<div class="grid-item-text">
|
|
<p>We just told SourceGen that those 10 bytes are actually five 16-bit numeric
|
|
references. SourceGen determined that the addresses are contained in the
|
|
file, and generated labels for each of them. Labels only work if they're
|
|
on their own line, so the long string was automatically split into five
|
|
separate <code>.STR</code> statements.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-item-text">
|
|
<p>Note we didn't explicitly format the string data. We formatted
|
|
the addresses at $2025, which placed labels at the start of the strings,
|
|
but the strings themselves were automatically detected and formatted
|
|
by SourceGen. By default, SourceGen looks for ASCII strings, but this
|
|
can be changed in the project properties. You can even disable the
|
|
string auto-detection entirely if you want.</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div> <!-- #main -->
|
|
|
|
<div id="prevnext">
|
|
<a href="labels-symbols.html" class="btn-previous">« Previous</a>
|
|
<a href="generating-code.html" class="btn-next">Next »</a>
|
|
</div>
|
|
|
|
<div id="footer">
|
|
<!-- START: /footer-incl.html -->
|
|
<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> -->
|
|
<!-- END: /footer-incl.html -->
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|