You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cmda.apache.org by xi...@apache.org on 2015/09/09 00:49:53 UTC
[44/51] [partial] incubator-cmda git commit: Add frontend and backend
http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/37774c92/.target/views/climate/threeDVariableTwoDSlice.scala.html
----------------------------------------------------------------------
diff --git a/.target/views/climate/threeDVariableTwoDSlice.scala.html b/.target/views/climate/threeDVariableTwoDSlice.scala.html
new file mode 100644
index 0000000..d950b73
--- /dev/null
+++ b/.target/views/climate/threeDVariableTwoDSlice.scala.html
@@ -0,0 +1,711 @@
+@*******************************************************************************
+ * 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.ThreeDVar2DSlice) @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($('#pressureLevel').text());
+ $('#lat0').val($('#startLat').text());
+ $('#lat1').val($('#endLat').text());
+ $('#lon0').val($('#startLon').text());
+ $('#lon1').val($('#endLon').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 colorScale = $('#colorScale').text();
+ if(colorScale == "0") {
+ $('#radioLin').prop( "checked", true );
+ $('#radioLog').prop( "checked", false );
+ }
+ else {
+ $('#radioLin').prop( "checked", false );
+ $('#radioLog').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 == "NASA_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);
+ });
+ $("#twodvarmap").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/twoDimSlice3D?";
+ 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();
+ if (variable == 'ot' || variable == 'os')
+ pres = pres * 10000;
+ else
+ pres = pres * 100;
+ 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');
+ 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 z = document.getElementById("radioLin").checked;
+ 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 + 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="pressureLevel" style="display: none;">@parameters.getPressureLevel()</div>
+<div id="selectMonths" style="display: none;">@parameters.getSelectMonths()</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="startLon" style="display: none;">@parameters.getStartLon()</div>
+<div id="endLon" style="display: none;">@parameters.getEndLon()</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 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=" 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>
+}
http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/37774c92/.target/views/climate/threeDVariableZonalMean.scala.html
----------------------------------------------------------------------
diff --git a/.target/views/climate/threeDVariableZonalMean.scala.html b/.target/views/climate/threeDVariableZonalMean.scala.html
new file mode 100644
index 0000000..4ed6e83
--- /dev/null
+++ b/.target/views/climate/threeDVariableZonalMean.scala.html
@@ -0,0 +1,737 @@
+@*******************************************************************************
+ * 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>
+}
http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/37774c92/.target/views/climate/tutorial.scala.html
----------------------------------------------------------------------
diff --git a/.target/views/climate/tutorial.scala.html b/.target/views/climate/tutorial.scala.html
new file mode 100644
index 0000000..f515cac
--- /dev/null
+++ b/.target/views/climate/tutorial.scala.html
@@ -0,0 +1,42 @@
+@*******************************************************************************
+ * 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. *
+ *******************************************************************************@
+
+@main("Tutorial") {
+
+<ol class="breadcrumb">
+ <li class="active">Tutorial</li>
+ <li><a href="/estimator">Collect Data</a></li>
+ <li><a href="/estimator/1">Input Preference</a></li>
+ <li><a href="/estimator/2">Workflow Summary</a></li>
+ <li><a href="/estimator/3">Recommendation</a></li>
+</ol>
+
+<iframe width="550" height="315" src="https://www.youtube.com/embed/t9tgr3I2d5g" frameborder="0" allowfullscreen></iframe>
+<iframe width="550" height="315" style="margin-left: 25px" src="https://www.youtube.com/embed/tftPn4YQbVE" frameborder="0" allowfullscreen></iframe>
+
+<p>
+In these videos, we will help you learn the available web services, how to use them, and help you to design your climate analytics workflows.
+
+<!-- <ul>
+<li>Run vistrails. (python VISTRAILS_PATH/vistrails/vistrails.py)</li>
+<li>Import a workflow.</li>
+<li>Click the menu Packages, and then Amazon Plugin. Inside that choose the 'Go to estimator'</li>
+<li>Input the notification email and click Estimate. Then you can be directed to the estimator web page.</li>
+</ul> -->
+</p>
+
+}
\ No newline at end of file