Created css and added functionality to mark busses leaving soon.

infoscreen/static/css/hsl.css

@@ -0,0 +1,41 @@
+table {
+    font-size: 3vw;
+    font-family: monospace;
+}
+.red {
+    color: red;
+    -webkit-animation-name: blinker;
+    -webkit-animation-duration: 2s;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+                            
+    -moz-animation-name: blinker;
+    -moz-animation-duration: 2s;
+    -moz-animation-timing-function: linear;
+    -moz-animation-iteration-count: infinite;
+                                            
+    animation-name: blinker;
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+.black {
+    color: black;
+}
+@-moz-keyframes blinker {  
+    0% { opacity: 1.0; }
+    50% { opacity: 0.1; }
+    100% { opacity: 1.0; }
+}
+
+@-webkit-keyframes blinker {  
+    0% { opacity: 1.0; }
+    50% { opacity: 0.1; }
+    100% { opacity: 1.0; }
+}
+
+@keyframes blinker {  
+    0% { opacity: 1.0; }
+    50% { opacity: 0.1; }
+    100% { opacity: 1.0; }
+}

infoscreen/static/html/hsl.html

@@ -1,5 +1,6 @@
+<link rel="stylesheet" href="/static/css/hsl.css">
 <div ng-app="myApp" ng-controller="timetableCtrl">
-<table class="table">
+<table class="table table-striped">
     <thead>
 	    <tr>
 		<th>
@@ -17,8 +18,8 @@
 	    </tr>
     </thead>
     <tbody>
-    <tr ng-repeat="x in arr | orderBy: ['date','time'] | limitTo: 15">
-        <td>
+    <tr ng-repeat="x in arr | orderBy: ['date','time'] | limitTo: 10">
+        <td ng-class='{red : x.hurry, black: !x.hurry}'>
             {{x.time}}
         </td>
         <td>

infoscreen/static/js/infoscreen_controllers.js

@@ -95,10 +95,6 @@ app.controller('timetableCtrl',
                     var line = stop['departures'][lineIndex];
                     var time=line['time'];
                     date=line['date'];
-                    if(time<1000)
-                        var unit = 1;
-                    else
-                        var unit = 2;
                     var hours= Math.floor(line['time']/100);
                     if(hours>=24){
                         hours-=24;
@@ -113,7 +109,8 @@ app.controller('timetableCtrl',
                           "bus":code,
                           "date":date,
                           "time":pad(hours,2)+":"+pad(minutes,2),
-                          "laststop":dict[line['code']].split(",")[0].split(" l.")[0]
+                          "laststop":dict[line['code']].split(",")[0].split(" l.")[0],
+                          "hurry":false
                          };
                     var trigger=true;
                     for(var objectIndex= $scope.arr.length-1;objectIndex>=0;objectIndex--)
@@ -141,21 +138,22 @@ app.controller('timetableCtrl',
             delOld();
         }
         function delOld(){
+            var toSoon=5;
+            var hurry=10;
             f= new Date();
             for(var a=$scope.arr.length-1; a>=0; a--){
-                if( $scope.arr[a]['time']<1000)
-                    var unit = 1;
-                else
-                    var unit = 2;
                 var time=$scope.arr[a]['time'].split(":");
                 date=$scope.arr[a]['date'].toString();
                 d= new Date(f);
                 d.setFullYear(date.substring(0,4),date.substring(4,6)-1,date.substring(6,8));
                 d.setHours(time[0]);
                 d.setMinutes(time[1]);
-                if(d < f){
+                var diff=(d.getTime()-f.getTime());
+                if(diff < toSoon*60000)
                     $scope.arr.splice(a,1);
-                }
+                else if(diff < hurry*60000)
+                    $scope.arr[a]['hurry']=true;
+
             }
         }
         load();