Skip to content
Snippets Groups Projects
Commit 673a1a96 authored by Brendan Lawton's avatar Brendan Lawton
Browse files

Ich habe den Code ein bisschen kommentiert und aufgeräumt. Ich habe Autoplay... 

Ich habe den Code ein bisschen kommentiert und aufgeräumt. Ich habe Autoplay angelassen wenn man die Lottie neu rendert nur weil meine Lösung zu Probleme geführt hat wenn mann Text schnell eintippt. Ich habe nämlich eine Timeout Funktion benutzt um die Lottie nach eine Sekunde zu pausieren aber das hat nur gut geklappt wenn man die Lottie nicht schnell neu rendert.
parent 90eb76a6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
README.md
+ 8
− 5
View file @ 673a1a96
# Vue 3 + TypeScript + Vite
# RBB Reportage Bauchbinde
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
This web application lets the user view how their lower third animation would look like with their inputted information and then export the result to be used with Nexrender in order to generate the animation in Adobe After Effects. In order to get started, you will need to have Node JS installed on you computer as well as npm. You can download & install both packages hier: https://nodejs.org/en/download/package-manager.
## Recommended Setup
Once that is all set up, you just have to navigate to the project folder and run the command "npm ci". This will install all of the required packages to run the app and save the to a package-lock.json file in the project folder.
- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
Afterwards, you can run "npm run dev" in order to generate a local host from which you can view the web app in your browser.
For deployment, the command is "npm run build", but please consult the official vue documentation here: https://cli.vuejs.org/guide/deployment.html
When pushing changes to the repository, make sure to never add the node_modules folder!
- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
index.html
+ 2
− 2
View file @ 673a1a96
......@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="shortcut icon" type="image/png" href="/static/rbb-logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
<title>RBB Reportage Bauchbinde</title>
</head>
<body>
<div id="app"></div>
......
src/components/Form.vue
+ 19
− 3
View file @ 673a1a96
......@@ -5,8 +5,7 @@ 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 { watch } from "vue";
import jsonDraft from "../assets/job.json";
function startAnimation() {
......@@ -29,7 +28,6 @@ watch(
() => props.falseLoopStatus,
() => {
if (props.falseLoopStatus == true) {
console.log("we gotta false loop!")
startAnimation()
}
});
......@@ -40,6 +38,10 @@ function writeJson() {
// DS: Das ist eine sehr gute Idee. So machen wir das. Tatsächlich hat in unserem System
// jeder Nutzer potentiell einen eigenen Export-Ordner.
// Kannst du gerne einbauen, die Detail ändere ich dann angepasst auf unser System.
// BL: Es scheint wesentlich komplizierter, einen allgemeinen Pfad für Windows zu kriegen im Vergleich zu Mac oder Linux (~/Documents).
// Dafür bräuchte ich NodeJS, was nicht ein Teil des Projekts ist. Ich glaube es funktionert schon, dass die Datei in dem Downloads-Ordner
// gespeichert wird, also velleicht reicht das?
if (window.navigator.userAgent.indexOf("Windows") != -1) {
console.log("The user is running Windows");
} else if (window.navigator.userAgent.indexOf("Mac OS") != -1) {
......@@ -207,4 +209,18 @@ function download(content: string, fileName: string, contentType: string) {
align-items: center;
}
}
@media screen and (max-width: 480px) {
.playLottie-btn,
.pauseLottie-btn,
.jsonGenerate-btn {
font-size: 12px;
height: 50px;
}
.row {
justify-content: left;
}
}
</style>
src/components/Lottie.vue
+ 15
− 20
View file @ 673a1a96
<script setup>
<script setup lang="ts">
import { onMounted, ref, watch, nextTick } from "vue";
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"]);
......@@ -45,6 +44,9 @@ const props = defineProps({
},
});
// Wenn Lottie neu geladen ist und der/die Benutzer:in zuletzt Pause gedrückt hat,
// sind beide Pause und Play wahr, da die Lottie auf Autoplaye eingstellt ist.
// Um aus diesem "Loop" auszubrechen müssen wir den Fall erkennen und ihn an die Parent-Komponente weitergeben
function breakLottieFalseLoop() {
emit("falseStatusLottieLoop", true)
}
......@@ -126,6 +128,9 @@ watch(
return layer.nm === "NACHNAME";
})[0].t.d.k[0].s.t = props.nachname.toUpperCase();
// Ich wollte weniger Code haben aber hier ist es wichtig, dass die andere Lottie-Datei
// dieselben Infos von dem Eingaben bekommt, so das eine Transition zwischen links und Rechts
// dieselben Daten sowohl in der Animation als auch in der Eingabenfelder enthalten sind
if (props.BBEcke == "links"){
AnimationRechtsBB.layers.filter((layer) => {
return layer.nm === "NACHNAME";
......@@ -195,24 +200,14 @@ watch(
);
function setMaxMustermann() {
animationData = AnimationRechtsBB;
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 = "";
animationData = AnimationLinksBB;
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 = "";
}
function updateValues () {
// animationData.layers[1].t.d.k[0].s.t = props.vorname;
// animationData.layers[3].t.d.k[0].s.t = props.nachname;
// animationData.layers[5].t.d.k[0].s.t = props.funktionZeileEins;
// animationData.layers[7].t.d.k[0].s.t = props.funktionZeileZwei;
AnimationRechtsBB.layers[1].t.d.k[0].s.t = "MAX";
AnimationRechtsBB.layers[3].t.d.k[0].s.t = "MUSTERMANN";
AnimationRechtsBB.layers[5].t.d.k[0].s.t = "Testperson";
AnimationRechtsBB.layers[7].t.d.k[0].s.t = "";
AnimationLinksBB.layers[1].t.d.k[0].s.t = "MAX";
AnimationLinksBB.layers[3].t.d.k[0].s.t = "MUSTERMANN";
AnimationLinksBB.layers[5].t.d.k[0].s.t = "Testperson";
AnimationLinksBB.layers[7].t.d.k[0].s.t = "";
}
onMounted(() => {
......
static/rbb-logo.png 0 → 100644
+ 0
− 0
View file @ 673a1a96
static/rbb-logo.png

43.9 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment