Refined alliance station display.

static/css/alliance_station_display.css

@@ -8,28 +8,60 @@ body {
   background-color: #000;
   font-family: "FuturaLTBold";
 }
+#match {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
 #displayId {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto auto;
+  height: 1px;
+  line-height: 1px;
+  text-align: center;
   color: #ff0;
   font-size: 500px;
 }
 #teamId {
+  position: absolute;
+  top: 7%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
   font-size: 500px;
   line-height: 500px;
+  text-align: center;
   margin: 50px 0px;
+  color: #fff;
 }
 #teamName {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  height: 200px;
+  line-height: 200px;
+  text-align: center;
   font-family: "FuturaLT";
   font-size: 120px;
-}
-[data-alliance=R] {
-  color: #f00;
-}
-[data-alliance=B] {
-  color: #00f;
-}
-.match-info {
   color: #fff;
+}
+#matchInfo {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  height: 200px;
+  line-height: 200px;
+  text-align: center;
   font-size: 190px;
+  color: #fff;
 }
 #redScore {
   color: #f00;
@@ -37,3 +69,21 @@ body {
 #blueScore {
   color: #00f;
 }
+#logo {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 90%;
+  margin: auto auto;
+}
+[data-alliance=R], [data-status=R] {
+  background-color: #f00;
+}
+[data-alliance=B], [data-status=B] {
+  background-color: #00f;
+}
+[data-status=bypass] {
+  background-color: #999;
+}

static/js/alliance_station_display.js

@@ -3,11 +3,27 @@
 //
 // Client-side methods for the alliance station display.
 
-// A unique id to differentiate this station's display from its peers.
-var displayId;
 var allianceStation = "";
+var blinkInterval;
 var websocket;
 
+var handleSetAllianceStationDisplay = function(targetScreen) {
+  switch (targetScreen) {
+    case "logo":
+      $("#match").hide();
+      $("#logo").show();
+      break;
+    case "blank":
+      $("#match").hide();
+      $("#logo").hide();
+      break;
+    case "match":
+      $("#match").show();
+      $("#logo").hide();
+      break;
+  }
+};
+
 var handleSetMatch = function(data) {
   if (allianceStation != "" && data.AllianceStation == "") {
     // The client knows better what display this should be; let the server know.
@@ -22,22 +38,49 @@ var handleSetMatch = function(data) {
     if (team == null) {
       $("#teamId").text("");
       $("#teamName").text("");
+      $("#teamName").attr("data-alliance", "");
     } else {
-      $("#teamId").attr("data-alliance", allianceStation[0]);
       $("#teamName").attr("data-alliance", allianceStation[0]);
       $("#teamId").text(data.Teams[allianceStation].Id);
       $("#teamName").text(data.Teams[allianceStation].Nickname);
     }
-    $("#displayIdRow").hide();
-    $("#teamIdRow").show();
-    $("#teamNameRow").show();
+    $("#displayId").hide();
+    $("#teamId").show();
+    $("#teamName").show();
   } else {
     // Show the display ID so that someone can assign it to a station from the configuration interface.
     $("#teamId").text("");
     $("#teamName").text("");
-    $("#displayIdRow").show();
-    $("#teamIdRow").hide();
-    $("#teamNameRow").hide();
+    $("#displayId").show();
+    $("#teamId").hide();
+    $("#teamName").hide();
+  }
+};
+
+var handleStatus = function(data) {
+  stationStatus = data.AllianceStations[allianceStation];
+  var blink = false;
+  if (stationStatus.Bypass) {
+    $("#match").attr("data-status", "bypass");
+  } else if (stationStatus.DsConn) {
+    if (!stationStatus.DsConn.DriverStationStatus.DsLinked) {
+      $("#match").attr("data-status", allianceStation[0]);
+    } else if (!stationStatus.DsConn.DriverStationStatus.RobotLinked) {
+      blink = true;
+      if (!blinkInterval) {
+        blinkInterval = setInterval(function() {
+          var status = $("#match").attr("data-status");
+          $("#match").attr("data-status", (status == "") ? allianceStation[0] : "");
+        }, 250);
+      }
+    }
+  } else {
+    $("#match").attr("data-status", "");
+  }
+
+  if (!blink && blinkInterval) {
+    clearInterval(blinkInterval);
+    blinkInterval = null;
   }
 };
 
@@ -51,11 +94,11 @@ var handleMatchTime = function(data) {
     $("#matchTime").text(countdownString);
 
     if (matchState == "PRE_MATCH" || matchState == "POST_MATCH") {
-      $("#teamNameRow").show();
-      $("#matchInfoRow").hide();
+      $("#teamName").show();
+      $("#matchInfo").hide();
     } else {
-      $("#teamNameRow").hide();
-      $("#matchInfoRow").show();
+      $("#teamName").hide();
+      $("#matchInfo").show();
     }
   });
 };
@@ -66,12 +109,17 @@ var handleRealtimeScore = function(data) {
 };
 
 $(function() {
-  displayId = Math.floor(Math.random() * 10000);
+  if (displayId == "") {
+    displayId = Math.floor(Math.random() * 10000);
+    window.location = "/displays/alliance_station?displayId=" + displayId;
+  }
   $("#displayId").text(displayId);
 
   // Set up the websocket back to the server.
   websocket = new CheesyWebsocket("/displays/alliance_station/websocket?displayId=" + displayId, {
+    setAllianceStationDisplay: function(event) { handleSetAllianceStationDisplay(event.data); },
     setMatch: function(event) { handleSetMatch(event.data); },
+    status: function(event) { handleStatus(event.data); },
     matchTiming: function(event) { handleMatchTiming(event.data); },
     matchTime: function(event) { handleMatchTime(event.data); },
     realtimeScore: function(event) { handleRealtimeScore(event.data); }

static/js/match_play.js

@@ -34,6 +34,10 @@ var setAudienceDisplay = function() {
   websocket.send("setAudienceDisplay", $("input[name=audienceDisplay]:checked").val());
 };
 
+var setAllianceStationDisplay = function() {
+  websocket.send("setAllianceStationDisplay", $("input[name=allianceStationDisplay]:checked").val());
+};
+
 var confirmCommit = function(isReplay) {
   if (isReplay || !scoreIsReady) {
     // Show the appropriate message(s) in the confirmation dialog.
@@ -118,6 +122,10 @@ var handleScoringStatus = function(data) {
   $("#blueScoreStatus").attr("data-ready", data.BlueScoreReady);
 };
 
+var handleSetAllianceStationDisplay = function(data) {
+  $("input[name=allianceStationDisplay][value=" + data + "]").prop("checked", true);
+};
+
 $(function() {
   // Activate tooltips above the status headers.
   $("[data-toggle=tooltip]").tooltip({"placement": "top"});
@@ -128,6 +136,7 @@ $(function() {
     matchTiming: function(event) { handleMatchTiming(event.data); },
     matchTime: function(event) { handleMatchTime(event.data); },
     setAudienceDisplay: function(event) { handleSetAudienceDisplay(event.data); },
-    scoringStatus: function(event) { handleScoringStatus(event.data); }
+    scoringStatus: function(event) { handleScoringStatus(event.data); },
+    setAllianceStationDisplay: function(event) { handleSetAllianceStationDisplay(event.data); }
   });
 });