http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/a8965336/public/html/threeDimZonalMean.html ---------------------------------------------------------------------- diff --git a/public/html/threeDimZonalMean.html b/public/html/threeDimZonalMean.html deleted file mode 100644 index 97f1100..0000000 --- a/public/html/threeDimZonalMean.html +++ /dev/null @@ -1,748 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"; type="text/javascript"></script> --> - <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> - <script type="text/javascript" src="js/jquery.flot.min.js"></script> - <script type="text/javascript" src="js/json2.js"></script> - <script type="text/javascript" src="js/xmisc.js"></script> - <script type="text/javascript"> - - var Response = null; - var variable = ""; - - // called on load or reload - window.onload = function() { - select_all_months(); - select_data(); - select_var(); - // no data to download yet - disable_download_button(); - } - - - // disable download data button - function disable_download_button() - { - var x=document.getElementById("download_data"); - x.disabled=true; - } - - - // enable download data button - function enable_download_button() - { - var x=document.getElementById("download_data"); - x.disabled=false; - } - - - // select all months in the checkboxes - function select_all_months() - { - document.getElementById('Jan').checked = true; - document.getElementById('Feb').checked = true; - document.getElementById('Mar').checked = true; - document.getElementById('Apr').checked = true; - document.getElementById('May').checked = true; - document.getElementById('Jun').checked = true; - document.getElementById('Jul').checked = true; - document.getElementById('Aug').checked = true; - document.getElementById('Sep').checked = true; - document.getElementById('Oct').checked = true; - document.getElementById('Nov').checked = true; - document.getElementById('Dec').checked = true; - } - - // see if no month is selected - function no_month_check() - { - if (document.getElementById('Jan').checked == false && - document.getElementById('Feb').checked == false && - document.getElementById('Mar').checked == false && - document.getElementById('Apr').checked == false && - document.getElementById('May').checked == false && - document.getElementById('Jun').checked == false && - document.getElementById('Jul').checked == false && - document.getElementById('Aug').checked == false && - document.getElementById('Sep').checked == false && - document.getElementById('Oct').checked == false && - document.getElementById('Nov').checked == false && - document.getElementById('Dec').checked == false) { - // alert("No month check!"); - return true; - } - else - return false; - } - - // unselect all months in the checkboxes - function reset_months() - { - document.getElementById('Jan').checked = false; - document.getElementById('Feb').checked = false; - document.getElementById('Mar').checked = false; - document.getElementById('Apr').checked = false; - document.getElementById('May').checked = false; - document.getElementById('Jun').checked = false; - document.getElementById('Jul').checked = false; - document.getElementById('Aug').checked = false; - document.getElementById('Sep').checked = false; - document.getElementById('Oct').checked = false; - document.getElementById('Nov').checked = false; - document.getElementById('Dec').checked = false; - } - - // enable all vars in dropdown menu - function reset_vars() - { - var x=document.getElementById("var"); - - x.options[0].disabled=false; - x.options[1].disabled=false; - x.options[2].disabled=false; - x.options[3].disabled=false; - x.options[4].disabled=false; - x.options[5].disabled=false; - x.options[6].disabled=false; - x.options[7].disabled=false; - } - - // form variable string based on "var" dropdown selection - function select_var() - { - var var_string = $("#var").val(); - - // disable the download button because of this change - disable_download_button(); - - if (var_string == "Air Temperature") - variable = "ta"; - else if (var_string == "Specific Humidity") - variable = "hus"; - else if (var_string == "Cloud Ice Water Content") - variable = "cli"; - else if (var_string == "Cloud Liquid Water Content") - variable = "clw"; - else if (var_string == "Ocean Temperature") - variable = "ot"; - else if (var_string == "Ocean Salinity") - variable = "os"; - else if (var_string == "Vertical Wind Velocity") - variable = "wap"; - else if (var_string == "Relative Humidity") - variable = "hur"; - - // alert("variable: " + variable) - } - - // set up "var" dropdown based status of "data" dropdown - function select_data() - { - var data_string = $("#data").val(); - var x=document.getElementById("var"); - - // disable the download button because of this change - disable_download_button(); - - // enable all options in "var" dropdown first - reset_vars(); - - // alert(data_string); - - // disable corresponding "var" options - if (data_string == "NASA/AIRS") { - x.options[0].selected=true; - //x.options[1].selected=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - } - else if (data_string == "NASA/MLS") { - x.options[0].selected=true; - //x.options[1].selected=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - } - else if (data_string == "ARGO/ARGO") { - x.options[0].disabled=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].selected=true; - //x.options[5].selected=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - } - else if (data_string == "ECMWF/interim") { - x.options[0].disabled=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - //x.options[6].disabled=true; - //x.options[7].disabled=true; - x.options[6].selected=true; - } - else { - x.options[0].selected=true; - //x.options[1].selected=true; - //x.options[2].selected=true; - //x.options[3].selected=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - } - - // form variable string - select_var(); - } - - // select checkboxes based on "months" dropdown - function select_months() - { - var s1=document.getElementById("months"); - // alert(s1.selectedIndex); - // alert(s1.options[s1.selectedIndex].value); - - // disable the download button because of this change - disable_download_button(); - - // "select none" - if (s1.selectedIndex == 1) { - reset_months(); - } - // "select all" - if (s1.selectedIndex == 0) { - select_all_months(); - } - // "summer" - if (s1.selectedIndex == 2) { - reset_months(); - document.getElementById('Jun').checked = true; - document.getElementById('Jul').checked = true; - document.getElementById('Aug').checked = true; - } - // "autumn" - if (s1.selectedIndex == 3) { - reset_months(); - document.getElementById('Sep').checked = true; - document.getElementById('Oct').checked = true; - document.getElementById('Nov').checked = true; - } - // "winter" - if (s1.selectedIndex == 4) { - reset_months(); - document.getElementById('Dec').checked = true; - document.getElementById('Jan').checked = true; - document.getElementById('Feb').checked = true; - } - // "spring" - if (s1.selectedIndex == 5) { - reset_months(); - document.getElementById('Mar').checked = true; - document.getElementById('Apr').checked = true; - document.getElementById('May').checked = true; - } - - } - - $(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); - }); - - - $("#threedvarzonalmean").click(function(event) { - 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:9002/svc/threeDimZonalMean?model=ukmo_hadgem2-a&var=ts&start_time=199001&end_time=199512&lat1=-29&lat2=29&pres1=90&pres2=20months=1,2,4,5,6,10,12 - - // form url string - var url = "http://"; + window.location.hostname + ":9002/svc/threeDimZonalMean?"; - // alert(url); - - var d1 = $("#data").val(); - var model1 = d1.replace("/", "_"); - - var arglist = ""; - arglist = arglist.concat("model="); - arglist = arglist.concat(model1); - - var v1 = $("#var").val(); - arglist = arglist.concat("&var="); - arglist = arglist.concat(variable); - - 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 lat0 = $("#lat0").val(); - var lat1 = $("#lat1").val(); - - arglist = arglist.concat("&lat1="); - arglist = arglist.concat(lat0); - - arglist = arglist.concat("&lat2="); - arglist = arglist.concat(lat1); - - var pres = $("#pres").val(); - var splitty = pres.split(','); - if (splitty.length != 2) { - alert("pressure level range needs to be two values separated by comma."); - return; - } - else { - pres1 = splitty[0]; - pres2 = splitty[1]; - - // alert("variable: " + variable); - - // when variable is the 3D Ocean Salinity or Ocean Temperature - if (variable == 'ot' || variable == 'os') { - pres1 = pres1 * 10000; // convert from dbar on GUI - pres2 = pres2 * 10000; // convert from dbar on GUI - } - // when variable is 2D - else { - pres1 = pres1 * 100; // convert from hPa on GUI - pres2 = pres2 * 100; // convert from hPa on GUI - } - } - - arglist = arglist.concat("&pres1="); - arglist = arglist.concat(pres1); - - arglist = arglist.concat("&pres2="); - arglist = arglist.concat(pres2); - - var s1 = document.getElementById('months'); - - // get months checked by client - var month_str = ""; - - var mm = document.getElementById('Jan'); - if (mm.checked == true) - month_str = month_str.concat(",1"); - - var mm = document.getElementById('Feb'); - if (mm.checked == true) - month_str = month_str.concat(",2"); - - var mm = document.getElementById('Mar'); - if (mm.checked == true) - month_str = month_str.concat(",3"); - - var mm = document.getElementById('Apr'); - if (mm.checked == true) - month_str = month_str.concat(",4"); - - var mm = document.getElementById('May'); - if (mm.checked == true) - month_str = month_str.concat(",5"); - - var mm = document.getElementById('Jun'); - if (mm.checked == true) - month_str = month_str.concat(",6"); - - var mm = document.getElementById('Jul'); - if (mm.checked == true) - month_str = month_str.concat(",7"); - - var mm = document.getElementById('Aug'); - if (mm.checked == true) - month_str = month_str.concat(",8"); - - var mm = document.getElementById('Sep'); - if (mm.checked == true) - month_str = month_str.concat(",9"); - - var mm = document.getElementById('Oct'); - if (mm.checked == true) - month_str = month_str.concat(",10"); - - var mm = document.getElementById('Nov'); - if (mm.checked == true) - month_str = month_str.concat(",11"); - - var mm = document.getElementById('Dec'); - if (mm.checked == true) - month_str = month_str.concat(",12"); - - // remove the leading ',' - month_str = month_str.substr(1); - // alert(month_str); - - arglist = arglist.concat("&months="); - arglist = arglist.concat(month_str); - // alert("arglist: " + arglist); - - arglist = arglist.concat("&scale="); - var y = document.getElementById("radioLin").checked; - var yval; - var z = document.getElementById("radioLin2").checked; - var zval; - // alert(y); - if (y == true) - yval = 0; - else - yval = 2; - - if (z == true) - zval = 0; - else - zval = 4; - - var scale1 = yval + zval; - var scale1_str = scale1.toString(); - - arglist = arglist.concat(scale1_str); - - var purpose = $("#purpose").val(); - arglist = arglist.concat("&purpose="); - arglist = arglist.concat(purpose); - - // url = url + encodeURIComponent(arglist); - url = url + encodeURI(arglist); - // url = url + arglist; - // alert("url: " + url); - - var urlTimeBounds = "http://"; + window.location.hostname + ":9002/svc/time_bounds?"; - var arglistTB = ""; - arglistTB = arglistTB.concat("serviceType="); - arglistTB = arglistTB.concat("1"); - arglistTB = arglistTB.concat("&source="); - arglistTB = arglistTB.concat(d1); - arglistTB = arglistTB.concat("&var="); - arglistTB = arglistTB.concat(variable); - 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 tb = data.time_bounds; - var bds = String(tb).split(","); - // alert("tb: " + tb); - // alert("bds: " + bds); - var lowerT = parseInt(bds[0]); - var upperT = parseInt(bds[1]); - // alert("lowerT: " + lowerT); - // alert("upperT: " + upperT); - var t0I = parseInt(t0); - var t1I = parseInt(t1); - // alert("t0: " + t0I); - // alert("t1: " + t1I); - - if ( lowerT == 0 && upperT ==0 ) { - alert("We do not have data for this source and variable configuration."); - return; - } - - 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 html1 = "<img src='"+data.url+"' width='680'/>"; - // alert(html1); - $("#Image").html(html1); - - // 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> - -<p> - -<table border="1" WIDTH="800"> - -<tr> -<td colspan="4"> -<center> -<b>Service: 3-D Variable Zonal Mean</b> <br><br> -This service generates a contour plot of zonal-mean vertical profiles of a 3-dimensional variable. <br> -Select a data source, a variable name, a time range, and a pressure range below.<br><br> - -</center> -</td> -</tr> - -<tr> -<td>data source:</td><td><select name="data", id="data" onchange="select_data()"> -<optgroup label="Observation"> -<option selected="NASA/AIRS">NASA/AIRS</option> -<option>NASA/MLS</option> -<option>ARGO/ARGO</option> -</optgroup> -<optgroup label="Model: Historical"> -<option>CCCMA/CANESM2</option> -<option>GFDL/ESM2G</option> -<option>GISS/E2-H</option> -<option>GISS/E2-R</option> -<option>NCAR/CAM5</option> -<option>NCC/NORESM</option> -<option>UKMO/HadGEM2-ES</option> -</optgroup> -<optgroup label="Model: AMIP"> -<option>CCCMA/CANAM4</option> -<option>CSIRO/MK3.6</option> -<option>GFDL/CM3</option> -<option>IPSL/CM5A-LR</option> -<option>MIROC/MIROC5</option> -<option>UKMO/HadGEM2-A</option> -</optgroup> -<optgroup label="Reanalysis"> -<option>ECMWF/interim</option> -</select></td> - -<td>variable name:</td><td><select name="var", id="var" onchange="select_var()"> -<option>Air Temperature</option> -<option>Specific Humidity</option> -<option>Cloud Ice Water Content</option> -<option>Cloud Liquid Water Content</option> -<option>Ocean Temperature</option> -<option>Ocean Salinity</option> -<option>Vertical Wind Velocity</option> -<option>Relative Humidity</option> -</select></td> - -</tr> - -<tr> -<td>start year-month:</td><td><input id="t0" value="2004-01" alt="start"/></td> -<td>end year-month:</td><td><input id="t1" value="2004-12" alt="end"/></td> -</tr> - -<tr> -<td>select months:</td> -<td><select name="months" id="months" onchange="select_months()"> -<option id="all">select all</option> -<option id="none">select none</option> -<option id="summer">Summer:Jun-Jul-Aug</option> -<option id="autum">Autumn:Sep-Oct-Nov</option> -<option id="winter">Winter:Dec-Jan-Feb</option> -<option id="spring">Spring:Mar-Apr-May</option> </select> -</td> -<td> -atmosphere pressure range (hPa) <br> or ocean pressure range (dbar): -</td> -<td><input id="pres" value="200,900" alt="pressure"/></td> -</tr> - -<tr> -<td> -<label><input type="checkbox" name="option1" id="Jan" value="Jan" /> Jan<br></label> -<label><input type="checkbox" name="option1" id="Feb" value="Feb" /> Feb<br></label> -<label><input type="checkbox" name="option1" id="Mar" value="Mar" /> Mar<br></label> -</td> -<td> -<label><input type="checkbox" name="option1" id="Apr" value="Apr" /> Apr<br></label> -<label><input type="checkbox" name="option1" id="May" value="May" /> May<br></label> -<label><input type="checkbox" name="option1" id="Jun" value="Jun" /> Jun<br></label> -</td> -<td> -<label><input type="checkbox" name="option1" id="Jul" value="Jul" /> Jul<br></label> -<label><input type="checkbox" name="option1" id="Aug" value="Aug" /> Aug<br></label> -<label><input type="checkbox" name="option1" id="Sep" value="Sep" /> Sep<br></label> -</td> -<td> -<label><input type="checkbox" name="option1" id="Oct" value="Oct" /> Oct<br></label> -<label><input type="checkbox" name="option1" id="Nov" value="Nov" /> Nov<br></label> -<label><input type="checkbox" name="option1" id="Dec" value="Dec" /> Dec<br></label> -</td> -</tr> - -<tr> -<td>start lat (deg):</td><td><input id="lat0" value="-90"/></td> -<td>end lat (deg):</td><td><input id="lat1" value="90"/></td> -</tr> - -<tr> -<td colspan="1"> -pressure level scale: -</td> -<td colspan="1"> -<form> <input type="radio" name="scale1" value="linear" id="radioLin">linear -<input type="radio" name="scale1" value="logarithmic" id="radioLog" checked>logarithmic -</form> -</td> -<td colspan="1"> -color scale: -</td> -<td colspan="1"> -<form> <input type="radio" name="scale2" value="linear" id="radioLin2" checked>linear -<input type="radio" name="scale2" value="logarithmic" id="radioLog2">logarithmic -</form> -</td> -</tr> - -<tr> -<td colspan="1"> -Execution purpose -</td> -<td colspan="3"> -<form> -<textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea> -</form> -</td> -</tr> - -<tr> -<td colspan="2" align="center"><input id="threedvarzonalmean" type="submit" value=" Get Plot " style="height:28px"/></td> -<form> -<td colspan="2" align="center"><input id="download_data" type="button" value="Download Data" style="height:28px"/> -</td> -</form> - -</tr> - -<tr> -<td colspan="4"> -<div id="Image">Image Here</div> -</td> -</tr> -<tr> -<td colspan="4" align="center"> -<textarea readonly id="data_url" cols="89" rows="2">Data URL Here</textarea> -</td> -</tr> -<tr> -<td colspan="4" align="center"> -<textarea readonly id="Response" cols="89" rows="6">Service Response Text Here</textarea> -</td> -</tr> -</p> - -</table> - -</body> -</html>
http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/a8965336/public/html/twoDimMap.html ---------------------------------------------------------------------- diff --git a/public/html/twoDimMap.html b/public/html/twoDimMap.html deleted file mode 100644 index 89bb859..0000000 --- a/public/html/twoDimMap.html +++ /dev/null @@ -1,1034 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"; type="text/javascript"></script> --> - <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> - <script type="text/javascript" src="js/jquery.flot.min.js"></script> - <script type="text/javascript" src="js/json2.js"></script> - <script type="text/javascript" src="js/xmisc.js"></script> - <script type="text/javascript"> - - var Response = null; - var variable = ""; - - // called on load or reload - window.onload = function() { - select_all_months(); - select_data(); - select_var(); - // no data to download yet - disable_download_button(); - } - - // disable download data button - function disable_download_button() - { - var x=document.getElementById("download_data"); - x.disabled=true; - } - - // enable download data button - function enable_download_button() - { - var x=document.getElementById("download_data"); - x.disabled=false; - } - - // select all months in the checkboxes - function select_all_months() - { - document.getElementById('Jan').checked = true; - document.getElementById('Feb').checked = true; - document.getElementById('Mar').checked = true; - document.getElementById('Apr').checked = true; - document.getElementById('May').checked = true; - document.getElementById('Jun').checked = true; - document.getElementById('Jul').checked = true; - document.getElementById('Aug').checked = true; - document.getElementById('Sep').checked = true; - document.getElementById('Oct').checked = true; - document.getElementById('Nov').checked = true; - document.getElementById('Dec').checked = true; - } - - // see if no month is selected - function no_month_check() - { - if (document.getElementById('Jan').checked == false && - document.getElementById('Feb').checked == false && - document.getElementById('Mar').checked == false && - document.getElementById('Apr').checked == false && - document.getElementById('May').checked == false && - document.getElementById('Jun').checked == false && - document.getElementById('Jul').checked == false && - document.getElementById('Aug').checked == false && - document.getElementById('Sep').checked == false && - document.getElementById('Oct').checked == false && - document.getElementById('Nov').checked == false && - document.getElementById('Dec').checked == false) { - // alert("No month check!"); - return true; - } - else - return false; - } - - // unselect all months in the checkboxes - function reset_months() - { - document.getElementById('Jan').checked = false; - document.getElementById('Feb').checked = false; - document.getElementById('Mar').checked = false; - document.getElementById('Apr').checked = false; - document.getElementById('May').checked = false; - document.getElementById('Jun').checked = false; - document.getElementById('Jul').checked = false; - document.getElementById('Aug').checked = false; - document.getElementById('Sep').checked = false; - document.getElementById('Oct').checked = false; - document.getElementById('Nov').checked = false; - document.getElementById('Dec').checked = false; - } - - // enable all vars in dropdown menu - function reset_vars() - { - var x=document.getElementById("var"); - - x.options[0].disabled=false; - x.options[1].disabled=false; - x.options[2].disabled=false; - x.options[3].disabled=false; - x.options[4].disabled=false; - x.options[5].disabled=false; - x.options[6].disabled=false; - x.options[7].disabled=false; - x.options[8].disabled=false; - x.options[9].disabled=false; - x.options[10].disabled=false; - x.options[11].disabled=false; - x.options[12].disabled=false; - x.options[13].disabled=false; - x.options[14].disabled=false; - x.options[15].disabled=false; - x.options[16].disabled=false; - x.options[17].disabled=false; - x.options[18].disabled=false; - x.options[19].disabled=false; - x.options[20].disabled=false; - x.options[21].disabled=false; - x.options[22].disabled=false; - x.options[23].disabled=false; - x.options[24].disabled=false; - } - - // form variable string based on "var" dropdown selection - function select_var() - { - var var_string = $("#var").val(); - - // disable the download button because of this change - disable_download_button(); - - if (var_string == "Total Cloud Fraction") - variable = "clt"; - else if (var_string == "Surface Temperature") - variable = "ts"; - else if (var_string == "Sea Surface Temperature") - variable = "tos"; - else if (var_string == "Precipitation Flux") - variable = "pr"; - else if (var_string == "Eastward Near-Surface Wind") - variable = "uas"; - else if (var_string == "Northward Near-Surface Wind") - variable = "vas"; - else if (var_string == "Near-Surface Wind Speed") - variable = "sfcWind"; - else if (var_string == "Sea Surface Height") - variable = "zos"; - else if (var_string == "Leaf Area Index") - variable = "lai"; - else if (var_string == "Equivalent Water Height Over Land") - variable = "zl"; - else if (var_string == "Equivalent Water Height Over Ocean") - variable = "zo"; - else if (var_string == "Ocean Heat Content Anomaly within 700 m Depth") - variable = "ohc700"; - else if (var_string == "Ocean Heat Content Anomaly within 2000 m Depth") - variable = "ohc2000"; - else if (var_string == "Surface Downwelling Longwave Radiation") - variable = "rlds"; - else if (var_string == "Surface Downwelling Shortwave Radiation") - variable = "rsds"; - else if (var_string == "Surface Upwelling Longwave Radiation") - variable = "rlus"; - else if (var_string == "Surface Upwelling Shortwave Radiation") - variable = "rsus"; - else if (var_string == "Surface Downwelling Clear-Sky Longwave Radiation") - variable = "rldscs"; - else if (var_string == "Surface Downwelling Clear-Sky Shortwave Radiation") - variable = "rsdscs"; - else if (var_string == "Surface Upwelling Clear-Sky Shortwave Radiation") - variable = "rsuscs"; - else if (var_string == "TOA Incident Shortwave Radiation") - variable = "rsdt"; - else if (var_string == "TOA Outgoing Clear-Sky Longwave Radiation") - variable = "rlutcs"; - else if (var_string == "TOA Outgoing Longwave Radiation") - variable = "rlut"; - else if (var_string == "TOA Outgoing Clear-Sky Shortwave Radiation") - variable = "rsutcs"; - else if (var_string == "TOA Outgoing Shortwave Radiation") - variable = "rsut"; - - // alert("variable: " + variable) - } - - // set up "var" dropdown based status of "data" dropdown - function select_data() - { - var data_string = $("#data").val(); - var x=document.getElementById("var"); - - // disable the download button because of this change - disable_download_button(); - - // enable all options in "var" dropdown first - reset_vars(); - - // alert(data_string); - - // disable corresponding "var" options - if (data_string == "NASA/AMSRE") { - x.options[0].disabled=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - x.options[8].disabled=true; - x.options[9].disabled=true; - x.options[10].disabled=true; - x.options[11].disabled=true; - x.options[12].disabled=true; - x.options[13].disabled=true; - x.options[14].disabled=true; - x.options[15].disabled=true; - x.options[16].disabled=true; - x.options[17].disabled=true; - x.options[18].disabled=true; - x.options[19].disabled=true; - x.options[20].disabled=true; - x.options[21].disabled=true; - x.options[22].disabled=true; - x.options[23].disabled=true; - x.options[24].disabled=true; - - x.options[3].selected=true; - } - else if (data_string == "NASA/MODIS") { - x.options[0].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - x.options[9].disabled=true; - x.options[10].disabled=true; - x.options[11].disabled=true; - x.options[12].disabled=true; - x.options[13].disabled=true; - x.options[14].disabled=true; - x.options[15].disabled=true; - x.options[16].disabled=true; - x.options[17].disabled=true; - x.options[18].disabled=true; - x.options[19].disabled=true; - x.options[20].disabled=true; - x.options[21].disabled=true; - x.options[22].disabled=true; - x.options[23].disabled=true; - x.options[24].disabled=true; - - x.options[1].selected=true; - //x.options[8].selected=true; - } - else if (data_string == "NASA/TRMM") { - x.options[0].selected=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - x.options[8].disabled=true; - x.options[9].disabled=true; - x.options[10].disabled=true; - x.options[11].disabled=true; - x.options[12].disabled=true; - x.options[13].disabled=true; - x.options[14].disabled=true; - x.options[15].disabled=true; - x.options[16].disabled=true; - x.options[17].disabled=true; - x.options[18].disabled=true; - x.options[19].disabled=true; - x.options[20].disabled=true; - x.options[21].disabled=true; - x.options[22].disabled=true; - x.options[23].disabled=true; - x.options[24].disabled=true; - } - else if (data_string == "NASA/GPCP") { - x.options[0].selected=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - x.options[8].disabled=true; - x.options[9].disabled=true; - x.options[10].disabled=true; - x.options[11].disabled=true; - x.options[12].disabled=true; - x.options[13].disabled=true; - x.options[14].disabled=true; - x.options[15].disabled=true; - x.options[16].disabled=true; - x.options[17].disabled=true; - x.options[18].disabled=true; - x.options[19].disabled=true; - x.options[20].disabled=true; - x.options[21].disabled=true; - x.options[22].disabled=true; - x.options[23].disabled=true; - x.options[24].disabled=true; - } - else if (data_string == "NASA/QuikSCAT") { - - x.options[0].disabled=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[7].disabled=true; - x.options[8].disabled=true; - x.options[9].disabled=true; - x.options[10].disabled=true; - x.options[11].disabled=true; - x.options[12].disabled=true; - x.options[13].disabled=true; - x.options[14].disabled=true; - x.options[15].disabled=true; - x.options[16].disabled=true; - x.options[17].disabled=true; - x.options[18].disabled=true; - x.options[19].disabled=true; - x.options[20].disabled=true; - x.options[21].disabled=true; - x.options[22].disabled=true; - x.options[23].disabled=true; - x.options[24].disabled=true; - - x.options[4].selected=true; - //x.options[5].selected=true; - //x.options[6].selected=true; - } - else if (data_string == "NASA/AVISO") { - x.options[0].disabled=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[8].disabled=true; - x.options[9].disabled=true; - x.options[10].disabled=true; - x.options[11].disabled=true; - x.options[12].disabled=true; - x.options[13].disabled=true; - x.options[14].disabled=true; - x.options[15].disabled=true; - x.options[16].disabled=true; - x.options[17].disabled=true; - x.options[18].disabled=true; - x.options[19].disabled=true; - x.options[20].disabled=true; - x.options[21].disabled=true; - x.options[22].disabled=true; - x.options[23].disabled=true; - x.options[24].disabled=true; - - x.options[7].selected=true; - } - else if (data_string == "NASA/GRACE") { - - x.options[0].disabled=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - x.options[8].disabled=true; - x.options[11].disabled=true; - x.options[12].disabled=true; - x.options[13].disabled=true; - x.options[14].disabled=true; - x.options[15].disabled=true; - x.options[16].disabled=true; - x.options[17].disabled=true; - x.options[18].disabled=true; - x.options[19].disabled=true; - x.options[20].disabled=true; - x.options[21].disabled=true; - x.options[22].disabled=true; - x.options[23].disabled=true; - x.options[24].disabled=true; - - x.options[9].selected=true; - //x.options[10].selected=true; - } - else if (data_string == "NOAA/NODC") { - - x.options[0].disabled=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - x.options[8].disabled=true; - x.options[9].disabled=true; - x.options[10].disabled=true; - x.options[13].disabled=true; - x.options[14].disabled=true; - x.options[15].disabled=true; - x.options[16].disabled=true; - x.options[17].disabled=true; - x.options[18].disabled=true; - x.options[19].disabled=true; - x.options[20].disabled=true; - x.options[21].disabled=true; - x.options[22].disabled=true; - x.options[23].disabled=true; - x.options[24].disabled=true; - - x.options[11].selected=true; - //x.options[12].selected=true; - } - else if (data_string == "NASA/CERES") { - - x.options[0].disabled=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - x.options[8].disabled=true; - x.options[9].disabled=true; - x.options[10].disabled=true; - x.options[11].disabled=true; - x.options[12].disabled=true; - - x.options[13].selected=true; - } - else if (data_string == "ECMWF/interim") { - - x.options[0].disabled=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - x.options[8].disabled=true; - x.options[9].disabled=true; - x.options[10].disabled=true; - x.options[11].disabled=true; - x.options[12].disabled=true; - x.options[13].disabled=true; - x.options[14].disabled=true; - x.options[15].disabled=true; - x.options[16].disabled=true; - x.options[17].disabled=true; - x.options[18].disabled=true; - x.options[19].disabled=true; - x.options[20].disabled=true; - x.options[21].disabled=true; - x.options[22].disabled=true; - x.options[23].disabled=true; - x.options[24].disabled=true; - - x.options[3].selected=true; - } - else if (data_string == "CCCMA/CANAM4" || data_string == "CSIRO/MK3.6") { - - x.options[3].disabled=true; - x.options[7].disabled=true; - x.options[8].disabled=true; - x.options[9].disabled=true; - x.options[10].disabled=true; - x.options[11].disabled=true; - x.options[12].disabled=true; - - x.options[0].selected=true; - } - // for all other models - else { - x.options[9].disabled=true; - x.options[10].disabled=true; - x.options[11].disabled=true; - x.options[12].disabled=true; - - x.options[0].selected=true; - } - - // form variable string - select_var(); - } - - // select checkboxes based on "months" dropdown - function select_months() - { - var s1=document.getElementById("months"); - // alert(s1.selectedIndex); - // alert(s1.options[s1.selectedIndex].value); - - // disable the download button because of this change - disable_download_button(); - - // "select none" - if (s1.selectedIndex == 1) { - reset_months(); - } - // "select all" - if (s1.selectedIndex == 0) { - select_all_months(); - } - // "summer" - if (s1.selectedIndex == 2) { - reset_months(); - document.getElementById('Jun').checked = true; - document.getElementById('Jul').checked = true; - document.getElementById('Aug').checked = true; - } - // "autumn" - if (s1.selectedIndex == 3) { - reset_months(); - document.getElementById('Sep').checked = true; - document.getElementById('Oct').checked = true; - document.getElementById('Nov').checked = true; - } - // "winter" - if (s1.selectedIndex == 4) { - reset_months(); - document.getElementById('Dec').checked = true; - document.getElementById('Jan').checked = true; - document.getElementById('Feb').checked = true; - } - // "spring" - if (s1.selectedIndex == 5) { - reset_months(); - document.getElementById('Mar').checked = true; - document.getElementById('Apr').checked = true; - document.getElementById('May').checked = true; - } - - } - - - - $(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); - }); - - $("#twodvarmap").click(function(event) { - 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/twoDimMap?model=ukmo_hadgem2-a&var=ts&start_time=199001&end_time=199512&lon1=0&lon2=100&lat1=-29&lat2=29&months=1,2,4,5,6,10,12 - - // form url string - // var url = "http://cmacws.jpl.nasa.gov:8090/svc/twoDimMap?";; - var url = "http://"; + window.location.hostname + ":9002/svc/twoDimMap?"; - //alert(url); - - var d1 = $("#data").val(); - var model1 = d1.replace("/", "_"); - // alert(model1); - // alert(d1); - - var arglist = ""; - arglist = arglist.concat("model="); - arglist = arglist.concat(model1); - - var v1 = $("#var").val(); - arglist = arglist.concat("&var="); - arglist = arglist.concat(variable); - - 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); - - var s1 = document.getElementById('months'); - - // get months checked by client - var month_str = ""; - - var mm = document.getElementById('Jan'); - if (mm.checked == true) - month_str = month_str.concat(",1"); - - var mm = document.getElementById('Feb'); - if (mm.checked == true) - month_str = month_str.concat(",2"); - - var mm = document.getElementById('Mar'); - if (mm.checked == true) - month_str = month_str.concat(",3"); - - var mm = document.getElementById('Apr'); - if (mm.checked == true) - month_str = month_str.concat(",4"); - - var mm = document.getElementById('May'); - if (mm.checked == true) - month_str = month_str.concat(",5"); - - var mm = document.getElementById('Jun'); - if (mm.checked == true) - month_str = month_str.concat(",6"); - - var mm = document.getElementById('Jul'); - if (mm.checked == true) - month_str = month_str.concat(",7"); - - var mm = document.getElementById('Aug'); - if (mm.checked == true) - month_str = month_str.concat(",8"); - - var mm = document.getElementById('Sep'); - if (mm.checked == true) - month_str = month_str.concat(",9"); - - var mm = document.getElementById('Oct'); - if (mm.checked == true) - month_str = month_str.concat(",10"); - - var mm = document.getElementById('Nov'); - if (mm.checked == true) - month_str = month_str.concat(",11"); - - var mm = document.getElementById('Dec'); - if (mm.checked == true) - month_str = month_str.concat(",12"); - - // remove the leading ',' - month_str = month_str.substr(1); - // alert(month_str); - - arglist = arglist.concat("&months="); - arglist = arglist.concat(month_str); - // alert("arglist: " + arglist); - - arglist = arglist.concat("&scale="); - var z = document.getElementById("radioLin").checked; - // alert(z); - if (z == true) - arglist = arglist.concat('0'); - else - arglist = arglist.concat('4'); - - var purpose = $("#purpose").val(); - arglist = arglist.concat("&purpose="); - arglist = arglist.concat(purpose); - - // url = url + encodeURIComponent(arglist); - url = url + encodeURI(arglist); - // url = url + arglist; - //alert("url: " + url); - - var urlTimeBounds = "http://"; + window.location.hostname + ":9002/svc/time_bounds?"; - var arglistTB = ""; - arglistTB = arglistTB.concat("serviceType="); - arglistTB = arglistTB.concat("1"); - arglistTB = arglistTB.concat("&source="); - arglistTB = arglistTB.concat(d1); - arglistTB = arglistTB.concat("&var="); - arglistTB = arglistTB.concat(variable); - 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 tb = data.time_bounds; - var bds = String(tb).split(","); - // alert("tb: " + tb); - // alert("bds: " + bds); - var lowerT = parseInt(bds[0]); - var upperT = parseInt(bds[1]); - // alert("lowerT: " + lowerT); - // alert("upperT: " + upperT); - var t0I = parseInt(t0); - var t1I = parseInt(t1); - // alert("t0: " + t0I); - // alert("t1: " + t1I); - - if ( lowerT == 0 && upperT ==0 ) { - alert("We do not have data for this source and variable configuration."); - return; - } - - 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 html1 = "<img src='"+data.url+"' width='680'/>"; - // alert(html1); - $("#Image").html(html1); - - // 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> - -<p> - -<table border="1"> - -<tr> -<td colspan="4"> -<center> -<b>Service: 2-D Variable Map</b> <br> <br> -This service generates a map of a 2-dimensional variable with time averaging and spatial subsetting. <br> -Select a data source (model or observation), a variable name, a time range, and a spatial range (lat-lon box) below.<br><br> -</center> -</td> -</tr> - -<tr> -<td>data source:</td><td><select name="data", id="data" onchange="select_data()"> -<!-- <option>NASA/obs4MIPs</option> --> -<optgroup label="Observation"> -<option selected="NASA/MODIS">NASA/MODIS</option> -<option>NASA/AMSRE</option> -<option>NASA/TRMM</option> -<option>NASA/GPCP</option> -<option>NASA/QuikSCAT</option> -<option>NASA/AVISO</option> -<option>NASA/GRACE</option> -<option>NOAA/NODC</option> -<option>NASA/CERES</option> -</optgroup> -<optgroup label="Model: Historical"> -<option>CCCMA/CANESM2</option> -<option>GFDL/ESM2G</option> -<option>GISS/E2-H</option> -<option>GISS/E2-R</option> -<option>NCAR/CAM5</option> -<option>NCC/NORESM</option> -<option>UKMO/HadGEM2-ES</option> -</optgroup> -<optgroup label="Model: AMIP"> -<option>CCCMA/CANAM4</option> -<option>CSIRO/MK3.6</option> -<option>GFDL/CM3</option> -<option>IPSL/CM5A-LR</option> -<option>MIROC/MIROC5</option> -<option>UKMO/HadGEM2-A</option> -</optgroup> -<optgroup label="Reanalysis"> -<option>ECMWF/interim</option> -</optgroup> -</select></td> - -<td>variable name:</td><td><select name="var", id="var" onchange="select_var()"> -<option>Precipitation Flux</option> -<option>Total Cloud Fraction</option> -<option>Surface Temperature</option> -<option>Sea Surface Temperature</option> -<option>Eastward Near-Surface Wind</option> -<option>Northward Near-Surface Wind</option> -<option>Near-Surface Wind Speed</option> -<option>Sea Surface Height</option> -<option>Leaf Area Index</option> -<option>Equivalent Water Height Over Land</option> -<option>Equivalent Water Height Over Ocean</option> -<option>Ocean Heat Content Anomaly within 700 m Depth</option> -<option>Ocean Heat Content Anomaly within 2000 m Depth</option> -<option>Surface Downwelling Longwave Radiation</option> -<option>Surface Downwelling Shortwave Radiation</option> -<option>Surface Upwelling Longwave Radiation</option> -<option>Surface Upwelling Shortwave Radiation</option> -<option>Surface Downwelling Clear-Sky Longwave Radiation</option> -<option>Surface Downwelling Clear-Sky Shortwave Radiation</option> -<option>Surface Upwelling Clear-Sky Shortwave Radiation</option> -<option>TOA Incident Shortwave Radiation</option> -<option>TOA Outgoing Longwave Radiation</option> -<option>TOA Outgoing Shortwave Radiation</option> -<option>TOA Outgoing Clear-Sky Longwave Radiation</option> -<option>TOA Outgoing Clear-Sky Shortwave Radiation</option> -</select></td> - -</tr> - -<tr> -<td>start year-month:</td><td><input id="t0" value="2004-01" alt="start"/></td> -<td>end year-month:</td><td><input id="t1" value="2004-12" alt="end"/></td> -</tr> - -<tr> -<td>select months:</td> -<td><select name="months" id="months" onchange="select_months()"> -<option id="all">select all</option> -<option id="none">select none</option> -<option id="summer">Summer:Jun-Jul-Aug</option> -<option id="autum">Autumn:Sep-Oct-Nov</option> -<option id="winter">Winter:Dec-Jan-Feb</option> -<option id="spring">Spring:Mar-Apr-May</option> </select> -</td> -<td> -</td> -<td> -</tr> - -<tr> -<td> -<label><input type="checkbox" name="option1" id="Jan" value="Jan" /> Jan<br></label> -<label><input type="checkbox" name="option1" id="Feb" value="Feb" /> Feb<br></label> -<label><input type="checkbox" name="option1" id="Mar" value="Mar" /> Mar<br></label> -</td> -<td> -<label><input type="checkbox" name="option1" id="Apr" value="Apr" /> Apr<br></label> -<label><input type="checkbox" name="option1" id="May" value="May" /> May<br></label> -<label><input type="checkbox" name="option1" id="Jun" value="Jun" /> Jun<br></label> -</td> -<td> -<label><input type="checkbox" name="option1" id="Jul" value="Jul" /> Jul<br></label> -<label><input type="checkbox" name="option1" id="Aug" value="Aug" /> Aug<br></label> -<label><input type="checkbox" name="option1" id="Sep" value="Sep" /> Sep<br></label> -</td> -<td> -<label><input type="checkbox" name="option1" id="Oct" value="Oct" /> Oct<br></label> -<label><input type="checkbox" name="option1" id="Nov" value="Nov" /> Nov<br></label> -<label><input type="checkbox" name="option1" id="Dec" value="Dec" /> Dec<br></label> -</td> -</tr> - -<tr> -<td>start lat (deg):</td><td><input id="lat0" value="-90"/></td> -<td>end lat (deg):</td><td><input id="lat1" value="90"/></td> -</tr> - -<tr> -<td>start lon (deg):</td><td><input id="lon0" value="0"/></td> -<td>end lon (deg):</td><td><input id="lon1" value="360"/></td> -</tr> - -<tr> -<td colspan="1"> -color scale: -</td> -<td colspan="3"> -<form> <input type="radio" name="scale1" value="linear" id="radioLin" checked>linear -<input type="radio" name="scale1" value="logarithmic" id="radioLog">logarithmic -</form> -</td> -</tr> - -<tr> -<td colspan="1"> -Execution purpose -</td> -<td colspan="3"> -<form> -<textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea> -</form> -</td> -</tr> - - - - - -<tr> -<td colspan="2" align="center"><input id="twodvarmap" type="submit" value=" Get Plot " style="height:28px"/></td> -<form> -<td colspan="2" align="center"><input id="download_data" type="button" value="Download Data" style="height:28px"/> -</td> -</form> - -</tr> - -<tr> -<td colspan="4"> -<div id="Image">Image Here</div> -</td> -</tr> -<tr> -<td colspan="4" align="center"> -<textarea readonly id="data_url" cols="89" rows="2">Data URL Here</textarea> -</td> -</tr> -<tr> -<td colspan="4" align="center"> -<textarea readonly id="Response" cols="89" rows="6">Service Response Text Here</textarea> -</td> -</tr> -</p> - -</table> - -</body> -</html> http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/a8965336/public/html/twoDimSlice3D.html ---------------------------------------------------------------------- diff --git a/public/html/twoDimSlice3D.html b/public/html/twoDimSlice3D.html deleted file mode 100644 index a5dd7dd..0000000 --- a/public/html/twoDimSlice3D.html +++ /dev/null @@ -1,726 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"; type="text/javascript"></script> --> - <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> - <script type="text/javascript" src="js/jquery.flot.min.js"></script> - <script type="text/javascript" src="js/json2.js"></script> - <script type="text/javascript" src="js/xmisc.js"></script> - <script type="text/javascript"> - - var Response = null; - var variable = ""; - - // called on load or reload - window.onload = function() { - select_all_months(); - select_data(); - select_var(); - // no data to download yet - disable_download_button(); - } - - - // disable download data button - function disable_download_button() - { - var x=document.getElementById("download_data"); - x.disabled=true; - } - - - // enable download data button - function enable_download_button() - { - var x=document.getElementById("download_data"); - x.disabled=false; - } - - - // select all months in the checkboxes - function select_all_months() - { - document.getElementById('Jan').checked = true; - document.getElementById('Feb').checked = true; - document.getElementById('Mar').checked = true; - document.getElementById('Apr').checked = true; - document.getElementById('May').checked = true; - document.getElementById('Jun').checked = true; - document.getElementById('Jul').checked = true; - document.getElementById('Aug').checked = true; - document.getElementById('Sep').checked = true; - document.getElementById('Oct').checked = true; - document.getElementById('Nov').checked = true; - document.getElementById('Dec').checked = true; - } - - // see if no month is selected - function no_month_check() - { - if (document.getElementById('Jan').checked == false && - document.getElementById('Feb').checked == false && - document.getElementById('Mar').checked == false && - document.getElementById('Apr').checked == false && - document.getElementById('May').checked == false && - document.getElementById('Jun').checked == false && - document.getElementById('Jul').checked == false && - document.getElementById('Aug').checked == false && - document.getElementById('Sep').checked == false && - document.getElementById('Oct').checked == false && - document.getElementById('Nov').checked == false && - document.getElementById('Dec').checked == false) { - // alert("No month check!"); - return true; - } - else - return false; - } - - // unselect all months in the checkboxes - function reset_months() - { - document.getElementById('Jan').checked = false; - document.getElementById('Feb').checked = false; - document.getElementById('Mar').checked = false; - document.getElementById('Apr').checked = false; - document.getElementById('May').checked = false; - document.getElementById('Jun').checked = false; - document.getElementById('Jul').checked = false; - document.getElementById('Aug').checked = false; - document.getElementById('Sep').checked = false; - document.getElementById('Oct').checked = false; - document.getElementById('Nov').checked = false; - document.getElementById('Dec').checked = false; - } - - // enable all vars in dropdown menu - function reset_vars() - { - var x=document.getElementById("var"); - - x.options[0].disabled=false; - x.options[1].disabled=false; - x.options[2].disabled=false; - x.options[3].disabled=false; - x.options[4].disabled=false; - x.options[5].disabled=false; - x.options[6].disabled=false; - x.options[7].disabled=false; - } - - // form variable string based on "var" dropdown selection - function select_var() - { - var var_string = $("#var").val(); - - // disable the download button because of this change - disable_download_button(); - - if (var_string == "Air Temperature") - variable = "ta"; - else if (var_string == "Specific Humidity") - variable = "hus"; - else if (var_string == "Cloud Ice Water Content") - variable = "cli"; - else if (var_string == "Cloud Liquid Water Content") - variable = "clw"; - else if (var_string == "Ocean Temperature") - variable = "ot"; - else if (var_string == "Ocean Salinity") - variable = "os"; - else if (var_string == "Vertical Wind Velocity") - variable = "wap"; - else if (var_string == "Relative Humidity") - variable = "hur"; - - // alert("variable: " + variable) - } - - // set up "var" dropdown based status of "data" dropdown - function select_data() - { - var data_string = $("#data").val(); - var x=document.getElementById("var"); - - // disable the download button because of this change - disable_download_button(); - - // enable all options in "var" dropdown first - reset_vars(); - - // alert(data_string); - - // disable corresponding "var" options - if (data_string == "NASA/AIRS") { - x.options[0].selected=true; - //x.options[1].selected=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - } - else if (data_string == "NASA/MLS") { - x.options[0].selected=true; - //x.options[1].selected=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - } - else if (data_string == "ARGO/ARGO") { - x.options[0].disabled=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].selected=true; - //x.options[5].selected=true; - x.options[6].disabled=true; - x.options[7].disabled=true; - } - else if (data_string == "ECMWF/interim") { - x.options[0].disabled=true; - x.options[1].disabled=true; - x.options[2].disabled=true; - x.options[3].disabled=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - //x.options[6].disabled=true; - //x.options[7].disabled=true; - x.options[6].selected=true; - } - else { // models - x.options[0].selected=true; - //x.options[1].selected=true; - //x.options[2].selected=true; - //x.options[3].selected=true; - x.options[4].disabled=true; - x.options[5].disabled=true; - } - - // form variable string - select_var(); - } - - // select checkboxes based on "months" dropdown - function select_months() - { - var s1=document.getElementById("months"); - // alert(s1.selectedIndex); - // alert(s1.options[s1.selectedIndex].value); - - // disable the download button because of this change - disable_download_button(); - - // "select none" - if (s1.selectedIndex == 1) { - reset_months(); - } - // "select all" - if (s1.selectedIndex == 0) { - select_all_months(); - } - // "summer" - if (s1.selectedIndex == 2) { - reset_months(); - document.getElementById('Jun').checked = true; - document.getElementById('Jul').checked = true; - document.getElementById('Aug').checked = true; - } - // "autumn" - if (s1.selectedIndex == 3) { - reset_months(); - document.getElementById('Sep').checked = true; - document.getElementById('Oct').checked = true; - document.getElementById('Nov').checked = true; - } - // "winter" - if (s1.selectedIndex == 4) { - reset_months(); - document.getElementById('Dec').checked = true; - document.getElementById('Jan').checked = true; - document.getElementById('Feb').checked = true; - } - // "spring" - if (s1.selectedIndex == 5) { - reset_months(); - document.getElementById('Mar').checked = true; - document.getElementById('Apr').checked = true; - document.getElementById('May').checked = true; - } - - } - - $(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); - }); - - - $("#twodvarmap").click(function(event) { - 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:9002/svc/twoDimSlice3D?model=UKMO_HadGEM2-ES&var=hus&start_time=199001&end_time=199512&pr=80000&lon1=0&lon2=20&lat1=-29&lat2=29&months=1,2,3,4,5,6,7,8,9,10,11,12 - - // form url string - // var url = "http://cmacws.jpl.nasa.gov:9002/svc/twoDimSlice3D?";; - var url = "http://"; + window.location.hostname + ":9002/svc/twoDimSlice3D?"; - // alert(url); - - var d1 = $("#data").val(); - var model1 = d1.replace("/", "_"); - - var arglist = ""; - arglist = arglist.concat("model="); - arglist = arglist.concat(model1); - - var v1 = $("#var").val(); - arglist = arglist.concat("&var="); - arglist = arglist.concat(variable); - - 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 pres = $("#pres").val(); - // alert("variable: " + variable); - - // when variable is the 3D Ocean Salinity or Ocean Temperature - if (variable == 'ot' || variable == 'os') - pres = pres * 10000; // convert from dbar on GUI - // when variable is 2D - else - pres = pres * 100; // convert from hPa on GUI - - arglist = arglist.concat("&pr="); - arglist = arglist.concat(pres); - - 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); - - var s1 = document.getElementById('months'); - - // get months checked by client - var month_str = ""; - - var mm = document.getElementById('Jan'); - if (mm.checked == true) - month_str = month_str.concat(",1"); - - var mm = document.getElementById('Feb'); - if (mm.checked == true) - month_str = month_str.concat(",2"); - - var mm = document.getElementById('Mar'); - if (mm.checked == true) - month_str = month_str.concat(",3"); - - var mm = document.getElementById('Apr'); - if (mm.checked == true) - month_str = month_str.concat(",4"); - - var mm = document.getElementById('May'); - if (mm.checked == true) - month_str = month_str.concat(",5"); - - var mm = document.getElementById('Jun'); - if (mm.checked == true) - month_str = month_str.concat(",6"); - - var mm = document.getElementById('Jul'); - if (mm.checked == true) - month_str = month_str.concat(",7"); - - var mm = document.getElementById('Aug'); - if (mm.checked == true) - month_str = month_str.concat(",8"); - - var mm = document.getElementById('Sep'); - if (mm.checked == true) - month_str = month_str.concat(",9"); - - var mm = document.getElementById('Oct'); - if (mm.checked == true) - month_str = month_str.concat(",10"); - - var mm = document.getElementById('Nov'); - if (mm.checked == true) - month_str = month_str.concat(",11"); - - var mm = document.getElementById('Dec'); - if (mm.checked == true) - month_str = month_str.concat(",12"); - - // remove the leading ',' - month_str = month_str.substr(1); - // alert(month_str); - - arglist = arglist.concat("&months="); - arglist = arglist.concat(month_str); - // alert("arglist: " + arglist); - - arglist = arglist.concat("&scale="); - var z = document.getElementById("radioLin").checked; - // alert(z); - if (z == true) - arglist = arglist.concat('0'); - else - arglist = arglist.concat('4'); - - var purpose = $("#purpose").val(); - arglist = arglist.concat("&purpose="); - arglist = arglist.concat(purpose); - - // url = url + encodeURIComponent(arglist); - url = url + encodeURI(arglist); - // url = url + arglist; - //alert("url: " + url); - - - var urlTimeBounds = "http://"; + window.location.hostname + ":9002/svc/time_bounds?"; - var arglistTB = ""; - arglistTB = arglistTB.concat("serviceType="); - arglistTB = arglistTB.concat("1"); - arglistTB = arglistTB.concat("&source="); - arglistTB = arglistTB.concat(d1); - arglistTB = arglistTB.concat("&var="); - arglistTB = arglistTB.concat(variable); - 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 tb = data.time_bounds; - var bds = String(tb).split(","); - // alert("tb: " + tb); - // alert("bds: " + bds); - var lowerT = parseInt(bds[0]); - var upperT = parseInt(bds[1]); - // alert("lowerT: " + lowerT); - // alert("upperT: " + upperT); - var t0I = parseInt(t0); - var t1I = parseInt(t1); - // alert("t0: " + t0I); - // alert("t1: " + t1I); - - if ( lowerT == 0 && upperT ==0 ) { - alert("We do not have data for this source and variable configuration."); - return; - } - - 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 html1 = "<img src='"+data.url+"' width='680'/>"; - // alert(html1); - $("#Image").html(html1); - - // 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> - -<p> - -<table border="1" width="800"> - -<tr> -<td colspan="4"> -<center> -<b>Service: 3-D Variable 2-D Slice</b><br><br> -This service generates a slice map of a 3-dimensional variable at a selected pressure level. <br> -Select a data source, a variable name, a time range, a spatial range, and a pressure level below.<br><br> -</center> -</td> -</tr> - -<tr> -<td>data source:</td><td><select name="data", id="data" onchange="select_data()"> -<optgroup label="Observation"> -<option selected="NASA/AIRS">NASA/AIRS</option> -<option>NASA/MLS</option> -<option>ARGO/ARGO</option> -</optgroup> -<optgroup label="Model: Historical"> -<option>CCCMA/CANESM2</option> -<option>GFDL/ESM2G</option> -<option>GISS/E2-H</option> -<option>GISS/E2-R</option> -<option>NCAR/CAM5</option> -<option>NCC/NORESM</option> -<option>UKMO/HadGEM2-ES</option> -</optgroup> -<optgroup label="Model: AMIP"> -<option>CCCMA/CANAM4</option> -<option>CSIRO/MK3.6</option> -<option>GFDL/CM3</option> -<option>IPSL/CM5A-LR</option> -<option>MIROC/MIROC5</option> -<option>UKMO/HadGEM2-A</option> -</optgroup> -</optgroup> -<optgroup label="Reanalysis"> -<option>ECMWF/interim</option> -</select></td> - -<td>variable name:</td><td><select name="var", id="var" onchange="select_var()"> -<option>Air Temperature</option> -<option>Specific Humidity</option> -<option>Cloud Ice Water Content</option> -<option>Cloud Liquid Water Content</option> -<option>Ocean Temperature</option> -<option>Ocean Salinity</option> -<option>Vertical Wind Velocity</option> -<option>Relative Humidity</option> -</select></td> -</tr> - -<tr> -<td>start year-month:</td><td><input id="t0" value="2004-01" alt="start"/></td> -<td>end year-month:</td><td><input id="t1" value="2004-12" alt="end"/></td> -</tr> - -<tr> -<td>select months:</td> -<td><select name="months" id="months" onchange="select_months()"> -<option id="all">select all</option> -<option id="none">select none</option> -<option id="summer">Summer:Jun-Jul-Aug</option> -<option id="autum">Autumn:Sep-Oct-Nov</option> -<option id="winter">Winter:Dec-Jan-Feb</option> -<option id="spring">Spring:Mar-Apr-May</option> </select> -</td> -<td> -atmosphere pressure level (hPa) <br> or ocean pressure level (dbar) -</td> -<td> -<input id="pres" value="500" alt="pressure"/> -</td> -</tr> - -<tr> -<td> -<label><input type="checkbox" name="option1" id="Jan" value="Jan" /> Jan<br></label> -<label><input type="checkbox" name="option1" id="Feb" value="Feb" /> Feb<br></label> -<label><input type="checkbox" name="option1" id="Mar" value="Mar" /> Mar<br></label> -</td> -<td> -<label><input type="checkbox" name="option1" id="Apr" value="Apr" /> Apr<br></label> -<label><input type="checkbox" name="option1" id="May" value="May" /> May<br></label> -<label><input type="checkbox" name="option1" id="Jun" value="Jun" /> Jun<br></label> -</td> -<td> -<label><input type="checkbox" name="option1" id="Jul" value="Jul" /> Jul<br></label> -<label><input type="checkbox" name="option1" id="Aug" value="Aug" /> Aug<br></label> -<label><input type="checkbox" name="option1" id="Sep" value="Sep" /> Sep<br></label> -</td> -<td> -<label><input type="checkbox" name="option1" id="Oct" value="Oct" /> Oct<br></label> -<label><input type="checkbox" name="option1" id="Nov" value="Nov" /> Nov<br></label> -<label><input type="checkbox" name="option1" id="Dec" value="Dec" /> Dec<br></label> -</td> -</tr> - -<tr> -<td>start lat (deg):</td><td><input id="lat0" value="-90"/></td> -<td>end lat (deg):</td><td><input id="lat1" value="90"/></td> -</tr> - -<tr> -<td>start lon (deg):</td><td><input id="lon0" value="0"/></td> -<td>end lon (deg):</td><td><input id="lon1" value="360"/></td> -</tr> - -<tr> -<td colspan="1"> -color scale: -</td> -<td colspan="3"> -<form> <input type="radio" name="scale1" value="linear" id="radioLin" checked>linear -<input type="radio" name="scale1" value="logarithmic" id="radioLog">logarithmic -</form> -</td> -</tr> - -<tr> -<td colspan="1"> -Execution purpose -</td> -<td colspan="3"> -<form> -<textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea> -</form> -</td> -</tr> - -<tr> -<td colspan="2" align="center"><input id="twodvarmap" type="submit" value=" Get Plot " style="height:28px"/></td> -<form> -<td colspan="2" align="center"><input id="download_data" type="button" value="Download Data" style="height:28px"/> -</td> -</form> -</tr> - -<tr> -<td colspan="4"> -<div id="Image">Image Here</div> -</td> -</tr> -<tr> -<td colspan="4" align="center"> -<textarea readonly id="data_url" cols="89" rows="2">Data URL Here</textarea> -</td> -</tr> -<tr> -<td colspan="4" align="center"> -<textarea readonly id="Response" cols="89" rows="6">Service Response Text Here</textarea> -</td> -</tr> -</p> - -</table> - -</body> -</html>
