mirror of
https://github.com/Team254/cheesy-arena-lite.git
synced 2026-03-09 13:46:44 -04:00
Optimize field monitor display for mobile and distant viewing.
This commit is contained in:
Patrick Fairbank
@@ -51,7 +51,7 @@ var displayTypePaths = map[DisplayType]string{
|
||||
AllianceStationDisplay: "/displays/alliance_station",
|
||||
AnnouncerDisplay: "/displays/announcer",
|
||||
AudienceDisplay: "/displays/audience",
|
||||
FieldMonitorDisplay: "/displays/fta",
|
||||
FieldMonitorDisplay: "/displays/field_monitor",
|
||||
PitDisplay: "/displays/pit",
|
||||
QueueingDisplay: "/displays/queueing",
|
||||
TwitchStreamDisplay: "/displays/twitch",
|
||||
|
||||
@@ -31,7 +31,7 @@ func TestDisplayFromUrl(t *testing.T) {
|
||||
assert.Equal(t, AnnouncerDisplay, display.Type)
|
||||
display, _ = DisplayFromUrl("/displays/audience/websocket", query)
|
||||
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)
|
||||
display, _ = DisplayFromUrl("/displays/pit/websocket", query)
|
||||
assert.Equal(t, PitDisplay, display.Type)
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
.modal-large {
|
||||
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;
|
||||
color: #000;
|
||||
border: 1px solid #999;
|
||||
|
||||
52
static/css/field_monitor_display.css
Normal file
52
static/css/field_monitor_display.css
Normal 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
61
static/js/field_monitor_display.js
Normal 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); }
|
||||
});
|
||||
});
|
||||
@@ -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); }
|
||||
});
|
||||
});
|
||||
@@ -84,7 +84,7 @@
|
||||
<li><a href="/display">Placeholder</a></li>
|
||||
<li><a href="/displays/announcer">Announcer</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/queueing">Queueing</a></li>
|
||||
<li class="divider"></li>
|
||||
|
||||
41
templates/field_monitor_display.html
Normal file
41
templates/field_monitor_display.html
Normal 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}}
|
||||
@@ -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}}
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright 2014 Team 254. All Rights Reserved.
|
||||
// Copyright 2018 Team 254. All Rights Reserved.
|
||||
// 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
|
||||
|
||||
@@ -11,17 +11,17 @@ import (
|
||||
"net/http"
|
||||
)
|
||||
|
||||
// Renders the FTA diagnostic display.
|
||||
func (web *Web) ftaDisplayHandler(w http.ResponseWriter, r *http.Request) {
|
||||
// Renders the field monitor display.
|
||||
func (web *Web) fieldMonitorDisplayHandler(w http.ResponseWriter, r *http.Request) {
|
||||
if !web.userIsReader(w, r) {
|
||||
return
|
||||
}
|
||||
|
||||
if !web.enforceDisplayConfiguration(w, r, nil) {
|
||||
if !web.enforceDisplayConfiguration(w, r, map[string]string{"reversed": "false"}) {
|
||||
return
|
||||
}
|
||||
|
||||
template, err := web.parseFiles("templates/fta_display.html", "templates/base.html")
|
||||
template, err := web.parseFiles("templates/field_monitor_display.html")
|
||||
if err != nil {
|
||||
handleWebErr(w, err)
|
||||
return
|
||||
@@ -29,15 +29,15 @@ func (web *Web) ftaDisplayHandler(w http.ResponseWriter, r *http.Request) {
|
||||
data := struct {
|
||||
*model.EventSettings
|
||||
}{web.arena.EventSettings}
|
||||
err = template.ExecuteTemplate(w, "base_no_navbar", data)
|
||||
err = template.ExecuteTemplate(w, "field_monitor_display.html", data)
|
||||
if err != nil {
|
||||
handleWebErr(w, err)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// The websocket endpoint for the FTA display client to receive status updates.
|
||||
func (web *Web) ftaDisplayWebsocketHandler(w http.ResponseWriter, r *http.Request) {
|
||||
// The websocket endpoint for the field monitor display client to receive status updates.
|
||||
func (web *Web) fieldMonitorDisplayWebsocketHandler(w http.ResponseWriter, r *http.Request) {
|
||||
if !web.userIsReader(w, r) {
|
||||
return
|
||||
}
|
||||
34
web/field_monitor_display_test.go
Normal file
34
web/field_monitor_display_test.go
Normal 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")
|
||||
}
|
||||
@@ -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")
|
||||
}
|
||||
@@ -142,8 +142,8 @@ func (web *Web) newHandler() http.Handler {
|
||||
router.HandleFunc("/displays/announcer/websocket", web.announcerDisplayWebsocketHandler).Methods("GET")
|
||||
router.HandleFunc("/displays/audience", web.audienceDisplayHandler).Methods("GET")
|
||||
router.HandleFunc("/displays/audience/websocket", web.audienceDisplayWebsocketHandler).Methods("GET")
|
||||
router.HandleFunc("/displays/fta", web.ftaDisplayHandler).Methods("GET")
|
||||
router.HandleFunc("/displays/fta/websocket", web.ftaDisplayWebsocketHandler).Methods("GET")
|
||||
router.HandleFunc("/displays/field_monitor", web.fieldMonitorDisplayHandler).Methods("GET")
|
||||
router.HandleFunc("/displays/field_monitor/websocket", web.fieldMonitorDisplayWebsocketHandler).Methods("GET")
|
||||
router.HandleFunc("/displays/pit", web.pitDisplayHandler).Methods("GET")
|
||||
router.HandleFunc("/displays/pit/websocket", web.pitDisplayWebsocketHandler).Methods("GET")
|
||||
router.HandleFunc("/displays/queueing", web.queueingDisplayHandler).Methods("GET")
|
||||
|
||||
Reference in New Issue
Block a user