Untitled

<html>
  <head>
    <title>OpenLayers-Controls in Panels organisieren</title>
    <style type="text/css">
        .olControlPanel {
          left: 50px;
          top: 3px
        }
        .olControlPanel div {
                  display:block;
                  width: 35px;
                  height: 35px;
                  margin: 5px;
        }

        .olControlPanel .singleActionButtonItemActive {
          background-image: url(GhostAlphaDc3.gif);
        }
        .olControlPanel .singleActionButtonItemInactive {
          background-image: url(GhostAlphaDc3.gif);
        }

        .olControlPanel .conversionButtonItemActive {
          background-image: url(GhostAlphaLc0.gif);
        }
        .olControlPanel .conversionButtonItemInactive {
          background-image: url(GhostAlphaLc0.gif);
        }


    </style>
   <script src="http://openlayers.org/dev/OpenLayers.js"></script>

    <script src="OpenLayers.Control.Click.js"></script>
    <script src="WPS.js"></script>
    <script type="text/javascript">


    var map, button, panel, wpsObj, urlWPS, vlayer,inputTiff,imagelayer;
    inputTiff = "http://photojournal.jpl.nasa.gov/tiff/PIA17427.tif"

    //var urlWPS = "http://localhost/cgi-bin/pywps.cgi";
    var urlWPS= "http://localhost/wps/pywps.cgi";
    vlayer = new OpenLayers.Layer.Vector("Editable Layer");

    var wpsCaller2 = function callWPS2() {
       try {
          wpsObj = new OpenLayers.WPS(urlWPS,{onGotCapabilities: onGetCapabilities,onSucceeded: onExecuted2, onFailed: onError2});
          alert("WPS instance created successfully");
          console.log("wpsCaller2")
       } catch (e) {
          alert("Error while creating WPS instance");
       }

       try {
          var geotiff = new OpenLayers.WPS.ComplexPut({identifier: "geotiff", asReference:true, format:{mimeType:'image/tiff'}, value: inputTiff});
          var jpeg = new OpenLayers.WPS.ComplexPut({identifier: "jpeg", asReference: true, format:{mimeType:'image/jpeg'}});
          alert("Input set successfully");
       } catch (e) {
          alert("Error while setting input");
       }

       try {
          var conversionprocess = new OpenLayers.WPS.Process({
             identifier: "imageconvert",
             inputs: [geotiff],
             outputs: [jpeg]
          });
          console.log(conversionprocess);
          wpsObj.addProcess(conversionprocess);

          wpsObj.execute("imageconvert");
          alert("Process added to WPS successfully");
       } catch (e) {
          alert("Error while adding process to WPS and execute");
       }


    }

    function onGetCapabilities(){
        console.log(wpsObj)
    }

    function onExecuted2(process) {

       resultURL = process.getOutput("jpeg").value;
       console.log(resultURL)
       console.log("preparing jpeg")
       //ACHTUNG !!!! NOT LAT LONG BUT SPHERICAL MERCATOR
       var imagelayer = new OpenLayers.Layer.Image(
               'Raster Output',
               resultURL,
               map.getExtent(),
               new OpenLayers.Size(540, 270),
               {
                   isBaseLayer: false,
                   opacity: 0.3,
                   displayOutsideMaxExtend: true
               }
       );
       map.addLayer(imagelayer);
       outstring = "";
       outstring += "Der Prozess "+process.identifier+" wurde erfolgreich ausgefuehrt";
       console.log(outstring);
    }

    function onError2(process) {
       textData="Error Code: "+process.exception.code+"<br />"+"Text: "+process.exception.text;
       alert(textData);
    }


    var wpsCaller = function callWPS() {
       try {
          wpsObj = new OpenLayers.WPS(urlWPS,{onSucceeded: onExecuted, onFailed: onError});
          alert("WPS instance created successfully");
       } catch (e) {
          alert("Error while creating WPS instance");
       }

       try {
          var inputdata = new OpenLayers.WPS.ComplexPut({identifier: "data", value: OpenLayers.Format.GML.prototype.write(vlayer.features), asReference:false, format:{mimeType:'text/xml', schema:'http://schemas.opengis.net/gml/2.1.2/feature.xsd', encoding: 'UTF8'}});
          var inputsize = new OpenLayers.WPS.LiteralPut({identifier: "size", value: 0.1});
          var output = new OpenLayers.WPS.ComplexPut({identifier: "buffer", asReference: true, format:{mimeType:'text/xml', schema: 'http://schemas.opengis.net/gml/2.1.2/feature.xsd', encoding: 'UTF-8'}});
          alert("Input set successfully");
       } catch (e) {
          alert("Error while setting input");
       }

       try {
          var bufferprocess = new OpenLayers.WPS.Process({
             identifier: "buffer2",
             inputs: [inputdata, inputsize],
             outputs: [output]
          });

          wpsObj.addProcess(bufferprocess);
          alert("Process added to WPS and executed successfully");
       } catch (e) {
          alert("Error while adding process to WPS and execute");
       }

       wpsObj.execute("buffer2");
    }

    function onExecuted(process) {
       resultURL = process.getOutput("buffer").value;
       var buffLayer = new OpenLayers.Layer.GML("Buffered Features", resultURL);
       map.addLayer(buffLayer);
       outstring = "";
       outstring += "Der Prozess "+process.identifier+" wurde erfolgreich ausgefuehrt";
       alert(outstring);
    }

    function onError(process) {
       textData="Error Code: "+process.exception.code+"<br />"+"Text: "+process.exception.text;
       alert(textData);
    }

    function init() {
       map = new OpenLayers.Map( 'map' );
       var osm = new OpenLayers.Layer.OSM();
       map.addLayers([osm, vlayer]);

       button = new OpenLayers.Control.Button({
          displayClass: 'singleActionButton',
          trigger: wpsCaller,
          title: 'Create buffer around features of editable layer'
       });

       button2 = new OpenLayers.Control.Button({
          displayClass: 'conversionButton',
          trigger: wpsCaller2,
          title: 'Convert GeoTIFF to JPEG'
       });


       panel = new OpenLayers.Control.Panel({defaultControl: button});
       panel.addControls([
          button,
          button2
       ]);

       map.addControl( panel );

       editTb = new OpenLayers.Control.EditingToolbar(vlayer);
       ls = new OpenLayers.Control.LayerSwitcher();
       map.addControl(editTb);
       map.addControl(ls);

       map.zoomToMaxExtent();
    }

    </script>
  </head>
  <body onload="init();">
    <h1>OpenLayers-Controls in Panels organisieren</h1>
    <div
      id="map"
      style="width:1024px; height:512px; border:3px solid #000">
    </div>
  </body>
</html>