Add some screenshots and write some of the "basics"

3 files changed, 63 insertions, 11 deletions

diff --git a/sigmodr/doc/basics.docbook b/sigmodr/doc/basics.docbook
index 3d661ed6..bfc596a5 100644
--- a/sigmodr/doc/basics.docbook
+++ b/sigmodr/doc/basics.docbook
@@ -11,25 +11,77 @@
  </chapterinfo>
  <title>&sigmodr; Basics</title>
  
- <sect1>
+ <sect1 id="starting-sigmodr">
   <title>Starting &sigmodr;</title>
   <para>
-   Since &sigmodr; is an editor for Sigmod files, it is the default application
-   for opening Sigmod files with if installed. Precedence with other
-   applicationscan be changed using the File Associations settings (found in
-   <application>System Settings</application>). By default, &sigmodr; can be
-   started in any of the following ways:
+   Since &sigmodr; is the official editor for &sigmod; files, it is the default
+   application for opening &sigmod; files with if installed. Precedence with
+   other applications can be changed using the File Associations settings
+   (found in <application>System Settings</application>). By default, &sigmodr;
+   can be started in any of the following ways:
    <itemizedlist>
     <listitem>
-     <para>
-      Opening a Sigmod file
-     </para>
+     <para>Opening a &sigmod; file</para>
     </listitem>
     <listitem>
-     <para>
-     </para>
+     <para>Choosing &sigmodr; from the menus</para>
+    </listitem>
+    <listitem>
+     <para>From a launcher (i.e., <application>KRunner</application> or
+     <application>Katapault</application>)</para>
     </listitem>
    </itemizedlist>
   </para>
  </sect1>
+ 
+ <sect1 id="user-interface">
+  <title>User interface</title>
+  <para>This section describes the user interface of &sigmodr; and how to
+  open and edit the data structures within &sigmodr;.</para>
+  
+  <sect2 id="main-window">
+   <title>The Main Window</title>
+   <para>When &sigmodr; is started, the main window is displayed:
+    <screenshot id="screen-main-window">
+     <screeninfo>&sigmodr; main window</screeninfo>
+     <mediaobject>
+      <imageobject>
+       <imagedata fileref="main-window.png" format="PNG" />
+      </imageobject>
+      <textobject>
+       <phrase>&sigmodr; main window</phrase>
+      </textobject>
+     </mediaobject>
+    </screenshot>
+   </para>
+   
+   <para>The window consists of the <link linkend="sigmod-tree">&sigmod;</link>
+   tree and the <link linkend="editor-panel">editor panel</link>.</para>
+  </sect2>
+  
+  <sect2 id="sigmod-tree">
+   <title>The &sigmod; Tree</title>
+   <para>The &sigmod; tree is a tree structure with all of the data
+   elements represented within it. It is on the left of the main window.
+   It has descriptions as the main part of the tree items. If an item is
+   surrounded by &lsquo;&laquo;&rsquo; and &lsquo;&raquo;&rsquo;, it
+   means that the data used to describe the item is not set. On the right
+   side, there are three icons. The first icon is shown if the item can
+   be edited, the second icon is shown if the item can be deleted, and
+   finally the third icon is shown if an item can be added to it (as a
+   child). Here is a screenshot of the tree with a few &sigmod;s open and
+   some items expanded:</para>
+   <screenshot id="sigmod-tree-screen">
+    <screeninfo>&sigmod; </screeninfo>
+    <mediaobject>
+     <imageobject>
+      <imagedata fileref="sigmod-tree.png" format="PNG" />
+     </imageobject>
+     <textobject>
+      <phrase>&sigmod; tree with a few open &sigmod;s</phrase>
+     </textobject>
+    </mediaobject>
+   </screenshot>
+  </sect2>
+ </sect1>
 </chapter>
diff --git a/sigmodr/doc/main-window.png b/sigmodr/doc/main-window.png
new file mode 100644
index 00000000..99e83e80
--- /dev/null
+++ b/sigmodr/doc/main-window.png
diff --git a/sigmodr/doc/sigmod-tree.png b/sigmodr/doc/sigmod-tree.png
new file mode 100644
index 00000000..a2b81467
--- /dev/null
+++ b/sigmodr/doc/sigmod-tree.png