update to R image rendering demo

52n-wps-webapp/src/main/webapp/R/demo/ImageRendering.html

@@ -26,25 +26,34 @@
 	<div data-role="page" id="home" data-add-back-btn="true">
 
 		<div data-role="header">
-			<h1>Live WeatheR Plots</h1>
+			<h1>Live Time Series Plots</h1>
 		</div>
 
 		<div data-role="content">
-			<label for="slider-days">Select the number of hours to view:</label> <input
-				type="range" name="slider" id="slider-days" value="12" min="1"
-				max="72" />
+			<!-- http://www.w3.org/wiki/HTML/Elements/input/range -->
+			<p>
+				<label for="slider-days">Select the number of hours to view:</label>
+				<input type="range" name="slider_hrs" id="slider-hours" value="12"
+					min="1" max="72" />
+			</p>
+			<p>
+				<label for="slider-days">Set the <a
+					href="http://www.inside-r.org/r-doc/stats/loess">LOESS span</a>
+					parameter:
+				</label> <input type="range" name="slider_span" id="slider-loess-span"
+					value="0.75" min="0" max="3" step="0.05" />
+			</p>
 
 			<button name="submit" id="executeRequest" value="execute-request">Create
 				time series plot</button>
 
-			<p>
-				These plots are powered by the 52&deg;North WPS4R at <span
-					id="serviceUrl"></span>.
-			</p>
-
 			<div id="plot"></div>
-
 			<div id="resultLog"></div>
+
+			<p class="footer">
+				These plots are powered by the 52&deg;North using the WPS4R
+				processing backend at <span id="serviceUrl"></span>.
+			</p>
 		</div>
 
 		<div data-role="footer" data-position="fixed">

52n-wps-webapp/src/main/webapp/R/demo/imageRendering.js

@@ -8,8 +8,10 @@ var processIdentifier = 'org.n52.wps.server.r.timeseriesPlot';
 var outputIdentifier = 'output_image';
 var offering = 'WASSERSTAND_ROHDATEN';
 var sosUrl = 'http://sensorweb.demo.52north.org/PegelOnlineSOSv2.1/sos';
+var imageWidth = '700';
+var imageHeight = '500';
 
