Regen docs

README format tweaks; also link to AUTHORS.txt at the top
This commit is contained in:
Bill Kendrick 2022-02-24 23:05:26 -08:00
parent 8f9b6f52a9
commit 9ba8302ddb
28 changed files with 590 additions and 441 deletions

View file

@ -8,7 +8,15 @@
<style>
body { font-size: large; }
table { font-size: large; }
div.screenshot { text-align: center; }
div.screenshot-center {
text-align: center;
}
div.screenshot-right {
float: right;
}
div.screenshot-right-after {
clear: both;
}
div.keeptogether { page-break-inside: avoid; }
h1, h2, h3, h4 { font-family: sans; }
h1 { color: #800; page-break-before: always; break-before: always; }
@ -36,6 +44,7 @@
background-color: #eee;
border-radius: 0.5em;
padding: 0.5em;
display: inline-block;
}
@media print {
@ -63,7 +72,7 @@
A simple drawing program for children </h3>
<p>
Copyright &copy; 2002-2022 by various contributors; see AUTHORS.<br/>
Copyright &copy; 2002-2022 by various contributors; see <a href="../../AUTHORS.txt">AUTHORS.txt</a>.<br/>
<a href="https://tuxpaint.org/">https://tuxpaint.org/</a><br/>
<a href="https://twitter.com/TuxPaintTweets">@TuxPaintTweets on Twitter</a>
</p>
@ -289,39 +298,53 @@
</blockquote>
<hr size="1"
noshade>
noshade />
<h2>
<a name="using_title"
id="using_title">Title Screen</a>
</h2>
<p>
When Tux Paint first loads, a title/credits screen will appear. </p>
<div class="screenshot">
<div class="screenshot-right">
<img src="../../html/images/tuxpaint-title.jpg"
width="324"
height="254"
alt="[Title screen]">
</div>
<div class="keeptogether">
<h2>
<a name="using_title"
id="using_title">Title Screen</a>
</h2>
<p>
When Tux Paint first loads, a title/credits screen will appear. </p>
</div>
<p>
Once loading is complete, press a key or click or tap in the Tux Paint window to continue. (Or, after about 5 seconds, the title screen will go away automatically.) </p>
<div class="screenshot-right-after"></div>
<hr size="1"
noshade>
<h2>
<a name="using_main"
id="using_main">Main Screen</a>
</h2>
<div class="keeptogether">
<h2>
<a name="using_main"
id="using_main">Main Screen</a>
</h2>
<p>
The main screen is divided into the following sections: </p>
<p>
The main screen is divided into the following sections: </p>
</div>
<dl>
<div class="keeptogether">
<!-- FIXME: Update screenshot to add "Fill" tool -->
<div class="screenshot-right">
<img src="../../html/images/tools.jpg"
width="324"
height="254"
alt=
"[Tools: Paint, Stamp, Lines, Shapes, Text, Magic, Label, Undo, Redo, Eraser, New, Open, Save, Print, Quit]">
</div>
<dt>
<strong>Left Side: Toolbar</strong>
</dt>
@ -329,19 +352,19 @@
<dd>
<p>
The toolbar contains the drawing and editing controls. </p>
<!-- FIXME: Update screenshot to add "Fill" tool -->
<div class="screenshot">
<img src="../../html/images/tools.jpg"
width="324"
height="254"
alt=
"[Tools: Paint, Stamp, Lines, Shapes, Text, Magic, Label, Undo, Redo, Eraser, New, Open, Save, Print, Quit]">
</div>
</dd>
</div>
<div class="screenshot-right-after"></div>
<div class="keeptogether">
<div class="screenshot-right">
<img src="../../html/images/canvas.jpg"
width="324"
height="254"
alt="[Canvas]">
</div>
<dt>
<strong>Middle: Drawing Canvas</strong>
</dt>
@ -350,18 +373,21 @@
<p>
The largest part of the screen, in the center, is the drawing canvas. This is, obviously, where you draw! </p>
<div class="screenshot">
<img src="../../html/images/canvas.jpg"
width="324"
height="254"
alt="[Canvas]">
</div>
<p class="note">
<span title="Information">&#128161;</span> <strong>Note:</strong> The size of the drawing canvas depends on the size of Tux Paint. You can change the size of Tux Paint using the <em>Tux Paint Config.</em> configuration tool, or by other means. See the <a href="OPTIONS.html"><em>Options</em></a> documentation for more details. </p>
</dd>
<div class="screenshot-right-after"></div>
<div class="keeptogether">
<div class="screenshot-right">
<img src="../../html/images/selector.jpg"
width="324"
height="254"
alt=
"[Selectors - Brushes, Letters, Shapes, Stamps]">
</div>
<dt>
<strong>Right Side: Selector</strong>
</dt>
@ -369,17 +395,19 @@
<dd>
<p>
Depending on the current tool, the selector shows different things. e.g., when the Paint Brush or Line tool is selected, it shows the various brushes available. When the Rubber Stamp tool is selected, it shows the different shapes you can use. When the Text or Label tool is selected, it shows various fonts. </p>
<div class="screenshot">
<img src="../../html/images/selector.jpg"
width="324"
height="254"
alt=
"[Selectors - Brushes, Letters, Shapes, Stamps]">
</div>
</dd>
<div class="screenshot-right-after"></div>
<div class="keeptogether">
<div class="screenshot-right">
<img src="../../html/images/colors.jpg"
width="324"
height="254"
alt=
"[Colors - Black, White, Red, Pink, Orange, Yellow, Green, Cyan, Blue, Purple, Brown, Grey]">
</div>
<dt>
<strong>Lower: Colors</strong>
</dt>
@ -388,14 +416,6 @@
<p>
A palette of available colors are shown near the bottom of the screen. </p>
<div class="screenshot">
<img src="../../html/images/colors.jpg"
width="324"
height="254"
alt=
"[Colors - Black, White, Red, Pink, Orange, Yellow, Green, Cyan, Blue, Purple, Brown, Grey]">
</div>
<p id="special_color_options">
On the far right are three special color options: <ul>
<li>The "color picker" (which has an outline of an eye-dropper) allows you to pick a color found within your drawing. A shortcut key is available to access this feature quickly; see below. <li>The rainbow palette allows you to pick a color from within a box containing thousands of colors.</li>
@ -411,7 +431,17 @@
</dd>
</div>
<div class="screenshot-right-after"></div>
<div class="keeptogether">
<div class="screenshot-right">
<img src="../../html/images/tips.jpg"
width="324"
height="254"
alt=
"(Example tip: 'Pick a shape. Click to pick the center, drag, then let go when it is the size you want. Move around to rotate it, and click to draw it.')">
</div>
<dt>
<strong>Bottom: Help Area</strong>
</dt>
@ -419,16 +449,10 @@
<dd>
<p>
At the very bottom of the screen, <em>Tux</em>, the Linux Penguin, provides tips and other information while you use Tux Paint. </p>
<div class="screenshot">
<img src="../../html/images/tips.jpg"
width="324"
height="254"
alt=
"(Example tip: 'Pick a shape. Click to pick the center, drag, then let go when it is the size you want. Move around to rotate it, and click to draw it.')">
</div>
</dd>
</div>
<div class="screenshot-right-after"></div>
</dl>
<hr size="1"
@ -473,7 +497,7 @@
<p>
As you draw, a sound is played. The bigger the brush, the lower the pitch. </p>
<div class="screenshot">
<div class="screenshot-center">
<img src="../../html/images/ex_paint.png"
width="120"
height="95"
@ -486,7 +510,7 @@
The space between each position where a brush is applied to the canvas can vary. Some brushes (such as the footprints and flower) are spaced, by default, far enough apart that they don't overlap. Other brushes (such as the basic circular ones) are spaced closely, so they make a continuous stroke. </p>
<p>
The default spacing of brushes may be overridden using by clicking within the triangular-shaped series of bars at the bottom right; the larger the bar, the wider the spacing. Brush spacing affects both tools that use the brushes: the "Paint" tool and the "Lines" tool. </p>
<div class="screenshot">
<div class="screenshot-center">
<img src=
"../../html/images/tool_slider.png"
width="96"
@ -516,7 +540,7 @@
<p>
As you move the mouse around the canvas, an outline follows the mouse, showing where the stamp will be placed, and how big it will be. Click to place the stamp. </p>
<div class="screenshot">
<div class="screenshot-center">
<img src="../../html/images/ex_stamps.png"
width="182"
height="156"
@ -542,7 +566,7 @@
<li>Many stamps may be flipped vertically, or displayed as a mirror-image, using the control buttons at the bottom right. </li>
</ul>
<div class="screenshot">
<div class="screenshot-center">
<img src=
"../../html/images/tool_stamp_controls.png"
width="96"
@ -588,7 +612,7 @@
<p>
Different brushes have different spacing, leaving either a series of individual shapes, or a continuous stroke of the brush shape. Brush spacing may be adjusted. See "Paint", above, to learn more. </p>
<div class="screenshot">
<div class="screenshot-center">
<img src="../../html/images/ex_lines.png"
width="76"
height="103"
@ -623,7 +647,8 @@
</dt>
<dd>
The shape will expand from where you initially clicked, and will be centered around that position. <p class="note">
The shape will expand from where you initially clicked, and will be centered around that position. <br/>
<p class="note">
<span title="Version variation">&#128220;</span> This was Tux Paint's only behavior through version 0.9.24.) </p>
</dd>
@ -672,7 +697,7 @@
</dd>
</dl>
<div class="screenshot">
<div class="screenshot-center">
<img src="../../html/images/ex_shapes.png"
width="177"
height="104"
@ -704,7 +729,7 @@
<p>
Clicking elsewhere in the picture while the text entry is still active causes the current line of text to move to that location (where you can continue editing it). </p>
<div class="screenshot">
<div class="screenshot-center">
<img src="../../html/images/ex_text.png"
width="139"
height="69"
@ -953,7 +978,7 @@
<p>
This shows you a list of all of the pictures you've saved. If there are more than can fit on the screen, use the up and down arrows at the top and bottom of the list to scroll through the list of pictures. </p>
<div class="screenshot">
<div class="screenshot-center">
<img src="../../html/images/open_dialog.jpg"
width="194"
height="152"
@ -976,6 +1001,7 @@
<p>
(Alternatively, you can double-click a picture's icon to load it.) </p>
<div class="screenshot-right-after"></div>
</li>
<li>
@ -989,9 +1015,10 @@
<p class="note">
<span title="Version variation">&#128220;</span> <strong>Note:</strong> On Linux (as of version 0.9.22) and Windows (as of version 0.9.27), the picture will be placed in your desktop's trash can / recycle bin (where you may recover and restore it, if you change your mind). </p>
<div class="screenshot-right-after"></div>
</li>
<li>
<li clear="all">
<img src="../../html/images/open_export.png"
width="48"
height="48"
@ -999,6 +1026,7 @@
align="right">
<p>
Click the 'Export' button near the lower right to export the image to your export folder. (e.g., "<code>~/Pictures/TuxPaint/</code>") </p>
<div class="screenshot-right-after"></div>
</li>
<li>
@ -1009,6 +1037,7 @@
align="right">
<p>
Click the blue 'Slides' (slide projector) button at the lower left to go to slideshow mode. See "<a href="#slides">Slides</a>", below, for details. </p>
<div class="screenshot-right-after"></div>
</li>
<li>
@ -1019,6 +1048,7 @@
align="right">
<p>
Click the red 'Back' arrow button at the lower right of the list to cancel and return to the picture you were drawing. </p>
<div class="screenshot-right-after"></div>
</li>
</ul>
</blockquote>
@ -1055,7 +1085,7 @@
<p>
If you <em>have</em> saved the picture before, or this is a picture you just loaded using the "Open" command, you will first be asked whether you want to save over the old version, or create a new entry (a new file). </p>
<div class="screenshot">
<div class="screenshot-center">
<img src="../../html/images/saveover.png"
width="177"
height="110"
@ -1233,7 +1263,7 @@
<p class="note">
<span title="Information">&#128161;</span> <strong>Note:</strong> The slowest setting does not automatically advance through the slides. Use it for when you want to step through them manually. (This does not apply to an exported animated GIF.) </p>
<div class="screenshot">
<div class="screenshot-center">
<img src=
"../../html/images/tool_slider.png"
width="96"