Kurzanleitung zur Generierung einer eigenen Stammbaum-HTML-Seite

Der Name der Person, die ihren Stammbaum generieren will sei "Nobody". Dann sind folgende Dateien zu erzeugen
  1. "Nobody-Stammbaum.html" für die HTML-Seite im Hauptverzeichnis
  2. "Nobody/" ein Unterverzeichnis
  3. "Nobody/Nobody-Stammbaum.txt" für Personentabelle
  4. "Nobody/Fotos" ein Unterverzeichnis mit JPG-Files für die Foto-Galerie & Paßbilder (wird rekursiv durchsucht)
  5. "Nobody/Dokumente" ein Unterverzeichnis mit Bildern (JPG-Files) der Dokumente
  6. "Nobody/Nobody-Legende.html" für Legende

Aufbau der HTML-Seite ("Nobody-Stammbaum.html")

Ich beschreibe hier nur die Grundstruktur der Seite. Sie kann natürlich jederzeit beliebig ergänzt werden
<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" type="image/x-icon" href="stammbaum.png">
    <title>Nobodys Stammbaum</title>
    <link rel="stylesheet" href="Stammbaum.css">
  </head>
  <body>
    ... Hier kann man eigene Zusatzinfos einbauen...
  </body>
  <script src="Stammbaum.js"></script>
  <script>
    generate_page("Nobody/","Nobody","nobody@nowhere.de"); 
  </script>
</html>
Das File "Stammbaum.js" mit dem nötigen Javascript-Code findet man auf meiner Homepage.
Die Seite wird komplett generiert mit dem Aufruf von 'generate_page("Nobody/","Nobody","nobody@nowhere.de");'
Der 1. Parameter ist das Unterverzeichnis, der 2. der Filenamen-Prefix und der 3. eine optionale Email-Adresse, die im Footer angezeigt wird.

Stammbaum-Daten ("Nobody/Nobody-Stammbaum.txt")

Dieses Textfile enthält alle Personendatensätze, die für die Baum-Grafik und Personen- und Familientabelle benötigt werden. Es besteht aus einer Zeile pro Person, wobei die Felder durch das $-Zeichen getrennt werden. Der Aufbau ist folgender:
ID $ Name $ Geboren $ Ort $ Taufe $ Geburtsname $ Vater-ID $ Mutter-ID $ Heirat $ Ort $ mit (ID) $ Beruf $ gestorben Unbekannte Daten bleiben einfach leer. Ein Beipiel-Datensatz wäre 2 $ Heinz Petzold $ 30.12.1928 $ Dresden $ 21.04.1935 $ $ 10 $ 11 $ 5.5.1949 $ Dresden $3 $ Elektriker  $ 23.2.2015 $ Die Personen-ID ist eine eindeutige Zahl, wobei Nobody-ID = 1 (als root) zu setzen ist. Alle anderen ID sind beliebige Zahlen von 2 - 999, die nichts mit dem Verwandschaftsverhältnis zu tun haben müssen.
Aller Text nach einem '%'-Zeichen bis zum Zeilenende wird ignoriert (als Zeilen-Kommentar, auch ganze Zeilen)
Dokumente (aus dem Unterverz. "Nobody/Dokumente") werden in diesem File mit '#' am Zeilenanfang markiert. Sie bestehen aus Komma-separierten Daten (#Filename, P1, P2 ...) für alle im Dokument erwähnten Personen: 
% #JPG, P1, P2, ...
% Px = Person-ID flags
%  ID=0 -> Person hier (noch) nicht erfaßt
% x: *=birthday t=Taufe +=deathday c=confirmation g=groom b=bride f=father m=mother a=age u=Todesursache p=profession 
%
#GKM-1883-Tod-Auguste-Köhler.jpg,            27 +a, 222 +a             % Mutter und Kind + einen Tag später
#GKM-1884-Heirat-Köhler-Börtz.jpg,	     26 ga f30, 230 ba f0      % vorherige Ehe von Johann Köhler durch den Tod getrennt
Für alle Dokumente muß eine entspr. Zeile vorhanden sein.

Fotos ("Nobody/Fotos")

In diesem Verzeichnis werden alle Fotos (mit Suffix ".jpg") für die Galerie gespeichert. Auch Unterverzeichnisse werden rekursiv durchsucht.
Ein Sonderfall sind die Files mit dem Namen "ID.jpg", mit der max. 3-stelligen Personen-ID. Diese werden als Paßfotos den Personen zugeordnet.

Legende ("Nobody/Nobody-Legende.html")

Der Inhalt dieses normalen Textfiles (ohne <HTML>-Tag und <body>-Tag) wird als Legende parsiert. Der Suffix .html dient nur zur besseren Formatierung im Editor des Anwenders (zB. im Emacs).
Bei der Parsierung (in "Stammbaum.js") werden Links wie zB <a href='#SchwagerBerta.jpg'> speziell ausgewertet als Popup-Bilder aus der Foto-Galerie.
Links wie zB <a href='#123'> werden für ein Popup der Personen-ID verlinkt. Ansonsten sind auch normale URL zulässig, wie href="https://de.wikipedia.org/wiki/Wanderjahre".

Die Headline-Tags <Hn>, n=1..5 werden zur Erzeugung des Inhaltsverzeichnisses am Anfang der Legende ausgewertet (als entspr. eingerückte Links).

Hilfreich für die Strukturierung der Legende finde ich das <details>-HTML-Tag. Damit kann man Zusatzinfos zu Orten, Geschichten usw. schön in die Seite einbetten, ohne sie zu überladen.

Um OpenStreet-Maps einzubinden, setzt man ein iframe-Tag in den Text, zB 

<iframe width="600" height="400" style="border: 1px solid black; "
    src="OSM-IFrame.html?x,x,x,12,13.7384,51.0491,-,13.7236,51.0810,$Leisniger Straße 66,13.7147,51.0572,Friedrichstadt">
</iframe/>
Das dazu nötige HTML-File "OSM-IFrame.html" kann man von meiner Homepage herunterladen.
Die Aufruf-Argumente (nach dem '?') werden durch Komma getrennt, und bedeuten dabei: 
     b=boolean: -,x; I=integer, F=float, S=string
     n Typ 
     0 b   Maus-Steuerung aktiv (für zoom & pan)
     1 b   PanZoombar einblenden
     2 b   Maßstabsanzeige einblenden
     3 I   zoom
     4 F   center longitude 
     5 F   center latitude
     6 b   center marker
     7 F   flag-1 longitude
     8 F   flag-1 latitude
     9 S   flag-1 label
     ....
Die label können mit HTML-tags formatiert werden. Wenn ein label mit einem $-Zeichen beginnt, wird es in die Karte als Popup eingeblendet (sonst nur Tooltip-Anzeige)

P.S. Bei Problemen oder Fragen könnt Ihr euch gern per 📧 Email an mich wenden

Viel Spaß bei der Generierung Eures eigenen Stammbaums!