-var requestPlot = function(requestedHours, requestedOffering) {
+var requestPlot = function(requestedHours, requestedOffering, paramLoessSpan) {
 
 	var requestString = '<?xml version="1.0" encoding="UTF-8"?><wps:Execute service="WPS" version="1.0.0" xmlns:wps="http://www.opengis.net/wps/1.0.0" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wps/1.0.0 http://schemas.opengis.net/wps/1.0.0/wpsExecute_request.xsd">'
 			+ '<ows:Identifier>'
@@ -40,24 +42,37 @@ var requestPlot = function(requestedHours, requestedOffering) {
 			+ '</wps:Data>'
 			+ '</wps:Input>'
 			+ '<wps:Input>'
+			+ '<ows:Identifier>loess_span</ows:Identifier>'
+			+ '<ows:Title></ows:Title>'
+			+ '<wps:Data>'
+			+ '<wps:LiteralData>'
+			+ paramLoessSpan
+			+ '</wps:LiteralData>'
+			+ '</wps:Data>'
+			+ '</wps:Input>'
+			+ '<wps:Input>'
 			+ '<ows:Identifier>image_width</ows:Identifier>'
 			+ '<ows:Title></ows:Title>'
 			+ '<wps:Data>'
-			+ '<wps:LiteralData>500</wps:LiteralData>'
+			+ '<wps:LiteralData>'
+			+ imageWidth
+			+ '</wps:LiteralData>'
 			+ '	</wps:Data>'
 			+ '</wps:Input>'
 			+ '<wps:Input>'
 			+ '<ows:Identifier>image_height</ows:Identifier>'
 			+ '<ows:Title></ows:Title>'
 			+ '<wps:Data>'
-			+ '<wps:LiteralData>500</wps:LiteralData>'
+			+ '<wps:LiteralData>'
+			+ imageHeight
+			+ '</wps:LiteralData>'
 			+ '</wps:Data>'
 			+ '</wps:Input>'
 			+ '</wps:DataInputs>'
 			+ '<wps:ResponseForm>'
 			+ '<wps:ResponseDocument>'
-			//+ '<wps:Output asReference="true">'
-			+ '<wps:Output asReference="false">'
+			+ '<wps:Output asReference="true">'
+			//+ '<wps:Output asReference="false">'
 			+ '<ows:Identifier>output_image</ows:Identifier>'
 			+ '</wps:Output>'
 			+ '</wps:ResponseDocument>'
@@ -125,10 +140,14 @@ var showResponse = function(executeResponse) {
 $(function() {
 
 	$("#executeRequest").click(function() {
-		var days = $("#slider-days").val();
-		$("#resultLog").html("Days: " + days + " | Offering: " + offering);
-
-		requestPlot(days, offering);
+		$("#plot").html("<!-- no data -->");
+
+		var hours = $("#slider-hours").val();
+		var span = $("#slider-loess-span").val();
+
+		$("#resultLog").html("Hours: " + hours + " | Offering: " + offering + " | LOESS span: " + span);
+
+		requestPlot(hours, offering, span);
 	});
 
 	$("#resultLog").ajaxError(

52n-wps-webapp/src/main/webapp/R/demo/styles.css

@@ -40,4 +40,9 @@
 
 .reporting-content .ui-slider-switch {
 	width: 15em;
+}
+
+.footer {
+	color: #aaaaaa;
+	font-size: 0.75em;
 }

52n-wps-webapp/src/main/webapp/R/demo/wps-client-common.js

@@ -12,7 +12,7 @@ var handleResponse = function(data) {
 	} else {
 		showResponse(data);
 	}
-}
+};
 
 var showError = function(error) {
 //	var xmlString = (new XMLSerializer()).serializeToString(error);
@@ -31,16 +31,16 @@ var showError = function(error) {
 			});
 
 	$("#resultLog").html("<div class=\"error\">" + messages + "</div>");
-}
+};
 
 var beginsWith = function(string, pattern) {
 	return (string.indexOf(pattern) === 0);
-}
+};
 
 var endsWith = function(string, pattern) {
 	var d = string.length - pattern.length;
 	return (d >= 0 && string.lastIndexOf(pattern) === d);
-}
+};
 
 $(document).ready(function() {
 	$("#serviceUrl").html("<em>" + serviceUrlString + "</em>");

52n-wps-webapp/src/main/webapp/R/scripts/SosPlot.R

@@ -45,6 +45,11 @@ offering_stationname <- "Bake"
 image_width = 800;
 image_height = 500;
 
+# wps.in: loess_span, type = double, title = local regression span parameter,
+# value = 0.75,
+# minOccurs = 0, maxOccurs = 1;
+loess_span <- 1
+
 # wps.on;
 
 ################################################################################
@@ -104,14 +109,15 @@ timeSeries <- xts(x = values, order.by = data[[timeField]])
 regressionValues <- data[[names(data)[[valuesIndex]]]]
 regressionTime <- as.numeric(data[[timeField]])
 regression = loess(regressionValues~regressionTime, na.omit(data),
-		enp.target=10)
+									 span = loess_span)
 
 # create plot ##################################################################
 ## wps.out: output_image, type = image/jpeg, title = The output image, 
 ## abstract = On-the-fly generated plot for the requested time series;
 output_image <- "output.jpg"
-jpeg(file = output_image,
-		width = image_width, height = image_height, units = "px")
+jpeg(file = output_image, width = image_width, height = image_height,
+		 units = "px", quality = 90, bg = "#f3f3f3")
+
 .title <- paste0("Dynamic Time Series Plot for ", toString(stationFilter))
 p <- plot(timeSeries, main = .title,
 		sub = paste0(toString(unique(data[["feature"]])), "\n", sosUrl(sos)),
@@ -120,10 +126,24 @@ p <- plot(timeSeries, main = .title,
 				" [", attr(values, "unit of measurement"), "]"),
 		major.ticks = "days")
 lines(data[[timeField]], regression$fitted, col = 'red', lwd = 3)
+
 graphics.off()
 
 myLog("Created image: ", output_image)
 myLog("Working directory: ", getwd())
 
 # wps.out: output_image, type = jpeg, title = image plot, 
 # abstract = the output image in jpeg format;
+
+
+# test plot ####################################################################
+# wps.off;
+plot(timeSeries, main = "Test plot",
+		 sub = paste0(toString(unique(data[["feature"]])), "\n", sosUrl(sos)),
+		 xlab = attr(data[[timeField]], "name"),
+		 ylab = paste0(attr(values, "name"), 
+		 							" [", attr(values, "unit of measurement"), "]"),
+		 major.ticks = "days")
+lines(data[[timeField]], regression$fitted, col = 'red', lwd = 3)
+
+# wps.on;