Moved the UI control functions into their own .js include file
jonsowman
rodzic
16db92d0ed
commit
bbfc8fad8c
|
|
@ -40,6 +40,7 @@ google.load("jqueryui", "1.8.1");
|
||||||
<script src="js/date.jsport.js" type="text/javascript"></script>
|
<script src="js/date.jsport.js" type="text/javascript"></script>
|
||||||
<script src="js/config.js" type="text/javascript"></script>
|
<script src="js/config.js" type="text/javascript"></script>
|
||||||
<script src="js/pred.js" type="text/javascript"></script>
|
<script src="js/pred.js" type="text/javascript"></script>
|
||||||
|
<script src="js/pred-ui.js" type="text/javascript"></script>
|
||||||
<script src="js/calc.js" type="text/javascript"></script>
|
<script src="js/calc.js" type="text/javascript"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -144,6 +145,7 @@ google.load("jqueryui", "1.8.1");
|
||||||
|
|
||||||
<!-- burst calculator window -->
|
<!-- burst calculator window -->
|
||||||
<div id="burst-calc-wrapper" class="box ui-corner-all">
|
<div id="burst-calc-wrapper" class="box ui-corner-all">
|
||||||
|
<img src="images/drag_handle.png" class="handle" />
|
||||||
<div id="burst-calc">
|
<div id="burst-calc">
|
||||||
<b>Burst Calculator</b>
|
<b>Burst Calculator</b>
|
||||||
<br>
|
<br>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
/*
|
||||||
|
* CUSF Landing Prediction Version 2
|
||||||
|
* Jon Sowman 2010
|
||||||
|
* jon@hexoc.com
|
||||||
|
* http://www.hexoc.com
|
||||||
|
*
|
||||||
|
* http://github.com/jonsowman/cusf-standalone-predictor
|
||||||
|
*
|
||||||
|
* This file contains javascript functions related to the handling
|
||||||
|
* of the user interface for the predictor.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Initialise the UI - this must be called on document ready
|
||||||
|
function initUI() {
|
||||||
|
// Make UI elements such as windows draggable
|
||||||
|
$("#input_form").draggable({containment: '#map_canvas', handle:
|
||||||
|
'img.handle', snap: '#map_canvas'});
|
||||||
|
$("#scenario_info").draggable({containment: '#map_canvas', handle:
|
||||||
|
'img.handle', snap: '#map_canvas'});
|
||||||
|
$("#location_save").draggable({containment: '#map_canvas', handle:
|
||||||
|
'img.handle', snap: '#map_canvas'});
|
||||||
|
$("#location_save_local").draggable({containment: '#map_canvas', handle:
|
||||||
|
'img.handle', snap: '#map_canvas'});
|
||||||
|
$("#burst-calc-wrapper").draggable({containment: '#map_canvas', handle:
|
||||||
|
'img.handle', snap: '#map_canvas'});
|
||||||
|
|
||||||
|
// Activate buttons to jqueryui styling
|
||||||
|
$("#run_pred_btn").button();
|
||||||
|
$("#req_sub_btn").button();
|
||||||
|
$("#burst-calc-use").button();
|
||||||
|
$("#burst-calc-close").button();
|
||||||
|
$("#burst-calc-advanced-show").button();
|
||||||
|
$("#burst-calc-advanced-hide").button();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Throw an error window containing <data> and a 'close' link
|
||||||
|
function throwError(data) {
|
||||||
|
$("#error_message").html(data);
|
||||||
|
$("#error_window").fadeIn();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset the GUI to a onLoad state ready for a new prediction to be shown
|
||||||
|
function resetGUI() {
|
||||||
|
$("#status_message").fadeOut(500);
|
||||||
|
// now clear the status window
|
||||||
|
$("#prediction_status").html("");
|
||||||
|
$("#prediction_progress").progressbar("options", "value", 0);
|
||||||
|
$("#prediction_percent").html("");
|
||||||
|
$("#cursor_pred").hide();
|
||||||
|
// bring the input form back up
|
||||||
|
toggleWindow("input_form", null, null, null, "show");
|
||||||
|
toggleWindow("scenario_info", null, null, null, "show");
|
||||||
|
// un-fade the map canvas
|
||||||
|
$("#map_canvas").fadeTo(1500, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Append a line to the debug window and scroll the window to the bottom
|
||||||
|
// Optional boolean second argument will clear the debug window if TRUE
|
||||||
|
function appendDebug(appendage, clear) {
|
||||||
|
if ( clear == null ){
|
||||||
|
var curr = $("#debuginfo").html();
|
||||||
|
curr += "<br>" + appendage;
|
||||||
|
$("#debuginfo").html(curr);
|
||||||
|
} else {
|
||||||
|
$("#debuginfo").html("");
|
||||||
|
}
|
||||||
|
// keep the debug window scrolled to bottom
|
||||||
|
scrollToBottom("scenario_template");
|
||||||
|
}
|
||||||
|
|
||||||
|
// A function to scroll a scrollable <div> all the way to the bottom
|
||||||
|
function scrollToBottom(div_id) {
|
||||||
|
$("#"+div_id).animate({scrollTop: $("#"+div_id)[0].scrollHeight});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show or hide GUI windows, can either "toggle", or force hide/show
|
||||||
|
// Takes the window name, the linker ID, the event handlers for
|
||||||
|
// 'onhide' and 'onshow', and a boolean 'force' parameter
|
||||||
|
function toggleWindow(window_name, linker, onhide, onshow, force) {
|
||||||
|
if ( force == null ) {
|
||||||
|
if( $("#"+window_name).css('display') != "none" ){
|
||||||
|
$("#"+window_name+"").hide("slide", { direction: "down" }, 500);
|
||||||
|
$("#"+linker).html(onhide);
|
||||||
|
} else {
|
||||||
|
$("#"+window_name).show("slide", { direction: "down" }, 500);
|
||||||
|
$("#"+linker).html(onshow);
|
||||||
|
}
|
||||||
|
} else if ( force == "hide" ) {
|
||||||
|
if( $("#"+window_name).css('display') != "none" ){
|
||||||
|
$("#"+window_name+"").hide("slide", { direction: "down" }, 500);
|
||||||
|
$("#"+linker).html(onhide);
|
||||||
|
}
|
||||||
|
} else if ( force == "show") {
|
||||||
|
if( $("#"+window_name).css('display') == "none" ){
|
||||||
|
$("#"+window_name).show("slide", { direction: "down" }, 500);
|
||||||
|
$("#"+linker).html(onshow);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
appendDebug("toggleWindow force parameter unrecognised");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the selected item to "Other" in the launch locations selector
|
||||||
|
function SetSiteOther() {
|
||||||
|
$("#site").val("Other");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -24,18 +24,7 @@ $(document).ready(function() {
|
||||||
initMap(52, 0, 8);
|
initMap(52, 0, 8);
|
||||||
populateLaunchSite();
|
populateLaunchSite();
|
||||||
setupEventHandlers();
|
setupEventHandlers();
|
||||||
|
initUI();
|
||||||
// Make launch card draggable
|
|
||||||
$("#input_form").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
|
|
||||||
$("#scenario_info").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
|
|
||||||
$("#location_save").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
|
|
||||||
$("#location_save_local").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
|
|
||||||
$("#run_pred_btn").button();
|
|
||||||
$("#req_sub_btn").button();
|
|
||||||
$("#burst-calc-use").button();
|
|
||||||
$("#burst-calc-close").button();
|
|
||||||
$("#burst-calc-advanced-show").button();
|
|
||||||
$("#burst-calc-advanced-hide").button();
|
|
||||||
|
|
||||||
// see if we want an old prediction displayed
|
// see if we want an old prediction displayed
|
||||||
if ( current_uuid != '0' ) {
|
if ( current_uuid != '0' ) {
|
||||||
|
|
@ -153,11 +142,6 @@ function changeLaunchSite() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function throwError(data) {
|
|
||||||
$("#error_message").html(data);
|
|
||||||
$("#error_window").fadeIn();
|
|
||||||
}
|
|
||||||
|
|
||||||
function writePredictionInfo(current_uuid, run_time, gfs_timestamp) {
|
function writePredictionInfo(current_uuid, run_time, gfs_timestamp) {
|
||||||
// populate the download links
|
// populate the download links
|
||||||
$("#dlcsv").attr("href", "preds/"+current_uuid+"/flight_path.csv");
|
$("#dlcsv").attr("href", "preds/"+current_uuid+"/flight_path.csv");
|
||||||
|
|
@ -229,21 +213,6 @@ function getJSONProgress(pred_uuid) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetGUI() {
|
|
||||||
$("#status_message").fadeOut(500);
|
|
||||||
// now clear the status window
|
|
||||||
$("#prediction_status").html("");
|
|
||||||
$("#prediction_progress").progressbar("options", "value", 0);
|
|
||||||
$("#prediction_percent").html("");
|
|
||||||
$("#cursor_pred").hide();
|
|
||||||
// bring the input form back up
|
|
||||||
toggleWindow("input_form", null, null, null, "show");
|
|
||||||
toggleWindow("scenario_info", null, null, null, "show");
|
|
||||||
// un-fade the map canvas
|
|
||||||
$("#map_canvas").fadeTo(1500, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function processProgress(progress) {
|
function processProgress(progress) {
|
||||||
if ( progress['error'] ) {
|
if ( progress['error'] ) {
|
||||||
clearInterval(ajaxEventHandle);
|
clearInterval(ajaxEventHandle);
|
||||||
|
|
@ -536,45 +505,7 @@ function getAssocSize(arr) {
|
||||||
return i;
|
return i;
|
||||||
}
|
}
|
||||||
|
|
||||||
function appendDebug(appendage, clear) {
|
|
||||||
if ( clear == null ){
|
|
||||||
var curr = $("#debuginfo").html();
|
|
||||||
curr += "<br>" + appendage;
|
|
||||||
$("#debuginfo").html(curr);
|
|
||||||
} else {
|
|
||||||
$("#debuginfo").html("");
|
|
||||||
}
|
|
||||||
// keep the debug window scrolled to bottom
|
|
||||||
scrollToBottom("scenario_template");
|
|
||||||
}
|
|
||||||
|
|
||||||
function scrollToBottom(div_id) {
|
|
||||||
$("#"+div_id).animate({scrollTop: $("#"+div_id)[0].scrollHeight});
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleWindow(window_name, linker, onhide, onshow, force) {
|
|
||||||
if ( force == null ) {
|
|
||||||
if( $("#"+window_name).css('display') != "none" ){
|
|
||||||
$("#"+window_name+"").hide("slide", { direction: "down" }, 500);
|
|
||||||
$("#"+linker).html(onhide);
|
|
||||||
} else {
|
|
||||||
$("#"+window_name).show("slide", { direction: "down" }, 500);
|
|
||||||
$("#"+linker).html(onshow);
|
|
||||||
}
|
|
||||||
} else if ( force == "hide" ) {
|
|
||||||
if( $("#"+window_name).css('display') != "none" ){
|
|
||||||
$("#"+window_name+"").hide("slide", { direction: "down" }, 500);
|
|
||||||
$("#"+linker).html(onhide);
|
|
||||||
}
|
|
||||||
} else if ( force == "show") {
|
|
||||||
if( $("#"+window_name).css('display') == "none" ){
|
|
||||||
$("#"+window_name).show("slide", { direction: "down" }, 500);
|
|
||||||
$("#"+linker).html(onshow);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
appendDebug("toggleWindow force parameter unrecognised");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function initMap(centre_lat, centre_lon, zoom_level) {
|
function initMap(centre_lat, centre_lon, zoom_level) {
|
||||||
// make the map and set center
|
// make the map and set center
|
||||||
|
|
@ -863,10 +794,6 @@ function POSIXtoHM(timestamp, format) {
|
||||||
return str;
|
return str;
|
||||||
}
|
}
|
||||||
|
|
||||||
function SetSiteOther() {
|
|
||||||
$("#site").val("Other");
|
|
||||||
}
|
|
||||||
|
|
||||||
rad = function(x) {return x*Math.PI/180;}
|
rad = function(x) {return x*Math.PI/180;}
|
||||||
|
|
||||||
distHaversine = function(p1, p2, precision) {
|
distHaversine = function(p1, p2, precision) {
|
||||||
|
|
|
||||||
Ładowanie…
Reference in New Issue