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"
|
||||
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
|
||||
|
|
@ -151,10 +156,9 @@
|
|||
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>
|
||||
x; y<br />
|
||||
<textarea
|
||||
v-model="txt_datensatz"
|
||||
placeholder="add multiple lines"
|
||||
|
|
@ -192,6 +196,9 @@
|
|||
<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>
|
||||
|
|
@ -245,6 +252,126 @@ export default {
|
|||
{ 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: [
|
||||
{ x: 300, y: 300, color: "black" },
|
||||
{ x: 202, y: 70, color: "black" },
|
||||
|
|
@ -291,6 +418,8 @@ export default {
|
|||
return "Goldstücke";
|
||||
case "stadtplan":
|
||||
return "Haushalte";
|
||||
case "Lebensmittel":
|
||||
return "Lebensmittel";
|
||||
}
|
||||
return "Datenpunkte";
|
||||
},
|
||||
|
|
@ -443,10 +572,55 @@ export default {
|
|||
},
|
||||
|
||||
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.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) {
|
||||
if (new_value >= 0) {
|
||||
console.log("angekommen." + new_value);
|
||||
|
|
@ -1125,7 +1299,7 @@ export default {
|
|||
.column {
|
||||
flex: 50%;
|
||||
padding: 10px;
|
||||
/*border: solid black 1px;
|
||||
/*border: solid black 1px;
|
||||
/*height: 300px; /* Should be removed. Only for demonstration */
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue