Merge pull request #23 from rpitv/automated-lower-third

Automated lower third

apps/glimpse-graphics/package.json

@@ -108,6 +108,13 @@
         "file": "image-editor.html",
         "workspace": "Images",
         "width": "8"
+      },
+      {
+        "name": "lower-third",
+        "title": "Lower Third",
+        "file": "lower-third.html",
+        "workspace": "Images",
+        "width": "8"
       }
     ],
     "graphics": [

apps/glimpse-graphics/src/browser-common/replicants.ts

@@ -108,6 +108,17 @@ export async function loadReplicants() {
 			global: await replicant<Announcement[]>("global", `glimpse-graphics.game-settings.announcements`, {defaultValue: []}),
 			team1: await replicant<Announcement[]>("team1", `glimpse-graphics.game-settings.announcements`, {defaultValue: []}),
 			team2: await replicant<Announcement[]>("team2", `glimpse-graphics.game-settings.announcements`, {defaultValue: []}),
+		},
+		lowerThird: {
+			school1Logo: await replicant<string>("school1Logo", `glimpse-graphics.images.lowerThird`, {defaultValue: ""}),
+			school2Logo: await replicant<string>("school2Logo", `glimpse-graphics.images.lowerThird`, {defaultValue: ""}),
+			scoreboard: await replicant<boolean>("scoreboard", `glimpse-graphics.images.lowerThird`, {defaultValue: false}),
+			locator: await replicant<boolean>("locator", `glimpse-graphics.images.lowerThird`, {defaultValue: false}),
+			commentators: {
+				show: await replicant<boolean>("commentators", `glimpse-graphics.images.lowerThird`, {defaultValue: false}),
+				leftPerson: await replicant<string>("leftPerson", `glimpse-graphics.images.lowerThird`, {defaultValue: "Dan Bahl"}),
+				rightPerson: await replicant<string>("rightPerson", `glimpse-graphics.images.lowerThird`, {defaultValue: "Dan Fridgen"})
+			},
 		}
 	}
 }

apps/glimpse-graphics/src/dashboard/lower-third.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import App from './lower-third/main.vue';
+import {pinia} from "./pinia";
+
+const app = createApp(App);
+app.use(pinia);
+app.mount('#app');

apps/glimpse-graphics/src/dashboard/lower-third/LowerThird.vue

@@ -0,0 +1,42 @@
+<template>
+	<div>
+		<n-input :on-update-value="(string) => replicants.lowerThird.school1Logo.value = string"
+				 :default-value="replicants.lowerThird.school1Logo.value"
+				 :style="{'max-width': '40%', 'margin-right': '20px'}" placeholder="URL for team 1's logo"/>
+		<n-input :on-update-value="(string) => replicants.lowerThird.school2Logo.value = string"
+				 :default-value="replicants.lowerThird.school2Logo.value"
+				 :style="{'max-width': '40%', 'margin-right': '20px'}" placeholder="URL for team 2's logo"/>
+		<h2>Display Scoreboard</h2>
+		<n-button @click="replicants.lowerThird.scoreboard.value = !replicants.lowerThird.scoreboard.value">
+			{{ replicants.lowerThird.scoreboard.value ? "Hide" : "Show" }}
+		</n-button>
+		<h2>Display Commentators/Interviewer and Interviewee</h2>
+		<n-input :on-update:value="(string) => replicants.lowerThird.commentators.leftPerson.value = string"
+				 :default-value="replicants.lowerThird.commentators.leftPerson.value"
+				 :style="{'max-width': '40%', 'margin-right': '20px'}" placeholder="Left Person"/>
+		<n-input :on-update:value="(string) => replicants.lowerThird.commentators.rightPerson.value = string"
+				 :default-value="replicants.lowerThird.commentators.rightPerson.value" style="max-width: 40%"
+				 placeholder="Right Person"/>
+		<n-button @click="replicants.lowerThird.commentators.show.value = !replicants.lowerThird.commentators.show.value"
+				  style="margin-left: 20px">
+			{{ replicants.lowerThird.commentators.show.value ? "Hide" : "Show" }}
+		</n-button>
+		<h2>Display Locator</h2>
+		<n-button @click="replicants.lowerThird.locator.value = !replicants.lowerThird.locator.value">
+			{{ replicants.lowerThird.locator.value ? "Hide" : "Show" }}
+		</n-button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {NButton, NInput} from "naive-ui"
+import { loadReplicants } from "../../browser-common/replicants";
+import {ref} from "vue";
+
+const replicants = await loadReplicants();
+
+
+</script>
+
+<style scoped>
+</style>

apps/glimpse-graphics/src/dashboard/lower-third/main.vue

@@ -0,0 +1,22 @@
+<template>
+	<n-config-provider :theme="darkTheme">
+		<Suspense>
+			<div>
+				<LowerThird />
+			</div>
+			<template #fallback>
+				Loading...
+			</template>
+		</Suspense>
+	</n-config-provider>
+</template>
+
+<script setup lang="ts">
+import {NConfigProvider, darkTheme} from "naive-ui";
+import LowerThird from "./LowerThird.vue";
+
+</script>
+
+<style scoped>
+
+</style>

apps/glimpse-graphics/src/graphics/glimpse/StyledView.vue

@@ -3,6 +3,7 @@
 		<div v-if="replicants.gameSettings.style.value === 'espn'">
 			<ESPNImageView />
 			<ESPNScoreboardView />
+			<ESPNLowerThird />
 		</div>
 		<div v-else-if="replicants.gameSettings.style.value === 'rpitv-modern'">
 			<TVModernImageView />
@@ -18,6 +19,7 @@ import ESPNScoreboardView from "./styles/espn/ScoreboardView.vue";
 import ESPNImageView from "./styles/espn/ImageView.vue";
 import TVModernScoreboardView from "./styles/rpitv-modern/ScoreboardView.vue";
 import TVModernImageView from "./styles/rpitv-modern/ImageView.vue";
+import ESPNLowerThird from "./styles/espn/LowerThird.vue";
 
 const replicants = await loadReplicants();
 </script>

apps/glimpse-graphics/src/graphics/glimpse/styles/espn/LowerThird.vue

@@ -0,0 +1,32 @@
+<template>
+	<div :class="{show: replicants.lowerThird.scoreboard.value, hide: !replicants.lowerThird.scoreboard.value}">
+		<Scoreboard />
+	</div>
+	<div :class="{show: replicants.lowerThird.commentators.show.value, hide: !replicants.lowerThird.commentators.show.value}">
+		<Commentators />
+	</div>
+	<div :class="{show: replicants.lowerThird.locator.value, hide: !replicants.lowerThird.locator.value}">
+		<Locator />
+	</div>
+</template>
+
+<script setup lang="ts">
+import Scoreboard from "./lower-third/Scoreboard.vue";
+import Commentators from "./lower-third/Commentators.vue";
+import Locator from "./lower-third/Locator.vue";
+import {loadReplicants} from "../../../../browser-common/replicants";
+
+const replicants = await loadReplicants();
+
+</script>
+
+<style scoped>
+.hide {
+	opacity: 0;
+	transition: 1s;
+}
+.show {
+	opacity: 1;
+	transition: 1s;
+}
+</style>

apps/glimpse-graphics/src/graphics/glimpse/styles/espn/lower-third/Commentators.vue

