textWaehler: undefined,

  gradWaehler: undefined,

  gradAnzeige: undefined,

  lerneTextButton: undefined,

  erzeugeTextButton: undefined,

  vergesseGelerntesButton: undefined,

  handeingabeButton: undefined,

  textLaengeWaehler: undefined,

  bereinigeLeerzeichenCheckbox: undefined,

  textAusgabeUebergaenge: undefined,

  handeingabeLoeschenButton: undefined,

​

​

  divLinks: undefined,

  divRechts: undefined,

  divGesamt: undefined,

​

  erzeugeGUI() {

    noCanvas();

​

    createElement("h1", "Nonsense-Texter | buchstabenbasiert | HU Edition");

    const divBreite = "500px"

    const c = " rgb(140, 130, 205)"

    const c2 = " rgb(200, 200, 200)"

​

​

    this.divLinks = createDiv();

    this.divLinks.style('background', c);

    this.divLinks.style('border', '5px solid' +c2);

    this.divLinks.style('width', divBreite);

​

    this.divMitte = createDiv();

    this.divMitte.style('background', c);

    this.divMitte.style('border', '5px solid' +c2);

    this.divMitte.style('width', divBreite);

​

    this.divRechts = createDiv();

    this.divRechts.style('background', c);

    this.divRechts.style('border', '5px solid' +c2);

    this.divRechts.style('width', divBreite);

​

    this.divGesamt = createDiv();

    this.divGesamt.style('border', '5px solid' +c2);

    this.divGesamt.child(this.divLinks);

    this.divGesamt.child(this.divMitte);

    this.divGesamt.child(this.divRechts);

    this.divGesamt.style('display', 'flex');

​

    // DIV LINKS (Eingabe & Lernen)

    createElement("h2", "Eingabe")

      .parent(this.divLinks);

    this.textEingabe = createElement('textarea')

    .parent(this.divLinks);

    //this.textEingabe.value("aba\nabb\nabc\n");

​

    this.handeingabeLoeschenButton = createButton("Eingabefenster leeren")

    .parent(this.divLinks)

  this.handeingabeLoeschenButton.mousePressed(textQuelleLoeschen);

​

    // Drop-down Textquelle

    createElement("label", "Quelle..................")

      .parent(this.divLinks);

    this.textWaehler = createSelect()

      .parent(this.divLinks);

    this.textWaehler.option("kafka.txt");

    this.textWaehler.option("lasker-schueler.txt");

    this.textWaehler.option("goethe.txt");

    this.textWaehler.option("rilke.txt");

    this.textWaehler.option("hegel.txt");

    this.textWaehler.option("austen.txt");

    this.textWaehler.option("joyce.txt");

    this.textWaehler.option("proust.txt");

    this.textWaehler.option("cervantes.txt");

    this.textWaehler.option("kapitel02.txt");

    this.textWaehler.option("loriot_atomstrom.txt");

    this.textWaehler.option("bense_wolke.txt");

    this.textWaehler.value("loriot_atomstrom.txt");

    this.textWaehler.changed(textGewaehlt);

​

    // Drop-down Grad

    createElement("label", "Grad....................")

      .parent(this.divLinks);

    this.gradWaehler = createSelect()

      .parent(this.divLinks);

    this.gradWaehler.option(0);

    this.gradWaehler.option(1);

    this.gradWaehler.option(2);

    this.gradWaehler.option(3);

    this.gradWaehler.option(4);

    this.gradWaehler.option(5);

    this.gradWaehler.option(6);

    this.gradWaehler.option(7);

    this.gradWaehler.option(8);

    this.gradWaehler.option(9);

    this.gradWaehler.option(10);

    this.gradWaehler.value(1);

    this.gradWaehler.changed(gradGewaehlt);

​

​

​

    // this.vergesseGelerntesButton.attribute('disabled', '');

    // this.gelerntesLoeschenCheckbox.mousePressed(vergesseGelerntes);

​

       // Button Text lernen

       this.lerneTextButton = createButton("Text lernen")

       .parent(this.divLinks);

     // this.lerneTextButton.attribute('disabled', '');

     this.lerneTextButton.mousePressed(lerneText);

    // Button Gelerntes vergessen

    this.vergesseGelerntesButton = createButton("Gelerntes löschen")

      .parent(this.divLinks)

      .mousePressed(vergesseGelerntes)

​

​

​

    // DIV MITTE (Berichte)

    createElement("h2", "Übergänge")

      .parent(this.divMitte);

​

    this.textAusgabeUebergaenge = createElement('textarea')

      .parent(this.divMitte)

      .id("textarea_uebergaenge")

      .attribute('disabled', '');

    createElement("br");

​

    // Legende

    const legendenText = "B = Zeilenumbruch  | = Trennzeichen";

    const legende = createElement("label", legendenText)

      .parent(this.divMitte);

    legende.id("legende");

​

    createElement("h2", "Bericht")

    .parent(this.divMitte);

​

    this.textAusgabeBericht = createElement('textarea')

    .parent(this.divMitte)

    .id("textarea_bericht")

    .attribute('disabled', '');

  createElement("br");

​

​

​

    createElement("h2", "Text erzeugen")

    .parent(this.divMitte);

​

    createElement("label", "Anzahl Zeichen..........")

    .parent(this.divMitte);

​

    this.textLaengeWaehler = createSelect()

    .parent(this.divMitte);

  this.textLaengeWaehler.option("100");

  this.textLaengeWaehler.option("500");

  this.textLaengeWaehler.option("1000");

  this.textLaengeWaehler.option("5000");

  this.textLaengeWaehler.option("10000");

  this.textLaengeWaehler.option("25000");

  this.textLaengeWaehler.value("1000");

​

​

​

    // Button Text erzeugen

    this.erzeugeTextButton = createButton("Text erzeugen")

      .parent(this.divMitte);

    this.erzeugeTextButton.attribute('disabled', '');

    this.erzeugeTextButton.mousePressed(erzeugeText);

​

    // this.bereinigeLeerzeichenCheckbox = createCheckbox("Leerzeichen bereinigen")

    // .parent(this.divMitte).style('width', '1000px')

    //.checked(true)

​

​

    // DIV RECHTS

    createElement("h2", "Ausgabe")

    .parent(this.divRechts);

​

    this.textAusgabe = createElement('textarea')

    .parent(this.divRechts)

    .id("textarea_ausgabe")

    .attribute('disabled', '');

    createElement("br");

​

​

​

​

​

  }

​

}