Merge pull request #5 from team751/allianceStationAnimation

Add animate.css and add rubberband animation to alliance display
This commit is contained in:
Patrick Fairbank
2015-03-15 13:19:28 -07:00
3 changed files with 3171 additions and 2 deletions

3158
static/css/animate.css vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -6,6 +6,7 @@
var allianceStation = "";
var blinkInterval;
var currentScreen = "blank";
var animationName = "rubberBand"; // See https://github.com/daneden/animate.css for more
var websocket;
// Handles a websocket message to change which screen is displayed.
@@ -49,11 +50,20 @@ var handleSetMatch = function(data) {
$("#teamNumber").text("");
$("#teamName").attr("data-alliance-bg", allianceStation[0]).text("");
}
animateTeamNumber();
} else {
$("body").attr("data-mode", "displayId");
}
};
function animateTeamNumber() {
$("#teamNumber").addClass(animationName);
setTimeout(function() {
$("#teamNumber").removeClass(animationName);
}, 1500);
}
// Handles a websocket message to update the team connection status.
var handleStatus = function(data) {
stationStatus = data.AllianceStations[allianceStation];
@@ -117,7 +127,7 @@ $(function() {
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); },

View File

@@ -11,13 +11,14 @@
<link rel="shortcut icon" href="/static/img/favicon32.png">
<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/animate.css" />
<link rel="stylesheet" href="/static/css/alliance_station_display.css" />
</head>
<body>
<div id="displayId" class="mode"></div>
<div id="match" class="mode">
<div id="preMatch">
<div id="teamNumber"></div>
<div id="teamNumber" class="animated"></div>
<div id="teamName" class='databar'></div>
<div id="disabled" class='databar'>DISABLED</div>
</div>