Adding favicon animation and color codes

front/src/js/controllers/queueCtrl.js

@@ -5,6 +5,16 @@ queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs'
 
     var numberOfTries = 0;
     
+    var favicon = document.querySelector('link[rel=icon]');
+    var faviconUrl = 'img/favicon.png';
+    var faviconSuccessUrl = 'img/favicon-success.png';
+    var faviconFailUrl = 'img/favicon-fail.png';
+    var faviconInterval = null;
+    var faviconCounter = 0;
+    var faviconCanvas = null;
+    var faviconCanvasContext = null;
+    var faviconImage = null;
+    
     function getRunStatus () {
         Runs.get({runId: $scope.runId}, function(data) {
             $scope.url = data.params.url;
@@ -15,23 +25,30 @@ queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs'
 
             if (data.status.statusCode === 'awaiting') {
                 numberOfTries ++;
+                rotateFavicon();
 
                 // Retrying every 2 seconds (and increasing the delay a bit more each time)
                 setTimeout(getRunStatus, 2000 + (numberOfTries * 100));
 
             } else if (data.status.statusCode === 'running') {
                 numberOfTries ++;
+                rotateFavicon();
 
                 // Retrying every second or so
                 setTimeout(getRunStatus, 1000 + (numberOfTries * 10));
 
             } else if (data.status.statusCode === 'complete') {
+                stopFavicon(true);
+
                 $location.path('/result/' + $scope.runId).replace();
             } else {
-                // Handled by the view
+                stopFavicon(false);
+
+                // The rest is handled by the view
             }
         }, function(response) {
             if (response.status === 404) {
+                stopFavicon(false);
                 $scope.notFound = true;
                 $scope.connectionLost = false;
             } else if (response.status === 0) {
@@ -42,6 +59,39 @@ queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs'
             }
         });
     }
+
+    function rotateFavicon() {
+        if (!faviconInterval) {
+            faviconImage = new Image();
+            faviconImage.onload = function() {
+                faviconCanvas = document.getElementById('faviconRotator');
+                faviconCanvasContext = faviconCanvas.getContext('2d');
+                faviconCanvasContext.fillStyle = '#212240';
+                
+                if (!!faviconCanvasContext) {
+                    faviconInterval = window.setInterval(faviconTick, 1000);
+                }
+            };
+            faviconImage.src = faviconUrl;
+        }
+    }
+
+    function faviconTick() {
+        faviconCounter ++;
+        faviconCanvasContext.save();
+        faviconCanvasContext.fillRect(0, 0, 32, 32);
+        faviconCanvasContext.translate(16, 16);
+        faviconCanvasContext.rotate(45 * faviconCounter * Math.PI / 180);
+        faviconCanvasContext.translate(-16, -16);
+        faviconCanvasContext.drawImage(faviconImage, 0, 0, 32, 32);
+        faviconCanvasContext.restore();
+        favicon.href = faviconCanvas.toDataURL('image/png');
+    }
+
+    function stopFavicon(isSuccess) {
+        window.clearInterval(faviconInterval);
+        favicon.href = isSuccess ? faviconSuccessUrl : faviconFailUrl;
+    }
     
     getRunStatus();
 }]);

front/src/views/queue.html

@@ -42,4 +42,5 @@
 <div ng-if="connectionLost == true">
     <div class="status">Connection lost with server</div>
     <p class="statusSubMessage">Check your wifi cable, or maybe YellowLab.tools is rebooting.</p>
-</div>
+</div>
+<canvas id="faviconRotator" hidden width=32 height=32></canvas>