Make roofcam update every 5 minutes and have no html default

content/js/meteorogram/plot/update.js

@@ -47,15 +47,19 @@ function updateHeader(dataCache, unitCount, layoutUpdates) {
 }
 
 
-
 function changeCamera() {
     var directions = {'north': 'east', 'east': 'south', 'south': 'west', 'west': 'north',};
     // Gets witch direction the current camera is showing.
     var newDirection = directions[document.getElementById('roofCam').src.split('/')[7]];
+    // Default to North on first load.
+    newDirection = newDirection ? newDirection : 'north';
     // Makes image update. Image updates every (about) 2 minutes and 15 seconds.
     document.getElementById('roofCam').alt = document.getElementById('dirText').innerHTML = newDirection;
+    var date = new Date();
+    // Update image every 5 minutes and let the final value be in seconds since epoch.
+    var formatted_date = Math.floor(date.getTime() / 1000 / 300) * 300;
     document.getElementById('roofCam').src = METOBS_API_URL + '/pub/cache/aoss/cameras/' + newDirection +
-                                             '/latest_orig.jpg?t=' + new Date().getTime();
+                                             '/latest_medium.jpg?t=' + formatted_date;
 }
 
 

content/pages/lobby_meteorogram.html

@@ -19,9 +19,8 @@
     <div id="row3" style="height: calc(93%/3); width: 100%">
         <div id="col1" style="float: left; height: 100%; width: calc(100%/3)"></div>
         <div id="col2" style="float: left; height: 100%; width: calc(100%/3); position: relative">
-            <img id="roofCam" src="/pub/cache/aoss/cameras/west/latest_orig.jpg"
-                 alt="west" style="Cache-Control: no-store; height: 100%; width: 100%;">
-            <div id="dirText" style="position: absolute; bottom: 0%; right: 0%; font-size: .5vh; background-color: black; color: white">west</div>
+            <img id="roofCam" alt="west" style="Cache-Control: no-store; height: 100%; width: 100%;">
+            <div id="dirText" style="position: absolute; bottom: 0%; right: 50%; font-size: .6vh; background-color: black; color: white">west</div>
         </div>
         <div id="col3" style="float: left; height: 100%; width: calc(100%/3)"></div>
     </div>