unsupervised_learning_simulation/src/App.vue

<template>
  <img id="kein_bild" src="./assets/img/weiss_pixel.png" style="width: 0px; height: 0px" />
  <img id="stadtplan" src="./assets/img/stadtplan.png" style="width: 0px; height: 0px" />
  <img id="gold_rush" src="./assets/img/desert_landscape.png" style="width: 0px; height: 0px" />
  <img id="lebensmittel" src="./assets/img/weiss_pixel.png" style="width: 0px; height: 0px" />

  
  <h2>
    Finde heraus, wie die Positionen der {{ this.bezeichnung_prototypen }} an
    die {{ this.bezeichnung_datenpunkte }} angepasst werden.
  </h2>
  <br />

  <canvas id="c" STYLE="border: 0px black solid;" height="450" width="800"></canvas>
  <br />
  Die <b>Punkte</b> auf der Karte sind die
  <b>{{ this.bezeichnung_datenpunkte }}</b>.<br />
  Die <b>x-Markierungen</b> auf der Karte entsprechen den
  <b>{{ this.bezeichnung_prototypen }}</b>
  <br />
  <br />
  <div>
    <button class="btn btn-primary" @click="starte_animation_alle">
      starte Animation für alles
    </button>

    <input type="range" v-model="animation_speed_range" min="0" max="2000" step="1" />

    {{ animation_speed }} ms
  </div>

  <br />
  <div>
    <button class="btn btn-primary" @click="szenario_zuruecksetzen">
      Szenario zurücksetzen
    </button>
  </div>

  <br />

  <div style="width: 800px; margin: auto">
    <button class="btn btn-primary collapsible" style="background: grey">
      Hilfekarte: Animation im Einzelschritt
    </button>
    <div class="content" id="content2">
      <div class="row">
        <div class="column">
          {{ this.bezeichnung_aktueller_datenpunkt }}:
          <button class="btn btn-primary" @click="voriger_datenpunkt">-</button>
          &nbsp;<b style="font-size: x-large">{{ aktueller_datenpunkt + 1 }}</b>&nbsp;
          <button class="btn btn-primary" @click="naechster_datenpunkt">
            +
          </button>
        </div>
        <div class="column">
          {{ this.bezeichnung_aktueller_prototyp }}:
          <!-- <button @click="voriger_prototyp">-</button> -->
          <b style="font-size: x-large">{{ aktueller_prototyp + 1 }}</b>
          <!-- <button @click="naechster_prototyp">+</button> -->
        </div>
      </div>

      <button class="btn btn-primary" @click="starte_animation">
        starte Animation nur für {{ this.bezeichnung_aktueller_datenpunkt }}
      </button>
    </div>
  </div>
  <br />
  <div style="width: 800px; margin: auto">
    <button class="btn btn-primary collapsible" style="background: grey">
      Vertiefung: weitere Einstellungsmöglichkeiten
    </button>
    <div class="content" id="content0" style="text-align: center">
      <br />
      Verändere die Zahl der {{ this.bezeichnung_datenpunkte }} und
      {{ this.bezeichnung_prototypen }}.
      <div class="row">
        <div class="column" style="text-align: center">
          <h3>{{ this.bezeichnung_datenpunkte }}</h3>

          <button class="btn btn-primary" @click="update_anzahl_datenpunkte(--this.anzahl_datenpunkte)">
            -
          </button>
          &nbsp;
          <b style="font-size: xx-large">{{ this.anzahl_datenpunkte }}</b>&nbsp;
          <button class="btn btn-primary" @click="update_anzahl_datenpunkte(++this.anzahl_datenpunkte)">
            +
          </button>

          <br />
          <br />
        </div>

        <div class="column" style="text-align: center">
          <h3>{{ this.bezeichnung_prototypen }}</h3>

          <button class="btn btn-primary" @click="update_anzahl_prototypen(--this.anzahl_prototypen)">
            -
          </button>
          &nbsp;
          <b style="font-size: xx-large">{{ this.anzahl_prototypen }}</b>
          &nbsp;
          <button class="btn btn-primary" @click="update_anzahl_prototypen(++this.anzahl_prototypen)">
            +
          </button>
          <br />
          <br />
        </div>
      </div>

      <button class="btn btn-primary collapsible" style="background: grey">
        manuell verändern
      </button>
      <div class="content" id="content1" style="text-align: center">
        In jeder Zeile werden die zugehörigen Werte dargestellt für einen...
        <br />
        <div class="row">
          <div class="column" style="text-align: center">
            <b>Datenpunkt</b><br />
            x; y<br />
            <textarea v-model="txt_datensatz" placeholder="add multiple lines" rows="10"></textarea>
            <br />
            <button class="btn btn-primary" @click="textarea_2_datensatz">
              Datenpunkte verändern
            </button>
          </div>
          <div class="column" style="text-align: center">
            <b>Prototyp</b><br />
            x; y<br />
            <textarea v-model="txt_prototypensatz" placeholder="add multiple lines" rows="10"></textarea>
            <br />
            <button class="btn btn-primary" @click="textarea_2_prototypensatz">
              Prototypen verändern
            </button>
          </div>
        </div>
      </div>

      <hr />

      <div style="text-align: center">
        <h3>Szenario auswählen</h3>
        <select v-model="szenario" @change="szenario_aendern">
          <option value="gold_rush">
            Karte Gold Rush (Goldstücke und Ausgrabungsteams)
          </option>
          <option value="stadtplan">
            Stadtplan (Haushalte und U-Bahn-Stationen)
          </option>
          <option value="lebensmittel">
            Lebensmittel (diverse Lebensmittel und Lebensmittelgruppen)
          </option>
          <option value="kein_bild">reine Datenansicht</option>
        </select>
      </div>
      <br />
    </div>
  </div>
  <br />
  <br />
