Working progress bar, clears old traces, closes #22 closes #16

jonsowman · May 30, 2010 · ef7d34d · ef7d34d
1 parent 4e2f1a2
commit ef7d34d
Show file tree

Hide file tree

Showing 17 changed files with 559 additions and 16 deletions.
diff --git a/predict/css/cupertino/images/ui-bg_diagonals-thick_90_eeeeee_40x40.png b/predict/css/cupertino/images/ui-bg_diagonals-thick_90_eeeeee_40x40.png
diff --git a/predict/css/cupertino/images/ui-bg_flat_15_cd0a0a_40x100.png b/predict/css/cupertino/images/ui-bg_flat_15_cd0a0a_40x100.png
diff --git a/predict/css/cupertino/images/ui-bg_glass_100_e4f1fb_1x400.png b/predict/css/cupertino/images/ui-bg_glass_100_e4f1fb_1x400.png
diff --git a/predict/css/cupertino/images/ui-bg_glass_50_3baae3_1x400.png b/predict/css/cupertino/images/ui-bg_glass_50_3baae3_1x400.png
diff --git a/predict/css/cupertino/images/ui-bg_glass_80_d7ebf9_1x400.png b/predict/css/cupertino/images/ui-bg_glass_80_d7ebf9_1x400.png
diff --git a/predict/css/cupertino/images/ui-bg_highlight-hard_100_f2f5f7_1x100.png b/predict/css/cupertino/images/ui-bg_highlight-hard_100_f2f5f7_1x100.png
diff --git a/predict/css/cupertino/images/ui-bg_highlight-hard_70_000000_1x100.png b/predict/css/cupertino/images/ui-bg_highlight-hard_70_000000_1x100.png
diff --git a/predict/css/cupertino/images/ui-bg_highlight-soft_100_deedf7_1x100.png b/predict/css/cupertino/images/ui-bg_highlight-soft_100_deedf7_1x100.png
diff --git a/predict/css/cupertino/images/ui-bg_highlight-soft_25_ffef8f_1x100.png b/predict/css/cupertino/images/ui-bg_highlight-soft_25_ffef8f_1x100.png
diff --git a/predict/css/cupertino/images/ui-icons_2694e8_256x240.png b/predict/css/cupertino/images/ui-icons_2694e8_256x240.png
diff --git a/predict/css/cupertino/images/ui-icons_2e83ff_256x240.png b/predict/css/cupertino/images/ui-icons_2e83ff_256x240.png
diff --git a/predict/css/cupertino/images/ui-icons_3d80b3_256x240.png b/predict/css/cupertino/images/ui-icons_3d80b3_256x240.png
diff --git a/predict/css/cupertino/images/ui-icons_72a7cf_256x240.png b/predict/css/cupertino/images/ui-icons_72a7cf_256x240.png
diff --git a/predict/css/cupertino/images/ui-icons_ffffff_256x240.png b/predict/css/cupertino/images/ui-icons_ffffff_256x240.png
diff --git a/predict/css/cupertino/jquery-ui-1.8.1.custom.css b/predict/css/cupertino/jquery-ui-1.8.1.custom.css
diff --git a/predict/css/pred.css b/predict/css/pred.css
@@ -11,6 +11,19 @@ body {
 /* The whoppping map in the centre */
 #map_canvas { width: 100%; height: 100%; }
 
+#status_message{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 400px;
+    height: 100px;
+    margin-left: -200px;
+    margin-top: -50px;
+    padding: 1em;
+    text-align: center;
+    display: none;
+}
+
 .box {
 	position: absolute; 
 	background-color: white; 

diff --git a/predict/index.php b/predict/index.php
@@ -15,31 +15,44 @@
     <head>
         <title>CUSF Landing Prediction 2 - GUI test</title>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAzpAeP4iTRyyvc3_y95bQZBSnyWegg1iFIOtWV3Ha3Qw-fH3UlBTg9lMAipYdJi6ac4b5hWAzBkkXgg"></script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <link href="css/pred.css" type="text/css" rel="stylesheet">
-<script src="js/jquery.js" type="text/javascript"></script>
+<link href="css/cupertino/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet">
+<script type="text/javascript">
+google.load("jquery", "1.4.2");
+google.load("jqueryui", "1.8.1");
+</script>
 <script src="js/jquery.form.js" type="text/javascript"></script>
 <script src="js/pred.js" type="text/javascript"></script>
 <script type="text/javascript">
 
 var ajaxEventHandle;
-var running_uuid;
+var running_uuid = '<?php
+if ( isset($_GET['uuid']) ) {
+    echo $_GET['uuid'];
+} else {
+    echo "0";
+}
+?>';
 
 function predSub() {
     appendDebug(null, 1); // clear debug window
     appendDebug("Sending data to server");
-    appendDebug("Downloading GRIB data for tile, this could take some time...");
-    appendDebug("Do NOT stop or refresh your browser.");
+    appendDebug("Attempting to start the predictor...");
+    // initialise progress bar
+    $("#prediction_progress").progressbar({ value: 0 });
+    $("#prediction_status").html("Sending data to server...");
+    $("#status_message").fadeIn(250);
 }
 
 function handlePred(pred_uuid) {
-    // Clear the debug window
-    appendDebug(null, 1);
+    $("#prediction_status").html("Downloading wind data...");
     appendDebug("Prediction running with uuid: " + pred_uuid);
     appendDebug("Attempting to download GFS data for prediction");
     // ajax to poll for progress
 
-    ajaxEventHandle = setInterval("getJSONProgress('"+pred_uuid+"')", 3000);
+    ajaxEventHandle = setInterval("getJSONProgress('"+pred_uuid+"')", 2000);
     appendDebug("Getting flight path from server....");
     //getCSV(pred_uuid);
 }
@@ -75,22 +88,31 @@ function processProgress(progress) {
         // get the progress of the wind data
         if ( progress['gfs_complete'] == true ) {
             if ( progress['pred_complete'] == true ) { // pred has finished
+                $("#prediction_status").html("Prediction finished.");
+                $("#status_message").fadeOut(500);
                 appendDebug("The predictor finished running.");
                 clearInterval(ajaxEventHandle); // clear calling this function
                 getCSV(running_uuid);
             } else if ( progress['pred_running'] != true ) {
+                $("#prediction_status").html("Waiting for predictor to run...");
                 appendDebug("Predictor not yet running...");
             } else if ( progress['pred_running'] == true ) {
+                $("#prediction_status").html("Predictor running...");
                 appendDebug("Predictor currently running");
             }
         } else {
+            $("#prediction_progress").progressbar("option", "value",
+                progress['gfs_percent']);
+            $("#prediction_percent").html(progress['gfs_percent'] + 
+                "% - Estimated time remaining: " + progress['gfs_timeremaining']);
             appendDebug("Downloaded " + progress['gfs_percent'] + "%");
         }
     }
     return true;
 }
 
 var map;
