adds a chapter "first steps" to the documentation

src/test/java/de/neemann/digital/docu/DocuTest.java

@@ -41,6 +41,8 @@ public class DocuTest extends TestCase {
                 .append(Lang.get("digital"))
                 .append("\" titleImage=\"")
                 .append(new File(Resources.getRoot(), "../../../screenshot.png").toURI().toString())
+                .append("\" images=\"")
+                .append(new File(Resources.getRoot(), "docu/images/").toURI().toString())
                 .append("\" toc=\"")
                 .append(Lang.get("tableOfContent"))
                 .append("\" lang=\"")

src/test/java/de/neemann/digital/integration/ScreenShots.java

@@ -0,0 +1,97 @@
+package de.neemann.digital.integration;
+
+import de.neemann.digital.gui.Main;
+import de.neemann.digital.lang.Lang;
+
+import javax.imageio.ImageIO;
+import java.awt.*;
+import java.awt.event.InputEvent;
+import java.awt.image.BufferedImage;
+import java.io.File;
+
+import static de.neemann.digital.draw.shapes.GenericShape.SIZE;
+import static de.neemann.digital.draw.shapes.GenericShape.SIZE2;
+
+public class ScreenShots {
+
+    public static void main(String[] args) {
+        int x = 300;
+        int y = 200;
+        new GuiTester()
+                .add(new GuiTester.WindowCheck<>(Main.class, (gt, w) -> w.setSize(850, 500)))
+                .add(new ScreenShot<>(Main.class))
+                .press("F10")
+                .press("RIGHT", 5)
+                .press("DOWN", 2)
+                .press("RIGHT")
+                .press("DOWN", 2)
+                .add(new ScreenShot<>(Main.class))
+                .press("ENTER")
+                .mouseMove(x, y)
+                .mouseClick(InputEvent.BUTTON1_MASK)
+                .add(new ScreenShot<>(Main.class))
+                .press("typed l")
+                .mouseMove(x, y + SIZE * 2)
+                .mouseClick(InputEvent.BUTTON1_MASK)
+                .add(new ScreenShot<>(Main.class))
+                .press("F10")
+                .press("RIGHT", 5)
+                .press("DOWN", 1)
+                .press("RIGHT")
+                .press("DOWN", 4)
+                .add(new ScreenShot<>(Main.class))
+                .press("ENTER")
+                .mouseMove(x + SIZE * 5, y + SIZE * 1 + SIZE2)
+                .mouseClick(InputEvent.BUTTON1_MASK)
+                .add(new ScreenShot<>(Main.class))
+                .press("F10")
+                .press("RIGHT", 5)
+                .press("DOWN", 2)
+                .press("RIGHT")
+                //.press("DOWN", 4)
+                .add(new ScreenShot<>(Main.class))
+                .press("ENTER")
+                .mouseMove(x + SIZE * 9, y + SIZE * 1 + SIZE2)
+                .mouseClick(InputEvent.BUTTON1_MASK)
+                .add(new ScreenShot<>(Main.class))
+                .mouseMove(x, y - SIZE)
+                .mouseClick(InputEvent.BUTTON1_MASK)
+                .mouseMove(x + SIZE * 2, y - SIZE)
+                .mouseClick(InputEvent.BUTTON1_MASK)
+                .add(new ScreenShot<>(Main.class))
+                .mouseMove(x, y + SIZE)
+                .mouseClick(InputEvent.BUTTON1_MASK)
+                .mouseMove(x + SIZE * 2, y + SIZE)
+                .mouseClick(InputEvent.BUTTON1_MASK)
+                .mouseMove(x + SIZE * 5, y)
+                .mouseClick(InputEvent.BUTTON1_MASK)
+                .mouseMove(x + SIZE * 7, y)
+                .mouseClick(InputEvent.BUTTON1_MASK)
+                .add(new ScreenShot<>(Main.class))
+                .press(' ')
+                .add(new ScreenShot<>(Main.class))
+                .mouseMove(x - SIZE, y)
+                .mouseClick(InputEvent.BUTTON1_MASK)
+                .add(new ScreenShot<>(Main.class))
+                .execute();
+    }
+
+    private static class ScreenShot<W extends Window> extends GuiTester.WindowCheck<W> {
+        private static int n;
+
+        public ScreenShot(Class<W> expectedClass) {
+            super(expectedClass);
+        }
+
+        @Override
+        public void checkWindow(GuiTester guiTester, W window) throws Exception {
+            BufferedImage image = guiTester.getRobot().createScreenCapture(window.getBounds());
+            String str = Integer.toString(n);
+            if (str.length() == 1)
+                str = '0' + str;
+            File file = new File(Resources.getRoot(), "docu/images/"+ Lang.currentLanguage().getName()+"/scr" + str + ".png");
+            ImageIO.write(image, "png", file);
+            n++;
+        }
+    }
+}

src/test/resources/docu/elem2fo.xslt

@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet version="1.0"
 				xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-				xmlns:fo="http://www.w3.org/1999/XSL/Format">
+				xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:csl="http://www.w3.org/1999/XSL/Transform">
+
+	<xsl:param name="images"><xsl:value-of select="/root/@images"/><xsl:value-of select="/root/@lang"/>/</xsl:param>
 
 	<xsl:template match="root">
 		<fo:root font-family="SansSerif" font-size="11pt" xml:lang="{@lang}">
@@ -177,10 +179,13 @@
         </fo:block>
     </xsl:template>
 
-	<xsl:template match="e">
-		<fo:inline font-style="italic" >
+	<xsl:template match="image">
+		<fo:block keep-together.within-page="always" margin-top="1mm" margin-bottom="2mm">
+		    <fo:block text-align="center" margin-bottom="1mm">
+			    <fo:external-graphic content-width="15cm" width="100%" src="url('{$images}{@src}')"/>
+		    </fo:block>
 		    <xsl:apply-templates/>
-		</fo:inline>
+	    </fo:block>
 	</xsl:template>
 
 	<xsl:template match="a">
@@ -189,6 +194,10 @@
 		</fo:basic-link>
 	</xsl:template>
 
+	<xsl:template match="e">
+		<fo:inline font-style="italic"><xsl:apply-templates/></fo:inline>
+	</xsl:template>
+
 	<xsl:template match="arrow">
 		<fo:inline padding-left="2pt" font-family="ZapfDingbats">&#x2192;</fo:inline>
 	</xsl:template>

src/test/resources/docu/static_de.xml

@@ -26,6 +26,70 @@
                 Bearbeitungsmodus gewechselt werden, indem die Simulation gestoppt wird.
             </par>
         </subchapter>
+        <subchapter name="Erste Schritte">
+            <par>
+                <image src="scr00.png">
+                    Im Hauptfenster können aus dem Menü <e>Bauteile</e> die verschiedenen Bauteile ausgewahlt werden.
+                    Danach werden diese auf dem Zeichenfeld positioniert. Dieser Vorgang kann mit der ESC-Taste
+                    jederzeit abgebrochen werden.
+                </image>
+                <image src="scr01.png">
+                    Als erstes Beispiel kann eine Schaltung mit einem Exclusiv-Oder Gatter aufgebaut werden.
+                    Dazu wählt man zunächst einen Eingang aus. Dieser kann später interaktiv mit der Maus
+                    gesteuert werden.
+                </image>
+                <image src="scr02.png">
+                    Nach der Auswahl kann der erste Eingang auf die Zeichenfläche gesetzt werden.
+                    Der rote Punkt markiert den Leitungsanschluss. Hier wird später eine Verbindungsleitung
+                    angeschlossen. Rot zeigt an, dass dieser Anschluss aktiv ist. Er definiert also einen
+                    Signalwert.
+                </image>
+                <image src="scr03.png">
+                    Auf die gleiche Art und Weise wird ein zweiter Eingang hinzugefügt. Am besten setzt man
+                    ihn direkt unter den ersten Eingang.
+                </image>
+                <image src="scr04.png">
+                    Danach wird das Exclusiv-Oder Gatter ausgewählt. Dieses Gatter stellt die eigentliche
+                    logische Funktion dar.
+                </image>
+                <image src="scr05.png">
+                    Dieses kann nun ebenfalls in die Schaltung eingefügt werden. Am besten setzt man es so,
+                    dass die spätere Verdrahtung möglichst einfach wird. Die blauen Punkte bezeichnen die
+                    Eingänge des Gatters.
+                </image>
+                <image src="scr06.png">
+                    Jetzt wählt man noch einen Ausgang aus. Dieser kann verwendet werden, um einen Zustand
+                    anzuzeigen, oder um später Signale an eine einbettende Schaltung weiterzugeben.
+                </image>
+                <image src="scr07.png">
+                    Auch dieser wird so positioniert, dass die Verdrahtung möglichst einfach wird.
+                    Er hat einen blauen Punkt, verfügt also über einen Eingang.
+                </image>
+                <image src="scr08.png">
+                    Damit sind alle Komponenten vorhanden. Jetzt muss noch die Verdrahtung ergänzt werden.
+                    Mit der Maus kann direkt eine Verbindungsleitung gezogen werden. Es werden die blauen und roten
+                    Punkte miteinander verbunden. Es darf dabei immer nur genau ein roter Punkt mit einer beliebigen
+                    Anzahl blauer Punkte verbunden werden. Nur der Einsatz von Treestate-Ausgängen erlaubt es,
+                    von dieser Regel abzuweichen und mehrere rote Punkte miteinander zu verbinden.
+                </image>
+                <image src="scr09.png">
+                    So können auch die beiden noch fehlenden Leitungen ergänzt werden. Damit ist eine erste
+                    Schaltung komplett.
+                </image>
+                <image src="scr10.png">
+                    Um mit der Schaltung interagieren zu können, muss diese gestartet werden. Dazu kann der
+                    Start-Knopf in der Toolbar verwendet werden.
+                    Nach dem Starten der Simulation ändert sich die Farbe der Leitungen und die Ein- und Ausgänge
+                    sind jetzt ausgefüllt. Ein helles Grün markiert eine logische '1' und ein dunkles Grün eine
+                    logische '0'. Im Moment findet sich auf allen Leitungen eine logische '0'.
+                </image>
+                <image src="scr11.png">
+                    Durch klicken mit der Maus können die Eingänge umgeschaltet werden. Da die Simulation jetzt
+                    aktiv ist, verändert sich der Augang entsprechend der aktuellen Eingangszustände.
+                    Die Schaltung verhällt sich wie erwartet wie ein XOR-Gatter.
+                </image>
+            </par>
+        </subchapter>
         <subchapter name="Verbindungsleitungen">
             <par>
                 Alle Elemente müssen über Leitungen verbunden werden. Es ist nicht möglich, zwei Elemente direkt

src/test/resources/docu/static_en.xml

@@ -24,6 +24,62 @@
                 editing mode again by stopping the simulation.
             </par>
         </subchapter>
+        <subchapter name="First Steps">
+            <par>
+                <image src="scr00.png">
+                    In the main window, the various components can be selected from the menu <e>Components</e>.
+                    Then they are positioned on the drawing field. This process can be aborted with the ESC key
+                    at any time.
+                </image>
+                <image src="scr01.png">
+                    As a first example, a circuit with an exclusive OR gate can be constructed.
+                    To do this, first select an input component.
+                    This can later be controlled interactively with the mouse.
+                </image>
+                <image src="scr02.png">
+                    After selection, the first input can be placed on the drawing surface. The red dot marks the wire
+                    connection. Here, a wire will be connected later. Red indicates that this port is active.
+                    So he defines a signal value.
+                </image>
+                <image src="scr03.png">
+                    In the same way, a second input is added. It is best to put it directly under the first input.
+                </image>
+                <image src="scr04.png">
+                    Thereafter, the Exclusive-Or gate is selected. This gate represents the actual logical function.
+                </image>
+                <image src="scr05.png">
+                    This gate can now also be inserted in the circuit. It is best to set it in a way that the subsequent
+                    wiring is as simple as possible. The blue dots indicate the inputs of the gate.
+                </image>
+                <image src="scr06.png">
+                    Now select an output. This can be used to indicate a signal state or to later pass signals to
+                    an embedding circuit.
+                </image>
+                <image src="scr07.png">
+                    This is also positioned so that the wiring become as simple as possible.
+                    He has a blue dot, so has an input.
+                </image>
+                <image src="scr08.png">
+                    Now all necessary components are present. At next the wiring has to be added. With the mouse
+                    directly a wire can be drawn. The blue and red dots are connected. Only one red dot may be
+                    connected to any number of blue dots. Only the use of threestate outputs makes it possible to
+                    deviate from this rule and to connect several red dots.
+                </image>
+                <image src="scr09.png">
+                    So also the two missing lines can be drawn. This completes a first circuit.
+                </image>
+                <image src="scr10.png">
+                    To be able to interact with the circuit, it must be started. The start button in the toolbar can
+                    be used for this purpose. After starting the simulation, the color of the wires changes and the
+                    inputs and outputs are now filled. A bright green marks a logical '1' and a dark green a logical '0'.
+                    At the moment there is a logical '0' on all wires.
+                </image>
+                <image src="scr11.png">
+                    By clicking with the mouse, the inputs can be switched. Since the simulation is now active, the
+                    output changes according to the current input states. The circuit behaves as expected like an XOR gate.
+                </image>
+            </par>
+        </subchapter>
         <subchapter name="Wires">
             <par>
                 All components must be connected via wires. It is not possible to connect two components