From 8f134f89a0a90835c45caad7aa1a5c48445e7a01 Mon Sep 17 00:00:00 2001
From: Brendan Lawton <brendan.lawton@rbb-online.de>
Date: Wed, 19 Jun 2024 20:26:31 +0200
Subject: [PATCH] =?UTF-8?q?Lottie=20kann=20jetzt=20pausiert=20werden=20nac?=
=?UTF-8?q?h=20man=20die=20Bauchbinde-Richtung=20wechselt.=20Es=20gibt=20a?=
=?UTF-8?q?ber=20noch=20ein=20Fix=20f=C3=BCr=20die=20Eingabefelder=20zu=20?=
=?UTF-8?q?tun.=20Nach=20man=20was=20da=20reintypt,=20muss=20man=20zuerst?=
=?UTF-8?q?=20Lottie=20starten=20drucken=20bevor=20man=20wieder=20pausiere?=
=?UTF-8?q?n=20kann.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.vue | 9 +++
src/components/Form.vue | 19 +++++-
src/components/Lottie.vue | 124 ++++++++++++++++++++------------------
3 files changed, 92 insertions(+), 60 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index c9843c8..8ec06a4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,6 +11,7 @@ const funktionZeileZwei = ref("");
const BBEcke = ref("");
let playLottieStatus = ref(false);
let pauseLottieStatus = ref(false);
+let falseLoopStatus = ref(false);
function playLottie(data: boolean) {
playLottieStatus.value = data;
@@ -19,6 +20,12 @@ function playLottie(data: boolean) {
function pauseLottie(data: boolean) {
pauseLottieStatus.value = data;
}
+
+function falseStatusLottieLoop(data: boolean) {
+ falseLoopStatus.value = data;
+ console.log("stuck status = " + falseLoopStatus.value)
+}
+
</script>
<template>
@@ -35,6 +42,7 @@ function pauseLottie(data: boolean) {
v-model:BBEcke="BBEcke"
v-on:playLottie="playLottie"
v-on:pauseLottie="pauseLottie"
+ :falseLoopStatus="falseLoopStatus"
></Form>
<Lottie
@@ -45,6 +53,7 @@ function pauseLottie(data: boolean) {
:BBEcke="BBEcke"
:playLottieStatus="playLottieStatus"
:pauseLottieStatus="pauseLottieStatus"
+ v-on:falseStatusLottieLoop="falseStatusLottieLoop"
></Lottie>
</div>
</template>
diff --git a/src/components/Form.vue b/src/components/Form.vue
index c90f3cf..87d1494 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -5,6 +5,8 @@ const nachname = defineModel("nachname");
const funktionZeileEins = defineModel("funktionZeileEins");
const funktionZeileZwei = defineModel("funktionZeileZwei");
const BBEcke = defineModel("BBEcke");
+import { onMounted, ref, watch } from "vue";
+// import { watch } from "fs";
import jsonDraft from "../assets/job.json";
function startAnimation() {
@@ -17,6 +19,21 @@ function pauseAnimation() {
emit("playLottie", false);
}
+const props = defineProps({
+ falseLoopStatus: {
+ type: Boolean,
+ required: true,
+ },
+})
+watch(
+ () => props.falseLoopStatus,
+ () => {
+ if (props.falseLoopStatus == true) {
+ console.log("we gotta false loop!")
+ startAnimation();
+ }
+});
+
function writeJson() {
// BL: nützlich, um den Datenpfad vom src im template oder output in Actions zu ändern, wenn wir das machen wollen
// wir können ein Benutzer fragen, ob sie ihr Neutzername eingeben können und das output einfach zu seiner Downloads Ordner schicken.
@@ -62,7 +79,7 @@ function download(content: string, fileName: string, contentType: string) {
<label>Postion der Bauchbinde </label>
<div class="row">
<select id="bauchbindeEcke" v-model="BBEcke">
- <option value="rechts" selected>rechts</option>
+ <option value="rechts">rechts</option>
<option value="links">links</option>
</select>
</div>
diff --git a/src/components/Lottie.vue b/src/components/Lottie.vue
index 483d955..34c5f8f 100644
--- a/src/components/Lottie.vue
+++ b/src/components/Lottie.vue
@@ -4,11 +4,14 @@ import { LottieAnimation } from "lottie-web-vue";
import AnimationDataJSON from "../assets/Lottiefile_Bauchbinde_Beispiel.json";
import AnimationRechtsBB from "../assets/bbrechts_v2.json";
import AnimationLinksBB from "../assets/bblinks_v2.json";
+// import { emit } from "process";
+
+const emit = defineEmits(["falseStatusLottieLoop"]);
let anim = ref();
-let animationRechts = false;
-let animationLinks = false;
let BBUnselected = true;
+let animationData = AnimationDataJSON;
+let showAnimation = false;
const props = defineProps({
vorname: {
@@ -41,19 +44,38 @@ const props = defineProps({
},
});
+function breakLottieFalseLoop() {
+ emit("falseStatusLottieLoop", true)
+}
+
+
watch(
() => props.BBEcke,
() => {
console.log(props.BBEcke);
if (props.BBEcke === "links") {
- animationLinks = true;
- animationRechts = false;
+ animationData = AnimationLinksBB
BBUnselected = false;
+ showAnimation = true;
+ setMaxMustermann();
+ console.log("play status = " + props.playLottieStatus)
+ console.log("pause status = " + props.pauseLottieStatus)
+ if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+ console.log("breaking out!")
+ breakLottieFalseLoop();
+ }
}
if (props.BBEcke === "rechts") {
- animationRechts = true;
- animationLinks = false;
+ animationData = AnimationRechtsBB
BBUnselected = false;
+ showAnimation = true;
+ setMaxMustermann();
+ console.log("play status = " + props.playLottieStatus)
+ console.log("pause status = " + props.pauseLottieStatus)
+ if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+ console.log("breaking out!")
+ breakLottieFalseLoop();
+ }
}
}
);
@@ -72,6 +94,7 @@ watch(
watch(
() => props.pauseLottieStatus,
() => {
+
if (props.pauseLottieStatus) {
anim.value.pause();
} else {
@@ -87,65 +110,72 @@ const lottie = ref(0);
watch(
() => props.vorname,
() => {
- AnimationRechtsBB.layers.filter((layer) => {
- return layer.nm === "VORNAME";
- })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
- AnimationLinksBB.layers.filter((layer) => {
+ animationData.layers.filter((layer) => {
return layer.nm === "VORNAME";
})[0].t.d.k[0].s.t = props.vorname.toUpperCase();
lottie.value++;
+ if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+ console.log("breaking out!")
+ breakLottieFalseLoop();
+ }
}
);
watch(
() => props.nachname,
() => {
- AnimationRechtsBB.layers.filter((layer) => {
- return layer.nm === "NACHNAME";
- })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
- AnimationLinksBB.layers.filter((layer) => {
+ animationData.layers.filter((layer) => {
return layer.nm === "NACHNAME";
})[0].t.d.k[0].s.t = props.nachname.toUpperCase();
lottie.value++;
+ if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+ console.log("breaking out!")
+ breakLottieFalseLoop();
+ }
}
);
watch(
() => props.funktionZeileEins,
() => {
- AnimationRechtsBB.layers.filter((layer) => {
- return layer.nm === "FUNKTION1";
- })[0].t.d.k[0].s.t = props.funktionZeileEins;
- AnimationLinksBB.layers.filter((layer) => {
+ animationData.layers.filter((layer) => {
return layer.nm === "FUNKTION1";
})[0].t.d.k[0].s.t = props.funktionZeileEins;
lottie.value++;
+ if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+ console.log("breaking out!")
+ breakLottieFalseLoop();
+ }
}
);
watch(
() => props.funktionZeileZwei,
() => {
- AnimationRechtsBB.layers.filter((layer) => {
- return layer.nm === "FUNKTION2";
- })[0].t.d.k[0].s.t = props.funktionZeileZwei;
- AnimationLinksBB.layers.filter((layer) => {
+ animationData.layers.filter((layer) => {
return layer.nm === "FUNKTION2";
})[0].t.d.k[0].s.t = props.funktionZeileZwei;
lottie.value++;
+ if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+ console.log("breaking out!")
+ breakLottieFalseLoop();
+ }
}
);
+function setMaxMustermann() {
+ animationData.layers[1].t.d.k[0].s.t = "MAX";
+ animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
+ animationData.layers[5].t.d.k[0].s.t = "Testperson";
+ animationData.layers[7].t.d.k[0].s.t = "";
+}
+
onMounted(() => {
// Added this temporarily to improve initial animation output
- AnimationRechtsBB.layers[1].t.d.k[0].s.t = "MAX";
- AnimationLinksBB.layers[1].t.d.k[0].s.t = "MAX";
- AnimationRechtsBB.layers[3].t.d.k[0].s.t = "MUSTERMANN";
- AnimationLinksBB.layers[3].t.d.k[0].s.t = "MUSTERMANN";
- AnimationRechtsBB.layers[5].t.d.k[0].s.t = "Testperson";
- AnimationLinksBB.layers[5].t.d.k[0].s.t = "Testperson";
- AnimationRechtsBB.layers[7].t.d.k[0].s.t = "";
- AnimationLinksBB.layers[7].t.d.k[0].s.t = "";
+ // animationData.layers[1].t.d.k[0].s.t = "MAX";
+ // animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
+ // animationData.layers[5].t.d.k[0].s.t = "Testperson";
+ // animationData.layers[7].t.d.k[0].s.t = "";
setTimeout(() => {
// console.log(anim.value.goToAndPlay(150, true));
@@ -158,35 +188,10 @@ onMounted(() => {
Bitte eine Position für<br />
die Bauchbinde auswählen
</h2>
- <div class="animation">
- <LottieAnimation
- :key="lottie"
- ref="anim"
- :animation-data="AnimationRechtsBB"
- :loop="true"
- :auto-play="true"
- :speed="1"
- @loopComplete="loopComplete"
- @complete="complete"
- @enterFrame="enterFrame"
- @segmentStart="segmentStart"
- @stopped="stopped"
- v-if="animationRechts"
- />
- <LottieAnimation
- :key="lottie"
- ref="anim"
- :animation-data="AnimationLinksBB"
- :loop="true"
- :auto-play="true"
- :speed="1"
- @loopComplete="loopComplete"
- @complete="complete"
- @enterFrame="enterFrame"
- @segmentStart="segmentStart"
- @stopped="stopped"
- v-if="animationLinks"
- />
+ <div class="animation" v-if="showAnimation">
+ <LottieAnimation :key="lottie" ref="anim" :animation-data="animationData" :loop="true" :auto-play="true" :speed="1"
+ @loopComplete="loopComplete" @complete="complete" @enterFrame="enterFrame" @segmentStart="segmentStart"
+ @stopped="stopped" />
</div>
</template>
@@ -194,6 +199,7 @@ onMounted(() => {
.animation {
background-color: #000;
}
+
.hinweis {
text-align: center;
margin: auto;
--
GitLab