+var map_items = [];
 var launch_img = "images/marker-sm-red.png";
 var land_img = "images/marker-sm-red.png";
 var burst_img = "images/pop-marker.png";
@@ -109,6 +131,7 @@ function initialize() {
         url: 'ajax.php?action=submitForm',
         type: 'POST',
         success: function(data) {
+            predSub();
             var data_split = data.split("|");
             if ( data_split[0] == 0 ) {
                 alert("Server error");
@@ -118,7 +141,7 @@ function initialize() {
             }
         }
     });
-    //if ( form_submitted ) handlePred(running_uuid);
+    // if ( running_uuid != 0 ) handlePred(running_uuid);
 }
 
 
@@ -157,7 +180,8 @@ function parseCSV(lines) {
         });
 
     appendDebug("Flight data parsed, creating map plot...");
-
+    clearMapItems();
+
     // make some nice icons
     var launch_icon = new google.maps.MarkerImage(launch_img,
         new google.maps.Size(16,16),
@@ -185,39 +209,59 @@ function parseCSV(lines) {
         title: 'Predicted Landing'
     });
 
-    // now add the launch/land markers to map
-    launch_marker.setMap(map);
-    land_marker.setMap(map);
-
     var path_polyline = new google.maps.Polyline({
         path:path,
+        map: map,
         strokeColor: '#000000',
         strokeWeight: 3,
         strokeOpacity: 0.75
     });
 
-    path_polyline.setMap(map);
-
     var pop_marker = new google.maps.Marker({
             position: max_point,
             map: map,
             icon: burst_img,
             title: 'Balloon burst (max. altitude: ' + max_height + 'm)',
     });
 
+    // now add the launch/land markers to map
+    map_items.push(launch_marker);
+    map_items.push(land_marker);
+    map_items.push(pop_marker);
+    map_items.push(path_polyline);
+
     return true;
 
 }
 
+function clearMapItems() {
+    appendDebug("Clearing previous map trace");
+    if(map_items) {
+        for(i in map_items) {
+            map_items[i].setMap(null);
+        }
+    }
+    map_items = [];
+}
+
 </script>
 </head>
 <body onload="initialize()">
-  <div id="map_canvas" style="width:100%; height:100%"></div>
+
+<div id="map_canvas" style="width:100%; height:100%"></div>
+
 <div id="scenario_template" class="box">
 <h1>Debug Window</h1>
 <span id="debuginfo">No Messages</span>
 </div>
 
+<div id="status_message" class="box">
+<div id="prediction_progress"></div>
+<div id="prediction_percent"></div>
+<br>
+<div id="prediction_status"></div>
+</div>
+
 <div id="input_form" class="box"> 
 <form action="" id="modelForm" name="modelForm">
 <table>