</template>

<script>
// Import the generateDifferentColors function from generateColors.js
import { generateDifferentColors } from "./generateColors.js";


export default {
  name: "App",
  components: {
    // Zeichnung,
    //HelloWorld
  },
  data() {
    return {
      datenpunkte_zufall: false,
      txt_datensatz: null,
      txt_prototypensatz: null,

      anzahl_datenpunkte: 8,
      anzahl_prototypen: 3,
      szenario: "gold_rush",

      beschriftungXachse: "X-Wert",
      beschriftungYachse: "Y-Wert",

      max_x_wert: 10,
      max_y_wert: 10,


      gold_rush_datenpunkte: [
        { x: 300, y: 300, color: "black" },
        { x: 202, y: 70, color: "black" },
        { x: 162, y: 250, color: "black" },
        { x: 82, y: 20, color: "black" },
        { x: 500, y: 350, color: "black" },
        { x: 630, y: 170, color: "black" },
        { x: 430, y: 270, color: "black" },
        { x: 570, y: 30, color: "black" },
      ],

      gold_rush_prototypen: [
        { x: 540, y: 50, color: "blue" },
        { x: 380, y: 370, color: "blue" },
        { x: 120, y: 150, color: "blue" },
      ],

      lebensmittel_datenpunkte: [
        { x: 0, y: 1, color: "black" },
        { x: 0, y: 4, color: "black" },
        { x: 0, y: 4, color: "black" },
        { x: 0, y: 5, color: "black" },
        { x: 0, y: 6, color: "black" },
        { x: 0, y: 3, color: "black" },
        { x: 1, y: 6, color: "black" },
        { x: 0, y: 14, color: "black" },
        { x: 0, y: 15, color: "black" },
        { x: 1, y: 9, color: "black" },
        { x: 3, y: 14, color: "black" },
        { x: 0, y: 21, color: "black" },
        { x: 1, y: 20, color: "black" },
        { x: 2, y: 0, color: "black" },
        { x: 7, y: 4, color: "black" },
        { x: 13, y: 2, color: "black" },
        { x: 13, y: 0, color: "black" },
        { x: 8, y: 18, color: "black" },
        { x: 17, y: 1, color: "black" },
        { x: 11, y: 24, color: "black" },
        { x: 0, y: 52, color: "black" },
        { x: 14, y: 1, color: "black" },
        { x: 5, y: 35, color: "black" },
        { x: 18, y: 1, color: "black" },
        { x: 11, y: 21, color: "black" },
        { x: 11, y: 22, color: "black" },
        { x: 2, y: 55, color: "black" },
        { x: 0, y: 73, color: "black" },
        { x: 14, y: 36, color: "black" },
        { x: 22, y: 11, color: "black" },
        { x: 5, y: 51, color: "black" },
        { x: 31, y: 3, color: "black" },
        { x: 0, y: 77, color: "black" },
        { x: 33, y: 6, color: "black" },
        { x: 1, y: 77, color: "black" },
        { x: 3, y: 61, color: "black" },
        { x: 28, y: 0, color: "black" },
        { x: 2, y: 71, color: "black" },
        { x: 31, y: 2, color: "black" },
        { x: 26, y: 29, color: "black" },
        { x: 7, y: 59, color: "black" },
        { x: 6, y: 71, color: "black" },
        { x: 5, y: 74, color: "black" },
        { x: 11, y: 61, color: "black" },
        { x: 26, y: 54, color: "black" },
        { x: 24, y: 53, color: "black" },
        { x: 23, y: 57, color: "black" },
        { x: 28, y: 53, color: "black" },
        { x: 30, y: 59, color: "black" },
        { x: 32, y: 54, color: "black" },
        { x: 43, y: 37, color: "black" },
        { x: 48, y: 8, color: "black" },
        { x: 80, y: 0, color: "black" },
        { x: 79, y: 0, color: "black" },
        { x: 70, y: 6, color: "black" },
        { x: 82, y: 1, color: "black" },
      ],

      lebensmittel_prototypen: [
        { x: 10, y: 10, color: "blue" },
        { x: 5, y: 50, color: "blue" },
        { x: 50, y: 5, color: "blue" },
      ],


      stadtplan_datenpunkte: [
        { x: 597, y: 13, color: "black" },
        { x: 248, y: 99, color: "black" },
        { x: 538, y: 274, color: "black" },
        { x: 526, y: 321, color: "black" },
        { x: 119, y: 316, color: "black" },
        { x: 342, y: 365, color: "black" },
        { x: 204, y: 368, color: "black" },
        { x: 472, y: 43, color: "black" },
        { x: 240, y: 264, color: "black" },
        { x: 189, y: 175, color: "black" },
        { x: 424, y: 318, color: "black" },
        { x: 158, y: 344, color: "black" },
        { x: 123, y: 246, color: "black" },
        { x: 585, y: 297, color: "black" },
        { x: 171, y: 80, color: "black" },
      ],

      stadtplan_prototypen: [
        { x: 540, y: 50, color: "blue" },
        { x: 380, y: 370, color: "blue" },
        { x: 120, y: 150, color: "blue" },
        { x: 305, y: 278, color: "blue" },
      ],


      datenpunkte: [
        { x: 300, y: 300, color: "black" },
        { x: 202, y: 70, color: "black" },
        { x: 162, y: 250, color: "black" },
        { x: 82, y: 20, color: "black" },
        { x: 500, y: 350, color: "black" },
        { x: 630, y: 170, color: "black" },
        { x: 430, y: 270, color: "black" },
        { x: 570, y: 30, color: "black" },
      ],

      prototypen: [
        { x: 540, y: 50, color: "blue" },
        { x: 380, y: 370, color: "blue" },
        { x: 120, y: 150, color: "blue" },
      ],

      prototypen_original: [],

      canvas: null,
      vueCanvas: null,
      aktueller_datenpunkt: 0,
      aktueller_prototyp: 0,
      animation_speed_range: 750,
      paused: false,
      animationsphase: null,
      naechstgelegener_prototyp: null,
      letzte_prototyp: null,
      naechstgelegener_prototyp_distanz: null,
    };
  },

  computed: {
    aktuelles_hintergrundbild: function () {
      return this.szenario;
    },
    bezeichnung_datenpunkte: function () {
      switch (this.szenario) {
        case "gold_rush":
          return "Goldstücke";
        case "stadtplan":
          return "Haushalte";
        case "Lebensmittel":
          return "Lebensmittel";
      }
      return "Datenpunkte";
    },
    bezeichnung_prototypen: function () {
      switch (this.szenario) {
        case "gold_rush":
          return "Grabungsteams";
        case "stadtplan":
          return "U-Bahn-Stationen";
      }
      return "Prototypen";
    },

    bezeichnung_aktueller_datenpunkt: function () {
      switch (this.szenario) {
        case "gold_rush":
          return "aktuelles Goldstück";
        case "stadtplan":
          return "aktueller Haushalt";
      }
      return "aktueller Datenpunkt";
    },
    bezeichnung_aktueller_prototyp: function () {
      switch (this.szenario) {
        case "gold_rush":
          return "aktuelles Grabungsteam";
        case "stadtplan":
          return "aktuelle U-Bahn-Station";
      }
      return "aktueller Prototyp";
    },

    animation_speed: function () {
      return this.animation_speed_range * 1;
    },
    akt_datenpunkt: function () {
      if (this.aktueller_datenpunkt < this.datenpunkte.length) {
        return this.datenpunkte[this.aktueller_datenpunkt];
      } else {
        return null;
      }
    },

    akt_prototyp: function () {
      if (this.aktueller_prototyp < this.prototypen.length) {
        return this.prototypen[this.aktueller_prototyp];
      } else {
        return null;
      }
    },


    akt_datenpunkt_skaliert: function () {
      if (this.aktueller_datenpunkt < this.datenpunkte.length) {
        return this.datenpunkte_skaliert[this.aktueller_datenpunkt];
      } else {
        return null;
      }
    },

    akt_prototyp_skaliert: function () {
      if (this.aktueller_prototyp < this.prototypen.length) {
        return this.prototypen_skaliert[this.aktueller_prototyp];
      } else {
        return null;
      }
    },


    datenpunkte_skaliert: function () {
      return this.ermittle_skalierten_datensatz(this.datenpunkte);
    },
    prototypen_skaliert: function () {
      return this.ermittle_skalierten_datensatz(this.prototypen);
    }

  },

  methods: {
    lade() {
      this.datensatz_2_textarea();
      this.prototypensatz_2_textarea();

    },

    datensatz_2_textarea() {
      let text_ausgabe = "";

      for (let i = 0; i < this.datenpunkte.length; i++) {
        text_ausgabe +=
          this.datenpunkte[i].x + "; " + this.datenpunkte[i].y + "\n";
      }

      this.txt_datensatz = text_ausgabe;
    },

    textarea_2_datensatz() {
      let text = this.txt_datensatz.replaceAll(" ", "");
      text = text.replaceAll("\n", "#");
      while (text.includes("##")) {
        text = text.replaceAll("##", "#");
      }

      console.log(text);
      let regex_korrekt = text.match("^((\\d)*;(\\d)*(#))*((\\d)*;(\\d)*)?$");

      if (!regex_korrekt) {
        console.log("DATENSATZ nicht korrekt!");
      } else {
        console.log("DATENSATZ korrekt!");
        let zeilen = text.split("#");
        let neuer_ds = [];

        for (let i = 0; i < zeilen.length; i++) {
          if (zeilen[i].includes(";")) {
            let zeile = zeilen[i].split(";");
            let ds = {
              x: parseInt(zeile[0]),
              y: parseInt(zeile[1]),
              color: "black",
            };

            neuer_ds.push(ds);
          }
        }
        this.datenpunkte = neuer_ds;
        this.anzahl_datenpunkte = this.datenpunkte.length;
        this.update_anzahl_datenpunkte(this.anzahl_datenpunkte);
      }
    },

    prototypensatz_2_textarea() {
      let text_ausgabe = "";

      for (let i = 0; i < this.prototypen.length; i++) {
        text_ausgabe +=
          this.prototypen[i].x + "; " + this.prototypen[i].y + "\n";
      }

      this.txt_prototypensatz = text_ausgabe;
    },

    textarea_2_prototypensatz() {
      let text = this.txt_prototypensatz.replaceAll(" ", "");
      text = text.replaceAll("\n", "#");
      while (text.includes("##")) {
        text = text.replaceAll("##", "#");
      }

      console.log(text);
      let regex_korrekt = text.match("^((\\d)*;(\\d)*(#))*((\\d)*;(\\d)*)?$");

      if (!regex_korrekt) {
        console.log("PROTOTYPENSATZ nicht korrekt!");
      } else {
        console.log("PROTOTYPENSATZ korrekt!");
        let zeilen = text.split("#");
        let neuer_ps = [];

        for (let i = 0; i < zeilen.length; i++) {
          if (zeilen[i].includes(";")) {
            let zeile = zeilen[i].split(";");
            let ps = {
              x: parseInt(zeile[0]),
              y: parseInt(zeile[1]),
              color: "blue",
            };

            neuer_ps.push(ps);
          }
        }
        this.prototypen = neuer_ps;
        this.prototypen_original = neuer_ps;
        this.anzahl_prototypen = this.prototypen.length;
        this.update_anzahl_prototypen(this.anzahl_prototypen);
      }
    },


    update_max_x_y() {
      this.max_x_wert = 10;
      this.max_y_wert = 10;

      this.datenpunkte.forEach((element) => {
        if (element.x > this.max_x_wert) {
          this.max_x_wert = element.x;
        }
        if (element.y > this.max_y_wert) {
          this.max_y_wert = element.y;
        }
      });


      this.prototypen.forEach((element) => {
        if (element.x > this.max_x_wert) {
          this.max_x_wert = element.x;
        }
        if (element.y > this.max_y_wert) {
          this.max_y_wert = element.y;
        }
      });

    },

    szenario_aendern() {
      /*
      if (this.szenario == "lebensmittel") {
        this.datenpunkte = this.ermittle_skalierten_datensatz(
          this.lebensmittel_datenpunkte
        );
        this.anzahl_datenpunkte = this.datenpunkte.length;
        this.update_anzahl_prototypen(4);
        this.datensatz_2_textarea();
      }
*/

      switch (this.szenario) {
        case "gold_rush": this.datenpunkte = this.gold_rush_datenpunkte;
          this.prototypen = this.gold_rush_prototypen;
          break;
        case "stadtplan": this.datenpunkte = this.stadtplan_datenpunkte;
          this.prototypen = this.stadtplan_prototypen;
          break;
        case "lebensmittel": this.datenpunkte = this.lebensmittel_datenpunkte;
          this.prototypen = this.lebensmittel_prototypen;
          break;
      }

      this.prototypen_original = this.prototypen;

      this.anzahl_datenpunkte = this.datenpunkte.length;
      this.anzahl_prototypen = this.prototypen.length;


      this.update_anzahl_prototypen(this.anzahl_prototypen);
      this.datensatz_2_textarea();
      this.prototypensatz_2_textarea();
      this.loesche_zeichenflaeche();
      this.update_max_x_y();
      this.refresh();
    },

    ermittle_skalierten_datensatz(ds_eingabe) {
      let breite_original = 800;
      let hoehe_original = 450;

      let offset_rand_ursprung_x = 14;
      let offset_rand_ursprung_y = 14;
      let offset_kreis_radius = 16; // damit die Kreise nicht außerhalb gezeichnet werden
      let breite = breite_original - offset_rand_ursprung_x - offset_kreis_radius;
      let hoehe = hoehe_original - offset_rand_ursprung_y - offset_kreis_radius;

      let ds_ausgabe = [];

      ds_eingabe.forEach((element) => {
        let x_skaliert = Math.round((element.x / this.max_x_wert) * breite) + offset_rand_ursprung_x;
        //let y_skaliert = Math.round(hoehe - (element.y / max_y) * hoehe); // y invertieren
        let y_skaliert = Math.round(hoehe_original - (element.y / this.max_y_wert) * hoehe) - offset_rand_ursprung_y;
        ds_ausgabe.push({ x: x_skaliert, y: y_skaliert, color: element.color });
      });

      // Array mischen
      //ds_ausgabe = this.shuffleArray(ds_ausgabe);
      return ds_ausgabe;
    },

    shuffleArray(arr) {
      arr.sort(() => Math.random() - 0.5);
      return arr;
    },

    update_anzahl_datenpunkte(new_value) {
      if (new_value >= 0) {
        console.log("angekommen." + new_value);
        this.anzahl_datenpunkte = new_value;

        while (this.datenpunkte.length > this.anzahl_datenpunkte) {
          this.datenpunkte.pop();
        }

        while (this.datenpunkte.length < this.anzahl_datenpunkte) {
          let neuer_datenpunkt = this.generiere_datenpunkt_zufaellig();
          this.datenpunkte.push(neuer_datenpunkt);
        }
        //this.update_zeichnung_child_component();
        this.datensatz_2_textarea();
        this.refresh();
      } else {
        this.anzahl_datenpunkte = 0;
      }
    },
    update_anzahl_prototypen(new_value) {
      // Original Prototypen laden
      console.log(this.prototypen_original);
      console.log(this.prototypen);
      this.prototypen = JSON.parse(JSON.stringify(this.prototypen_original));
      if (new_value >= 0) {
        console.log("angekommen." + new_value);
        this.anzahl_prototypen = new_value;

        while (this.prototypen.length > this.anzahl_prototypen) {
          this.prototypen.pop();
        }

        while (this.prototypen.length < this.anzahl_prototypen) {
          let neuer_prototyp = this.generiere_prototyp_zufaellig();
          this.prototypen.push(neuer_prototyp);
        }
        //this.update_zeichnung_child_component();
        this.prototypensatz_2_textarea();
        this.refresh();
      } else {
        this.anzahl_prototypen = 0;
        while (this.prototypen.length > this.anzahl_prototypen) {
          this.prototypen.pop();
        }
      }
      // Original Prototypen merken
      this.prototypen_original = JSON.parse(JSON.stringify(this.prototypen));
    },
    /*
    update_zeichnung_child_component() {
      //this.$refs.component_zeichnung.update_anzahlen(this.datenpunkte, this.prototypen)
      this.$refs.component_zeichnung.refresh();
      console.log("update child sent" + this.datenpunkte.length);
    },
    */
    generiere_datenpunkt_zufaellig() {
      let max_x = this.max_x_wert;
      let max_y = this.max_y_wert;
      let datenpunkt = {};

      datenpunkt.x = Math.floor(Math.random() * max_x);
      datenpunkt.y = Math.floor(Math.random() * max_y);
      datenpunkt.color = "black";

      console.log(datenpunkt);
      return datenpunkt;
    },
    generiere_prototyp_zufaellig() {
      let max_x = this.max_x_wert;
      let max_y = this.max_y_wert;
      let prototyp = {};

      prototyp.x = Math.floor(Math.random() * max_x);
      prototyp.y = Math.floor(Math.random() * max_y);
      prototyp.color = "blue";

      console.log(prototyp);
      return prototyp;
    },

    zeichne_hintergrund() {
      const bild = document.getElementById(this.aktuelles_hintergrundbild);
      console.log("background image: " + this.aktuelles_hintergrundbild);

      let bildX = 0;
      let bildY = 0;
      let breite = 800;
      let hoehe = 450;
      this.vueCanvas.drawImage(bild, bildX, bildY, breite, hoehe);

      this.zeichneLegende();
    },

    faerbe_prototypen() {
      let anzahl = this.prototypen.length;
      let farben = generateDifferentColors(anzahl);
      //colors_generation;
      console.log(anzahl + farben);

      for (let i = 0; i < this.prototypen.length; i++) {
        this.prototypen[i].color = farben[i];
        console.log(this.prototypen[i].color);
      }
    },

    faerbe_datenpunkte(alle) {
      for (let i = 0; i < this.datenpunkte_skaliert.length; i++) {
        if (alle || i < this.aktueller_datenpunkt) {
          let next_prototyp = this.gib_naechstgelegener_prototyp(
            this.datenpunkte_skaliert[i]
          );
          let farbe = next_prototyp.color;
          this.datenpunkte_skaliert[i].color = farbe;
          console.log(farbe);
        }
      }
    },

    async refresh() {
      return new Promise((resolve) => {
        this.faerbe_prototypen();
        this.loesche_zeichenflaeche();
        this.zeichne_hintergrund();
        this.zeichne_datenpunkte(false, true);
        this.zeichne_prototypen(false);

        setTimeout(() => {
          resolve(); // Resolve the promise when the animation is done
        }, this.animation_speed); // 1-second delay
      });
    },

    loesche_zeichenflaeche() {
      this.vueCanvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    zeichne_kreis(x, y, radius, fuellFarbe, randFarbe) {
      let randDicke;

      //randFarbe = 'black'
      randDicke = Math.ceil(radius / 3);

      this.vueCanvas.strokeStyle = randFarbe;
      this.vueCanvas.beginPath();
      this.vueCanvas.lineWidth = randDicke;
      this.vueCanvas.arc(x, y, radius, 0, 2 * Math.PI);
      this.vueCanvas.fillStyle = fuellFarbe;
      this.vueCanvas.fill();
      this.vueCanvas.stroke();
    },
    zeichne_x(x, y, color) {
      let staerke = 4;
      let groesse = 6;

      //ctxBaum.fillStyle = color
      this.vueCanvas.beginPath();

      this.vueCanvas.moveTo(x + groesse, y + groesse);
      this.vueCanvas.lineWidth = staerke;
      // set line color
      this.vueCanvas.strokeStyle = color;
      this.vueCanvas.lineTo(x - groesse, y - groesse);

      this.vueCanvas.moveTo(x - groesse, y + groesse);
      this.vueCanvas.lineWidth = staerke;
      // set line color
      this.vueCanvas.strokeStyle = color;
      this.vueCanvas.lineTo(x + groesse, y - groesse);

      this.vueCanvas.stroke();
    },

    zeichne_linie(x1, y1, x2, y2, farbe, staerke) {
      //ctxBaum.fillStyle = color
      this.vueCanvas.beginPath();

      this.vueCanvas.moveTo(x1, y1);
      this.vueCanvas.lineWidth = staerke;
      // set line color
      this.vueCanvas.strokeStyle = farbe;
      this.vueCanvas.lineTo(x2, y2);

      this.vueCanvas.stroke();
    },

    zeichne_linie_datenpunkt_naechstgelegener_prototyp(datenpunkt) {
      let farbe = "red";
      let staerke = 2;
      let prototyp = this.gib_naechstgelegener_prototyp(datenpunkt);

      if (datenpunkt != null && prototyp != null) {
        this.zeichne_linie(
          datenpunkt.x,
          datenpunkt.y,
          prototyp.x,
          prototyp.y,
          farbe,
          staerke
        );
      }
    },

    zeichne_linie_datenpunkt_prototyp(datenpunkt, prototyp, farbe, staerke) {
      if (datenpunkt != null && prototyp != null) {
        this.zeichne_linie(
          datenpunkt.x,
          datenpunkt.y,
          prototyp.x,
          prototyp.y,
          farbe,
          staerke
        );
      }
    },

    zeige_line_an() {
      this.zeichne_linie_datenpunkt_prototyp(
        this.datenpunkte_skaliert[this.aktueller_datenpunkt],
        this.prototypen_skaliert[this.aktueller_prototyp]
      );
    },

    zeichne_datenpunkte(markierung, zeichne_alle) {
      let radius = 8;
      let i = 0;
      let hightlight_farbe = "lightgreen";

      this.datenpunkte_skaliert.forEach((element) => {
        console.log("x:" + element.x);

        if (markierung && i == this.aktueller_datenpunkt) {
          this.zeichne_kreis(
            element.x,
            element.y,
            radius * 1.5,
            hightlight_farbe,
            hightlight_farbe
          );
        }

        let kreis_farbe = element.color; //"black";
        /*
        if (i < this.aktueller_datenpunkt) {
          kreis_farbe = element.color;
        }
        */

        if (zeichne_alle || i < this.aktueller_datenpunkt) {
          this.zeichne_kreis(
            element.x,
            element.y,
            radius,
            kreis_farbe,
            "white"
          );
        }

        i++;
      });
    },

    zeichne_prototypen(markierung) {
      let i = 0;
      let hightlight_farbe;
      let radius;

      this.prototypen_skaliert.forEach((element) => {
        hightlight_farbe = "white";
        radius = 14;

        if (markierung && i == this.aktueller_prototyp) {
          hightlight_farbe = "lightgreen";
          let radius_markierung = radius + 5;
          this.zeichne_kreis(
            element.x,
            element.y,
            radius_markierung,
            "white",
            hightlight_farbe
          );
        }

        this.zeichne_kreis(
          element.x,
          element.y,
          radius,
          "white",
          element.color
        );

        this.zeichne_x(element.x, element.y, element.color);
        console.log(element.color);

        i++;
      });
    },
    naechster_datenpunkt() {
      if (this.aktueller_datenpunkt < this.datenpunkte.length - 1) {
        this.aktueller_datenpunkt++;
        this.refresh();
        this.zeichne_datenpunkte(true, true);
      }
    },
    voriger_datenpunkt() {
      if (this.aktueller_datenpunkt > 0) {
        this.aktueller_datenpunkt--;
        this.refresh();
        this.zeichne_datenpunkte(true, true);
      }
    },
    naechster_prototyp() {
      this.aktueller_prototyp++;
      this.refresh();
      this.zeichne_prototypen(true);
    },
    voriger_prototyp() {
      this.aktueller_prototyp--;
      this.refresh();
      this.zeichne_prototypen(true);
    },
    gib_distanz(datenpunkt, prototyp) {
      let x1 = datenpunkt.x;
      let y1 = datenpunkt.y;
      let x2 = prototyp.x;
      let y2 = prototyp.y;
      return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
    },
    gib_naechstgelegener_prototyp(datenpunkt) {
      if (datenpunkt == null) {
        return null;
      }
      let naechstgelegener_prototyp = null;
      let min_distanz = null;
      // pruefe alle prototypen und merke die naechste
      for (let i = 0; i < this.prototypen_skaliert.length; i++) {
        let akt_prototyp = this.prototypen_skaliert[i];
        let akt_distanz = this.gib_distanz(datenpunkt, akt_prototyp);
        if (naechstgelegener_prototyp == null || akt_distanz < min_distanz) {
          naechstgelegener_prototyp = akt_prototyp;
          min_distanz = akt_distanz;
        }
      }
      return naechstgelegener_prototyp;
    },

    berechne_neue_pos_haelfte(x1, y1, x2, y2) {
      let neue_pos = {
        x: (x1 + x2) / 2,
        y: (y1 + y2) / 2,
      };
      return neue_pos;
    },

    //////////////////////////////////////////
    pausiere_animation() {
      this.paused = true;
    },
    kurz_zeichne_linie_datenpunkt_prototyp() {
      // pruefe_aktuelle
      this.zeichne_linie_datenpunkt_prototyp(
        this.akt_datenpunkt_skaliert,
        this.akt_prototyp_skaliert,
        "lightgreen",
        4
      );
    },

    existiert_kuerzere_Distanz() {
      // bisher naechstgelegener Prototyp
      let akt_distanz = this.gib_distanz(
        this.akt_datenpunkt_skaliert,
        this.akt_prototyp_skaliert
      );

      // naechsten aktualisieren
      if (
        this.naechstgelegener_prototyp == null ||
        akt_distanz < this.naechstgelegener_prototyp_distanz
      ) {
        this.naechstgelegener_prototyp = this.akt_prototyp_skaliert;
        this.naechstgelegener_prototyp_distanz = akt_distanz;
        return true;
      } else {
        return false;
      }
    },

    verarbeite_kuerzere_distanz() {
      if (this.existiert_kuerzere_Distanz()) {
        this.zeichne_kuerzeste_Distanz();
      }
    },

    kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp() {
      this.zeichne_linie_datenpunkt_prototyp(
        this.akt_datenpunkt_skaliert,
        this.naechstgelegener_prototyp,
        "red",
        3
      );
    },
    async starte_animation_alle() {
      this.loesche_zeichenflaeche();
      this.aktueller_datenpunkt = 0;

      for (let i = 0; i < this.datenpunkte.length; i++) {
        this.aktueller_datenpunkt = i;
        await this.starte_animation();
      }

      this.faerbe_datenpunkte(true);

      this.loesche_zeichenflaeche();
      this.zeichne_hintergrund();
      this.zeichne_datenpunkte(false, true);
      this.zeichne_prototypen(false);

      //this.zeige_naechsten_bekannten_prototyp();
    },

    async starte_animation() {
      this.aktueller_prototyp = 0;
      this.naechstgelegener_prototyp = null;
      this.naechstgelegener_prototyp_distanz = null;
      this.paused = false;

      await this.mainAnimationLoop();
    },

    async mainAnimationLoop() {
      // Call the first animation and wait for it to finish

      let alle_prototypen_verarbeitet = false;
      while (!alle_prototypen_verarbeitet) {
        this.zeichne_hintergrund();
        this.faerbe_datenpunkte(false);

        if (this.aktueller_prototyp == 0) {
          this.zeichne_datenpunkte(false, true);
          await this.zeichne_prototypen(false);
        }

        await this.zeige_prototyp();
        await this.zeige_naechsten_bekannten_prototyp();

        if (this.existiert_kuerzere_Distanz()) {
          this.loesche_zeichenflaeche();
          this.zeichne_hintergrund();
          this.zeichne_datenpunkte(false, true);
          this.zeichne_prototypen(false);
          await this.zeige_naechsten_bekannten_prototyp();
        }

        if (this.aktueller_prototyp < this.prototypen.length) {
          if (this.aktueller_prototyp == this.prototypen.length - 1) {
            alle_prototypen_verarbeitet = true;
          } else {
            this.aktueller_prototyp++;
          }
        }
      }

      // Schlussbild
      this.loesche_zeichenflaeche();
      this.faerbe_datenpunkte(false);
      this.zeichne_datenpunkte(false, true);
      this.zeichne_prototypen(false);

      this.zeige_naechsten_bekannten_prototyp();

      // prototyp verschieben
      await this.aktualisiere_pos_prototyp();
    },

    async pausiere(zeitspanne) {
      return new Promise((resolve) => {
        // nichts tun

        // Simulate some delay (you can replace this with actual animation code)
        setTimeout(() => {
          resolve(); // Resolve the promise when the animation is done
        }, zeitspanne); // delay for zeitspanne
      });
    },

    zeige_prototyp() {
      return new Promise((resolve) => {
        // Your animation code here
        //this.loesche_zeichenflaeche();

        this.kurz_zeichne_linie_datenpunkt_prototyp();
        this.zeige_naechsten_bekannten_prototyp();
        this.zeichne_datenpunkte(true, true);
        this.zeichne_prototypen(true);

        // Simulate some delay (you can replace this with actual animation code)
        setTimeout(() => {
          resolve(); // Resolve the promise when the animation is done
        }, this.animation_speed); // 1-second delay
      });
    },

    zeige_naechsten_bekannten_prototyp() {
      return new Promise((resolve) => {
        // Your animation code here
        if (
          this.naechstgelegener_prototyp != null &&
          this.akt_datenpunkt_skaliert != null
        ) {
          this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp();
          this.zeichne_datenpunkte(true, true);
          this.zeichne_prototypen(true);
        }

        // Simulate some delay (you can replace this with actual animation code)
        setTimeout(() => {
          resolve(); // Resolve the promise when the animation is done
        }, this.animation_speed); // 1-second delay
      });
    },

    aktualisiere_pos_prototyp() {
      return new Promise((resolve) => {
        this.faerbe_datenpunkte(false);
        this.animieren();

        setTimeout(() => {
          resolve(); // Resolve the promise when the animation is done    
        }, this.animation_speed * 2);
      });
    },
    async animieren() {
      this.letzte_prototyp = this.naechstgelegener_prototyp;
      let schritte = 50;
      if (this.animation_speed < 10) {
        schritte = 1;
      }
      let i = 0;

      let x_neu =
        (this.akt_datenpunkt_skaliert.x + this.naechstgelegener_prototyp.x) / 2;
      let y_neu =
        (this.akt_datenpunkt_skaliert.y + this.naechstgelegener_prototyp.y) / 2;

      let delta_x =
        (this.akt_datenpunkt_skaliert.x - this.naechstgelegener_prototyp.x) /
        2 /
        schritte;
      let delta_y =
        (this.akt_datenpunkt_skaliert.y - this.naechstgelegener_prototyp.y) /
        2 /
        schritte;

      // zeichnen definieren
      var draw = () => {
        try {
          this.naechstgelegener_prototyp.x += delta_x;
          this.naechstgelegener_prototyp.y += delta_y;

          this.loesche_zeichenflaeche();
          this.zeichne_hintergrund();

          this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp();

          this.zeichne_datenpunkte(true, true);
          this.zeichne_prototypen(true);

          i++;

          if (i < schritte) {
            //timestamp = Date.now();
            requestAnimationFrame(draw);
          } else {
            this.naechstgelegener_prototyp.x = x_neu;
            this.naechstgelegener_prototyp.y = y_neu;
            
            this.refresh();
          }
        } catch (error) {
          //console.error("Caught custom exception:", error.message);
          this.letzte_prototyp.x = x_neu;
          this.letzte_prototyp.y = y_neu;
          
          this.refresh();
        }
      };
      // Zeichnen aufrufen
      draw();
    },

    szenario_zuruecksetzen() {
      this.update_anzahl_datenpunkte(this.anzahl_datenpunkte);
      this.update_anzahl_prototypen(this.anzahl_prototypen);

      this.aktueller_datenpunkt = 0;

      for (let i = 0; i < this.datenpunkte.length; i++) {
        let next_prototyp = this.gib_naechstgelegener_prototyp(
          this.datenpunkte_skaliert[i]
        );
        this.datenpunkte[i].color = "#000000";
      }

      this.loesche_zeichenflaeche();
      this.refresh();
      this.zeichne_hintergrund();
      this.zeichne_prototypen(false);
      this.zeichne_datenpunkte(false, true);
      console.log("Page completed with image and files!");
    },

    // ------------------------------------------------------------------------------


    gibCanvasPosX(wert) {
      return wert * this.vueCanvas.canvas.width;
    },

    gibCanvasPosY(wert) {
      return (1 - wert) * this.vueCanvas.canvas.height;
    },

    gibCanvasBreite() {
      return this.vueCanvas.canvas.width;
    },

    gibCanvasHoehe() {
      return this.window.innerHeight - this.randabstandRechts;
    },



    loescheCanvas() {
      this.vueCanvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },

    zeichneText(x, y, text, color) {
      this.vueCanvas.fillStyle = color;
      this.vueCanvas.font = "20px Arial";
      this.vueCanvas.textAlign = "left";
      if (x - 5 > this.gibCanvasBreite() / 2) {
        this.vueCanvas.textAlign = "right";
        x -= 5;
      }
      this.vueCanvas.fillText(text, x, y);
    },

    zeichneTextMittig(x, y, text, color) {
      this.vueCanvas.fillStyle = color;
      this.vueCanvas.font = "20px Arial";
      this.vueCanvas.textAlign = "left";
      if (x > this.gibCanvasBreite() / 4 * 3) {
        this.vueCanvas.textAlign = "right";
        x -= 5;
      }
      if (x < this.gibCanvasBreite() / 4) {
        this.vueCanvas.textAlign = "left";
        x -= 5;
      }
      this.vueCanvas.fillText(text, x, y);
    },


    zeichneTextLegendeXachse(x, y, text, color) {
      this.vueCanvas.fillStyle = color;
      this.vueCanvas.font = "12px Arial";
      this.vueCanvas.textAlign = "center";
      this.vueCanvas.fillText(text, x, y);
    },

    zeichnePfeilLegendeXachse(x, y, text, color) {
      this.vueCanvas.fillStyle = color;
      this.vueCanvas.font = "bold 14px Arial";
      this.vueCanvas.textAlign = "right";
      this.vueCanvas.fillText(text, x, y);
    },


    zeichnePfeilLegendeYachse(x, y, text, color) {
      this.vueCanvas.fillStyle = color;
      this.vueCanvas.font = "bold 14px Arial";
      this.vueCanvas.textAlign = "right";
      this.vueCanvas.rotate(-Math.PI / 2);
      this.vueCanvas.fillText(text, x, y);
      this.vueCanvas.rotate(Math.PI / 2);
    },

    zeichneTextLegendeYachse(x, y, text, color) {
      this.vueCanvas.fillStyle = color;
      this.vueCanvas.font = "12px Arial";
      this.vueCanvas.textAlign = "center";
      this.vueCanvas.rotate(-Math.PI / 2);
      this.vueCanvas.fillText(text, x, y);
      this.vueCanvas.rotate(Math.PI / 2);
    },

    zeichneLinie(xStart, yStart, xEnd, yEnd, color) {
      this.vueCanvas.fillStyle = color;
      this.vueCanvas.beginPath();
      this.vueCanvas.moveTo(xStart, yStart);
      this.vueCanvas.lineWidth = 3;
      // set line color
      this.vueCanvas.strokeStyle = color;
      this.vueCanvas.fillStyle = this.vueCanvas.lineTo(xEnd, yEnd);
      this.vueCanvas.stroke();
    },

    zeichneRechteck(x, y, width, height, color, opacity) {
      this.vueCanvas.fillStyle = color;
      this.vueCanvas.globalAlpha = opacity;
      this.vueCanvas.fillRect(x, y, width, height);
      this.vueCanvas.globalAlpha = 1.0;
    },

    zeichneLegende() {

      //let ds = this.model.baum.gibAktuellenDatensplit().datensatz;

      let beschriftungXachse = this.beschriftungXachse; // "X-Wert"; //gibPraediktorvariablen()[0];
      let beschriftungYachse = this.beschriftungYachse; // "Y-Wert"; //gibPraediktorvariablen()[1];
      this.vueCanvas.font = "14px Arial";

      let beschriftungXBreite = this.vueCanvas.measureText(beschriftungXachse).width + 6;
      let beschriftungYBreite = this.vueCanvas.measureText(beschriftungYachse).width + 6;



      console.log("zeichne Legende");
      // X-Achse
      this.zeichneRechteck(0, this.vueCanvas.canvas.height - 16, this.vueCanvas.canvas.width, this.vueCanvas.canvas.height * 2, "white", 1);
      this.zeichneRechteck(12, this.vueCanvas.canvas.height - 14, this.vueCanvas.canvas.width - 20, 2, "black", 1);
      this.zeichnePfeilLegendeXachse(this.vueCanvas.canvas.width - 1, this.vueCanvas.canvas.height - 8, ">", "black");
      //this.zeichneRechteck(this.vueCanvas.canvas.width / 2 - (beschriftungXBreite / 2), this.vueCanvas.canvas.height - 12, beschriftungXBreite, 12, "white", 1);
      this.zeichneTextLegendeXachse(this.vueCanvas.canvas.width / 2, this.vueCanvas.canvas.height - 1, beschriftungXachse, "black");

      this.zeichneTextLegendeXachse(14, this.vueCanvas.canvas.height - 1, "0", "grey");
      this.zeichneTextLegendeXachse(this.vueCanvas.canvas.width - 20, this.vueCanvas.canvas.height - 1, this.max_x_wert, "grey");

      // Y-Achse

      this.zeichneRechteck(0, 0, 16, this.vueCanvas.canvas.height - 14, "white", 1);
      this.zeichneRechteck(12, 8, 2, this.vueCanvas.canvas.height - 20, "black", 1);
      this.zeichnePfeilLegendeYachse(-1, 18, ">", "black");
      //this.zeichneRechteck(0, this.vueCanvas.canvas.height / 2 - (beschriftungYBreite / 2), 11, beschriftungYBreite, "white", 1);
      this.zeichneTextLegendeYachse(-(this.vueCanvas.canvas.height / 2), 11, beschriftungYachse, "black");

      this.zeichneTextLegendeYachse(-20, 10, this.max_y_wert, "grey");
      this.zeichneTextLegendeYachse(-(this.vueCanvas.canvas.height - 12), 10, "0", "gray");

    },














    // ------------------------------------------------------------------------------
  },

  mounted() {
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");
    this.canvas = c;
    this.vueCanvas = ctx;
    this.aktueller_prototyp = 0;

    this.lade();
    this.update_anzahl_datenpunkte(this.anzahl_datenpunkte);
    this.update_anzahl_prototypen(this.anzahl_prototypen);

    document.onreadystatechange = () => {
      if (document.readyState == "complete") {
        this.szenario_aendern();
        this.refresh();
        this.zeichne_hintergrund();
        this.zeichne_prototypen(false);
        this.zeichne_datenpunkte(false, true);
        console.log("Page completed with image and files!");
        // fetch to next page or some code

        var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i++) {
          coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;

            if (content.style.maxHeight) {
              content.style.maxHeight = null;
            } else {
              content.style.maxHeight = content.scrollHeight + "px";
              let content0 = document.getElementById("content0");
              let content1 = document.getElementById("content1");
              if (content == content1) {
                console.log("gefunden");
                content0.style.maxHeight =
                  content0.scrollHeight + content.scrollHeight + "px";
              }
            }
          });
        }
      }
    };
  },
};

//------------------------------------------------------------
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;
  /*border: solid black 1px;
  /*height: 300px; /* Should be removed. Only for demonstration */
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: "\002B";
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
</style>