| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| |
| <!-- for Bootstrap --> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> |
| |
| <!-- still needed? --> |
| <script src="js/jquery.flot.min.js"></script> |
| <script src="js/json2.js"></script> |
| <script src="js/xmisc.js"></script> |
| |
| <!-- cmac related --> |
| <link rel="stylesheet" href="common.css"> |
| <script src='js2/dataList2.js'></script> |
| <script src='js2/varList.js'></script> |
| <script src='js2/common.js'></script> |
| |
| <title>Conditional Sampling 2 Var</title> |
| |
| <script> |
| |
| var Response = null; |
| var variable1 = ""; |
| var variable2 = ""; |
| |
| var naValue = "-999999"; |
| |
| // called on load or reload |
| window.onload = function() { |
| var str1 = data_block_str(1, 2, "Physical Variable (sampled variable)", |
| "", "500"); |
| document.getElementById("dataBlock1").innerHTML = str1; |
| |
| str1 = data_block_str(2, 2, "Environmental Variable (sampling variable)", |
| "", "500"); |
| document.getElementById("dataBlock2").innerHTML = str1; |
| |
| put_data(1); |
| put_data(2); |
| put_var(1); |
| put_var(2); |
| select_var(1); |
| select_var(2); |
| time_range2(); |
| fillMonth(); |
| |
| disable_download_button(); |
| |
| select_all_months(); |
| setDefault(1); |
| } |
| |
| // disable customized input text boxes |
| function setDefault(ID) |
| { |
| // alert("in setDefault(ID) ... "); |
| var x=document.getElementById("min"+ID); |
| var y=document.getElementById("max"+ID); |
| var z=document.getElementById("bins"+ID); |
| x.value = "N/A"; |
| x.disabled=true; |
| y.value = "N/A"; |
| y.disabled=true; |
| z.value = "N/A"; |
| z.disabled=true; |
| } |
| |
| // enable customized input text boxes |
| function setCustomized(ID) |
| { |
| // alert("in setCustomized() ... "); |
| var x=document.getElementById("min"+ID); |
| var y=document.getElementById("max"+ID); |
| var z=document.getElementById("bins"+ID); |
| x.value = ""; |
| x.disabled=false; |
| y.value = ""; |
| y.disabled=false; |
| z.value = ""; |
| z.disabled=false; |
| } |
| |
| $(document).ready(function(){ |
| |
| $("a").click(function(event){ |
| alert("As you can see, the link no longer took you to jquery.com"); |
| event.preventDefault(); |
| }); |
| |
| $("#download_data").click(function(event) { |
| var durl = $("#data_url").val(); |
| // alert(durl); |
| window.location.assign(durl); |
| }); |
| |
| |
| $("#conditionalSamp").click(function(event) { |
| // alert('****** inside conditionalSamp()!'); |
| Response = null; |
| |
| // no data to download yet |
| disable_download_button(); |
| |
| // flag error if no month box is checked |
| if (no_month_check()) { |
| // $("#Response").html("<span style='color:red'>Error: please check at least one month.</span>"); |
| $("#Response").html("Error: please check at least one month."); |
| $("#Image").html(""); |
| return; |
| } |
| |
| $("#Response").html("Calculating ..."); |
| $("#data_url").html("Calculating ..."); |
| $("#Image").html(""); |
| |
| // sample url: http://cmacws.jpl.nasa.gov:8090/svc/conditionalSampling?model1=ukmo_hadgem2-a&var1=ts&pres1=200&model2=ukmo_hadgem2-a&var2=clt&pres2=200&start_time=199001&end_time=199512&lon1=0&lon2=100&lat1=-29&lat2=29 |
| // form url string |
| // var url = "http://cmacws.jpl.nasa.gov:8090/svc/conditionalSamp?"; |
| var url = "http://" + window.location.hostname + ":9002/svc/conditionalSampling?"; |
| // alert("url: " + url); |
| |
| var d1 = $("#data1").val(); |
| var model1 = d1.replace("/", "_"); |
| model1 = model1.toLowerCase(); |
| |
| var arglist = ""; |
| arglist = arglist.concat("model1="); |
| arglist = arglist.concat(model1); |
| |
| // alert("arglist: " + arglist); |
| |
| var variable1 = $("#var1").val(); |
| arglist = arglist.concat("&var1="); |
| arglist = arglist.concat(variable1); |
| |
| // alert("arglist: " + arglist); |
| |
| |
| var t0 = $("#t0").val(); |
| var t1 = $("#t1").val(); |
| |
| t0 = t0.replace("-", ""); |
| t1 = t1.replace("-", ""); |
| |
| arglist = arglist.concat("&start_time="); |
| arglist = arglist.concat(t0); |
| |
| arglist = arglist.concat("&end_time="); |
| arglist = arglist.concat(t1); |
| |
| var lon0 = $("#lon0").val(); |
| var lon1 = $("#lon1").val(); |
| var lat0 = $("#lat0").val(); |
| var lat1 = $("#lat1").val(); |
| |
| arglist = arglist.concat("&lon1="); |
| arglist = arglist.concat(lon0); |
| |
| arglist = arglist.concat("&lon2="); |
| arglist = arglist.concat(lon1); |
| |
| arglist = arglist.concat("&lat1="); |
| arglist = arglist.concat(lat0); |
| |
| arglist = arglist.concat("&lat2="); |
| arglist = arglist.concat(lat1); |
| |
| // alert("arglist: " + arglist); |
| |
| |
| var press_range = $("#pres1").val(); |
| // alert("press_range: " + press_range); |
| |
| var pres12 = parse_pres(press_range); |
| |
| var pres1; |
| var pres2; |
| if (pres12 === naValue) { |
| pres1 = naValue; |
| pres2 = naValue; |
| } else { |
| split12 = pres12.split(","); |
| if (split12.length != 2) { |
| alert("pressure level range needs to be two values separated by comma."); |
| return; |
| } else { |
| pres1 = split12[0]; |
| pres2 = split12[1]; |
| |
| // when variable is the 3D Ocean Salinity or Ocean Temperature |
| if (variable1 == 'ot' || variable1 == 'os') { |
| pres1 = pres1 * 10000; // convert from dbar on GUI |
| pres2 = pres2 * 10000; // convert from dbar on GUI |
| } |
| // when variable2 is 3D atmosphere var |
| else { |
| pres1 = pres1 * 100; // convert from hPa on GUI |
| pres2 = pres2 * 100; // convert from hPa on GUI |
| } |
| } |
| } |
| // alert("pres1, pres2: " + pres1 + ", " + pres2); |
| |
| arglist = arglist.concat("&pres1="); |
| arglist = arglist.concat(pres1); |
| arglist = arglist.concat("&pres2="); |
| arglist = arglist.concat(pres2); |
| |
| // alert("arglist: " + arglist); |
| |
| var month_str = getMonthStr(); |
| arglist = arglist.concat("&months="); |
| arglist = arglist.concat(month_str); |
| |
| // alert("arglist: " + arglist); |
| |
| |
| var d2 = $("#data2").val(); |
| var model2 = d2.replace("/", "_"); |
| model2 = model2.toLowerCase(); |
| |
| arglist = arglist.concat("&model2="); |
| arglist = arglist.concat(model2); |
| |
| // alert("arglist: " + arglist); |
| |
| var variable2 = $("#var2").val(); |
| arglist = arglist.concat("&var2="); |
| arglist = arglist.concat(variable2); |
| |
| // alert("arglist: " + arglist); |
| |
| var plev1 = $("#pres2").val(); |
| plev1 = parse_pres(plev1); |
| |
| if (plev1>0) { |
| // when variable is the 3D Ocean Salinity or Ocean Temperature |
| if (variable2 == 'ot' || variable2 == 'os') { |
| plev1 = plev1 * 10000; // convert from dbar on GUI |
| } |
| // when variable2 is 3D atmosphere var |
| else { |
| plev1 = plev1 * 100; // convert from hPa on GUI |
| } |
| } |
| |
| arglist = arglist.concat("&env_var_plev="); |
| arglist = arglist.concat(plev1); |
| |
| // alert("arglist: " + arglist); |
| |
| var binstate1 = document.getElementById('radioDef1').checked; |
| |
| var binMin1, binMax1, numBins1; |
| |
| if (binstate1 == true) { // default |
| binMin1 = naValue; |
| binMax1 = naValue; |
| numBins1 = naValue; |
| } |
| else { // customized |
| binMin1 = $("#min1").val(); |
| binMax1 = $("#max1").val(); |
| numBins1 = $("#bins1").val(); |
| } |
| |
| arglist = arglist.concat("&bin_min="); |
| arglist = arglist.concat(binMin1); |
| arglist = arglist.concat("&bin_max="); |
| arglist = arglist.concat(binMax1); |
| arglist = arglist.concat("&bin_n="); |
| arglist = arglist.concat(numBins1); |
| |
| // alert("arglist: " + arglist); |
| |
| var xstate = document.getElementById('radioXLin').checked; |
| var xvalue; |
| |
| if (xstate == true) |
| xvalue = 0; |
| else |
| xvalue = 1; |
| |
| // alert("xvalue: " + xvalue); |
| |
| var ystate = document.getElementById('radioYLin').checked; |
| var yvalue; |
| |
| if (ystate == true) |
| yvalue = 0; |
| else |
| yvalue = 1; |
| |
| // alert("yvalue: " + yvalue); |
| |
| var zstate = document.getElementById('radioZLin').checked; |
| var zvalue; |
| |
| if (zstate == true) |
| zvalue = 0; |
| else |
| zvalue = 1; |
| |
| // alert("zvalue: " + zvalue); |
| |
| var dispOpt; |
| dispOpt = xvalue*1 + yvalue*2 + zvalue*4; |
| // alert("dispOpt: " + dispOpt); |
| var dispOptString = dispOpt.toString(); |
| |
| arglist = arglist.concat("&displayOpt="); |
| arglist = arglist.concat(dispOptString); |
| |
| var purpose = $("#purpose").val(); |
| arglist = arglist.concat("&purpose="); |
| arglist = arglist.concat(purpose); |
| |
| // alert("arglist: " + arglist); |
| |
| // url = url + encodeURIComponent(arglist); |
| url = url + encodeURI(arglist); |
| // url = url + arglist; |
| // alert("url: " + url); |
| |
| var urlTimeBounds = "http://" + window.location.hostname + ":9002/svc/two_time_bounds?"; |
| var arglistTB = ""; |
| arglistTB = arglistTB.concat("serviceType="); |
| arglistTB = arglistTB.concat("1"); |
| arglistTB = arglistTB.concat("&source1="); |
| arglistTB = arglistTB.concat(d1); |
| arglistTB = arglistTB.concat("&var1="); |
| arglistTB = arglistTB.concat(variable1); |
| arglistTB = arglistTB.concat("&source2="); |
| arglistTB = arglistTB.concat(d2); |
| arglistTB = arglistTB.concat("&var2="); |
| arglistTB = arglistTB.concat(variable2); |
| urlTimeBounds = urlTimeBounds + encodeURI(arglistTB); |
| // alert("urlTimeBounds: " + urlTimeBounds); |
| |
| $.ajax({ |
| type: "GET", |
| url: urlTimeBounds, |
| dataType: "json", |
| data: null, |
| success: function(data, textStatus, xhr) { |
| Response = data; |
| // alert("data: " + data); |
| if (data.success == false) { |
| // alert(data.error); |
| Response = null; |
| var text = JSON.stringify(data, null, 4); |
| text = "Error in backend: <br>" + text; |
| $("#Response").html(text); |
| $("#data_url").html(text); |
| return; |
| } |
| var text = JSON.stringify(data, null, 4); |
| // alert("text: " + text); |
| // $("#Response").html("<pre>"+text+"</pre>"); |
| // $("#Response").html(text); |
| |
| var tb1 = data.time_bounds1; |
| var bds1 = String(tb1).split(","); |
| // alert("tb1: " + tb1); |
| // alert("bds1: " + bds1); |
| var lowerT1 = parseInt(bds1[0]); |
| // alert("inside ajax, lowerT1: " + lowerT1); |
| var upperT1 = parseInt(bds1[1]); |
| // alert("upperT1: " + upperT1); |
| |
| var tb2 = data.time_bounds2; |
| var bds2 = String(tb2).split(","); |
| // alert("tb2: " + tb2); |
| // alert("bds2: " + bds2); |
| var lowerT2 = parseInt(bds2[0]); |
| // alert("inside ajax, lowerT2: " + lowerT2); |
| var upperT2 = parseInt(bds2[1]); |
| // alert("upperT2: " + upperT2); |
| |
| var t0I = parseInt(t0); |
| var t1I = parseInt(t1); |
| // alert("t0: " + t0I); |
| // alert("t1: " + t1I); |
| |
| var lowerT, upperT; |
| // compute the intersection of the two data bounds |
| |
| if (lowerT1 == 0 || upperT1 == 0){ // no data-1 |
| alert("We do not have data for the data-1 source and variable configuration."); |
| return; |
| } |
| else if (lowerT2 == 0 || upperT2 == 0){ // no data-2 |
| alert("We do not have data for the data-2 source and variable configuration."); |
| return; |
| } |
| else if (lowerT2 > upperT1 || lowerT1 > upperT2) { // no intersection |
| alert("The two data sets/vars do not have a common time range."); |
| return; |
| } |
| else { // compute intersection |
| if (lowerT1 > lowerT2) { // pick bigger lower time bound |
| lowerT = lowerT1; |
| } |
| else { |
| lowerT = lowerT2; |
| } |
| |
| if (upperT1 > upperT2) { // pick smaller upper time bound |
| upperT = upperT2; |
| } |
| else { |
| upperT = upperT1; |
| } |
| } |
| // alert("lowerT: " + lowerT); |
| // alert("upperT: " + upperT); |
| |
| if (t0I < lowerT && t1I < lowerT || |
| t0I > upperT && t1I > upperT) { |
| alert("We do not have data that span your time range. Try the range inside ["+lowerT+", "+upperT+"]."); |
| return; |
| } |
| |
| if (t0I < lowerT && t1I <= upperT) { |
| alert("Your start year-month is out of bound. It has to be in or later than " + lowerT + |
| ". We will use the range ["+lowerT+", "+t1I+"] for you."); |
| } |
| |
| if (t1I > upperT && t0I >= lowerT) { |
| alert("Your end year-month is out of bound. It has to be in or earlier than " + upperT + |
| ". We will use the range ["+t0I+", "+upperT+"] for you."); |
| } |
| |
| if (t0I < lowerT && t1I > upperT ) { |
| alert("Both of your start and end year-months are out of bounds. They have to be in or earlier than " + upperT + |
| ", and in or later than " + lowerT + ". We will use the range ["+lowerT+", "+upperT+"] for you."); |
| } |
| }, |
| error: function(xhr, textStatus, errorThrown) { |
| $("#Response").html("error!"); |
| $("#data_url").html("error!"); |
| // alert("xhr.status: "+xhr.status); |
| // alert("error status: "+textStatus); |
| }, |
| complete: function(xhr, textStatus) { |
| //alert("complete status: "+textStatus); |
| } |
| }); |
| |
| |
| $.ajax({ |
| type: "GET", |
| url: url, |
| dataType: "json", |
| data: null, |
| success: function(data, textStatus, xhr) { |
| Response = data; |
| // alert("data: " + data); |
| if (data.success == false) { |
| // alert(data.error); |
| Response = null; |
| var text = JSON.stringify(data, null, 4); |
| text = "Error in backend: <br>" + text; |
| // $("#Response").html("<span style='color:red'>" + text + "</span>"); |
| $("#Response").html(text); |
| $("#data_url").html(text); |
| return; |
| } |
| var text = JSON.stringify(data, null, 4); |
| // alert(text); |
| // $("#Response").html("<pre>"+text+"</pre>"); |
| $("#Response").html(text); |
| |
| var html = "<img src='"+data.url+"' width='820'/>"; |
| // alert(html); |
| $("#Image").html(html); |
| |
| // post dataUrl to textarea and enable download button |
| $("#data_url").html(data.dataUrl); |
| enable_download_button(); |
| }, |
| error: function(xhr, textStatus, errorThrown) { |
| $("#Response").html("error!"); |
| $("#data_url").html("error!"); |
| // alert("xhr.status: "+xhr.status); |
| // alert("error status: "+textStatus); |
| }, |
| complete: function(xhr, textStatus) { |
| //alert("complete status: "+textStatus); |
| } |
| }); |
| |
| }); |
| |
| }); |
| |
| </script> |
| </head> |
| |
| <body> |
| <div class="container-fluid"> |
| <div class="row center1"> |
| <div class="col-sm-8 col-sm-offset-2 col-xs-12 color-head"> |
| <h3>Service: Conditional Sampling with One Variable</h3> |
| This service sorts one variable by the values of another variable (environmental condition, e.g. SST) |
| and displays the averaged value of the first variable as a function of the bin value of the second variable. |
| If the first variable is a two-dimensional variable, the plot will be a X-Y plot. |
| If the first variable is a three-dimensional variable, the plot will be a colored profile image. |
| </div> <!-- col-sm --> |
| <div class="col-sm-offset-2"> |
| </div> <!-- col-sm --> |
| </div> <!-- row center1 --> |
| |
| <div class="row level0"> |
| <div class="col-sm-12 col-lg-12 level0 color0"> |
| <div id="dataBlock1"> |
| </div> |
| </div> <!-- col level0 --> |
| |
| <div class="col-sm-12 col-lg-12 level0 color1"> |
| <div id="dataBlock2"> |
| </div> |
| |
| <div class="row row1"> |
| <div class="col-sm-4 right1"> |
| sampling variable binning specification: |
| </div> |
| <div class="col-sm-8 left1"> |
| default: <input onclick="setDefault(1)" type="radio" name="default1" value="" id="radioDef1" checked> |
| customized: <input onclick="setCustomized(1)" type="radio" name="default1" value="" id="radioCus1"> |
| </div> |
| </div> |
| |
| <div class="row"> |
| <div class="col-sm-4 right1"> |
| </div> |
| <div class="col-sm-8 left1"> |
| Min: <input id="min1" value="" alt="" size=3/> |
| Max: <input id="max1" value="" alt="" size=3/> |
| number of bins: <input id="bins1" value="" alt="" size=3/> |
| </div> |
| </div> |
| </div> <!-- col level0 --> |
| |
| </div> <!-- row level0 --> |
| |
| <div class="color3"> |
| <div class="row center1 subtitle1" > |
| Data Subsetting |
| </div> <!-- row --> |
| <div class="row"> |
| <div class="col-sm-4 right1"> |
| <div id="monthSelect0"></div> |
| </div> |
| <div class="col-sm-8 left1"> |
| <div id="monthSelect"></div> |
| </div> |
| </div> <!-- row --> |
| |
| <div class="row"> |
| <div class="col-sm-4 right1"> |
| <div id=startYear>start year-month:</div> |
| </div> |
| <div class="col-sm-2 left1"> |
| <input id="t0" value="2004-01" alt="start"/> |
| </div> |
| |
| <div class="col-sm-4 right1"> |
| <div id=endYear>end year-month:</div> |
| </div> |
| <div class="col-sm-2 left1"> |
| <input id="t1" value="2004-12" alt="start"/> |
| </div> |
| </div> <!-- row --> |
| |
| <div class="row"> |
| <div class="col-sm-4 right1"> |
| start lon (deg): |
| </div> |
| <div class="col-sm-2 left1"> |
| <input id="lon0" value="0"/> |
| </div> |
| <div class="col-sm-4 right1"> |
| end lon (deg): |
| </div> |
| <div class="col-sm-2 left1"> |
| <input id="lon1" value="360"/> |
| </div> |
| </div> <!-- row --> |
| |
| <div class="row"> |
| <div class="col-sm-4 right1"> |
| start lat (deg): |
| </div> |
| <div class="col-sm-2 left1"> |
| <input id="lat0" value="-90"/> |
| </div> |
| <div class="col-sm-4 right1"> |
| end lat (deg): |
| </div> |
| <div class="col-sm-2 left1"> |
| <input id="lat1" value="90"/> |
| </div> |
| </div> <!-- row --> |
| |
| </div> <!-- color3 --> |
| |
| <div class="color2"> |
| <div class="row"> |
| <div class="col-sm-12 center1 subtitle1"> |
| Display Options: |
| </div> |
| </div> |
| |
| <div class="row"> |
| <div class="col-sm-6 right1"> |
| X-axis (sampling variable) scale: |
| </div> |
| <div class="col-sm-6 left1"> |
| <form><input type="radio" name="scale1" value="linear" id="radioXLin" checked>linear |
| <input type="radio" name="scale1" value="logarithmic" id="radioXLog">logarithmic |
| </form> |
| </div> |
| </div> <!-- row --> |
| |
| <div class="row"> |
| <div class="col-sm-6 right1"> |
| y-axis (sampling variable or pressure) scale: |
| </div> |
| <div class="col-sm-6 left1"> |
| <form><input type="radio" name="scale1" value="linear" id="radioYLin" checked>linear |
| <input type="radio" name="scale1" value="logarithmic" id="radioYLog">logarithmic |
| </form> |
| </div> |
| </div> <!-- row --> |
| |
| <div class="row"> |
| <div class="col-sm-6 right1"> |
| z-axis (color) scale: |
| </div> |
| <div class="col-sm-6 left1"> |
| <form><input type="radio" name="scale1" value="linear" id="radioZLin" checked>linear |
| <input type="radio" name="scale1" value="logarithmic" id="radioZLog">logarithmic |
| </form> |
| </div> |
| </div> <!-- row --> |
| </div> <!-- color2 --> |
| |
| <div class="color3"> |
| <div class="row"> |
| <div class="col-sm-4 right1"> |
| Execution purpose: |
| </div> <!-- col --> |
| <div class="col-sm-8 left1"> |
| <form> |
| <textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea> |
| </form> |
| </div> <!-- col --> |
| </div> <!-- row --> |
| </div> <!-- color2 --> |
| |
| <div class="color4"> |
| <div class="row"> |
| <div class="col-sm-6 center1"> |
| <input id="conditionalSamp" type="submit" value=" Get Plot " style="height:28px"/> |
| </div> |
| <div class="col-sm-6 center1"> |
| <form> |
| <input id="download_data" type="button" value="Download Data" style="height:28px"/> |
| </form> |
| </div> |
| </div> <!-- row --> |
| </div> <!-- color4 --> |
| |
| <div class="row" center1> |
| <div class="col-sm-12 center1"> |
| <div id="Image">Image Here</div> |
| </div> |
| </div> <!-- row --> |
| |
| <div class="row" > |
| <div class="col-sm-12 center1"> |
| <textarea readonly id="data_url" cols="150" rows="2">Data URL Here</textarea> |
| </div> |
| </div> <!-- row --> |
| |
| <div class="row" center1> |
| <div class="col-sm-12 center1"> |
| <textarea id="Response" cols="150" rows="6">Service Response Text Here</textarea> |
| </div> |
| </div> <!-- row --> |
| |
| </div> <!-- container --> |
| </body> |
| </html> |