Entwurf Integration Lebensmittel
All checks were successful
ci/woodpecker/push/default Pipeline was successful
All checks were successful
ci/woodpecker/push/default Pipeline was successful
This commit is contained in:
co
parent
e208743f13
commit
20c4211d5b
1 changed files with 177 additions and 3 deletions
180
src/App.vue
180
src/App.vue
|
|
@ -14,6 +14,11 @@
|
||||||
src="./assets/img/desert_landscape.png"
|
src="./assets/img/desert_landscape.png"
|
||||||
style="width: 0px; height: 0px"
|
style="width: 0px; height: 0px"
|
||||||
/>
|
/>
|
||||||
|
<img
|
||||||
|
id="lebensmittel"
|
||||||
|
src="./assets/img/weiss_pixel.png"
|
||||||
|
style="width: 0px; height: 0px"
|
||||||
|
/>
|
||||||
|
|
||||||
<h2>
|
<h2>
|
||||||
Finde heraus, wie die Positionen der {{ this.bezeichnung_prototypen }} an
|
Finde heraus, wie die Positionen der {{ this.bezeichnung_prototypen }} an
|
||||||
|
|
@ -151,10 +156,9 @@
|
||||||
In jeder Zeile werden die zugehörigen Werte dargestellt für einen...
|
In jeder Zeile werden die zugehörigen Werte dargestellt für einen...
|
||||||
<br />
|
<br />
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="column" style="text-align: center">
|
<div class="column" style="text-align: center">
|
||||||
<b>Datenpunkt</b><br />
|
<b>Datenpunkt</b><br />
|
||||||
x; y<br>
|
x; y<br />
|
||||||
<textarea
|
<textarea
|
||||||
v-model="txt_datensatz"
|
v-model="txt_datensatz"
|
||||||
placeholder="add multiple lines"
|
placeholder="add multiple lines"
|
||||||
|
|
@ -192,6 +196,9 @@
|
||||||
<option value="stadtplan">
|
<option value="stadtplan">
|
||||||
Stadtplan (Haushalte und U-Bahn-Stationen)
|
Stadtplan (Haushalte und U-Bahn-Stationen)
|
||||||
</option>
|
</option>
|
||||||
|
<option value="lebensmittel">
|
||||||
|
Lebensmittel (diverse Lebensmittel und Lebensmittelgruppen)
|
||||||
|
</option>
|
||||||
<option value="kein_bild">reine Datenansicht</option>
|
<option value="kein_bild">reine Datenansicht</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -245,6 +252,126 @@ export default {
|
||||||
{ x: 300, y: 300, color: "black" },
|
{ x: 300, y: 300, color: "black" },
|
||||||
],
|
],
|
||||||
|
|
||||||
|
lebensmittel_datenpunkte: [
|
||||||
|
{ x: 0, y: 10, color: "black" },
|
||||||
|
{ x: 0, y: 40, color: "black" },
|
||||||
|
{ x: 0, y: 40, color: "black" },
|
||||||
|
{ x: 0, y: 50, color: "black" },
|
||||||
|
{ x: 0, y: 60, color: "black" },
|
||||||
|
{ x: 0, y: 30, color: "black" },
|
||||||
|
{ x: 10, y: 60, color: "black" },
|
||||||
|
{ x: 0, y: 140, color: "black" },
|
||||||
|
{ x: 0, y: 150, color: "black" },
|
||||||
|
{ x: 10, y: 90, color: "black" },
|
||||||
|
{ x: 30, y: 140, color: "black" },
|
||||||
|
{ x: 0, y: 210, color: "black" },
|
||||||
|
{ x: 10, y: 200, color: "black" },
|
||||||
|
{ x: 2, y: 0, color: "black" },
|
||||||
|
{ x: 70, y: 40, color: "black" },
|
||||||
|
{ x: 130, y: 20, color: "black" },
|
||||||
|
{ x: 130, y: 0, color: "black" },
|
||||||
|
{ x: 80, y: 180, color: "black" },
|
||||||
|
{ x: 170, y: 10, color: "black" },
|
||||||
|
{ x: 110, y: 240, color: "black" },
|
||||||
|
{ x: 0, y: 520, color: "black" },
|
||||||
|
{ x: 140, y: 10, color: "black" },
|
||||||
|
{ x: 50, y: 350, color: "black" },
|
||||||
|
{ x: 180, y: 10, color: "black" },
|
||||||
|
{ x: 110, y: 210, color: "black" },
|
||||||
|
{ x: 110, y: 220, color: "black" },
|
||||||
|
{ x: 20, y: 550, color: "black" },
|
||||||
|
{ x: 0, y: 730, color: "black" },
|
||||||
|
{ x: 140, y: 360, color: "black" },
|
||||||
|
{ x: 220, y: 110, color: "black" },
|
||||||
|
{ x: 50, y: 510, color: "black" },
|
||||||
|
{ x: 310, y: 30, color: "black" },
|
||||||
|
{ x: 0, y: 770, color: "black" },
|
||||||
|
{ x: 330, y: 60, color: "black" },
|
||||||
|
{ x: 10, y: 770, color: "black" },
|
||||||
|
{ x: 30, y: 610, color: "black" },
|
||||||
|
{ x: 280, y: 0, color: "black" },
|
||||||
|
{ x: 20, y: 710, color: "black" },
|
||||||
|
{ x: 310, y: 20, color: "black" },
|
||||||
|
{ x: 260, y: 290, color: "black" },
|
||||||
|
{ x: 70, y: 590, color: "black" },
|
||||||
|
{ x: 60, y: 710, color: "black" },
|
||||||
|
{ x: 50, y: 740, color: "black" },
|
||||||
|
{ x: 110, y: 610, color: "black" },
|
||||||
|
{ x: 260, y: 540, color: "black" },
|
||||||
|
{ x: 240, y: 530, color: "black" },
|
||||||
|
{ x: 230, y: 570, color: "black" },
|
||||||
|
{ x: 280, y: 530, color: "black" },
|
||||||
|
{ x: 300, y: 590, color: "black" },
|
||||||
|
{ x: 320, y: 540, color: "black" },
|
||||||
|
{ x: 430, y: 370, color: "black" },
|
||||||
|
{ x: 480, y: 80, color: "black" },
|
||||||
|
{ x: 800, y: 0, color: "black" },
|
||||||
|
{ x: 790, y: 0, color: "black" },
|
||||||
|
{ x: 700, y: 60, color: "black" },
|
||||||
|
{ x: 820, y: 10, color: "black" },
|
||||||
|
],
|
||||||
|
|
||||||
|
/*
|
||||||
|
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" },
|
||||||
|
],
|
||||||
|
*/
|
||||||
|
|
||||||
datenpunkte: [
|
datenpunkte: [
|
||||||
{ x: 300, y: 300, color: "black" },
|
{ x: 300, y: 300, color: "black" },
|
||||||
{ x: 202, y: 70, color: "black" },
|
{ x: 202, y: 70, color: "black" },
|
||||||
|
|
@ -291,6 +418,8 @@ export default {
|
||||||
return "Goldstücke";
|
return "Goldstücke";
|
||||||
case "stadtplan":
|
case "stadtplan":
|
||||||
return "Haushalte";
|
return "Haushalte";
|
||||||
|
case "Lebensmittel":
|
||||||
|
return "Lebensmittel";
|
||||||
}
|
}
|
||||||
return "Datenpunkte";
|
return "Datenpunkte";
|
||||||
},
|
},
|
||||||
|
|
@ -443,10 +572,55 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
szenario_aendern() {
|
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();
|
||||||
|
}
|
||||||
|
|
||||||
this.loesche_zeichenflaeche();
|
this.loesche_zeichenflaeche();
|
||||||
this.refresh();
|
this.refresh();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
ermittle_skalierten_datensatz(ds_eingabe) {
|
||||||
|
let breite = 800;
|
||||||
|
let hoehe = 450;
|
||||||
|
let max_x = 0;
|
||||||
|
let max_y = 0;
|
||||||
|
let ds_ausgabe = [];
|
||||||
|
|
||||||
|
ds_eingabe.forEach((element) => {
|
||||||
|
if (element.x > max_x) {
|
||||||
|
max_x = element.x;
|
||||||
|
}
|
||||||
|
if (element.y > max_y) {
|
||||||
|
max_y = element.y;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
max_x += 50;
|
||||||
|
max_y += 50;
|
||||||
|
|
||||||
|
ds_eingabe.forEach((element) => {
|
||||||
|
let x_skaliert = Math.round((element.x / max_x) * breite);
|
||||||
|
//let y_skaliert = Math.round(hoehe - (element.y / max_y) * hoehe); // y invertieren
|
||||||
|
let y_skaliert = Math.round((element.y / max_y) * hoehe);
|
||||||
|
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) {
|
update_anzahl_datenpunkte(new_value) {
|
||||||
if (new_value >= 0) {
|
if (new_value >= 0) {
|
||||||
console.log("angekommen." + new_value);
|
console.log("angekommen." + new_value);
|
||||||
|
|
@ -1125,7 +1299,7 @@ export default {
|
||||||
.column {
|
.column {
|
||||||
flex: 50%;
|
flex: 50%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
/*border: solid black 1px;
|
/*border: solid black 1px;
|
||||||
/*height: 300px; /* Should be removed. Only for demonstration */
|
/*height: 300px; /* Should be removed. Only for demonstration */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue