Optimize field monitor display for mobile and distant viewing.

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

View File

@@ -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>

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}}

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}}