NCGEARS/cheesy-arena-lite
1
0
Fork 0
mirror of https://github.com/Team254/cheesy-arena-lite.git synced 2026-03-09 21:56:50 -04:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Optimize field monitor display for mobile and distant viewing.

Browse Source
This commit is contained in:
Patrick Fairbank
2018-09-23 18:39:24 -07:00
parent ca99653de7
commit 8e726abc4e
13 changed files with 203 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
field/display.go
View File

@@ -51,7 +51,7 @@ var displayTypePaths = map[DisplayType]string{
AllianceStationDisplay: "/displays/alliance_station", AllianceStationDisplay: "/displays/alliance_station",
AnnouncerDisplay: "/displays/announcer", AnnouncerDisplay: "/displays/announcer",
AudienceDisplay: "/displays/audience", AudienceDisplay: "/displays/audience",
FieldMonitorDisplay: "/displays/fta", FieldMonitorDisplay: "/displays/field_monitor",
PitDisplay: "/displays/pit", PitDisplay: "/displays/pit",
QueueingDisplay: "/displays/queueing", QueueingDisplay: "/displays/queueing",
TwitchStreamDisplay: "/displays/twitch", TwitchStreamDisplay: "/displays/twitch",

2
field/display_test.go
View File

@@ -31,7 +31,7 @@ func TestDisplayFromUrl(t *testing.T) {
assert.Equal(t, AnnouncerDisplay, display.Type) assert.Equal(t, AnnouncerDisplay, display.Type)
display, _ = DisplayFromUrl("/displays/audience/websocket", query) display, _ = DisplayFromUrl("/displays/audience/websocket", query)
assert.Equal(t, AudienceDisplay, display.Type) assert.Equal(t, AudienceDisplay, display.Type)
display, _ = DisplayFromUrl("/displays/fta/websocket", query) display, _ = DisplayFromUrl("/displays/field_monitor/websocket", query)
assert.Equal(t, FieldMonitorDisplay, display.Type) assert.Equal(t, FieldMonitorDisplay, display.Type)
display, _ = DisplayFromUrl("/displays/pit/websocket", query) display, _ = DisplayFromUrl("/displays/pit/websocket", query)
assert.Equal(t, PitDisplay, display.Type) assert.Equal(t, PitDisplay, display.Type)

2
static/css/cheesy-arena.css
View File

@@ -46,7 +46,7 @@
.modal-large { .modal-large {
width: 60%; width: 60%;
} }
.ds-status, .radio-status, .robot-status, .battery-status, .bypass-status, .bypass-status-fta, .trip-time, .packet-loss { .ds-status, .radio-status, .robot-status, .battery-status, .bypass-status, .trip-time, .packet-loss {
background-color: #aaa; background-color: #aaa;
color: #000; color: #000;
border: 1px solid #999; border: 1px solid #999;

52
static/css/field_monitor_display.css Normal file
View File

@@ -0,0 +1,52 @@
/*
Copyright 2018 Team 254. All Rights Reserved.
Author: pat@patfairbank.com (Patrick Fairbank)
*/
html {
height: 100%;
cursor: none;
-webkit-user-select: none;
-moz-user-select: none;
overflow: hidden;
}
body {
height: 100%;
font-family: FuturaLTBold;
color: #fff;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.position-row {
height: 33.3%;
}
.left-position, .right-position {
width: 8%;
height: 100%;
font-size: 6vw;
}
.left-position[data-reversed=false], .right-position[data-reversed=true] {
background-color: #ff4444;
}
.left-position[data-reversed=true], .right-position[data-reversed=false] {
background-color: #2080ff;
}
.team {
width: 42%;
height: 100%;
background-color: #333;
font-size: 13vw;
}
.team[data-status=no-link] {
background-color: #963;
}
.team[data-status=ds-linked] {
background-color: #ff0;
color: #333;
}
.team[data-status=robot-linked] {
background-color: #0a3;
}

61
static/js/field_monitor_display.js Normal file
View File

@@ -0,0 +1,61 @@
// Copyright 2018 Team 254. All Rights Reserved.
// Author: pat@patfairbank.com (Patrick Fairbank)
//
// Client-side logic for the field monitor display.
var websocket;
var redSide;
var blueSide;
// Handles a websocket message to update the team connection status.
var handleArenaStatus = function(data) {
$.each(data.AllianceStations, function(station, stationStatus) {
// Select the DOM element corresponding to the team station.
var teamElement;
if (station[0] === "R") {
teamElement = $("#" + redSide + "Team" + station[1]);
} else {
teamElement = $("#" + blueSide + "Team" + station[1]);
}
if (stationStatus.Team) {
// Set the team number and status.
teamElement.text(stationStatus.Team.Id);
var status = "no-link";
if (stationStatus.Bypass) {
status = "";
} else if (stationStatus.DsConn) {
if (stationStatus.DsConn.RobotLinked) {
status = "robot-linked";
} else if (stationStatus.DsConn.DsLinked) {
status = "ds-linked";
}
}
teamElement.attr("data-status", status);
} else {
// No team is present in this position for this match; blank out the status.
teamElement.text("");
teamElement.attr("data-status", "");
}
});
};
$(function() {
// Read the configuration for this display from the URL query string.
var urlParams = new URLSearchParams(window.location.search);
var reversed = urlParams.get("reversed");
if (reversed === "true") {
redSide = "right";
blueSide = "left";
} else {
redSide = "left";
blueSide = "right";
}
$(".reversible-left").attr("data-reversed", reversed);
$(".reversible-right").attr("data-reversed", reversed);
// Set up the websocket back to the server.
websocket = new CheesyWebsocket("/displays/field_monitor/websocket", {
arenaStatus: function(event) { handleArenaStatus(event.data); }
});
});

77
static/js/fta_display.js
View File

@@ -1,77 +0,0 @@
// Copyright 2014 Team 254. All Rights Reserved.
// Author: austin.linux@gmail.com (Austin Schuh)
// Author: pat@patfairbank.com (Patrick Fairbank)
//
// Client-side logic for the FTA diagnostic display.
var websocket;
// Handles a websocket message to update the team connection status.
var handleArenaStatus = function(data) {
// Update the team status view.
$.each(data.AllianceStations, function(station, stationStatus) {
if (stationStatus.Team) {
$("#status" + station + " .team").text(stationStatus.Team.Id);
} else {
$("#status" + station + " .team").text("");
}
if (stationStatus.DsConn) {
var dsConn = stationStatus.DsConn;
$("#status" + station + " .ds-status").attr("data-status-ok", dsConn.DsLinked);
$("#status" + station + " .radio-status").attr("data-status-ok", dsConn.RadioLinked);
$("#status" + station + " .robot-status").attr("data-status-ok", dsConn.RobotLinked);
if (stationStatus.DsConn.SecondsSinceLastRobotLink > 1 && stationStatus.DsConn.SecondsSinceLastRobotLink < 1000) {
$("#status" + station + " .robot-status").text(stationStatus.DsConn.SecondsSinceLastRobotLink.toFixed());
} else {
$("#status" + station + " .robot-status").text("");
}
var lowBatteryThreshold = 6;
if (matchStates[data.MatchState] === "PRE_MATCH" || matchStates[data.MatchState] === "TIMEOUT_ACTIVE" ||
matchStates[data.MatchState] === "POST_TIMEOUT") {
lowBatteryThreshold = 12;
}
$("#status" + station + " .battery-status").attr("data-status-ok",
dsConn.BatteryVoltage > lowBatteryThreshold && dsConn.RobotLinked);
$("#status" + station + " .battery-status").text(dsConn.BatteryVoltage.toFixed(1) + "V");
$("#status" + station + " .trip-time").attr("data-status-ok", true);
$("#status" + station + " .trip-time").text(dsConn.DsRobotTripTimeMs.toFixed(1) + "ms");
$("#status" + station + " .packet-loss").attr("data-status-ok", true);
$("#status" + station + " .packet-loss").text(dsConn.MissedPacketCount);
} else {
$("#status" + station + " .ds-status").attr("data-status-ok", "");
$("#status" + station + " .ds-status").text("");
$("#status" + station + " .radio-status").attr("data-status-ok", "");
$("#status" + station + " .radio-status").text("");
$("#status" + station + " .robot-status").attr("data-status-ok", "");
$("#status" + station + " .robot-status").text("");
$("#status" + station + " .battery-status").attr("data-status-ok", "");
$("#status" + station + " .battery-status").text("");
$("#status" + station + " .trip-time").attr("data-status-ok", "");
$("#status" + station + " .trip-time").text("");
$("#status" + station + " .packet-loss").attr("data-status-ok", "");
$("#status" + station + " .packet-loss").text("");
}
if (stationStatus.Estop) {
$("#status" + station + " .bypass-status-fta").attr("data-status-ok", false);
$("#status" + station + " .bypass-status-fta").text("ES");
} else if (stationStatus.Bypass) {
$("#status" + station + " .bypass-status-fta").attr("data-status-ok", false);
$("#status" + station + " .bypass-status-fta").text("B");
} else {
$("#status" + station + " .bypass-status-fta").attr("data-status-ok", true);
$("#status" + station + " .bypass-status-fta").text("");
}
});
};
$(function() {
// Activate tooltips above the status headers.
$("[data-toggle=tooltip]").tooltip({"placement": "top"});
// Set up the websocket back to the server.
websocket = new CheesyWebsocket("/displays/fta/websocket", {
arenaStatus: function(event) { handleArenaStatus(event.data); }
});
});

2
templates/base.html
View File

@@ -84,7 +84,7 @@
<li><a href="/display">Placeholder</a></li> <li><a href="/display">Placeholder</a></li>
<li><a href="/displays/announcer">Announcer</a></li> <li><a href="/displays/announcer">Announcer</a></li>
<li><a href="/displays/audience">Audience</a></li> <li><a href="/displays/audience">Audience</a></li>
<li><a href="/displays/fta">Field Monitor</a></li> <li><a href="/displays/field_monitor">Field Monitor</a></li>
<li><a href="/displays/pit">Pit</a></li> <li><a href="/displays/pit">Pit</a></li>
<li><a href="/displays/queueing">Queueing</a></li> <li><a href="/displays/queueing">Queueing</a></li>
<li class="divider"></li> <li class="divider"></li>

41
templates/field_monitor_display.html Normal file
View File

@@ -0,0 +1,41 @@
{{/*
Copyright 2018 Team 254. All Rights Reserved.
Author: pat@patfairbank.com (Patrick Fairbank)
Display showing robot connection status.
*/}}
<!DOCTYPE html>
<html>
<head>
<title>Field Monitor - {{.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/field_monitor_display.css" />
</head>
<body>
{{template "row" dict "leftPosition" "1" "rightPosition" "3"}}
{{template "row" dict "leftPosition" "2" "rightPosition" "2"}}
{{template "row" dict "leftPosition" "3" "rightPosition" "1"}}
</body>
<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/lib/jquery.transit.min.js"></script>
<script src="/static/js/lib/bootstrap.min.js"></script>
<script src="/static/js/cheesy-websocket.js"></script>
<script src="/static/js/field_monitor_display.js"></script>
</html>
{{define "row"}}
<div class="position-row center">
<div class="left-position center reversible-left">{{.leftPosition}}</div>
{{template "team" dict "side" "left" "position" .leftPosition}}
{{template "team" dict "side" "right" "position" .rightPosition}}
<div class="right-position center reversible-right">{{.rightPosition}}</div>
</div>
{{end}}
{{define "team"}}
<div id="{{.side}}Team{{.position}}" class="team center"></div>
{{end}}

64
templates/fta_display.html
View File

@@ -1,64 +0,0 @@
{{/*
Copyright 2014 Team 254. All Rights Reserved.
Author: pat@patfairbank.com (Patrick Fairbank)
Display showing team diagnostics for FTA/FTAA use.
*/}}
{{define "title"}}Field Monitor{{end}}
{{define "body"}}
<br />
<div class="row">
<div class="col-lg-12">
<div class="row text-center">
<div class="col-lg-6 well well-darkred">
<div class="row form-group">
<div class="col-xs-3">Red Teams</div>
<div class="col-xs-1" data-toggle="tooltip" title="Driver Station (Tx/Rx Mbits/s)">DS</div>
<div class="col-xs-1" data-toggle="tooltip" title="Radio Status">Rad</div>
<div class="col-xs-1" data-toggle="tooltip" title="Robot Status/Time Since Last Link">Rio</div>
<div class="col-xs-1" data-toggle="tooltip" title="Battery">Bat</div>
<div class="col-xs-1" data-toggle="tooltip" title="Bypassed/Disabled">Byp</div>
<div class="col-xs-2" data-toggle="tooltip" title="Average Trip Time">Trip Time</div>
<div class="col-xs-2" data-toggle="tooltip" title="Packet Loss">Lost Pack</div>
</div>
{{template "ftaTeam" dict "color" "R" "position" 1 "data" .}}
{{template "ftaTeam" dict "color" "R" "position" 2 "data" .}}
{{template "ftaTeam" dict "color" "R" "position" 3 "data" .}}
</div>
<div class="col-lg-6 well well-darkblue">
<div class="row form-group hidden-xs">
<div class="col-xs-3">Blue Teams</div>
<div class="col-xs-1" data-toggle="tooltip" title="Driver Station (Tx/Rx Mbits/s)">DS</div>
<div class="col-xs-1" data-toggle="tooltip" title="Radio Status">Rad</div>
<div class="col-xs-1" data-toggle="tooltip" title="Robot Status/Time Since Last Link">Rio</div>
<div class="col-xs-1" data-toggle="tooltip" title="Battery">Bat</div>
<div class="col-xs-1" data-toggle="tooltip" title="Bypassed/Disabled">Byp</div>
<div class="col-xs-2" data-toggle="tooltip" title="Average Trip Time">Trip Time</div>
<div class="col-xs-2" data-toggle="tooltip" title="Packet Loss">Lost Pack</div>
</div>
{{template "ftaTeam" dict "color" "B" "position" 1 "data" .}}
{{template "ftaTeam" dict "color" "B" "position" 2 "data" .}}
{{template "ftaTeam" dict "color" "B" "position" 3 "data" .}}
</div>
</div>
<br />
</div>
</div>
{{end}}
{{define "script"}}
<script src="/static/js/match_timing.js"></script>
<script src="/static/js/fta_display.js"></script>
{{end}}
{{define "ftaTeam"}}
<div class="row form-group" id="status{{.color}}{{.position}}">
<div class="col-xs-1">{{.position}} </div>
<div class="col-xs-2"><div class="team"></div></div>
<div class="col-xs-1 col-no-padding"><div class="ds-status"></div></div>
<div class="col-xs-1 col-no-padding"><div class="radio-status"></div></div>
<div class="col-xs-1 col-no-padding"><div class="robot-status"></div></div>
<div class="col-xs-1 col-no-padding"><div class="battery-status"></div></div>
<div class="col-xs-1 col-no-padding"><div class="bypass-status-fta"></div></div>
<div class="col-xs-2 col-no-padding"><div class="trip-time" ></div></div>
<div class="col-xs-2 col-no-padding"><div class="packet-loss" ></div></div>
</div>
{{end}}

18
web/fta_display.go → web/field_monitor_display.go
View File

@@ -1,7 +1,7 @@
// Copyright 2014 Team 254. All Rights Reserved. // Copyright 2018 Team 254. All Rights Reserved.
// Author: pat@patfairbank.com (Patrick Fairbank) // Author: pat@patfairbank.com (Patrick Fairbank)
// //
// Web handlers for the FTA diagnostic display. // Web handlers for the field monitor display showing robot connection status.
package web package web
@@ -11,17 +11,17 @@ import (
"net/http" "net/http"
) )
// Renders the FTA diagnostic display. // Renders the field monitor display.
func (web *Web) ftaDisplayHandler(w http.ResponseWriter, r *http.Request) { func (web *Web) fieldMonitorDisplayHandler(w http.ResponseWriter, r *http.Request) {
if !web.userIsReader(w, r) { if !web.userIsReader(w, r) {
return return
} }
if !web.enforceDisplayConfiguration(w, r, nil) { if !web.enforceDisplayConfiguration(w, r, map[string]string{"reversed": "false"}) {
return return
} }
template, err := web.parseFiles("templates/fta_display.html", "templates/base.html") template, err := web.parseFiles("templates/field_monitor_display.html")
if err != nil { if err != nil {
handleWebErr(w, err) handleWebErr(w, err)
return return
@@ -29,15 +29,15 @@ func (web *Web) ftaDisplayHandler(w http.ResponseWriter, r *http.Request) {
data := struct { data := struct {
*model.EventSettings *model.EventSettings
}{web.arena.EventSettings} }{web.arena.EventSettings}
err = template.ExecuteTemplate(w, "base_no_navbar", data) err = template.ExecuteTemplate(w, "field_monitor_display.html", data)
if err != nil { if err != nil {
handleWebErr(w, err) handleWebErr(w, err)
return return
} }
} }
// The websocket endpoint for the FTA display client to receive status updates. // The websocket endpoint for the field monitor display client to receive status updates.
func (web *Web) ftaDisplayWebsocketHandler(w http.ResponseWriter, r *http.Request) { func (web *Web) fieldMonitorDisplayWebsocketHandler(w http.ResponseWriter, r *http.Request) {
if !web.userIsReader(w, r) { if !web.userIsReader(w, r) {
return return
} }

34
web/field_monitor_display_test.go Normal file
View File

@@ -0,0 +1,34 @@
// Copyright 2018 Team 254. All Rights Reserved.
// Author: pat@patfairbank.com (Patrick Fairbank)
package web
import (
"github.com/Team254/cheesy-arena/websocket"
gorillawebsocket "github.com/gorilla/websocket"
"github.com/stretchr/testify/assert"
"testing"
)
func TestFieldMonitorDisplay(t *testing.T) {
web := setupTestWeb(t)
recorder := web.getHttpResponse("/displays/field_monitor?displayId=1&reversed=false")
assert.Equal(t, 200, recorder.Code)
assert.Contains(t, recorder.Body.String(), "Field Monitor - Untitled Event - Cheesy Arena")
}
func TestFieldMonitorDisplayWebsocket(t *testing.T) {
web := setupTestWeb(t)
server, wsUrl := web.startTestServer()
defer server.Close()
conn, _, err := gorillawebsocket.DefaultDialer.Dial(wsUrl+"/displays/field_monitor/websocket?displayId=1", nil)
assert.Nil(t, err)
defer conn.Close()
ws := websocket.NewTestWebsocket(conn)
// Should get a few status updates right after connection.
readWebsocketType(t, ws, "arenaStatus")
readWebsocketType(t, ws, "displayConfiguration")
}

17
web/fta_display_test.go
View File

@@ -1,17 +0,0 @@
// Copyright 2014 Team 254. All Rights Reserved.
// Author: pat@patfairbank.com (Patrick Fairbank)
package web
import (
"github.com/stretchr/testify/assert"
"testing"
)
func TestFtaDisplay(t *testing.T) {
web := setupTestWeb(t)
recorder := web.getHttpResponse("/displays/fta?displayId=1")
assert.Equal(t, 200, recorder.Code)
assert.Contains(t, recorder.Body.String(), "Field Monitor - Untitled Event - Cheesy Arena")
}

4
web/web.go
View File

@@ -142,8 +142,8 @@ func (web *Web) newHandler() http.Handler {
router.HandleFunc("/displays/announcer/websocket", web.announcerDisplayWebsocketHandler).Methods("GET") router.HandleFunc("/displays/announcer/websocket", web.announcerDisplayWebsocketHandler).Methods("GET")
router.HandleFunc("/displays/audience", web.audienceDisplayHandler).Methods("GET") router.HandleFunc("/displays/audience", web.audienceDisplayHandler).Methods("GET")
router.HandleFunc("/displays/audience/websocket", web.audienceDisplayWebsocketHandler).Methods("GET") router.HandleFunc("/displays/audience/websocket", web.audienceDisplayWebsocketHandler).Methods("GET")
router.HandleFunc("/displays/fta", web.ftaDisplayHandler).Methods("GET") router.HandleFunc("/displays/field_monitor", web.fieldMonitorDisplayHandler).Methods("GET")
router.HandleFunc("/displays/fta/websocket", web.ftaDisplayWebsocketHandler).Methods("GET") router.HandleFunc("/displays/field_monitor/websocket", web.fieldMonitorDisplayWebsocketHandler).Methods("GET")
router.HandleFunc("/displays/pit", web.pitDisplayHandler).Methods("GET") router.HandleFunc("/displays/pit", web.pitDisplayHandler).Methods("GET")
router.HandleFunc("/displays/pit/websocket", web.pitDisplayWebsocketHandler).Methods("GET") router.HandleFunc("/displays/pit/websocket", web.pitDisplayWebsocketHandler).Methods("GET")
router.HandleFunc("/displays/queueing", web.queueingDisplayHandler).Methods("GET") router.HandleFunc("/displays/queueing", web.queueingDisplayHandler).Methods("GET")