Add display showing a logo and a configurable message.

Team254 · May 30, 2024 · 40485a9 · 40485a9
1 parent f4adccc
commit 40485a9
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 3 deletions.
diff --git a/field/display.go b/field/display.go
@@ -32,6 +32,7 @@ const (
 	AudienceDisplay
 	BracketDisplay
 	FieldMonitorDisplay
+	LogoDisplay
 	QueueingDisplay
 	RankingsDisplay
 	TwitchStreamDisplay
@@ -46,6 +47,7 @@ var DisplayTypeNames = map[DisplayType]string{
 	AudienceDisplay:        "Audience",
 	BracketDisplay:         "Bracket",
 	FieldMonitorDisplay:    "Field Monitor",
+	LogoDisplay:            "Logo",
 	QueueingDisplay:        "Queueing",
 	RankingsDisplay:        "Rankings",
 	TwitchStreamDisplay:    "Twitch Stream",
@@ -60,6 +62,7 @@ var displayTypePaths = map[DisplayType]string{
 	AudienceDisplay:        "/displays/audience",
 	BracketDisplay:         "/displays/bracket",
 	FieldMonitorDisplay:    "/displays/field_monitor",
+	LogoDisplay:            "/displays/logo",
 	QueueingDisplay:        "/displays/queueing",
 	RankingsDisplay:        "/displays/rankings",
 	TwitchStreamDisplay:    "/displays/twitch",

diff --git a/static/css/logo_display.css b/static/css/logo_display.css
@@ -0,0 +1,31 @@
+/*
+  Copyright 2024 Team 254. All Rights Reserved.
+  Author: [email protected] (Patrick Fairbank)
+*/
+
+html {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  overflow: hidden;
+  height: 100%;
+}
+body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #000;
+  font-family: "FuturaLTBold";
+  color: #fff;
+}
+#logo #logoImg {
+  height: 35vw;
+}
+#message {
+  margin-top: 5vw;
+  font-size: 3.5vw;
+  line-height: 4.5vw;
+  text-align: center;
+}
diff --git a/static/js/logo_display.js b/static/js/logo_display.js
@@ -0,0 +1,18 @@
+// Copyright 2024 Team 254. All Rights Reserved.
+// Author: [email protected] (Patrick Fairbank)
+//
+// Client-side logic for the logo display.
+
+var websocket;
+
+$(function() {
+  // Read the configuration for this display from the URL query string.
+  const urlParams = new URLSearchParams(window.location.search);
+  const message = urlParams.get("message");
+  const messageDiv = $("#message");
+  messageDiv.text(message);
+  messageDiv.toggle(message !== "");
+
+  // Set up the websocket back to the server.
+  websocket = new CheesyWebsocket("/displays/logo/websocket", {});
+});
diff --git a/static/js/webpage_display.js b/static/js/webpage_display.js
@@ -7,8 +7,7 @@ var websocket;
 
 $(function() {
   // Read the configuration for this display from the URL query string.
-  var urlParams = new URLSearchParams(window.location.search);
-  console.log(urlParams.get("url"));
+  const urlParams = new URLSearchParams(window.location.search);
   $("#webpageFrame").attr("src", urlParams.get("url"));
 
   // Set up the websocket back to the server.

diff --git a/templates/base.html b/templates/base.html
@@ -90,6 +90,7 @@
                 <a class="dropdown-item" href="/displays/field_monitor?fta=true">Field Monitor (FTA)</a>
                 <a class="dropdown-item" href="/displays/field_monitor?ds=true&reversed=true">Field Monitor (Blue DS)</a>
                 <a class="dropdown-item" href="/displays/field_monitor?ds=true&reversed=false">Field Monitor (Red DS)</a>
+                <a class="dropdown-item" href="/displays/logo">Logo</a>
                 <a class="dropdown-item" href="/displays/queueing">Queueing</a>
                 <a class="dropdown-item" href="/displays/rankings">Standings</a>
                 <a class="dropdown-item" href="/displays/wall">Wall</a>

diff --git a/templates/logo_display.html b/templates/logo_display.html
@@ -0,0 +1,28 @@
+{{/*
+  Copyright 2024 Team 254. All Rights Reserved.
+  Author: [email protected] (Patrick Fairbank)
+
+  Display to show a static logo and configurable message.
+*/}}
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Logo Display - {{.EventSettings.Name}} - Cheesy Arena </title>
+    <link rel="shortcut icon" href="/static/img/favicon.ico">
+    <link rel="stylesheet" href="/static/css/lib/bootstrap.min.css" />
+    <link rel="stylesheet" href="/static/css/cheesy-arena.css" />
+    <link rel="stylesheet" href="/static/css/logo_display.css" />
+  </head>
+  <body>
+    <div id="logo">
+      <img id="logoImg" src="/static/img/alliance-station-logo.png" alt="logo" />
+    </div>
+    <div id="message"></div>
+    <script src="/static/js/lib/jquery.min.js"></script>
+    <script src="/static/js/lib/jquery.json-2.4.min.js"></script>
+    <script src="/static/js/lib/jquery.websocket-0.0.1.js"></script>
+    <script src="/static/js/cheesy-websocket.js"></script>
+    <script src="/static/js/match_timing.js"></script>
+    <script src="/static/js/logo_display.js"></script>
+  </body>
+</html>
diff --git a/web/display_utils.go b/web/display_utils.go
@@ -32,7 +32,9 @@ func (web *Web) enforceDisplayConfiguration(w http.ResponseWriter, r *http.Reque
 	// Get display-specific fields from the query parameters.
 	if defaults != nil {
 		for key, defaultValue := range defaults {
-			if configuration[key] = r.URL.Query().Get(key); configuration[key] == "" {
+			if r.URL.Query().Has(key) {
+				configuration[key] = r.URL.Query().Get(key)
+			} else {
 				configuration[key] = defaultValue
 				allPresent = false
 			}

diff --git a/web/logo_display.go b/web/logo_display.go
@@ -0,0 +1,53 @@
+// Copyright 2024 Team 254. All Rights Reserved.
+// Author: [email protected] (Patrick Fairbank)
+//
+// Web routes for a display to show a static logo and configurable message.
+
+package web
+
+import (
+	"github.com/Team254/cheesy-arena/model"
+	"github.com/Team254/cheesy-arena/websocket"
+	"net/http"
+)
+
+// Renders the logo view.
+func (web *Web) logoDisplayHandler(w http.ResponseWriter, r *http.Request) {
+	if !web.enforceDisplayConfiguration(w, r, map[string]string{"message": ""}) {
+		return
+	}
+
+	template, err := web.parseFiles("templates/logo_display.html")
+	if err != nil {
+		handleWebErr(w, err)
+		return
+	}
+	data := struct {
+		*model.EventSettings
+	}{web.arena.EventSettings}
+	err = template.ExecuteTemplate(w, "logo_display.html", data)
+	if err != nil {
+		handleWebErr(w, err)
+		return
+	}
+}
+
+// The websocket endpoint for sending configuration commands to the display.
+func (web *Web) logoDisplayWebsocketHandler(w http.ResponseWriter, r *http.Request) {
+	display, err := web.registerDisplay(r)
+	if err != nil {
+		handleWebErr(w, err)
+		return
+	}
+	defer web.arena.MarkDisplayDisconnected(display.DisplayConfiguration.Id)
+
+	ws, err := websocket.NewWebsocket(w, r)
+	if err != nil {
+		handleWebErr(w, err)
+		return
+	}
+	defer ws.Close()
+
+	// Subscribe the websocket to the notifiers whose messages will be passed on to the client.
+	ws.HandleNotifiers(display.Notifier, web.arena.ReloadDisplaysNotifier)
+}
diff --git a/web/logo_display_test.go b/web/logo_display_test.go
@@ -0,0 +1,33 @@
+// Copyright 2024 Team 254. All Rights Reserved.
+// Author: [email protected] (Patrick Fairbank)
+
+package web
+
+import (
+	"github.com/Team254/cheesy-arena/websocket"
+	gorillawebsocket "github.com/gorilla/websocket"
+	"github.com/stretchr/testify/assert"
+	"testing"
+)
+
+func TestLogoDisplay(t *testing.T) {
+	web := setupTestWeb(t)
+
+	recorder := web.getHttpResponse("/displays/logo?displayId=1&message=")
+	assert.Equal(t, 200, recorder.Code)
+	assert.Contains(t, recorder.Body.String(), "Logo Display - Untitled Event - Cheesy Arena")
+}
+
+func TestLogoDisplayWebsocket(t *testing.T) {
+	web := setupTestWeb(t)
+
+	server, wsUrl := web.startTestServer()
+	defer server.Close()
+	conn, _, err := gorillawebsocket.DefaultDialer.Dial(wsUrl+"/displays/logo/websocket?displayId=123", nil)
+	assert.Nil(t, err)
+	defer conn.Close()
+	ws := websocket.NewTestWebsocket(conn)
+
+	// Should get a few status updates right after connection.
+	readWebsocketType(t, ws, "displayConfiguration")
+}
diff --git a/web/web.go b/web/web.go
@@ -152,6 +152,8 @@ func (web *Web) newHandler() http.Handler {
 	mux.HandleFunc("GET /displays/bracket/websocket", web.bracketDisplayWebsocketHandler)
 	mux.HandleFunc("GET /displays/field_monitor", web.fieldMonitorDisplayHandler)
 	mux.HandleFunc("GET /displays/field_monitor/websocket", web.fieldMonitorDisplayWebsocketHandler)
+	mux.HandleFunc("GET /displays/logo", web.logoDisplayHandler)
+	mux.HandleFunc("GET /displays/logo/websocket", web.logoDisplayWebsocketHandler)
 	mux.HandleFunc("GET /displays/queueing", web.queueingDisplayHandler)
 	mux.HandleFunc("GET /displays/queueing/match_load", web.queueingDisplayMatchLoadHandler)
 	mux.HandleFunc("GET /displays/queueing/websocket", web.queueingDisplayWebsocketHandler)