@@ -0,0 +1,46 @@
+<template>
+	<img :src="commentators">
+	<div id="leftPerson">{{replicants.lowerThird.commentators.leftPerson.value}}</div>
+	<div id="rightPerson">{{replicants.lowerThird.commentators.rightPerson.value}}</div>
+</template>
+
+<script setup lang="ts">
+import commentators from "../../../../../Commentators.png"
+import { loadReplicants } from "../../../../../browser-common/replicants";
+
+const replicants = await loadReplicants();
+</script>
+
+<style scoped>
+@font-face {
+	font-family: "swiss721_med";
+	src: url('Swiss721Medium.ttf')
+}
+div {
+	position: absolute;
+	font-family: "swiss721_med";
+	color: rgb(63, 64, 59);
+}
+img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	transition: opacity 1s;
+}
+#leftPerson {
+	left: 0;
+	width: 55.6vw;
+	text-align: center;
+	bottom: 17.5vh;
+	font-size: 3.5vh;
+}
+#rightPerson {
+	left: 0;
+	width: 144.3vw;
+	text-align: center;
+	bottom: 17.5vh;
+	font-size: 3.5vh;
+}
+</style>

apps/glimpse-graphics/src/graphics/glimpse/styles/espn/lower-third/Locator.vue

@@ -0,0 +1,108 @@
+<template>
+	<img :src="Locator">
+	<div id="team1SecondaryColor" :style="{'background-color': replicants.teams[0].secondaryColor.value}"></div>
+	<div id="team1PrimaryColor" :style="{'background-color': replicants.teams[0].primaryColor.value}"></div>
+	<div id="team2SecondaryColor" :style="{'background-color': replicants.teams[1].secondaryColor.value}"></div>
+	<div id="team2PrimaryColor" :style="{'background-color': replicants.teams[1].primaryColor.value}"></div>
+	<div class="team1Logo">
+		<img id="team1Logo" :src="replicants.lowerThird.school1Logo.value">
+	</div>
+	<div class="team2Logo">
+		<img id="team2Logo" :src="replicants.lowerThird.school2Logo.value">
+	</div>
+	<div class="team1Name">{{replicants.teams[0].name.value}}</div>
+	<div class="team2Name">{{replicants.teams[1].name.value}}</div>
+</template>
+
+<script setup lang="ts">
+import Locator from "../../../../../Locator.png"
+import {loadReplicants} from "../../../../../browser-common/replicants";
+
+const replicants = await loadReplicants();
+</script>
+
+<style scoped>
+@font-face {
+	font-family: "swiss721_heavy";
+	src: url('Swiss721Heavy.ttf')
+}
+div {
+	position: absolute;
+	font-family: "swiss721_heavy";
+}
+img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+}
+#team1SecondaryColor {
+	left: 29.5vw;
+	bottom: 22.1vh;
+	width: 2.7vw;
+	height: 9.6vh;
+}
+#team1PrimaryColor {
+	left: 32.4vw;
+	bottom: 22.1vh;
+	width: 11.8vw;
+	height: 9.6vh;
+}
+#team2SecondaryColor {
+	left: 67.6vw;
+	width: 2.7vw;
+	bottom: 22.1vh;
+	height: 9.6vh;
+}
+#team2PrimaryColor {
+	left: 55.6vw;
+	bottom: 22.1vh;
+	width: 11.9vw;
+	height: 9.6vh;
+}
+.team1Logo {
+	left: 0;
+	bottom: 22.4vh;
+	width: 76.67vw;
+	display: flex;
+	justify-content: center;
+}
+#team1Logo {
+	position: relative;
+	height: auto;
+	width: auto;
+	max-width: 11.9vw;
+	max-height: 9vh;
+}
+.team2Logo {
+	left: 0;
+	bottom: 22.4vh;
+	width: 123vw;
+	display: flex;
+	justify-content: center;
+}
+#team2Logo {
+	position: relative;
+	height: auto;
+	width: auto;
+	max-width: 11.9vw;
+	max-height: 9vh;
+}
+.team1Name {
+	left: 0;
+	color: rgba(63,63,63);
+	font-size: 3.5vh;
+	width: 75.9vw;
+	text-align: center;
+	bottom: 16.1vh;
+}
+.team2Name {
+	left: 0;
+	color: rgba(63,63,63);
+	font-size: 3.5vh;
+	width: 123.5vw;
+	text-align: center;
+	bottom: 16.1vh;
+}
+</style>