[OpenLayers-Commits] r4235 - sandbox/jachym/openlayers/lib/OpenLayers/Control
commits at openlayers.org
commits at openlayers.org
Wed Sep 12 09:38:21 EDT 2007
Author: jachym
Date: 2007-09-12 09:38:19 -0400 (Wed, 12 Sep 2007)
New Revision: 4235
Added:
sandbox/jachym/openlayers/lib/OpenLayers/Control/WPS.js
Log:
New control
Added: sandbox/jachym/openlayers/lib/OpenLayers/Control/WPS.js
===================================================================
--- sandbox/jachym/openlayers/lib/OpenLayers/Control/WPS.js (rev 0)
+++ sandbox/jachym/openlayers/lib/OpenLayers/Control/WPS.js 2007-09-12 13:38:19 UTC (rev 4235)
@@ -0,0 +1,522 @@
+/* Copyright (c) 2006-2007 MetaCarta, Inc., published under a modified BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/repository-license.txt
+ * for the full text of the license. */
+
+/**
+ * @requires OpenLayers/Control.js
+ *
+ * Class: OpenLayers.Control.WPS
+ *
+ * Inherits from:
+ * - <OpenLayers.Control>
+ */
+OpenLayers.Control.WPS = OpenLayers.Class(OpenLayers.Control, {
+
+ /**
+ * Property: activeColor
+ */
+ activeColor: "darkblue",
+
+
+ // DOM Elements
+
+ /**
+ * Property: wpsDiv
+ * {DOMElement}
+ */
+ wpsDiv: null,
+
+ serverInputId: "wpsServerInput",
+
+ /**
+ * Property: dataLayers
+ * {Array(<OpenLayers.Layer>)}
+ */
+ dataLayers: null,
+
+
+ /**
+ * Property: minimizeDiv
+ * {DOMElement}
+ */
+ minimizeDiv: null,
+
+ /**
+ * Property: maximizeDiv
+ * {DOMElement}
+ */
+ maximizeDiv: null,
+
+ /**
+ * Constructor: OpenLayers.Control.WPS
+ *
+ * Parameters:
+ * options - {Object}
+ */
+ initialize: function(options) {
+ OpenLayers.Control.prototype.initialize.apply(this, arguments);
+ },
+
+ /**
+ * APIMethod: destroy
+ */
+ destroy: function() {
+
+ OpenLayers.Event.stopObservingElement(this.div);
+
+ OpenLayers.Event.stopObservingElement(this.minimizeDiv);
+ OpenLayers.Event.stopObservingElement(this.maximizeDiv);
+
+ //clear out layers info and unregister their events
+ this.clearLayersArray("base");
+ this.clearLayersArray("data");
+
+ this.map.events.unregister("addlayer", this, this.redraw);
+ this.map.events.unregister("changelayer", this, this.redraw);
+ this.map.events.unregister("removelayer", this, this.redraw);
+ this.map.events.unregister("changebaselayer", this, this.redraw);
+
+ OpenLayers.Control.prototype.destroy.apply(this, arguments);
+ },
+
+ /**
+ * Method: setMap
+ *
+ * Properties:
+ * map - {<OpenLayers.Map>}
+ */
+ setMap: function(map) {
+ OpenLayers.Control.prototype.setMap.apply(this, arguments);
+
+ this.map.events.register("addlayer", this, this.redraw);
+ this.map.events.register("changelayer", this, this.redraw);
+ this.map.events.register("removelayer", this, this.redraw);
+ this.map.events.register("changebaselayer", this, this.redraw);
+ },
+
+ /**
+ * Method: draw
+ *
+ * Returns:
+ * {DOMElement} A reference to the DIV DOMElement containing the switcher
+ * tabs
+ */
+ draw: function() {
+ OpenLayers.Control.prototype.draw.apply(this);
+
+ // create layout divs
+ this.loadContents();
+
+ // set mode to minimize
+ if(!this.outsideViewport) {
+ this.minimizeControl();
+ }
+
+ // populate div with current info
+ this.redraw();
+
+ return this.div;
+ },
+
+ /**
+ * Method: clearLayersArray
+ * user specifies either "base" or "data". we then clear all the
+ * corresponding listeners, the div, and reinitialize a new array.
+ *
+ * Parameters:
+ * layersType - {String}
+ */
+ clearProcessList: function() {
+ //var layers = this[layersType + "Layers"];
+ //if (layers) {
+ // for(var i=0; i < layers.length; i++) {
+ // var layer = layers[i];
+ // OpenLayers.Event.stopObservingElement(layer.inputElem);
+ // OpenLayers.Event.stopObservingElement(layer.labelSpan);
+ // }
+ //}
+ //this[layersType + "LayersDiv"].innerHTML = "";
+ //this[layersType + "Layers"] = [];
+ },
+
+
+ /**
+ * Method: redraw
+ * Goes through and takes the current state of the Map and rebuilds the
+ * control to display that state. Groups base layers into a radio-button
+ * group and lists each data layer with a checkbox.
+ *
+ * Returns:
+ * {DOMElement} A reference to the DIV DOMElement containing the control
+ */
+ redraw: function() {
+
+ //clear out previous layers
+ this.clearProcessList("data");
+
+ var containsOverlays = false;
+ var containsBaseLayers = false;
+
+ var layers = this.map.layers.slice();
+ for( var i = 0; i < layers.length; i++) {
+ var layer = layers[i];
+ var baseLayer = layer.isBaseLayer;
+
+ if (layer.displayInWPS) {
+
+ if (baseLayer) {
+ containsBaseLayers = true;
+ } else {
+ containsOverlays = true;
+ }
+
+ // only check a baselayer if it is *the* baselayer, check data
+ // layers if they are visible
+ var checked = (baseLayer) ? (layer == this.map.baseLayer)
+ : layer.getVisibility();
+
+ // create input element
+ var inputElem = document.createElement("input");
+ inputElem.id = "input_" + layer.name;
+ inputElem.value = layer.name;
+ inputElem.checked = checked;
+ inputElem.defaultChecked = checked;
+
+ if (!baseLayer && !layer.inRange) {
+ inputElem.disabled = true;
+ }
+ var context = {
+ 'inputElem': inputElem,
+ 'layer': layer,
+ 'layerSwitcher': this
+ }
+ OpenLayers.Event.observe(inputElem, "mouseup",
+ this.onInputClick.bindAsEventListener(context));
+
+ // create span
+ var labelSpan = document.createElement("span");
+ if (!baseLayer && !layer.inRange) {
+ labelSpan.style.color = "gray";
+ }
+ labelSpan.innerHTML = layer.name;
+ labelSpan.style.verticalAlign = (baseLayer) ? "bottom"
+ : "baseline";
+ OpenLayers.Event.observe(labelSpan, "click",
+ this.onInputClick.bindAsEventListener(context));
+ // create line break
+ var br = document.createElement("br");
+
+
+ groupArray.push({
+ 'layer': layer,
+ 'inputElem': inputElem,
+ 'labelSpan': labelSpan
+ });
+
+
+ groupDiv.appendChild(inputElem);
+ groupDiv.appendChild(labelSpan);
+ groupDiv.appendChild(br);
+ }
+ }
+
+ return this.div;
+ },
+
+ /**
+ * Method:
+ * A label has been clicked, check or uncheck its corresponding input
+ *
+ * Parameters:
+ * e - {Event}
+ *
+ * Context:
+ * - {DOMElement} inputElem
+ * - {<OpenLayers.Control.WPS>} layerSwitcher
+ * - {<OpenLayers.Layer>} layer
+ */
+
+ onInputClick: function(e) {
+
+ if (!this.inputElem.disabled) {
+ if (this.inputElem.type == "radio") {
+ this.inputElem.checked = true;
+ this.layer.map.setBaseLayer(this.layer, true);
+ this.layer.map.events.triggerEvent("changebaselayer");
+ } else {
+ this.inputElem.checked = !this.inputElem.checked;
+ this.layerSwitcher.updateMap();
+ }
+ }
+ OpenLayers.Event.stop(e);
+ },
+
+ /**
+ * Method:
+ * Need to update the map accordingly whenever user clicks in either of
+ * the layers.
+ *
+ * Parameters:
+ * e - {Event}
+ */
+ onLayerClick: function(e) {
+ this.updateMap();
+ },
+
+
+ /**
+ * Method: updateMap
+ * Cycles through the loaded data and base layer input arrays and makes
+ * the necessary calls to the Map object such that that the map's
+ * visual state corresponds to what the user has selected in the control
+ */
+ updateMap: function() {
+
+
+ },
+
+ /**
+ * Method: maximizeControl
+ * Set up the labels and divs for the control
+ *
+ * Parameters:
+ * e - {Event}
+ */
+ maximizeControl: function(e) {
+
+ //HACK HACK HACK - find a way to auto-size this layerswitcher
+ this.div.style.width = "20em";
+ this.div.style.height = "";
+
+ this.showControls(false);
+
+ if (e != null) {
+ OpenLayers.Event.stop(e);
+ }
+ },
+
+ /**
+ * Method: minimizeControl
+ * Hide all the contents of the control, shrink the size,
+ * add the maximize icon
+ *
+ * Parameters:
+ * e - {Event}
+ */
+ minimizeControl: function(e) {
+
+ this.div.style.width = "0px";
+ this.div.style.height = "0px";
+
+ this.showControls(true);
+
+ if (e != null) {
+ OpenLayers.Event.stop(e);
+ }
+ },
+
+ /**
+ * Method: showControls
+ * Hide/Show all WPS controls depending on whether we are
+ * minimized or not
+ *
+ * Parameters:
+ * minimize - {Boolean}
+ */
+ showControls: function(minimize) {
+
+ this.maximizeDiv.style.display = minimize ? "" : "none";
+ this.minimizeDiv.style.display = minimize ? "none" : "";
+
+ this.wpsDiv.style.display = minimize ? "none" : "";
+ },
+
+ /**
+ * Method: loadContents
+ * Set up the labels and divs for the control
+ */
+ loadContents: function() {
+
+ //configure main div
+ this.div.style.position = "absolute";
+ this.div.style.top = "50px";
+ this.div.style.right = "0px";
+ this.div.style.left = "";
+ this.div.style.fontFamily = "sans-serif";
+ this.div.style.fontWeight = "bold";
+ this.div.style.marginTop = "3px";
+ this.div.style.marginLeft = "3px";
+ this.div.style.marginBottom = "3px";
+ this.div.style.fontSize = "smaller";
+ this.div.style.color = "white";
+ this.div.style.backgroundColor = "transparent";
+
+ OpenLayers.Event.observe(this.div, "mouseup",
+ this.mouseUp.bindAsEventListener(this));
+ OpenLayers.Event.observe(this.div, "click",
+ this.ignoreEvent);
+ OpenLayers.Event.observe(this.div, "mousedown",
+ this.mouseDown.bindAsEventListener(this));
+ OpenLayers.Event.observe(this.div, "dblclick", this.ignoreEvent);
+
+
+ // layers list div
+ this.wpsDiv = document.createElement("div");
+ this.wpsDiv.id = "wpsDiv";
+ this.wpsDiv.style.paddingTop = "5px";
+ this.wpsDiv.style.paddingLeft = "10px";
+ this.wpsDiv.style.paddingBottom = "5px";
+ this.wpsDiv.style.paddingRight = "75px";
+ this.wpsDiv.style.backgroundColor = this.activeColor;
+
+ // had to set width/height to get transparency in IE to work.
+ // thanks -- http://jszen.blogspot.com/2005/04/ie6-opacity-filter-caveat.html
+ //
+ this.wpsDiv.style.width = "100%";
+ this.wpsDiv.style.height = "100%";
+
+
+ this.wpsLbl = document.createElement("div");
+ this.wpsLbl.innerHTML = "<u>WPS Server</u>";
+ this.wpsLbl.style.marginTop = "3px";
+ this.wpsLbl.style.marginLeft = "3px";
+ this.wpsLbl.style.marginBottom = "3px";
+
+ this.serverInput = document.createElement("input");
+ this.serverInput.type = "text";
+ this.serverInput.size=25;
+ this.serverInput.value = "http://localhost/cgi-bin/wps.py";
+ this.serverInput.id = this.serverInputId;
+
+
+ this.serverButton = document.createElement("input");
+ this.serverButton.type = "button";
+ this.serverButton.value = "GetCapabilities";
+ this.serverButton.onclick = this.getCapabilities;
+
+ this.wpsDiv.appendChild(this.wpsLbl);
+ this.wpsDiv.appendChild(this.serverInput);
+ this.wpsDiv.appendChild(document.createElement("br"));
+ this.wpsDiv.appendChild(this.serverButton);
+
+ this.div.appendChild(this.wpsDiv);
+
+ OpenLayers.Rico.Corner.round(this.div, {corners: "tl bl",
+ bgColor: "transparent",
+ color: this.activeColor,
+ blend: false});
+
+ OpenLayers.Rico.Corner.changeOpacity(this.wpsDiv, 0.75);
+
+ var imgLocation = OpenLayers.Util.getImagesLocation();
+ var sz = new OpenLayers.Size(18,18);
+
+ // maximize button div
+ var img = imgLocation + 'layer-switcher-maximize.png';
+ this.maximizeDiv = OpenLayers.Util.createAlphaImageDiv(
+ "OpenLayers_Control_MaximizeDiv",
+ null,
+ sz,
+ img,
+ "absolute");
+ this.maximizeDiv.style.top = "5px";
+ this.maximizeDiv.style.right = "0px";
+ this.maximizeDiv.style.left = "";
+ this.maximizeDiv.style.display = "none";
+ OpenLayers.Event.observe(this.maximizeDiv,
+ "click",
+ this.maximizeControl.bindAsEventListener(this));
+
+ this.div.appendChild(this.maximizeDiv);
+
+ // minimize button div
+ var img = imgLocation + 'layer-switcher-minimize.png';
+ var sz = new OpenLayers.Size(18,18);
+ this.minimizeDiv = OpenLayers.Util.createAlphaImageDiv(
+ "OpenLayers_Control_MinimizeDiv",
+ null,
+ sz,
+ img,
+ "absolute");
+ this.minimizeDiv.style.top = "5px";
+ this.minimizeDiv.style.right = "0px";
+ this.minimizeDiv.style.left = "";
+ this.minimizeDiv.style.display = "none";
+ OpenLayers.Event.observe(this.minimizeDiv,
+ "click",
+ this.minimizeControl.bindAsEventListener(this));
+
+ this.div.appendChild(this.minimizeDiv);
+ },
+
+ /**
+ * Method: ignoreEvent
+ *
+ * Parameters:
+ * evt - {Event}
+ */
+ ignoreEvent: function(evt) {
+ OpenLayers.Event.stop(evt);
+ },
+
+ /**
+ * Method: mouseDown
+ * Register a local 'mouseDown' flag so that we'll know whether or not
+ * to ignore a mouseUp event
+ *
+ * Parameters:
+ * evt - {Event}
+ */
+ mouseDown: function(evt) {
+ this.isMouseDown = true;
+ this.ignoreEvent(evt);
+ },
+
+ /**
+ * Method: mouseUp
+ * If the 'isMouseDown' flag has been set, that means that the drag was
+ * started from within the WPS control, and thus we can
+ * ignore the mouseup. Otherwise, let the Event continue.
+ *
+ * Parameters:
+ * evt - {Event}
+ */
+ mouseUp: function(evt) {
+ if (this.isMouseDown) {
+ this.isMouseDown = false;
+ this.ignoreEvent(evt);
+ }
+ },
+
+ getCapabilities: function() {
+ var server = this.previousSibling.previousSibling;
+ var div
+
+ var setProcesses = function(response) {
+ var wpsdiv = document.getElementById("wpsDiv");
+ var procdiv = document.createElement("div");
+ wpsdiv.appendChild(procdiv);
+
+ alert (response.responseText);
+ var processes = response.responseXML.getElementsByTagName("Process");
+ for (var i =0; i < processes.length; i++) {
+ alert(processes[i]);
+ alert(proc.getElementsByTagName("Title"));
+ proctext = document.createElement("div");
+ proctext.appendChild(document.createTextNode(proc.getElementsByTagName("Title")[0].nodeValue));
+ procdiv.appendChild(proctext);
+ }
+
+ };
+
+ this.address = server.value;
+
+ if (this.address != "" || this.address != "http://") {
+ var url = this.address + "?service=WPS&version=0.4.0&request=GetCapabilities";
+ OpenLayers.loadURL(url, '', this, setProcesses);
+ }
+
+ },
+
+ CLASS_NAME: "OpenLayers.Control.WPS"
+});
More information about the Commits
mailing list