Implement clock

virtual_metro/__init__.py

@@ -47,6 +47,7 @@ def index():
 def latest():
 	timenow = pytz.utc.localize(datetime.utcnow()).astimezone(timezone)
 	result = {}
+	result['time_offset'] = timenow.utcoffset().total_seconds()
 	
 	departures = do_request('/v3/departures/route_type/{}/stop/{}'.format(ROUTE_TYPE, flask.request.args['stop_id']), {'platform_numbers': flask.request.args['plat_id'], 'max_results': '5', 'expand': 'all'})
 	departures['departures'].sort(key=lambda x: x['scheduled_departure_utc'])

virtual_metro/static/template.svg

@@ -29,7 +29,7 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="0.7"
-     inkscape:cx="989.80651"
+     inkscape:cx="1809.3071"
      inkscape:cy="258.31501"
      inkscape:document-units="mm"
      inkscape:current-layer="layer2"
@@ -517,7 +517,7 @@
          id="tspan970"
          sodipodi:role="line">{{min}}</tspan></text>
     <text
-       id="text994"
+       id="time"
        y="266.71338"
        x="543.94397"
        style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:27.3508606px;line-height:1.25;font-family:'Arial';-inkscape-font-specification:'Arial, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;display:inline;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.13961673"

virtual_metro/templates/index.html

@@ -46,25 +46,50 @@
 			var stop_id = parseInt(getQueryVariable("stop_id", 1099));
 			var plat_id = parseInt(getQueryVariable("plat_id", 1));
 			
+			var svg = null;
+			var svg_time = null;
+			var template = null;
+			var time_offset = null;
+			
 			function start() {
-				var svg = document.getElementById("mainsvg").getSVGDocument().querySelector("svg");
+				svg = document.getElementById("mainsvg").getSVGDocument().querySelector("svg");
-				var template = svg.innerHTML;
+				template = svg.innerHTML;
 				
 				svg.innerHTML = nunjucks.renderString(template, {"dest": "Loading..."});
 				
-				function tick() {
+				tickTrains();
-					var xhr = new XMLHttpRequest();
+				window.setInterval(tickTrains, 30000);
-					xhr.addEventListener("load", function() {
+			}
-						var result = JSON.parse(xhr.responseText);
+			
-						svg.innerHTML = nunjucks.renderString(template, result);
+			function tickTrains() {
-						document.getElementById("stopinfo").innerText = stop_id + " (" + result.stop_name + ")";
+				var xhr = new XMLHttpRequest();
-					});
+				xhr.addEventListener("load", function() {
-					xhr.open("GET", "latest?stop_id=" + stop_id + "&plat_id=" + plat_id);
+					var result = JSON.parse(xhr.responseText);
-					xhr.send();
+					
-				}
+					svg.innerHTML = nunjucks.renderString(template, result);
-				
+					svg_time = document.getElementById("mainsvg").getSVGDocument().querySelector("#time tspan");
-				tick();
+					
-				window.setInterval(tick, 30000);
+					document.getElementById("stopinfo").innerText = stop_id + " (" + result.stop_name + ")";
+					
+					if (time_offset === null) {
+						time_offset = result.time_offset;
+						tickTime();
+						window.setInterval(tickTime, 1000);
+					}
+				});
+				xhr.open("GET", "latest?stop_id=" + stop_id + "&plat_id=" + plat_id);
+				xhr.send();
+			}
+			
+			function tickTime() {
+				var time = new Date(new Date().getTime() + time_offset * 1000);
+				var hour = time.getUTCHours() % 12;
+				if (hour === 0) hour = 12;
+				var minute = time.getUTCMinutes();
+				if (minute < 10) minute = "0" + minute;
+				var second = time.getUTCSeconds();
+				if (second < 10) second = "0" + second;
+				svg_time.innerHTML = hour + ":" + minute + ":" + second;
 			}
 			
 			function changePlatform() {