blob: 4ed6e832cd5430fcf21822b5f7e625b0aea31e1d [file] [log] [blame]
@*******************************************************************************
* Licensed to the Apache Software Foundation (ASF) under one or more *
* contributor license agreements. See the NOTICE file distributed with *
* this work for additional information regarding copyright ownership. *
* The ASF licenses this file to You under the Apache License, Version 2.0 *
* (the "License"); you may not use this file except in compliance with *
* the License. You may obtain a copy of the License at *
* *
* http://www.apache.org/licenses/LICENSE-2.0 *
* *
* Unless required by applicable law or agreed to in writing, software *
* distributed under the License is distributed on an "AS IS" BASIS, *
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. *
* See the License for the specific language governing permissions and *
* limitations under the License. *
*******************************************************************************@
@(parameters: metadata.ThreeDVarZonalMean) @import helper._
<link rel="stylesheet"
href='@routes.Assets.at("stylesheets/livefitler.css")'>
@scripts = {
<script src='@routes.Assets.at("javascripts/edit_button.js")'></script>
<script src='@routes.Assets.at("javascripts/livefilter.js")'></script>
<script type="text/javascript"
src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script type="
text/javascript"
src='@routes.Assets.at("javascripts/json2.js")'></script>
<script type="text/javascript"
src='@routes.Assets.at("javascripts/xmisc.js")'></script>
<script type="text/javascript">
var Response = null;
var variable = "";
window.onload = function() {
changeMonths();
changeDataSource();
select_data();
changeVariableName();
select_var();
enable_download_button();
$('#t0').val($('#startYearMonth').text());
$('#t1').val($('#endYearMonth').text());
$('#pres').val($('#pressureRange').text());
$('#lat0').val($('#startLat').text());
$('#lat1').val($('#endLat').text());
$('#purpose').html($('#executionPurpose').text());
var imageUrl = $('#image').text();
$('#Image').html('<img src="'+imageUrl+'" width=680 />');
$('#data_url').html($('#dataURL').text());
$('#Response').html($('serviceResponseText').text());
var pressureLvlScale = $('#pressureLevelScale').text();
if(pressureLvlScale == "0") {
$('#radioLin').prop( "checked", true );
$('#radioLog').prop( "checked", false );
}
else {
$('#radioLin').prop( "checked", false );
$('#radioLog').prop( "checked", true );
}
var colorScale = $('#colorScale').text();
if(colorScale == "0") {
$('#radioLin2').prop("checked", true);
$('#radioLog2').prop("checked", false);
}
else {
$('#radioLin2').prop("checked", false);
$('#radioLog2').prop("checked", true);
}
}
function disable_download_button()
{
var x=document.getElementById("download_data");
x.disabled=true;
}
function enable_download_button()
{
var x=document.getElementById("download_data");
x.disabled=false;
}
function changeMonths(){
var months = $("#monthsPara").text();
var temp = months.split(", ");
for(i = 0;i < temp.length;i ++){
if(temp[i] == 'jan'){
document.getElementById('Jan').checked = true;
}else if(temp[i] == 'feb'){
document.getElementById('Feb').checked = true;
}else if(temp[i] == 'mar'){
document.getElementById('Mar').checked = true;
}else if(temp[i] == 'apr'){
document.getElementById('Apr').checked = true;
}else if(temp[i] == 'may'){
document.getElementById('May').checked = true;
}else if(temp[i] == 'jun'){
document.getElementById('Jun').checked = true;
}else if(temp[i] == 'jul'){
document.getElementById('Jul').checked = true;
}else if(temp[i] == 'aug'){
document.getElementById('Aug').checked = true;
}else if(temp[i] == 'sep'){
document.getElementById('Sep').checked = true;
}else if(temp[i] == 'oct'){
document.getElementById('Oct').checked = true;
}else if(temp[i] == 'nov'){
document.getElementById('Nov').checked = true;
}else if(temp[i] == 'dec'){
document.getElementById('Dec').checked = true;
}
}
}
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;
}
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) {
return true;
}
else
return false;
}
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;
}
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;
}
function select_var()
{
var var_string = $("#var").val();
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";
}
function select_data()
{
var data_string = $("#data").val();
var x=document.getElementById("var");
disable_download_button();
reset_vars();
if (data_string == "NASA/AIRS") {
x.options[0].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[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[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].selected=true;
}
else {
x.options[0].selected=true;
x.options[4].disabled=true;
x.options[5].disabled=true;
}
select_var();
}
function changeDataSource(){
var dataSource = $('#dataSource').text();
var x = document.getElementById("data");
if(dataSource == "NASA_AIRS" ){
x.options[0].selected=true;
}
else if(dataSource == "NASA_MLS" ){
x.options[1].selected=true;
}
else if(dataSource == "ARGO_ARGO" ){
x.options[2].selected=true;
}
else if(dataSource == "CCCMA_CANESM2" ){
x.options[3].selected=true;
}
else if(dataSource == "GFDL_ESM2G" ){
x.options[4].selected=true;
}
else if(dataSource == "GISS_E2-H" ){
x.options[5].selected=true;
}
else if(dataSource == "GISS_E2-R" ){
x.options[6].selected=true;
}
else if(dataSource == "NCAR_CAM5" ){
x.options[7].selected=true;
}
else if(dataSource == "NCC_NORESM" ){
x.options[8].selected=true;
}
else if(dataSource == "UKMO_HadGEM2-ES-A" ){
x.options[9].selected=true;
}
else if(dataSource == "CCCMA_CANAM4" ){
x.options[10].selected=true;
}
else if(dataSource == "CSIRO_MK3.6" ){
x.options[11].selected=true;
}
else if(dataSource == "GFDL_CM3" ){
x.options[12].selected=true;
}
else if(dataSource == "IPSL_CM5A-LR" ){
x.options[13].selected=true;
}
else if(dataSource == "MIROC_MIROC5" ){
x.options[14].selected=true;
}
else if(dataSource == "UKMO_HadGEM2-A" ){
x.options[15].selected=true;
}
else if(dataSource == "ECMWF_interim" ){
x.options[16].selected=true;
}
}
function changeVariableName(){
var var_string = $('#variableName').text();
var x = document.getElementById("var");
if (var_string == "ta")
x.options[0].selected=true;
else if (var_string == "hus")
x.options[1].selected=true;
else if (var_string == "cli"){
x.options[2].selected=true;
}else if (var_string == "clw")
x.options[3].selected=true;
else if (var_string == "ot")
x.options[4].selected=true;
else if (var_string == "os")
x.options[5].selected=true;
else if (var_string == "wap")
x.options[6].selected=true;
else if (var_string == "hur")
x.options[7].selected=true;
}
function select_months()
{
var s1=document.getElementById("months");
disable_download_button();
if (s1.selectedIndex == 1) {
reset_months();
}
if (s1.selectedIndex == 0) {
select_all_months();
}
if (s1.selectedIndex == 2) {
reset_months();
document.getElementById('Jun').checked = true;
document.getElementById('Jul').checked = true;
document.getElementById('Aug').checked = true;
}
if (s1.selectedIndex == 3) {
reset_months();
document.getElementById('Sep').checked = true;
document.getElementById('Oct').checked = true;
document.getElementById('Nov').checked = true;
}
if (s1.selectedIndex == 4) {
reset_months();
document.getElementById('Dec').checked = true;
document.getElementById('Jan').checked = true;
document.getElementById('Feb').checked = true;
}
if (s1.selectedIndex == 5) {
reset_months();
document.getElementById('Mar').checked = true;
document.getElementById('Apr').checked = true;
document.getElementById('May').checked = true;
}
}
$(document).ready(function(){
$("#download_data").click(function(event) {
var durl = $("#data_url").val();
window.location.assign(durl);
});
$("#threedvarzonalmean").click(function(event) {
Response = null;
disable_download_button();
if (no_month_check()) {
$("#Response").html("Error: please check at least one month.");
$("#Image").html("");
return;
}
$("#Response").html("Calculating ...");
$("#data_url").html("Calculating ...");
$("#Image").html("");
var url = "http://" + window.location.hostname + ":9002/svc/threeDimZonalMean?";
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];
if (variable == 'ot' || variable == 'os') {
pres1 = pres1 * 10000;
pres2 = pres2 * 10000;
}
else {
pres1 = pres1 * 100;
pres2 = pres2 * 100;
}
}
arglist = arglist.concat("&pres1=");
arglist = arglist.concat(pres1);
arglist = arglist.concat("&pres2=");
arglist = arglist.concat(pres2);
var s1 = document.getElementById('months');
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");
month_str = month_str.substr(1);
arglist = arglist.concat("&months=");
arglist = arglist.concat(month_str);
arglist = arglist.concat("&scale=");
var y = document.getElementById("radioLin").checked;
var yval;
var z = document.getElementById("radioLin2").checked;
var zval;
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 + encodeURI(arglist);
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);
$.ajax({
type: "GET",
url: urlTimeBounds,
dataType: "json",
data: null,
success: function(data, textStatus, xhr) {
Response = data;
if (data.success == false) {
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);
var tb = data.time_bounds;
var bds = String(tb).split(",");
var lowerT = parseInt(bds[0]);
var upperT = parseInt(bds[1]);
var t0I = parseInt(t0);
var t1I = parseInt(t1);
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!");
},
complete: function(xhr, textStatus) {
}
});
$.ajax({
type: "GET",
url: url,
dataType: "json",
data: null,
success: function(data, textStatus, xhr) {
Response = data;
if (data.success == false) {
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);
$("#Response").html(text);
var html1 = "<img src='"+data.url+"' width='680'/>";
$("#Image").html(html1);
$("#data_url").html(data.dataUrl);
enable_download_button();
},
error: function(xhr, textStatus, errorThrown) {
$("#Response").html("error!");
$("#data_url").html("error!");
},
complete: function(xhr, textStatus) {
}
});
});
});
</script>
} @main("Parameters of ConfId", scripts){ @flash_message()
<p>
<div id="dataSource" style="display: none;">@parameters.getDataSource()</div>
<div id="variableName" style="display: none;">@parameters.getVariableName()</div>
<div id="startYearMonth" style="display: none;">@parameters.getStartYearMonth()</div>
<div id="endYearMonth" style="display: none;">@parameters.getEndYearMonth()</div>
<div id="selectMonths" style="display: none;">@parameters.getSelectMonths()</div>
<div id="pressureRange" style="display: none;">@parameters.getPressureRange()</div>
<div id="monthsPara" style="display: none;">@parameters.getMonth()</div>
<div id="startLat" style="display: none;">@parameters.getStartLat()</div>
<div id="endLat" style="display: none;">@parameters.getEndLat()</div>
<div id="pressureLevelScale" style="display: none;">@parameters.getPressureScale()</div>
<div id="colorScale" style="display: none;">@parameters.getColorScale()</div>
<div id="executionPurpose" style="display: none;">@parameters.getExecutionPurpose()</div>
<div id="image" style="display: none;">@parameters.getImage()</div>
<div id="dataURL" style="display: none;">@parameters.getDataURL()</div>
<div id="serviceResponseText" style="display: none;">@parameters.getServiceResponseText()</div>
<table border="1" WIDTH="800" align="center">
<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=" Run Again "
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>
}